/* LOUDERR startup bundle with precompressed delivery. */
/* styles.css */
:root:not([data-capabilities-loaded]) [data-requires-capability],
.capability-withheld {
  display: none !important;
}

/* Pending features reserve their navigation slot without accepting input. */
:root:not([data-capabilities-loaded]) .primary-nav [data-requires-capability] {
  display: flex !important;
  visibility: hidden;
}

/* Only the empty public Video shell is visible before both startup reads finish. */
body[data-startup-pending][data-view="flow"] #flow:not([hidden]) {
  display: block !important;
}

:root:not([data-capabilities-loaded]) #home-join[hidden] {
  display: inline-flex !important;
  visibility: hidden;
}

/* Keep existing mobile destinations in place while the enabled features are read. */
@media (max-width: 820px) {
  :root:not([data-capabilities-loaded]) .mobile-bottom-nav > [data-requires-capability] {
    display: flex !important;
    visibility: hidden;
  }
}

:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --surface: #111114;
  --surface-raised: #151519;
  --surface-soft: #1b1b20;
  --surface-hover: #202026;
  --text: #f5f5f7;
  --text-secondary: #b2b2ba;
  --text-muted: #9696a1;
  --border: #29292f;
  --border-strong: #383840;
  --border-control: #62626c;
  --accent: #ff4a2e;
  --accent-hover: #ff6a4d;
  /* Own DM bubble: neutral, one step lighter than the incoming bubble (--surface-soft).
     Emoji, attachments and polls render inside this fill; on the accent it lost them. */
  --own-message-fill: #2c2c33;
  --own-message-ink: #f5f5f7;
  --accent-soft: rgba(255, 74, 46, 0.15);
  --accent-whisper: rgba(255, 74, 46, 0.06);
  --positive: #31d58b;
  --positive-soft: rgba(49, 213, 139, 0.06);
  --danger: #ff6673;
  --danger-soft: rgba(255, 102, 115, 0.12);
  --chrome: #0a0a0c;
  --surface-active: #1a1a1f;
  --surface-inset: #0d0d10;
  --surface-deep: #0e0e11;
  --surface-unread: #17171b;
  --surface-control: #101013;
  --surface-composer: #121215;
  --surface-menu: #19191e;
  --surface-progress: rgba(255, 255, 255, 0.04);
  --avatar-border: rgba(255, 255, 255, 0.22);
  --on-accent: #101013;
  --link: #f0a088;
  --link-decoration: rgba(240, 160, 136, 0.45);
  --signal: #b8a9ff;
  --danger-text: #ffb7bd;
  --danger-panel-bg: #211516;
  --danger-panel-border: #6c3030;
  --enforcement-bg: #211513;
  --enforcement-border: #714036;
  --board-placeholder: #191513;
  --board-placeholder-text: rgba(255, 255, 255, 0.86);
  --toast-bg: #f5f5f7;
  --toast-text: #111114;
  --toast-error-bg: #3a171c;
  --toast-error-text: #ffc4c9;
  --map-stroke: rgba(11, 11, 13, 0.78);
  --poll-fill: rgba(255, 255, 255, 0.055);
  --poll-selected-fill: rgba(255, 74, 46, 0.12);
  --sidebar-width: 238px;
  --rail-width: 318px;
  --page-gap: 30px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f2f2f2;
  --surface-hover: #ebebeb;
  --text: #18181b;
  --text-secondary: #4f4f58;
  --text-muted: #62626c;
  --border: #dbdbdb;
  --border-strong: #a8a8a8;
  --border-control: #8c8579;
  --accent: #b81f0c;
  --accent-hover: #94180a;
  /* Light theme: one step darker than the incoming bubble (--surface-soft #f2f2f2). */
  --own-message-fill: #e4e4ea;
  --own-message-ink: #18181b;
  --accent-soft: rgba(184, 31, 12, 0.12);
  --accent-whisper: rgba(184, 31, 12, 0.07);
  --positive: #126744;
  --positive-soft: rgba(18, 103, 68, 0.08);
  --danger: #a9162b;
  --danger-soft: rgba(169, 22, 43, 0.09);
  --chrome: #ffffff;
  --surface-active: #efefef;
  --surface-inset: #f5f5f5;
  --surface-deep: #fafafa;
  --surface-unread: #f2f2f2;
  --surface-control: #ffffff;
  --surface-composer: #ffffff;
  --surface-menu: #ffffff;
  --surface-progress: rgba(24, 24, 27, 0.08);
  --avatar-border: rgba(24, 24, 27, 0.2);
  --on-accent: #ffffff;
  --link: #87351e;
  --link-decoration: rgba(135, 53, 30, 0.42);
  --signal: #5f3ca8;
  --danger-text: #8f1728;
  --danger-panel-bg: #fff3f1;
  --danger-panel-border: #c65b65;
  --enforcement-bg: #fff3ee;
  --enforcement-border: #c4836e;
  --board-placeholder: #f4e6df;
  --board-placeholder-text: #87351e;
  --toast-bg: #18181b;
  --toast-text: #ffffff;
  --toast-error-bg: #8f1728;
  --toast-error-text: #ffffff;
  --map-stroke: rgba(246, 244, 239, 0.9);
  --poll-fill: rgba(24, 24, 27, 0.07);
  --poll-selected-fill: rgba(184, 31, 12, 0.13);
  --shadow: 0 12px 32px rgba(39, 33, 27, 0.13);
}

:root[data-theme="light"] .world-map-image {
  opacity: 0.16;
  filter: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: auto;
  background: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
input,
textarea,
select,
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

/* Focus that the browser itself judges should not be advertised draws nothing. Without this a tap, or
   the .focus() the app performs on a heading after navigating, leaves the user agent's own ring around
   whole regions - blue rectangles around the category strip, a card, its image. Every ring we mean to
   draw is on :focus-visible above and in the component sheets, so none of them are affected. */
:focus:not(:focus-visible) {
  outline: none;
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

img,
video {
  display: block;
  max-width: 100%;
}

svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.sr-only {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  padding: 10px 13px;
  transform: translateY(-160%);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.skip-link:focus { transform: translateY(0); }

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-shell {
  min-height: 100vh;
}

/* Desktop navigation */
.desktop-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 30px 18px 24px;
  border-right: 1px solid var(--border);
  background: var(--chrome);
}

.brand {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.brand-logo {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand .brand-logo--light {
  display: none;
}

:root[data-theme="light"] .brand-logo--dark {
  display: none;
}

:root[data-theme="light"] .brand-logo--light {
  display: block;
}

.desktop-sidebar > .brand,
.brand-mobile,
.legal-page .brand {
  width: auto;
  max-width: 100%;
  gap: 10px;
  justify-content: flex-start;
}

.brand-wordmark {
  display: block;
  flex: 0 0 auto;
  width: 100px;
  height: 16px;
  overflow: hidden;
  color: var(--text);
  background: currentColor;
  font-size: 0;
  white-space: nowrap;
  mask: url("/static/louderr-wordmark.svg?v=1bcb88226ee0") center / contain no-repeat;
}

@media (max-width: 360px) {
  .mobile-header .mobile-header-actions { gap: 0; }
  .mobile-header .brand-mobile .brand-wordmark { width: 84px; height: 14px; font-size: 0; }
}

.primary-nav {
  min-height: 0;
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 7px;
  margin-top: 47px;
  overflow-y: auto;
  scrollbar-width: none;
}

.primary-nav::-webkit-scrollbar { display: none; }

.nav-item {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 650;
  text-align: left;
  transition: background 150ms ease, color 150ms ease;
}

.nav-item:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.nav-item.is-active {
  background: var(--surface-active);
  color: var(--text);
}

.nav-item svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-count {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.create-button {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;
  margin: 10px 0 0;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 650;
  text-align: left;
  transition: background 150ms ease, color 150ms ease;
}

.create-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.create-button svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-account {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  margin-top: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.sidebar-account:hover {
  background: var(--surface-soft);
}

.account-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-copy strong,
.account-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy strong {
  font-size: 13px;
}

.account-copy small {
  color: var(--text-muted);
  font-size: 11px;
}

.account-more {
  width: 19px;
  height: 19px;
  margin-left: auto;
  fill: currentColor;
  color: var(--text-muted);
}

.avatar {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--avatar-border);
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.avatar-small {
  width: 36px;
  height: 36px;
}

.avatar-large {
  width: 82px;
  height: 82px;
  font-size: 25px;
}

/* Main workspace */
.workspace {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.content-grid {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  gap: var(--page-gap);
  margin: 0;
  padding: 29px 24px 80px 32px;
}

.main-column {
  min-width: 0;
}

.mobile-header,
.mobile-bottom-nav,
.mobile-search-wrap {
  display: none;
}

/* Category navigation */
.category-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 20px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-chip {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.category-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.category-chip.is-active {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.category-chip svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Trending */
.trending-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.trending-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 27px 28px 22px;
  border-bottom: 1px solid var(--border);
}

.trending-header h2 {
  margin: 0;
  font-size: 31px;
  letter-spacing: -0.045em;
}

.trending-header > div > p:last-child {
  max-width: 450px;
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.trending-reset {
  display: grid;
  justify-items: end;
  gap: 3px;
  flex: 0 0 auto;
}

.trending-reset span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trending-reset strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.trending-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.segmented-control {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-inset);
}

.segmented-control button {
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.segmented-control button:hover {
  color: var(--text);
}

.segmented-control button.is-active {
  background: var(--surface-hover);
  color: var(--text);
}

.trending-category {
  min-width: 118px;
  display: grid;
  gap: 3px;
  margin-left: auto;
}

.trending-category span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trending-category select {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.trending-category select:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 4px;
}

.trending-category option {
  background: var(--surface-raised);
}

.trending-focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 20px 0;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 11px;
  background: var(--accent-soft);
}

.trending-focus strong {
  font-size: 11px;
}

.trending-focus span {
  color: var(--link);
  font-size: 9px;
}

.leaderboard-labels,
.leaderboard-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 78px 94px;
  align-items: center;
  gap: 12px;
}

.leaderboard-labels {
  padding: 19px 22px 8px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leaderboard-labels span:nth-child(n + 3) {
  text-align: right;
}

.leaderboard-row {
  width: 100%;
  min-height: 70px;
  padding: 10px 22px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease;
}

.leaderboard-row:hover {
  background: var(--surface-soft);
}

.leaderboard-rank {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.leaderboard-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.leaderboard-copy,
.leaderboard-score {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.leaderboard-copy strong,
.leaderboard-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-copy strong {
  font-size: 11px;
}

.leaderboard-copy small,
.leaderboard-score small {
  color: var(--text-muted);
  font-size: 9px;
}

.trend-movement {
  justify-self: end;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.trend-movement.is-up,
.trend-movement.is-new {
  color: var(--positive);
}

.trend-movement.is-down {
  color: var(--danger);
}

.leaderboard-score {
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.leaderboard-score strong {
  font-size: 12px;
}

.trending-loading,
.trending-empty {
  padding: 42px 24px;
  color: var(--text-muted);
  text-align: center;
}

.trending-empty h3 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 14px;
}

.trending-empty p {
  margin: 0;
  font-size: 10px;
}

.trending-method {
  display: grid;
  gap: 4px;
  padding: 19px 22px 22px;
  border-top: 1px solid var(--border);
}

.trending-method strong {
  font-size: 10px;
}

.trending-method span {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.6;
}

.trending-history-block {
  border-top: 1px solid var(--border);
}

.trending-history-block > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 19px 22px 10px;
}

.trending-history-block h3 {
  margin: 0;
  font-size: 12px;
}

.trending-history-block header span {
  color: var(--text-muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.trending-history {
  padding: 0 22px 17px;
}

.trending-history-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
}

.trending-history-winner {
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trending-history-viewer {
  color: var(--accent-hover);
  font-weight: 750;
  text-align: right;
}

.profile-rank-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
}

/* Search and Discover */
.discover-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.discover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 26px 20px;
}

.discover-trending-link,
.destination-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Discover asks one question instead of fifteen: the way you are looking now, and a way to change
   it. The eight tabs and the three destination chips that used to sit above the results are in the
   sheet this opens. */
.discover-browse-row {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
}

.discover-browse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.discover-browse:hover {
  background: var(--surface-hover);
}

.discover-browse svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep the title and Close available while a long Browse menu scrolls. */
.browse-dialog {
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.browse-dialog[open] {
  display: flex;
  flex-direction: column;
}

.browse-dialog > .dialog-header,
.browse-dialog::before {
  flex: 0 0 auto;
}

.browse-list {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 14px 18px;
}

.browse-group {
  margin: 14px 8px 6px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.browse-list > button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.browse-list > button > span {
  grid-column: 2;
}

.browse-list > button > small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 12px;
}

.browse-list > button > svg {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.browse-list > button:hover {
  background: var(--surface-hover);
}

.browse-list > button[aria-current="true"] {
  background: var(--accent-soft);
}

/* What a report sets in motion, said where the choice is made rather than afterwards. */
.report-urgent-note {
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.report-urgent-note[hidden] {
  display: none;
}

/* Settings is a screen inside the page, not a panel floating over it. It keeps the .profile-dialog
   class so the sixty-eight rules written for its nine sections still apply, and undoes the part of
   that class which made it a floating box - so the bottom bar stays where it is and Home, Discover,
   Video and Profile are reachable from inside Settings, the way they are on Instagram. */
.settings-view {
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-view[hidden] {
  display: none;
}

.settings-view > .profile-form {
  max-height: none;
}

.settings-view .dialog-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
}

.settings-view .profile-body {
  overflow: visible;
  max-height: none;
}

@media (max-width: 600px) {
  .settings-view {
    width: 100%;
    max-height: none;
    border-radius: 0;
  }
}

@media (max-width: 820px) {
  .settings-view .dialog-header {
    top: var(--mobile-header-height, calc(58px + env(safe-area-inset-top)));
  }

  html.is-header-hidden body[data-view="settings"] .mobile-header {
    transform: none;
  }
}

/* One history control, placed in a screen header or the page frame by updateBackControl. */
.back-control {
  position: sticky;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 40;
  align-self: start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  /* Without an inline start it presses against the rail beside it. */
  margin: 0 0 10px 12px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
}

.back-control svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-control:hover {
  background: var(--surface-hover);
}

.back-control[hidden] {
  display: none;
}

.discover-trending-link svg,
.destination-back svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.destination-back.text-button {
  min-height: 44px;
  padding: 8px 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.discover-header h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.discover-header p:last-child {
  max-width: 470px;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.discover-search {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 14px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: var(--surface-inset);
  color: var(--text-muted);
}

.discover-search:focus-within {
  border-color: var(--border-strong);
}

.discover-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.discover-search input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.discover-search kbd {
  min-width: 22px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  font: 9px var(--font);
  text-align: center;
}

.discover-controls {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.discover-controls > label {
  min-width: 130px;
  display: grid;
  gap: 2px;
}

.discover-controls > label span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.discover-controls select {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.discover-controls option {
  background: var(--surface-raised);
}

.discover-loading {
  padding: 50px 24px;
  color: var(--text-muted);
  text-align: center;
}

.discover-people,
.discover-topics:not([hidden]) + .discover-drops,
.discover-drops:not([hidden]) + .discover-people {
  padding: 21px 20px 24px;
}

.discover-drops {
  border-top: 1px solid var(--border);
}

.discover-people > header,
.discover-drops > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.discover-people > header h3,
.discover-drops > header h3 {
  margin: 0;
  font-size: 13px;
}

/* Only the section heading row: the post cards inside have their own header and h3. */
.discover-people > header span,
.discover-drops > header span {
  color: var(--text-muted);
  font-size: 9px;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.person-card {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-raised);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.person-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

.person-card .avatar {
  width: 42px;
  height: 42px;
}

.person-card-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.person-card-copy strong,
.person-card-copy span,
.person-card-copy p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-card-copy strong,
.person-card-copy span {
  white-space: nowrap;
}

.person-card-copy strong {
  font-size: 11px;
}

.person-card-copy span {
  color: var(--text-muted);
  font-size: 9px;
}

.person-card-copy p {
  display: -webkit-box;
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-drops .drop-card:first-child {
  border-top: 0;
}

.discover-people > .secondary-button,
.discover-drops > .secondary-button {
  width: 100%;
  margin-top: 12px;
}

.discover-section-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 12px;
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
}

/* Profiles, notifications, and private messages */
.social-surface {
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.social-surface-header {
  min-height: 108px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.social-surface-header h2 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -0.04em;
}

.social-surface-header p:last-child {
  max-width: 460px;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.social-more {
  width: calc(100% - 40px);
  margin: 0 20px 22px;
}

.notification-list { display: grid; }

.notification-item {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.notification-item:hover { background: var(--surface-soft); }
.notification-item.is-unread { background: var(--surface-unread); }

.notification-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notification-time {
  color: var(--text-muted);
  font-size: 12.5px;
}

.notification-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.conversation-pane {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--surface-deep);
}

.conversation-list { display: grid; }

.conversation-item {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.conversation-item:hover,
.conversation-item.is-active { background: var(--surface-raised); }

.conversation-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.conversation-copy strong,
.conversation-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-copy strong { font-size: 10px; }
.conversation-copy span { color: var(--text-muted); font-size: 9px; }

.conversation-count {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 8px;
}

.conversation-empty,
.message-thread-empty {
  min-height: 360px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 30px;
  color: var(--text-muted);
  text-align: center;
}

.conversation-empty svg,
.message-thread-empty svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.conversation-empty strong,
.message-thread-empty h3 { margin: 0; color: var(--text); font-size: 12px; }
.conversation-empty span,
.message-thread-empty p { margin: 0; font-size: 9px; line-height: 1.5; }

.message-thread,
#message-thread-content {
  min-width: 0;
  min-height: 570px;
}

#message-thread-content {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
}

.message-thread-header {
  grid-row: 1;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

#messages-back { display: none; }

.message-participant {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.message-participant > span:last-child { display: grid; gap: 2px; }
.message-participant strong { font-size: 11px; }
.message-participant small { color: var(--text-muted); font-size: 9px; }

.message-request:not([hidden]) {
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

.message-request-copy {
  min-width: 0;
}

.message-request-copy strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.message-request-copy p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.message-request-actions:not([hidden]) {
  display: flex;
  gap: 8px;
}

.message-request-actions button {
  min-width: 82px;
  min-height: 44px;
}

.message-request > .form-error {
  grid-column: 1 / -1;
  margin: 0;
}

#messages-older { grid-row: 3; margin: 10px 14px 0; }

.message-list {
  grid-row: 4;
  min-height: 310px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  padding: 16px;
}

.direct-message {
  max-width: min(76%, 440px);
  align-self: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  background: var(--surface-raised);
}

.direct-message.is-mine {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
}

.direct-message p {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.direct-message p a { color: var(--link); }

.direct-message footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 8px;
}

.direct-message footer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
}

.message-form {
  grid-row: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-deep);
}

.message-form textarea {
  min-height: 40px;
  max-height: 116px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 10px;
}

.message-form .form-error { grid-column: 1 / -1; }

.profile-hero {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 26px;
  border-bottom: 1px solid var(--border);
}

.profile-hero-avatar {
  width: 92px;
  height: 92px;
  font-size: 26px;
}

.profile-identity { min-width: 0; }
.profile-identity h2 { margin: 3px 0 0; font-size: 26px; letter-spacing: -0.04em; }
.profile-identity > p:nth-of-type(1) { margin: 3px 0 0; color: var(--text-muted); font-size: 10px; }
.profile-identity > p:nth-of-type(2) { max-width: 480px; margin: 12px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.55; }

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 9px;
}

.profile-meta a { color: var(--link); text-decoration: none; }

.profile-actions {
  max-width: 220px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.profile-actions button { min-height: 37px; padding: 0 13px; }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.profile-stats > * {
  min-height: 70px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: center;
}

.profile-stats > *:last-child { border-right: 0; }
.profile-stats button { cursor: pointer; }
.profile-stats button:hover { background: var(--surface-soft); }
.profile-stats strong { font-size: 16px; }
.profile-stats span { color: var(--text-muted); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }

.profile-section .profile-rank-banner { margin: 20px 20px 0; }

.profile-posts { padding: 22px 20px; }
.profile-posts > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.profile-posts h3 { margin: 0; font-size: 13px; }
.profile-posts header > span { color: var(--text-muted); font-size: 9px; }
.profile-posts .drop-card:first-child { border-top: 0; }
.profile-drops-more { width: 100%; margin-top: 12px; }
.profile-posts-loading { padding: 20px 16px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }

.relationship-controls {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.relationship-controls > header,
.relationship-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.relationship-controls h3,
.relationship-controls p { margin: 0; }
.relationship-controls header p { margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.relationship-list { display: grid; gap: 8px; }
.relationship-row { padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.relationship-person { min-width: 0; display: flex; align-items: center; gap: 9px; }
.relationship-person > span:last-child { min-width: 0; display: grid; gap: 2px; }
.relationship-person strong,
.relationship-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relationship-person small { color: var(--text-muted); font-size: 9px; }
.relationship-row .secondary-button { min-height: 36px; flex: 0 0 auto; }

.connections-dialog { width: min(460px, calc(100vw - 28px)); max-height: min(720px, calc(100dvh - 30px)); }
.connections-dialog > div { min-height: 300px; background: var(--surface); }
.connections-dialog > div > .dialog-header { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.connections-list { display: grid; max-height: 480px; overflow-y: auto; }
.connection-person { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer; text-align: left; }
.connection-person:hover { background: var(--surface-soft); }
.connection-person span:last-child { min-width: 0; display: grid; gap: 2px; }
.connection-person strong,
.connection-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-person strong { font-size: 1rem; }
.connection-person small { color: var(--text-muted); font-size: .875rem; }
.connections-dialog > div > .secondary-button { width: calc(100% - 32px); margin: 12px 16px 18px; }

/* Global public chat */
.chat-section {
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.chat-toolbar {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}

.text-button {
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.text-button:hover {
  color: var(--text);
}

.chat-load-older {
  width: calc(100% - 32px);
  min-height: 34px;
  margin: 12px 16px 2px;
}

.chat-loading,
.chat-empty {
  padding: 54px 24px;
  color: var(--text-muted);
  text-align: center;
}

.chat-empty h3 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 14px;
}

.chat-empty p {
  margin: 0;
  font-size: 10px;
}

.chat-messages {
  min-height: 350px;
  max-height: min(58vh, 610px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px 0 14px;
  scrollbar-color: var(--border-strong) transparent;
}

.chat-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 16px;
  border-left: 2px solid transparent;
}

.chat-message:hover,
.chat-message:focus-within {
  background: var(--surface-raised);
}

.chat-message.is-mentioned {
  border-left-color: var(--accent);
  background: var(--accent-whisper);
}

.chat-message .avatar {
  width: 34px;
  height: 34px;
  border: 0;
  font-size: 10px;
}

.chat-avatar-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.chat-message-main {
  min-width: 0;
}

.chat-message-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.chat-author {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.chat-author:hover {
  text-decoration: underline;
}

.chat-message-meta span {
  color: var(--text-muted);
  font-size: 9px;
}

.chat-message-body {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-message-body a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration);
  text-underline-offset: 2px;
}

.chat-message-body a:hover {
  text-decoration-color: currentColor;
}

.chat-mention {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

.chat-mention:hover {
  text-decoration: underline;
}

.chat-reply-quote {
  width: 100%;
  display: grid;
  gap: 2px;
  margin: 0 0 6px;
  padding: 7px 9px;
  border: 0;
  border-left: 2px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}

.chat-reply-quote strong {
  color: var(--text-secondary);
  font-size: 9px;
}

.chat-reply-quote span {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-actions {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions {
  opacity: 1;
}

.chat-message-actions button {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.chat-message-actions button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.chat-message-actions svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-deleted {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  font-style: italic;
}

.chat-new-messages {
  min-height: 34px;
  position: sticky;
  z-index: 2;
  right: 16px;
  bottom: 95px;
  float: right;
  margin: -48px 16px 12px 0;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--text);
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.chat-composer {
  position: sticky;
  z-index: 3;
  bottom: 0;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chat-compose-row {
  min-height: 44px;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 6px 6px 6px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-inset);
}

.chat-compose-row:focus-within {
  border-color: var(--border-strong);
}

.chat-compose-row textarea {
  min-height: 30px;
  max-height: 116px;
  flex: 1;
  resize: none;
  padding: 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  line-height: 1.4;
}

.chat-compose-row textarea::placeholder {
  color: var(--text-muted);
}

.chat-send {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}

.chat-send svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#chat-composer-note {
  margin: 7px 2px 0;
  color: var(--text-muted);
  font-size: 9px;
}

.chat-reply-context {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding: 9px 10px 9px 12px;
  border-left: 2px solid var(--accent);
  background: var(--surface-raised);
}

.chat-reply-context > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.chat-reply-context span,
.chat-reply-context p {
  color: var(--text-muted);
  font-size: 9px;
}

.chat-reply-context strong {
  font-size: 10px;
}

.chat-reply-context p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reply-context button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.chat-reply-context svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.mobile-chat-button,
.mobile-badge-button {
  position: relative;
}

.mobile-chat-button b,
.mobile-badge-button b {
  min-width: 18px;
  height: 18px;
  position: absolute;
  top: 1px;
  right: 0;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
}

.profile-rank-copy {
  display: grid;
  gap: 2px;
}

.profile-rank-copy strong {
  font-size: 12px;
}

.profile-rank-copy small,
.profile-board-count {
  color: var(--text-muted);
  font-size: 9px;
}

.board-path {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.board-path strong {
  font-size: 11px;
}

.board-path .is-board-eligible {
  color: var(--positive);
  letter-spacing: 0.03em;
}

.board-path-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: var(--text-muted);
  font-size: 9px;
}

/* Board */
.home-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 16px;
}

.home-intro p {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.home-intro strong {
  display: block;
  color: var(--text);
  font-weight: 650;
}

.home-intro .text-button {
  min-height: 44px;
  flex-shrink: 0;
  padding: 8px 0;
  font-size: 13px;
}

body.is-shared-drop [data-room-chrome],
body.is-personal-view [data-room-chrome],
body.is-shared-drop .category-rail,
body.is-shared-drop .feed-header {
  display: none;
}

body.is-shared-drop .feed-section {
  padding-top: 0;
}

.board-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.main-column > .board-section:not(.is-empty) {
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
}

.board-section:not(.is-empty) .board-header {
  background: var(--accent-whisper);
}

.board-section.is-empty .board-progress,
.board-section.is-empty .board-timer {
  display: none;
}

.board-header {
  min-height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 20px;
}

.board-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.board-heading p {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
}

.board-heading span:not(.live-orb) {
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 12px;
}

.board-mark {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.board-timer {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.board-timer svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.board-progress {
  height: 2px;
  background: var(--surface-progress);
}

.board-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transition: width 120ms linear;
}

.board-content {
  min-height: 360px;
}

.board-queue {
  padding: 0;
  border-top: 1px solid var(--border);
  background: transparent;
}

.board-queue > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  list-style: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}

.board-queue > summary::-webkit-details-marker {
  display: none;
}

.board-queue > summary:hover,
.board-policy > summary:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.board-queue > summary > strong {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board-queue > summary > svg,
.room-tools-mobile > summary > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.board-queue[open] > summary > svg,
.room-tools-mobile[open] > summary > svg {
  transform: rotate(180deg);
}

.board-queue-body {
  display: grid;
  gap: 12px;
  padding: 4px 16px 12px;
}

.board-policy > summary {
  min-height: 44px;
  padding: 12px 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}

.board-policy > p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.board-queue-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.board-queue-list > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.board-queue-candidate {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  text-align: left;
}

button.board-queue-candidate {
  cursor: pointer;
}

.board-queue-candidate strong,
.board-queue-candidate small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-queue-candidate strong {
  font-size: 13px;
}

.board-queue-candidate small {
  color: var(--text-muted);
  font-size: 12px;
}

.board-queue-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.board-empty {
  min-height: 0;
  color: var(--text-muted);
}

.board-card {
  min-height: 360px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
}

.board-visual {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface-inset);
}

.board-visual > img,
.board-visual > video {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.board-visual audio {
  width: calc(100% - 46px);
  position: absolute;
  left: 23px;
  bottom: 23px;
}

.board-placeholder {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  background: var(--board-placeholder);
  color: var(--board-placeholder-text);
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -0.08em;
}

.board-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 31px;
}

.board-author {
  display: flex;
  align-items: center;
  gap: 11px;
}

.board-author-meta {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.board-author-meta strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-author-meta small {
  color: var(--text-muted);
  font-size: 10px;
}

.board-title {
  margin: 27px 0 12px;
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.board-caption {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.62;
}

.board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.board-actions button,
.board-actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.board-actions button:hover,
.board-actions a:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.board-actions button.is-reacted {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: var(--accent-soft);
  color: var(--link);
}

.board-actions svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-actions .reaction-heart.is-reacted svg {
  fill: currentColor;
}

/* Feed */
.feed-section {
  padding-top: 28px;
}

.feed-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 2px 16px;
  border-bottom: 1px solid var(--border);
}

.feed-header h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.035em;
}

.feed-header p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}

.live-toggle {
  min-width: 68px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.live-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.live-toggle .play-icon {
  display: none;
}

.live-toggle.is-paused .pause-icon {
  display: none;
}

.live-toggle.is-paused .play-icon {
  display: block;
}

.pending-banner {
  padding: 13px 0 0;
  text-align: center;
}

.pending-banner button {
  min-height: 35px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.feed {
  min-height: 100px;
}

.drop-card {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--border);
  /* Loaded content is immediately readable on every surface, including refreshes. */
  animation: none;
}

.drop-card.is-targeted {
  border-radius: 14px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.drop-card.is-new {
  background: var(--surface-raised);
}

.drop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.author-button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.author-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.author-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-copy small {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: capitalize;
}

.drop-avatar {
  width: 40px;
  height: 40px;
}

.more-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.more-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.more-button svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.drop-copy {
  padding: 17px 0 0;
}

.drop-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.drop-description {
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.58;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.drop-media {
  overflow: hidden;
  margin-top: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-inset);
}

.drop-media:empty {
  display: none;
}

.drop-media img,
.drop-media video {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
  cursor: zoom-in;
}

.drop-media video {
  cursor: default;
}

.drop-media audio {
  width: calc(100% - 28px);
  margin: 18px 14px;
}

.drop-actions {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
}

.primary-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.action-button {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.action-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.action-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-button b {
  font-size: 11px;
  font-weight: 650;
}

.action-button.is-reacted {
  color: var(--signal);
}

.action-button[data-reaction="applaud"].is-reacted svg,
.action-button[data-reaction="save"].is-reacted svg {
  fill: currentColor;
}

.drop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 18px;
}

.engagement-line {
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.drop-link {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.drop-link:hover {
  color: var(--text);
}

.drop-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed-empty {
  display: grid;
  justify-items: center;
  padding: 70px 24px;
  text-align: center;
}

.empty-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
}

.empty-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.feed-empty h3 {
  margin: 18px 0 4px;
  font-size: 17px;
}

.feed-empty p {
  max-width: 360px;
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Right rail */
.right-rail {
  min-width: 0;
  position: sticky;
  top: 29px;
  display: grid;
  align-self: start;
  align-content: start;
  gap: 14px;
}

.desktop-search {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
}

.desktop-search:focus-within {
  border-color: var(--border-strong);
}

.desktop-search > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.desktop-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
}

.desktop-search input::placeholder {
  color: var(--text-muted);
}

.desktop-search kbd {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 9px;
}

.desktop-search button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.desktop-search button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.rail-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.rail-card-title {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
}

.rail-card-title h2 {
  margin: 0;
  font-size: 12px;
}

.room-card > .metric-note {
  margin: 0 18px 12px;
}

.room-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 18px 17px;
  border: 1px solid var(--border);
}

.room-stats div {
  min-height: 67px;
  padding: 14px;
}

.room-stats div:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.room-stats div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--border);
}

.room-stats dt {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-stats dd {
  margin: 5px 0 0;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.queue-card .rail-card-title button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.queue-card .rail-card-title button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.queue-card .rail-card-title svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.trending-preview-list {
  padding: 0 18px 13px;
}

.trending-preview-item {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.trending-preview-item:first-child {
  border-top: 0;
}

.trending-preview-rank {
  color: var(--text-muted);
  font-size: 9px;
}

.trending-preview-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.trending-preview-copy strong,
.trending-preview-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trending-preview-copy strong {
  font-size: 10px;
}

.trending-preview-copy small {
  color: var(--text-muted);
  font-size: 8px;
}

.trending-preview-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--signal);
  font-size: 9px;
}

.trending-preview-score svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.explainer-card {
  display: flex;
  gap: 14px;
  padding: 18px;
}

.explainer-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--signal);
}

.explainer-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.explainer-card h2 {
  margin: 1px 0 6px;
  font-size: 11px;
}

.explainer-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.65;
}

.rail-footer {
  padding: 3px 5px;
  color: var(--text-muted);
  font-size: 9px;
}

/* These sit at 11px in a flex row, which left them 17px tall: under the 24px WCAG 2.2 asks of a
   pointer target, and the exception for links inside running text does not cover a nav row. The
   padding is vertical only and the negative margin gives it back to the layout, so the target grows
   without the footer moving. */
.rail-footer button,
.rail-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 0;
  margin: -4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.rail-footer button:hover,
.rail-footer a:hover {
  color: var(--text-secondary);
}

.rail-footer p {
  margin: 12px 0 0;
}

/* Buttons and form controls */
.secondary-button,
.danger-button,
.publish-button {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.secondary-button {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
}

.secondary-button:hover {
  background: var(--surface-soft);
}

.danger-button {
  border: 1px solid var(--danger);
  background: var(--danger);
  color: var(--on-accent);
}

.publish-button {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
}

.publish-button:hover {
  background: var(--accent-hover);
}

/* Projects stay contextual to Drops, not a new ranked feed. */
.project-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 44px;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.project-badge span { color: var(--text-muted); font-weight: 450; }
.project-badge:hover span { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.project-badge:focus-visible,
.project-update-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.composer-project {
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
}

.project-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}

.project-checkbox input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 20px; accent-color: var(--accent); }
.project-checkbox span { min-width: 0; }
.project-checkbox strong { display: block; font-size: 14px; line-height: 1.45; }
.project-checkbox small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
#project-start-options { padding-top: 14px; }
#project-start-options .field { margin-bottom: 4px; }
#project-start-options > .text-button { min-height: 44px; margin-bottom: 12px; text-align: left; white-space: normal; }
#project-composer-context > p { margin: 4px 0; font-weight: 650; overflow-wrap: anywhere; }
#project-composer-context > small { display: block; color: var(--text-muted); line-height: 1.5; }
#project-view-original { display: block; min-height: 44px; margin-top: 5px; white-space: normal; }

.sheet-dialog.project-dialog { height: min(860px, calc(100dvh - 36px)); }
#project-dialog button { min-height: 44px; }
.project-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.project-dialog .dialog-header { flex: 0 0 auto; grid-template-columns: 44px minmax(0, 1fr); }
.project-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 18px 22px 28px; }
.project-status { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 12px 0; }
.project-contribution { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--border); }
.project-contribution.is-project-root { padding-top: 0; }
.project-contribution-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.project-contribution-meta strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.project-contribution h3,
.project-contribution h4 { margin: 8px 0 6px; font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.project-contribution h4 { font-size: 16px; }
.project-contribution-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 14px; margin: 0 0 12px; }
.project-contribution .drop-media-gallery { border-radius: 12px; overflow: hidden; }
.project-contribution-actions,
.project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.project-contribution-actions { margin-top: 8px; }
.project-contribution-actions > .text-button { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.project-actions { gap: 10px; margin: 14px 0 8px; }
.project-actions > button { min-height: 44px; white-space: normal; }
.project-invitation { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 14px 0 0; }
.project-timeline-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 5px 12px; border-bottom: 1px solid var(--border); margin-top: 24px; padding-bottom: 8px; }
.project-timeline-heading h3 { margin: 0; font-size: 16px; }
.project-timeline-heading span { font-size: 12px; color: var(--text-muted); }
#project-response-setting-label { margin-top: 16px; }
.project-updates { margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--border); }
.project-updates > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-updates h2 { font-size: 17px; margin: 0 0 6px; }
.project-updates header p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
#project-updates-refresh { min-height: 44px; flex: 0 0 auto; }
.project-update-list { display: grid; gap: 8px; margin-top: 14px; }
.project-update-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.project-update-item > span { grid-column: 1 / -1; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.project-update-item > strong { font-size: 14px; overflow-wrap: anywhere; }
.project-update-item > small { color: var(--text-muted); font-size: 12px; }
.project-update-item:hover { border-color: var(--border-strong); }
.project-checkbox[hidden], .composer-project[hidden], #project-start-options[hidden], #project-composer-context[hidden] { display: none; }

@media (max-width: 640px) {
  .sheet-dialog.project-dialog { width: 100%; max-width: 100%; height: calc(100dvh - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - env(safe-area-inset-top, 0px)); margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .project-scroll { padding: 16px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .project-actions > .publish-button,
  .project-actions > .secondary-button { flex: 1 1 170px; }
  .project-dialog .dialog-header p { font-size: 12px; }
  .composer-project { padding: 12px; }
  #project-start-options select { font-size: 16px; }
}

/* Dialogs */
dialog {
  color: var(--text);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.74);
}

.sheet-dialog {
  width: min(600px, calc(100vw - 30px));
  max-height: min(820px, calc(100dvh - 36px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
}

.sheet-dialog[open] {
  animation: dialog-in 180ms ease both;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.99);
  }
}

.composer,
.profile-form {
  min-height: 0;
}

.dialog-header {
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}

.dialog-header h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.03em;
}

.dialog-header p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

.dialog-icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.dialog-icon-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.dialog-icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.composer-scroll,
.profile-body {
  max-height: calc(100dvh - 126px);
  overflow-y: auto;
  padding: 22px 23px 26px;
}

.composer-author {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}

.composer-author label {
  min-width: 0;
  flex: 1;
}

.composer-author label > span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
}

.composer-author input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
}

.field {
  display: grid;
  /* A grid track never grows past the field: iOS sizes a date control from its native picker
     and would otherwise push the account dialog past the edge of the phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 17px;
}

.field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
}

.field > span small {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 500;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  outline: 0;
  background: var(--surface-control);
  color: var(--text);
  transition: border-color 140ms ease;
}

.field input,
.field select {
  height: 46px;
  padding: 0 13px;
}

.field textarea {
  min-height: 112px;
  padding: 12px 13px;
  resize: vertical;
  line-height: 1.55;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.compact-field {
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
}

.compact-field > span:first-child {
  justify-content: flex-start;
}

.select-wrap {
  position: relative;
}

.select-wrap select {
  appearance: none;
  padding-right: 40px;
}

.select-wrap svg {
  width: 17px;
  height: 17px;
  position: absolute;
  top: 50%;
  right: 13px;
  pointer-events: none;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.upload-field {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 19px;
  padding: 13px;
  border: 1px dashed var(--border-strong);
  border-radius: 13px;
  background: var(--surface-control);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.upload-field:hover,
.upload-field.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.upload-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-field-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text-secondary);
}

.upload-field-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upload-field-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.upload-field-copy strong,
.upload-field-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-field-copy strong {
  font-size: 11px;
}

.upload-field-copy small {
  color: var(--text-muted);
  font-size: 9px;
}

.upload-action {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
}

.media-description {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.media-preview {
  overflow: hidden;
  margin-top: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-inset);
}

.media-preview img,
.media-preview video {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.media-preview audio {
  width: calc(100% - 24px);
  margin: 18px 12px;
}

.media-preview > button {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
}

.media-preview > button:hover {
  color: var(--danger);
}

.media-preview > button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.input-with-icon {
  position: relative;
}

.input-with-icon > svg {
  width: 17px;
  height: 17px;
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.input-with-icon input {
  padding-left: 41px;
}

.form-error {
  margin-top: 15px;
  padding: 11px 12px;
  border: 1px solid var(--danger-panel-border);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 11px;
}

.composer-policy,
.profile-note {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.6;
}

.profile-body {
  padding-bottom: 30px;
}

.profile-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 24px;
  margin-bottom: 10px;
}

.profile-avatar-wrap > span:last-child {
  color: var(--text-muted);
  font-size: 10px;
}

.small-dialog {
  width: min(460px, calc(100vw - 28px));
  margin: auto;
  padding: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.46);
}

.small-dialog header {
  display: flex;
  gap: 13px;
}

.report-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
}

.report-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.small-dialog h2 {
  margin: 1px 0 4px;
  font-size: 17px;
}

.small-dialog header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.small-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.action-menu {
  width: 190px;
  position: fixed;
  z-index: 80;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-menu);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

.action-menu button {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}

.action-menu button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.action-menu button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.action-menu .danger-menu-item {
  color: var(--danger-text);
}

.toast {
  max-width: min(420px, calc(100vw - 30px));
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 30px;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.is-error {
  border-color: var(--danger-panel-border);
  background: var(--toast-error-bg);
  color: var(--toast-error-text);
}

/* The desktop workspace is a canvas, not a stack of nested cards. */
@media (min-width: 821px) {
  .main-column > .trending-section,
  .main-column > .discover-section,
  .main-column > .social-surface,
  .main-column > .chat-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .main-column > .chat-section .chat-header,
  .main-column > .chat-section .chat-toolbar {
    padding-right: 2px;
    padding-left: 2px;
  }

  .main-column > .chat-section .chat-composer {
    padding-right: 0;
    padding-left: 0;
    background: transparent;
  }
}

/* Tablet */
@media (max-width: 1180px) {
  :root {
    --sidebar-width: 220px;
  }

  .content-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding-right: 24px;
    padding-left: 24px;
  }

  .right-rail {
    display: none;
  }

  .mobile-search-wrap {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
  }

  .mobile-search-wrap > svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }

  .mobile-search-wrap input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 12px;
  }

  .mobile-search-wrap button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
  }

  .mobile-search-wrap button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }
}

/* Mobile */
@media (max-width: 820px) {
  body {
    min-height: 100dvh;
    padding-bottom: calc(var(--mobile-nav-height, 62px) + 12px);
  }

  /* Body already reserves the bottom navigation. A full-height shell would add
     that reserve a second time and make even an empty page scroll. */
  .app-shell {
    min-height: calc(100vh - var(--mobile-nav-height, 62px) - 12px);
    min-height: calc(100dvh - var(--mobile-nav-height, 62px) - 12px);
  }

  .desktop-sidebar {
    display: none;
  }

  .workspace {
    margin-left: 0;
  }

  .mobile-header {
    height: calc(58px + env(safe-area-inset-top));
    position: sticky;
    z-index: 50;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top) 15px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }

  .brand-mobile .brand-logo {
    width: 29px;
    height: 29px;
  }

  .brand-mobile {
    gap: 8px;
  }

  .brand-mobile .brand-wordmark {
    width: 94px;
    height: 15px;
    font-size: 0;
  }

  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .round-icon-button,
  .avatar-button {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
  }

  .round-icon-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .avatar-button .avatar {
    width: 35px;
    height: 35px;
  }

  .content-grid {
    width: 100%;
    max-width: none;
    display: block;
    padding: 0 14px 25px;
  }

  
  
  
  
  
  
  .mobile-search-wrap {
    display: flex;
    margin-bottom: 15px;
  }

  .category-strip {
    margin: 0 -14px;
    padding: 0 14px 16px;
  }

  .category-chip {
    height: 38px;
    padding: 0 15px;
    font-size: 11px;
  }

  .trending-section {
    border-radius: 16px;
  }

  .trending-header {
    padding: 21px 17px 18px;
  }

  .trending-header h2 {
    font-size: 27px;
  }

  .trending-header > div > p:last-child {
    max-width: 235px;
  }

  .trending-controls {
    flex-wrap: wrap;
    padding: 12px;
  }

  .period-control {
    width: 100%;
    order: 3;
  }

  .period-control button {
    flex: 1;
  }

  .trending-category {
    min-width: 108px;
  }

  .trending-focus {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    margin: 14px 12px 0;
  }

  .leaderboard-labels,
  .leaderboard-row {
    grid-template-columns: 38px minmax(0, 1fr) 48px 70px;
    gap: 8px;
  }

  .leaderboard-labels {
    padding: 16px 13px 7px;
  }

  .leaderboard-row {
    min-height: 66px;
    padding: 9px 13px;
  }

  .leaderboard-identity {
    gap: 8px;
  }

  .leaderboard-identity .avatar {
    width: 32px;
    height: 32px;
    font-size: 10px;
  }

  .leaderboard-copy strong,
  .leaderboard-score strong {
    font-size: 10px;
  }

  .leaderboard-copy small,
  .leaderboard-score small {
    font-size: 8px;
  }

  .trending-method {
    padding: 17px 14px 20px;
  }

  .trending-history-block > header,
  .trending-history {
    padding-right: 14px;
    padding-left: 14px;
  }

  .trending-history-row {
    grid-template-columns: 78px minmax(0, 1fr) 60px;
  }

  .profile-rank-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .board-section {
    border-radius: 16px;
  }

  .board-header {
    min-height: 62px;
    padding: 13px 14px;
  }

  .board-heading p {
    font-size: 12px;
  }

  .board-heading span:not(.live-orb) {
    display: block;
  }

  .board-card {
    display: flex;
    flex-direction: column;
  }

  .board-visual {
    min-height: 250px;
    max-height: 330px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .board-visual > img,
  .board-visual > video,
  .board-placeholder {
    min-height: 250px;
    max-height: 330px;
  }

  .board-info {
    min-height: 240px;
    padding: 23px 18px 25px;
  }

  .board-title {
    margin: 22px 0 10px;
    font-size: 31px;
  }

  .board-caption {
    font-size: 12px;
  }

  .board-actions {
    margin-top: 21px;
  }

  .board-actions button,
  .board-actions a {
    min-height: 37px;
  }

  .feed-section {
    padding-top: 24px;
  }

  .feed-header h2 {
    font-size: 19px;
  }

  .drop-card {
    padding: 19px 0 22px;
  }

  .drop-copy {
    padding-top: 15px;
  }

  .drop-title {
    font-size: 19px;
  }

  .drop-description {
    font-size: 12px;
  }

  .drop-media {
    margin-top: 15px;
    border-radius: 12px;
  }

  .mobile-bottom-nav {
    height: auto;
    min-height: calc(62px + env(safe-area-inset-bottom));
    position: fixed;
    z-index: 70;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: var(--surface);
  }

  .mobile-bottom-nav > button {
    flex: 1 0 52px;
    min-width: max-content;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 6px;
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 650;
  }

  .mobile-bottom-nav > button.is-active {
    color: var(--text);
  }

  .mobile-bottom-nav .nav-count {
    position: absolute;
    top: 2px;
    right: calc(50% - 26px);
    margin: 0;
    font-size: 11px;
  }

  .mobile-bottom-nav > button > svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sheet-dialog {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 14px);
    max-height: none;
    margin: 14px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  .dialog-header {
    min-height: 68px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 8px 12px;
  }

  .dialog-header p {
    display: none;
  }

  .composer-scroll,
  .profile-body {
    max-height: calc(100dvh - 83px);
    padding: 19px 16px 100px;
  }

  .compact-field {
    grid-template-columns: 85px minmax(0, 1fr);
  }

  .upload-field {
    min-height: 76px;
  }

  .upload-action {
    display: none;
  }

  .small-dialog {
    width: calc(100vw - 24px);
  }

  .toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  
  .board-actions button,
  .board-actions a {
    padding: 0 11px;
  }

  .drop-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .drop-link {
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* v0.3 authenticated beta surfaces */
.metric-note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.loading-stack {
  display: grid;
  gap: 12px;
  padding: 18px 0;
}

.loading-stack span {
  min-height: 150px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  animation: loading-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes loading-pulse {
  to { opacity: 0.52; }
}

.load-more {
  width: 100%;
  margin: 16px 0 30px;
}

.service-error {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--danger-panel-border);
  border-radius: var(--radius);
  background: var(--danger-panel-bg);
  color: var(--text);
}

.service-error p {
  margin: 6px 0 16px;
  color: var(--text-muted);
  line-height: 1.5;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.auth-tabs button {
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.auth-tabs button.is-active {
  border-bottom-color: var(--text);
  background: transparent;
  color: var(--text);
}

.federated-auth {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.password-sign-in-toggle {
  display: block;
  min-height: 44px;
  margin: 0 auto 16px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#federated-return-error {
  margin: 8px 0 20px;
}

.federated-auth h3 {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.federated-provider-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.federated-provider-list > :only-child {
  grid-column: 1 / -1;
}

.home-intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.home-intro:has(#home-join:not([hidden])) {
  flex-wrap: wrap;
}

.home-intro:has(#home-join:not([hidden])) p {
  flex-basis: 100%;
}

.federated-provider-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.federated-provider-button:hover,
.federated-provider-button:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 9px;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: var(--border);
  content: "";
}

.field-note {
  margin: -9px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form > .publish-button,
.auth-form > .secondary-button {
  min-height: 44px;
  justify-content: center;
}

.verification-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 12px;
  background: var(--accent-soft);
}

.enforcement-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 15px;
  border: 1px solid var(--enforcement-border);
  border-radius: 12px;
  background: var(--enforcement-bg);
}

.enforcement-panel > h3,
.enforcement-panel > p { margin: 0; }
.enforcement-panel > p { color: var(--text-secondary); font-size: 10px; line-height: 1.5; }

#enforcement-list { display: grid; gap: 9px; }

.enforcement-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.enforcement-card > strong { text-transform: capitalize; }
.enforcement-card code { overflow-wrap: anywhere; color: var(--text-secondary); font-size: 9px; }
.enforcement-card p { margin: 0; line-height: 1.5; }
.enforcement-card small,
.enforcement-state { color: var(--text-muted); font-size: 9px; }
.appeal-form { display: grid; gap: 8px; margin-top: 5px; }

.verification-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.button-row,
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.account-actions {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

#upload-progress {
  width: 100%;
  accent-color: var(--accent);
}

.admin-dialog {
  width: min(920px, calc(100vw - 30px));
  max-height: min(840px, calc(100dvh - 30px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow);
}

.admin-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.admin-shell {
  display: grid;
  max-height: inherit;
}

.admin-content {
  display: grid;
  gap: 14px;
  padding: 20px;
  overflow: auto;
}

.admin-summary,
.analytics-panel,
.admin-overview,
.admin-users,
.report-review {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.admin-queue {
  display: grid;
  gap: 10px;
}

.admin-queue-title {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.analytics-panel h3,
.admin-overview h3,
.admin-users h3,
.report-review h3 {
  margin: 0 0 10px;
}

.admin-overview,
.admin-users { display: grid; gap: 12px; }

.staff-note,
.staff-note-field {
  padding: 10px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-soft);
}

.staff-note p { margin: 5px 0 0; white-space: pre-wrap; }
.staff-note-field small { color: var(--text-muted); font-size: 9px; line-height: 1.45; }

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-overview-grid div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.admin-overview-grid dt { color: var(--text-muted); font-size: 9px; text-transform: capitalize; }
.admin-overview-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 750; }
.admin-overview-grid dd.is-unavailable { color: var(--danger); }
.admin-repeat summary { cursor: pointer; }
.admin-repeat p { margin: 8px 0 0; color: var(--text-secondary); }

.admin-user-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px 150px;
  gap: 8px;
}

.admin-user-filters input,
.admin-user-filters select {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
}

.admin-users > .secondary-button { justify-self: start; }

.admin-user-list { display: grid; gap: 8px; }

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 130px 110px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.admin-user-identity { display: grid; gap: 2px; }
.admin-user-identity small,
.admin-user-signals { color: var(--text-muted); font-size: 9px; }
.admin-user-row select,
.admin-user-row input {
  width: 100%;
  min-height: 38px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.analytics-grid div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.analytics-grid dt {
  color: var(--text-muted);
  font-size: 10px;
}

.analytics-grid dd {
  margin: 5px 0 0;
  font-size: 18px;
  font-weight: 750;
}

.report-review {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) 110px auto;
  align-items: end;
  gap: 10px;
}

.report-review h3,
.report-review p {
  grid-column: 1 / -1;
}

.report-review p {
  margin: 0 0 6px;
  color: var(--text-secondary);
}

.report-review .report-evidence,
.safety-content-body .report-evidence {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  padding: 12px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.user-report-review > a {
  grid-column: 1 / -1;
  width: max-content;
  text-decoration: none;
}

.safety-content-review {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 0;
}

.safety-content-removal { display: grid; gap: 12px; margin-top: 16px; }
.safety-content-removal > p { margin: 0; }
.safety-content-removal > button { justify-self: start; }

.safety-case { min-width: 0; }
.safety-case-actions {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  overflow-wrap: anywhere;
}
.safety-case-actions h4 { margin: 0 0 10px; }
.safety-case-actions p { margin: 6px 0; }
.safety-action-entry { padding: 12px 0; border-top: 1px solid var(--border); }

.admin-sanction-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.admin-sanction-row :is(select, input),
.admin-creator-badge input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.admin-sanction-row input { grid-column: 1 / -1; }
.admin-sanction-row button { grid-column: 1 / -1; }

.admin-user-identity {
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: anywhere;
}

.safety-content-body {
  margin-top: 12px;
  overflow-wrap: anywhere;
}

.safety-content-body > strong {
  display: block;
  margin: 12px 0 6px;
}

.safety-content-body .report-evidence {
  font-size: 14px;
}

.moderation-outcome {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.moderation-outcome code {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.admin-history {
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.admin-history summary { cursor: pointer; font-weight: 700; }

.admin-history-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.admin-history-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.admin-history-row code { overflow-wrap: anywhere; color: var(--text-secondary); }
.admin-history-row p { grid-column: 1 / -1; margin: 0; }
.admin-history-row time { color: var(--text-muted); font-size: 9px; }

.report-review select,
.report-review textarea,
.report-review input {
  width: 100%;
  min-height: 42px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
}

.report-review textarea {
  resize: vertical;
}

@media (max-width: 720px) {
  .analytics-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-user-filters { grid-template-columns: 1fr; }
  .admin-user-row { grid-template-columns: 1fr; }
  .report-review { grid-template-columns: 1fr; }
  .report-review h3,
  .report-review p,
  .report-review .report-evidence { grid-column: auto; }
  .user-report-review > a { grid-column: auto; }
  .admin-history-row { grid-template-columns: 1fr; }
  .admin-history-row p { grid-column: auto; }
  .admin-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .auth-tabs button { font-size: 10px; }
}

.legal-page {
  padding: 40px 20px 80px;
}

.legal-page main {
  width: min(720px, 100%);
  margin: 0 auto;
}

.legal-page .brand {
  display: inline-flex;
  margin-bottom: 56px;
}

.legal-page h1 {
  max-width: 620px;
  margin: 10px 0 24px;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.legal-page h2 {
  margin: 36px 0 10px;
  font-size: 19px;
}

.legal-page p,
.legal-page li {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
}

.legal-page a {
  color: var(--text);
}

.legal-status {
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .discover-section {
    margin: 0 -14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .discover-header {
    padding: 21px 15px 17px;
  }

  /* Keep the mobile search tools inside the surface instead of letting them touch its frame. */
  #discover-search-tools {
    margin: 16px 16px 0;
  }

  #discover-search-tools .discover-search {
    margin: 0;
  }

  #discover-search-tools .discover-controls {
    margin-top: 12px;
    padding-right: 0;
    padding-left: 0;
  }

  #discover-search-tools .segmented-control {
    gap: 4px;
  }

  .discover-browse-row {
    margin: 12px 16px 16px;
  }

  .discover-people,
  .discover-drops {
    padding-right: 16px;
    padding-left: 16px;
  }

  .back-control {
    /* The site header remains above the page while focused controls scroll into view. */
    top: calc(var(--mobile-header-height, calc(58px + env(safe-area-inset-top))) + 10px);
    margin: 16px 0 10px 2px;
  }

  .people-grid {
    grid-template-columns: 1fr;
  }

  .chat-section {
    min-height: calc(100dvh - 174px);
    margin: 0 -14px;
    padding-bottom: 92px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  
  
  
  
  .chat-toolbar {
    padding-right: 13px;
    padding-left: 13px;
  }

  .chat-messages {
    max-height: none;
    min-height: calc(100dvh - 426px);
  }

  .chat-message {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 12px;
  }

  .chat-message-actions {
    opacity: 1;
  }

  .chat-composer {
    position: fixed;
    z-index: 65;
    right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom));
    left: 0;
    padding: 10px 12px 12px;
  }

  .chat-new-messages {
    bottom: calc(158px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .mobile-header-actions {
    gap: 2px;
  }

  .round-icon-button,
  .avatar-button {
    width: 36px;
    height: 36px;
  }

  
  }

@media (max-width: 820px) {
  .social-surface {
    min-height: calc(100dvh - 150px);
    margin: 0 -4px;
    border-radius: 14px;
  }

  .social-surface-header {
    min-height: 0;
    display: grid;
    padding: 20px 16px;
  }

  .social-surface-header .secondary-button { width: 100%; }

  .notification-item {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 13px 14px;
  }

  .conversation-pane {
    min-height: calc(100dvh - 270px);
    border-right: 0;
  }

  .message-thread { display: none; }
  .messages-shell.has-thread .conversation-pane { display: none; }
  .messages-shell.has-thread {
    height: max(360px, calc(100dvh - 366px));
    min-height: 0;
  }

  .messages-shell.has-thread .message-thread {
    display: block;
    height: 100%;
    min-height: 0;
  }

  #messages-back {
    display: grid;
    flex: 0 0 auto;
    margin-right: 5px;
  }

  .messages-shell.has-thread #message-thread-content {
    height: 100%;
    min-height: 0;
  }

  .message-request:not([hidden]) {
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }

  .message-request-actions:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .message-list {
    max-height: none;
    min-height: 0;
  }

  .message-form {
    position: static;
  }

  .profile-hero {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 20px 16px;
  }

  .profile-hero-avatar {
    width: 76px;
    height: 76px;
    font-size: 22px;
  }

  .profile-actions {
    max-width: none;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-stats > *:nth-child(2) { border-right: 0; }
  .profile-stats > *:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .profile-posts { padding: 18px 14px; }
  .profile-section .profile-rank-banner { margin: 14px 14px 0; }
}

/* Product hierarchy, readable controls, and context-aware de-duplication. */
.primary-nav {
  gap: 16px;
  margin-top: 34px;
}

.nav-group {
  display: grid;
  gap: 4px;
}

.nav-section-label {
  padding: 0 14px 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav-count,
.publish-button,
.chat-send {
  color: var(--on-accent);
}

.secondary-button,
.danger-button,
.publish-button {
  min-height: 42px;
}

.dialog-icon-button {
  width: 44px;
  height: 44px;
}

.auth-tabs button {
  min-height: 44px;
}

body:has(#discover:not([hidden])) .desktop-search,
body:has(#trending:not([hidden])) .queue-card,
body:has(#board[hidden]) .explainer-card {
  display: none;
}

.chat-header h1,
.discover-header h1,
.social-surface-header h1,
.trending-header h1,
.profile-identity h1 {
  margin: 0;
  letter-spacing: -0.04em;
}

.chat-header h1,
.social-surface-header h1 {
  font-size: 27px;
}

.discover-header h1 {
  font-size: 28px;
}

.trending-header h1 {
  font-size: 31px;
}

.profile-identity h1 {
  margin-top: 3px;
  font-size: 26px;
}

.category-chip {
  min-height: 44px;
  font-size: 12px;
}

.segmented-control button {
  min-height: 40px;
  padding-right: 14px;
  padding-left: 14px;
  font-size: 12px;
}

.board-heading h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.board-content:has(> .board-empty),
.board-content > .board-empty {
  min-height: 0;
}

.board-empty {
  padding: 0 20px 16px;
  font-size: 14px;
  text-align: left;
}

.live-toggle {
  min-width: 76px;
  min-height: 42px;
  font-size: 12px;
}

.chat-message {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.chat-message .avatar,
.chat-avatar-button {
  width: 40px;
  height: 40px;
}

.chat-author {
  min-height: 24px;
  font-size: 13px;
}

.chat-message-meta span {
  font-size: 11px;
}

.chat-message-body {
  font-size: 14px;
  line-height: 1.6;
}

.chat-reply-quote {
  min-height: 44px;
}

.chat-reply-quote strong,
.chat-reply-quote span {
  font-size: 11px;
}

.chat-message-actions button,
.chat-reply-context button {
  width: 40px;
  height: 40px;
}

.chat-compose-row {
  min-height: 52px;
}

.chat-send {
  width: 44px;
  height: 44px;
}

#chat-composer-note,
.chat-reply-context span,
.chat-reply-context p {
  font-size: 11px;
}

.desktop-search input {
  font-size: 13px;
}

.rail-card-title {
  min-height: 60px;
}

.rail-card-title h2 {
  font-size: 14px;
}

.room-stats div {
  min-height: 74px;
}

.room-stats dt {
  font-size: 12px;
}

.room-stats dd {
  font-size: 20px;
}

.queue-card .rail-card-title button {
  width: 40px;
  height: 40px;
}

.trending-preview-copy strong {
  font-size: 12px;
}

.trending-preview-copy small,
.trending-preview-rank,
.trending-preview-score {
  font-size: 10px;
}

.explainer-card {
  padding: 20px 18px;
}

.explainer-card h2 {
  font-size: 13px;
}

.explainer-card p {
  font-size: 14px;
  line-height: 1.6;
}

.explainer-card .text-button {
  min-height: 44px;
  padding: 8px 0;
  font-size: 13px;
}

.rail-footer {
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1.4;
}

.rail-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

.rail-footer a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.rail-footer p {
  margin-top: 7px;
}

@media (min-width: 821px) {
  .category-strip {
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (max-width: 820px) {
  .mobile-header {
    height: calc(62px + env(safe-area-inset-top));
    padding-right: 12px;
    padding-left: 12px;
  }

  .mobile-header-actions {
    gap: 2px;
  }

  .round-icon-button {
    width: 44px;
    height: 44px;
  }

  
  
  .category-chip {
    height: 44px;
    font-size: 12px;
  }

  .secondary-button,
  .danger-button,
  .publish-button {
    min-height: 44px;
  }

  .chat-section {
    min-height: calc(100dvh - 124px);
  }

  
  .chat-header h1,
  .social-surface-header h1,
  .discover-header h1,
  .trending-header h1 {
    font-size: 24px;
  }

  .chat-header p:last-child,
  .discover-header p:last-child,
  .social-surface-header p:last-child,
  .trending-header > div > p:last-child {
    max-width: 290px;
    font-size: 12px;
  }

  .chat-toolbar {
    min-height: 60px;
  }

  .chat-messages {
    min-height: calc(100dvh - 358px);
    padding-bottom: 104px;
  }

  .chat-message {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .chat-message-actions {
    gap: 0;
  }

  .chat-message-actions button {
    width: 44px;
    height: 44px;
  }

  .board-content:has(> .board-empty),
  .board-content > .board-empty {
    min-height: 0;
  }

  .mobile-bottom-nav > button {
    min-height: 48px;
    font-size: 10px;
  }

}

/* Compact destination screens and product-grade file controls. */
.social-surface-header,
.chat-header {
  min-height: 88px;
  padding: 20px 22px;
}

.discover-header,
.trending-header {
  padding: 20px 22px;
}

.social-surface-header h1,
.chat-header h1,
.discover-header h1,
.trending-header h1 {
  font-size: 25px;
}

.conversation-item {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.conversation-copy strong {
  font-size: 13px;
}

.conversation-copy span {
  font-size: 11px;
}

.message-thread-header {
  min-height: 60px;
}

.message-participant {
  min-height: 44px;
}

.message-participant strong {
  font-size: 13px;
}

.message-participant small {
  font-size: 11px;
}

.message-list {
  gap: 10px;
}

.direct-message {
  padding: 11px 13px;
}

.direct-message p {
  font-size: 13px;
  line-height: 1.55;
}

.direct-message footer {
  margin-top: 7px;
  font-size: 10px;
}

.direct-message footer button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
}

.direct-message footer button:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.message-form {
  grid-template-columns: minmax(0, 1fr) 44px;
  padding: 10px 12px;
}

.message-form textarea {
  min-height: 44px;
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.45;
}

.message-form .chat-send {
  width: 44px;
  height: 44px;
}

.upload-field {
  min-height: 76px;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
}

.upload-field:hover,
.upload-field:focus-within {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.upload-field:focus-within {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.upload-field.has-file {
  border-color: color-mix(in srgb, var(--positive) 55%, transparent);
  background: var(--positive-soft);
}

.upload-field-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-raised);
}

.upload-field-copy {
  flex: 1 1 auto;
}

.upload-field-copy strong {
  font-size: 13px;
}

.upload-field-copy small {
  font-size: 11px;
}

.upload-action {
  min-width: 68px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-color: var(--border-strong);
  background: var(--surface-hover);
  font-size: 11px;
}

.profile-upload-field {
  margin-top: 0;
  flex-wrap: wrap;
}

.avatar-upload-status {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-upload-status > .metric-note {
  flex: 0 0 100%;
  margin: 0;
  font-size: 13px;
}

.avatar-upload-status > button {
  flex: 1 1 130px;
  min-height: 44px;
  margin: 0;
}

@media (max-width: 820px) {
  
  body[data-view="all"] .mobile-search-wrap {
    margin-top: 14px;
  }

  body[data-view="messages"] .mobile-header [data-view="messages"],
  body[data-view="notifications"] .mobile-header [data-view="notifications"],
  body[data-view="chat"] .mobile-header [data-view="chat"] {
    background: var(--surface-soft);
    color: var(--text);
  }

  .messages-section,
  .notifications-section,
  .chat-section,
  .discover-section,
  .trending-section {
    margin-right: -14px;
    margin-left: -14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .social-surface-header {
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }

  .social-surface-header h1,
  .chat-header h1,
  .discover-header h1,
  .trending-header h1 {
    font-size: 20px;
    letter-spacing: -0.025em;
  }

  .social-surface-header p,
  .chat-header p:last-child,
  .discover-header p:last-child,
  .trending-header > div > p:last-child {
    display: none;
  }

  .social-surface-header .secondary-button {
    width: auto;
    min-height: 38px;
    margin-left: auto;
    padding-right: 13px;
    padding-left: 13px;
    font-size: 11px;
  }

  .chat-header,
  .discover-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }

  .trending-header {
    min-height: 68px;
    align-items: center;
    padding: 0 16px;
  }

  .messages-section.has-open-thread > .social-surface-header {
    display: none;
  }

  .conversation-item {
    min-height: 76px;
    padding: 12px 14px;
  }

  .direct-message {
    max-width: 86%;
  }

  .upload-field {
    min-height: 76px;
    margin-top: 16px;
    padding: 11px 12px;
  }

  .upload-field-copy small {
    max-width: 175px;
  }

  .upload-action {
    display: inline-flex;
  }

  .profile-upload-field {
    margin-top: 0;
  }

  body.message-thread-open {
    overflow: hidden;
    padding-bottom: 0;
  }

  body.message-thread-open .mobile-header,
  body.message-thread-open .mobile-bottom-nav {
    display: none;
  }

  body.message-thread-open .content-grid {
    padding: 0;
  }

  body.message-thread-open .messages-section {
    margin: 0;
  }

  body.message-thread-open .message-thread,
  body.message-thread-open #message-thread-content {
    width: 100%;
    height: 100dvh;
    min-height: 0;
  }

  body.message-thread-open .message-thread-header {
    min-height: calc(60px + env(safe-area-inset-top));
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  body.message-thread-open .message-list {
    min-height: 0;
    padding: 14px;
  }

  body.message-thread-open .message-form {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 821px) {
  body[data-view="following"] .feed-header > div,
  body[data-view="saved"] .feed-header > div,
  body[data-view="mine"] .feed-header > div {
    display: none;
  }
}

/* Instagram-informed clarity: stable destinations, quiet chrome, product identity. */
.account-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}

.account-shortcuts button {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.account-shortcuts button:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  color: var(--text);
}

.account-shortcuts svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1181px) {
  .right-rail {
    gap: 0;
  }

  .desktop-search {
    margin-bottom: 12px;
  }

  .right-rail .rail-card {
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .right-rail .rail-card-title {
    padding-right: 4px;
    padding-left: 4px;
  }

  .right-rail .room-stats {
    margin-right: 4px;
    margin-left: 4px;
    border-right: 0;
    border-left: 0;
  }

  .right-rail .trending-preview-list {
    padding-right: 4px;
    padding-left: 4px;
  }

  .right-rail .explainer-card {
    padding-right: 4px;
    padding-left: 4px;
  }

  .right-rail .rail-footer {
    padding: 16px 4px 2px;
  }
}

@media (max-width: 820px) {
  .mobile-header {
    height: calc(58px + env(safe-area-inset-top));
    padding-right: 10px;
    padding-left: 14px;
  }

  .mobile-header-actions {
    gap: 2px;
  }

  .mobile-header .round-icon-button {
    width: 44px;
    height: 44px;
  }

  .mobile-bottom-nav > button.is-active:not(.mobile-primary-destination) > svg {
    stroke-width: 2.35;
  }

  .mobile-bottom-nav .mobile-primary-destination {
    position: relative;
    color: var(--text-secondary);
  }

  /* A 44x30 key like TikTok's create button. The negative top margin keeps its flow height
     equal to the 24px icons, so the Create label shares the other four baselines and the
     same 4px gap, and the key stays inside the bar. */
  .mobile-primary-icon {
    width: 44px;
    height: 30px;
    flex: 0 0 auto;
    margin-top: -6px;
    position: static;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
  }

  .mobile-primary-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-primary-destination.is-active .mobile-primary-icon {
    background: var(--accent-hover);
  }

  .mobile-primary-destination .mobile-primary-icon b {
    top: -4px;
    right: -6px;
  }

  .board-section {
    margin-right: 0;
    margin-left: 0;
  }

  .board-header {
    min-height: 56px;
    padding: 10px 14px;
    border-bottom: 0;
  }

  .board-content:has(> .board-empty),
  .board-content > .board-empty {
    min-height: 0;
  }

  .board-empty {
    padding: 0 14px 12px;
  }

  .feed-section {
    padding-top: 20px;
  }

  .feed-section .feed-empty {
    padding: 52px 24px 90px;
  }

  .action-button,
  .more-button {
    min-width: 44px;
    height: 44px;
  }

  .board-actions button,
  .board-actions a {
    min-height: 44px;
  }
}

/* v0.6 interface audit: quiet chrome, readable controls, and stable three-column layout. */
:root {
  --sidebar-width: 224px;
  --rail-width: 300px;
  --page-gap: 24px;
}

.secondary-button,
.danger-button,
.publish-button,
.upload-action,
.live-toggle {
  border-radius: 8px;
}

.category-rail {
  min-width: 0;
  position: relative;
}

.category-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-padding-inline: 46px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-strip:focus-visible {
  border-radius: 10px;
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.category-chip {
  height: 44px;
  min-height: 44px;
  padding-right: 14px;
  padding-left: 14px;
  scroll-snap-align: start;
  font-size: 12px;
}

.category-scroll-button {
  display: none;
}

.chat-header,
.discover-header,
.social-surface-header,
.trending-header {
  min-height: 68px;
  align-items: center;
  padding: 12px 20px;
}

.chat-header p:last-child,
.discover-header p:last-child,
.social-surface-header p:last-child,
.trending-header > div > p:last-child {
  display: none;
}

.chat-header h1,
.discover-header h1,
.social-surface-header h1,
.trending-header h1 {
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.chat-toolbar {
  min-height: 54px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.segmented-control button {
  min-height: 44px;
  padding-right: 14px;
  padding-left: 14px;
  font-size: 12px;
  white-space: nowrap;
}

.feed-header {
  min-height: 58px;
  align-items: center;
  padding-bottom: 12px;
}

.feed-header > div,
body[data-view="following"] .feed-header > div,
body[data-view="saved"] .feed-header > div,
body[data-view="mine"] .feed-header > div {
  display: block;
}

.feed-header h2 {
  font-size: 21px;
}

.live-toggle {
  min-width: 86px;
  min-height: 44px;
  font-size: 12px;
}

.board-heading h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.board-author {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.board-author-meta strong {
  font-size: 13px;
}

.board-author-meta small {
  font-size: 13px;
}

.board-actions button,
.board-actions a {
  min-height: 44px;
  padding: 0 11px;
  border-color: transparent;
  border-radius: 8px;
  font-size: 13px;
}

.board-actions button:hover,
.board-actions a:hover {
  border-color: transparent;
  background: var(--surface-soft);
}

.author-button {
  min-height: 44px;
}

.author-copy small,
.engagement-line {
  font-size: 12px;
}

.more-button {
  width: 40px;
  height: 40px;
}

.action-button b {
  font-size: 12px;
}

.trending-controls {
  align-items: flex-end;
  padding: 13px 18px;
}

.trending-category {
  min-width: 132px;
  gap: 4px;
}

.trending-category span,
.discover-controls > label span {
  font-size: 10px;
}

.trending-category select,
.discover-controls select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 12px;
}

.leaderboard-labels,
.leaderboard-row {
  grid-template-columns: 52px minmax(0, 1fr) 88px 100px;
}

.leaderboard-labels {
  padding-top: 16px;
  font-size: 10px;
}

.leaderboard-row {
  min-height: 76px;
}

.leaderboard-copy strong {
  font-size: 13px;
}

.leaderboard-copy small,
.leaderboard-score small {
  font-size: 11px;
}

.trend-movement {
  font-size: 11px;
}

.leaderboard-score strong {
  font-size: 13px;
}

.trending-focus strong {
  font-size: 13px;
}

.trending-focus span {
  font-size: 11px;
}

.trending-history-block h3,
.trending-method strong {
  font-size: 12px;
}

.trending-history-block header span,
.trending-history-row,
.trending-method span {
  font-size: 11px;
}

.discover-search input {
  font-size: 14px;
}

.discover-controls {
  min-height: 64px;
}

.discover-controls > label {
  min-width: 142px;
  gap: 4px;
}

.discover-people > header h3,
.discover-drops > header h3 {
  font-size: 14px;
}

.discover-people > header span,
.discover-drops > header span {
  font-size: 11px;
}

.person-card {
  min-height: 104px;
  padding: 14px;
}

.person-card-copy strong {
  font-size: 13px;
}

.person-card-copy span {
  font-size: 11px;
}

.person-card-copy p {
  font-size: 12px;
  line-height: 1.45;
}

.conversation-copy strong,
.message-participant strong {
  font-size: 13px;
}

.conversation-copy span,
.message-participant small,
.conversation-empty span,
.message-thread-empty p {
  font-size: 12px;
}

.conversation-empty strong,
.message-thread-empty strong {
  font-size: 14px;
}

.action-menu {
  width: 200px;
  padding: 6px;
}

.action-menu button {
  min-height: 44px;
  padding: 0 12px;
  font-size: 13px;
}

.field > span {
  font-size: 12px;
}

.field > span small {
  font-size: 10px;
}

.field input,
.field textarea,
.field select {
  font-size: 14px;
}

.auth-tabs button {
  min-height: 44px;
  font-size: 12px;
}

.small-dialog {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

.small-dialog header p {
  font-size: 12px;
  line-height: 1.5;
}

.small-dialog footer button {
  min-height: 44px;
}

.upload-field-copy strong {
  font-size: 13px;
}

.upload-field-copy small {
  font-size: 11px;
}

.upload-action {
  min-width: 68px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--surface-hover);
  font-size: 11px;
}

/* Social-native creation flow: content first, advanced controls on demand. */
.composer-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  border-radius: 12px;
  background: var(--surface-composer);
}

.composer-dialog .dialog-header {
  flex-shrink: 0;
  min-height: 56px;
  grid-template-columns: 44px minmax(0, 1fr) 86px;
  gap: 4px;
  padding: 0 10px;
}

.composer-dialog .dialog-header > div {
  min-width: 0;
  text-align: center;
}

.composer-dialog .dialog-header h2 {
  overflow: hidden;
  font-size: 15px;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-dialog .dialog-icon-button {
  border-radius: 8px;
}

.composer-dialog #submit-drop {
  min-height: 44px;
  justify-self: end;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font-size: 13px;
}

.composer-dialog #submit-drop:hover {
  background: transparent;
  color: var(--link);
}

.composer-dialog .composer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(704px, calc(100dvh - 88px));
  padding: 20px 24px 24px;
}

.composer-dialog .composer {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.composer-dialog #form-error {
  flex-shrink: 0;
  max-height: 30dvh;
  margin: 12px 16px 0;
  overflow-y: auto;
  font-size: 13px;
}

.composer-dialog .composer-author {
  gap: 11px;
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.composer-dialog .composer-author .avatar {
  width: 38px;
  height: 38px;
  font-size: 11px;
}

.composer-dialog .composer-author > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.composer-dialog .composer-author strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-dialog .composer-author small {
  color: var(--text-muted);
  font-size: 10px;
}

.composer-dialog .field {
  gap: 4px;
  margin-top: 13px;
}

.composer-dialog .field > span {
  min-height: 22px;
  color: var(--text-secondary);
  font-size: 11px;
}

.composer-dialog .field-count {
  opacity: 0;
  transition: opacity 120ms ease;
}

.composer-dialog .field:focus-within .field-count {
  opacity: 1;
}

.composer-dialog .field input,
.composer-dialog .field textarea,
.composer-dialog .field select {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.admin-dialog :is(p, .metric-note, .staff-private-note) {
  font-size: 14px;
  line-height: 1.5;
}

.admin-dialog .admin-queue-title {
  color: var(--text);
  font-size: 18px;
  text-transform: none;
  letter-spacing: normal;
}

.admin-content > .feed-empty {
  min-height: 0;
  display: block;
  margin: 0;
  padding: 20px 0;
  text-align: left;
}

.admin-history {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.admin-history summary {
  min-height: 48px;
  padding: 12px 0;
  font-size: 15px;
}

.admin-overview-grid div {
  border: 0;
  border-radius: 0;
}

.composer-dialog .field input,
.composer-dialog .field select {
  height: 44px;
  padding: 0;
}

.composer-dialog .field textarea {
  min-height: 92px;
  padding: 9px 0 10px;
  line-height: 1.5;
}

.composer-dialog .field input:focus,
.composer-dialog .field textarea:focus,
.composer-dialog .field select:focus {
  border-color: var(--accent);
}

.composer-dialog .input-with-icon > svg {
  left: 0;
}

.composer-dialog .input-with-icon input {
  padding-left: 30px;
}

.composer-dialog .upload-field {
  min-height: 62px;
  gap: 10px;
  margin-top: 15px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.composer-dialog .upload-field:hover,
.composer-dialog .upload-field:focus-within {
  border-color: var(--border-strong);
  background: var(--surface);
}

.composer-dialog .upload-field-icon {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
}

.composer-dialog .upload-field-copy strong {
  font-size: 12px;
}

.composer-dialog .upload-field-copy small {
  font-size: 10px;
}

.composer-dialog .upload-action {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font-size: 11px;
}

.composer-dialog .composer-category {
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 190px);
  gap: 16px;
  margin-top: 2px;
  border-bottom: 1px solid var(--border);
}

.composer-dialog .composer-category > span:first-child {
  min-height: 52px;
}

.composer-dialog .composer-category .select-wrap select {
  height: 52px;
  padding-right: 28px;
  border-bottom: 0;
  text-align: right;
}

.composer-dialog .composer-category .select-wrap svg {
  right: 0;
}

.composer-dialog .composer-policy {
  margin-top: 13px;
  font-size: 14px;
  line-height: 1.6;
}

.composer-draft-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.composer-draft-footer p {
  max-width: 350px;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.composer-draft-footer #discard-drop-draft {
  padding-right: 0;
  padding-left: 0;
  color: var(--danger);
}

.composer-auth-intent {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-whisper);
}

.composer-auth-intent p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.composer-auth-intent .text-button,
.account-help.text-button {
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 1181px) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--page-gap);
    padding: 24px 18px 64px 28px;
  }

  body.is-shared-drop .content-grid {
    max-width: 880px;
    grid-template-columns: minmax(0, 1fr);
    margin-right: auto;
    margin-left: auto;
  }

  body.is-shared-drop .right-rail {
    display: none;
  }

  .right-rail {
    height: calc(100dvh - 29px);
    position: sticky;
    top: 29px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding-bottom: 16px;
  }

  .right-rail-content {
    min-height: 0;
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: 12px;
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
  }

  .right-rail-content .desktop-search {
    margin-bottom: 12px;
  }

  .rail-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 10px 4px 0;
    border-top: 1px solid var(--border);
    background: var(--bg);
    font-size: 12px;
  }

  .rail-footer nav {
    gap: 0 12px;
  }

  .rail-footer a {
    min-height: 32px;
  }

  .rail-footer p {
    margin-top: 4px;
  }

  .category-scroll-button:not([hidden]) {
    width: 44px;
    height: 44px;
    position: absolute;
    z-index: 5;
    top: 1px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.46);
    cursor: pointer;
  }

  .category-scroll-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-active);
  }

  .category-scroll-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .category-scroll-previous {
    left: 1px;
  }

  .category-scroll-previous svg {
    transform: rotate(90deg);
  }

  .category-scroll-next {
    right: 1px;
  }

  .category-scroll-next svg {
    transform: rotate(-90deg);
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .category-scroll-button:not([hidden]) {
    width: 44px;
    height: 44px;
    position: absolute;
    z-index: 5;
    top: 1px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.46);
    cursor: pointer;
  }

  .category-scroll-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-active);
  }

  .category-scroll-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .category-scroll-previous {
    left: 1px;
  }

  .category-scroll-previous svg {
    transform: rotate(90deg);
  }

  .category-scroll-next {
    right: 1px;
  }

  .category-scroll-next svg {
    transform: rotate(-90deg);
  }
}

@media (max-width: 820px) {
  html,
  body {
    min-width: 0;
  }

  .mobile-header {
    min-width: 0;
    min-height: calc(58px + env(safe-area-inset-top));
    height: auto;
    flex-wrap: wrap;
    padding-right: 10px;
    padding-left: 14px;
  }

  .brand-mobile {
    min-width: 0;
    flex: 0 0 auto;
  }

  .mobile-header-actions {
    flex: 0 0 auto;
    gap: 2px;
  }

  .mobile-header .round-icon-button {
    width: 44px;
    height: 44px;
  }

  .content-grid {
    min-width: 0;
    padding-right: 14px;
    padding-left: 14px;
  }

  .category-rail {
    margin: 0 -14px;
  }

  .category-strip {
    margin: 0;
    padding: 0 14px 14px;
    scroll-padding-inline: 14px;
  }

  .category-chip {
    height: 44px;
    min-height: 44px;
    font-size: 12px;
  }

  .chat-header,
  .discover-header,
  .social-surface-header,
  .trending-header {
    min-height: 58px;
    padding: 0 14px;
  }

  .chat-header h1,
  .discover-header h1,
  .social-surface-header h1,
  .trending-header h1 {
    font-size: 21px;
  }

  .social-surface-header .secondary-button {
    min-height: 40px;
    font-size: 12px;
  }

  .chat-toolbar {
    min-height: 54px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .segmented-control button {
    min-height: 44px;
    font-size: 12px;
  }

  .discover-search {
    min-height: 48px;
  }

  .discover-search kbd {
    display: none;
  }

  .discover-search input,
  .chat-compose-row textarea,
  .message-form textarea,
  .field input,
  .field textarea,
  .field select,
  .trending-category select,
  .discover-controls select {
    font-size: 16px;
  }

  .discover-controls {
    min-width: 0;
    min-height: 66px;
    gap: 8px;
    padding: 9px 12px;
  }

  .discover-controls > label {
    min-width: 116px;
  }

  .discover-controls > label > span {
    display: none;
  }

  .discover-controls select,
  .trending-category select {
    min-height: 44px;
  }

  .person-card {
    min-height: 82px;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }

  .trending-controls {
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
  }

  .trending-category {
    min-width: 116px;
  }

  .period-control {
    width: 100%;
  }

  .leaderboard-labels,
  .leaderboard-row {
    grid-template-columns: 38px minmax(0, 1fr) 52px 72px;
    gap: 8px;
  }

  .leaderboard-labels {
    padding: 14px 12px 8px;
    font-size: 10px;
  }

  .leaderboard-row {
    min-height: 72px;
    padding: 9px 12px;
  }

  .leaderboard-identity .avatar {
    width: 34px;
    height: 34px;
  }

  .leaderboard-copy strong,
  .leaderboard-score strong {
    font-size: 12px;
  }

  .leaderboard-copy small,
  .leaderboard-score small {
    font-size: 10px;
  }

  .trending-method,
  .trending-history-block > header,
  .trending-history {
    padding-right: 14px;
    padding-left: 14px;
  }

  .board-header {
    min-height: 54px;
    padding: 8px 14px;
  }

  .board-title {
    font-size: clamp(27px, 9vw, 34px);
  }

  .board-info {
    min-height: 218px;
    padding: 20px 18px 22px;
  }

  .feed-section {
    padding-top: 18px;
  }

  .feed-header {
    min-height: 54px;
    padding-bottom: 10px;
  }

  .feed-header h2 {
    font-size: 20px;
  }

  .live-toggle {
    min-width: 82px;
    min-height: 44px;
  }

  .drop-card {
    padding-top: 16px;
  }

  .drop-title {
    font-size: 20px;
  }

  .drop-description {
    font-size: 15px;
  }

  .action-button,
  .more-button {
    min-width: 44px;
    height: 44px;
  }

  .mobile-bottom-nav > button {
    min-height: 48px;
    font-size: 12px;
  }

  .auth-tabs button {
    font-size: 12px;
  }

  .profile-body {
    padding: 18px 16px calc(30px + env(safe-area-inset-bottom));
  }

  .profile-section {
    margin-right: -14px;
    margin-left: -14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .upload-action {
    display: inline-flex;
  }

  .composer-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .composer-dialog[open] {
    animation: none;
  }

  .composer-dialog .composer {
    height: 100%;
  }

  .composer-dialog .dialog-header {
    min-height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0;
  background: var(--surface-composer);
  }

  .composer-dialog .composer-scroll {
    max-height: calc(100dvh - 56px - env(safe-area-inset-top));
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  }

  .composer-dialog .composer-author {
    padding-bottom: 14px;
  }

  .composer-dialog .field textarea {
    min-height: 88px;
  }

  .composer-dialog .composer-category {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 150px);
  }

  .composer-dialog .upload-field-copy small {
    max-width: min(46vw, 180px);
  }

  .composer-dialog .upload-action {
    display: inline-flex;
  }
}



@media (max-width: 360px) {
  /* Discover keeps search one tap away on the smallest Home screens. */
  body[data-view="all"] .mobile-search-wrap {
    display: none;
  }

  .discover-controls {
    align-items: stretch;
    flex-direction: row;
  }

  .discover-controls .segmented-control {
    flex: 1 1 0;
    min-width: 0;
  }

  .discover-controls > label {
    flex: 0 0 144px;
    min-width: 0;
  }

  .discover-controls select {
    width: 100%;
    min-width: 0;
  }

  .discover-controls .segmented-control button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 5px;
  }

  .discover-controls > label > span {
    display: none;
  }

  .leaderboard-labels,
  .leaderboard-row {
    grid-template-columns: 34px minmax(0, 1fr) 68px;
  }

  .leaderboard-labels span:nth-child(3),
  .trend-movement {
    display: none;
  }

  .leaderboard-score {
    grid-column: 3;
  }

  .mobile-header {
    padding-left: 12px;
  }

  .brand-mobile .brand-logo {
    width: 28px;
    height: 28px;
  }
}

/* Drop conversations */
.comments-dialog {
  height: min(760px, calc(100dvh - 32px));
}

.comments-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
}

.comments-status {
  padding: 28px 20px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.comments-status[hidden] {
  display: none;
}

.comments-dialog > .comments-shell > .form-error {
  margin: 10px 16px 0;
}

.comments-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px 0 12px;
  scrollbar-color: var(--border-strong) transparent;
}

.comments-list:empty {
  padding: 0;
}

.drop-comment {
  padding-right: 18px;
  padding-left: 18px;
}

.drop-comment .translation-control {
  margin-top: 5px;
}

.comments-more[aria-disabled="true"],
.drop-comment [data-comment-action="pin"][aria-disabled="true"] {
  opacity: .6;
  cursor: wait;
}

.comments-more {
  justify-self: center;
  margin: 5px 16px 10px;
}

.comments-composer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.comments-composer textarea {
  width: 100%;
  min-height: 46px;
  max-height: 132px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.comments-composer textarea:focus {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.comments-composer .publish-button {
  min-width: 68px;
  min-height: 46px;
}

.comments-composer .form-error {
  grid-column: 1 / -1;
}

.flow-author-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-author-line .flow-author {
  flex: 0 1 auto;
}

.flow-follow {
  min-width: 70px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #09090a;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-shadow: none;
}

.flow-follow:hover {
  background: #fff;
}

.flow-follow.is-following {
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
}

.flow-follow:disabled,
.flow-follow[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.68;
}

@media (hover: none) {
  .drop-comment .chat-message-actions {
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .comments-dialog {
    width: 100%;
    height: min(82dvh, 760px);
    max-height: calc(100dvh - 12px);
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  .comments-dialog .dialog-header {
    min-height: 68px;
  }

  .drop-comment {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 10px 12px;
  }

  /* Below this width the third column wins the argument: with three controls it
     claimed 132px of a 292px row and left the comment itself 80px, so the meta broke
     onto three lines and the text broke mid-phrase. The controls drop under the text
     instead, aligned with it, and the comment gets the full column. Measured at 320px
     before this: main 80px, actions 132px. */
  .drop-comment {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .drop-comment .chat-message-actions {
    grid-column: 2;
    align-items: center;
    margin-left: -6px;
  }

  .drop-comment .avatar,
  .drop-comment .chat-avatar-button {
    width: 36px;
    height: 36px;
  }

  .comments-composer {
    padding-right: 12px;
    padding-left: 12px;
  }

  .flow-author-line {
    gap: 8px;
  }

  .flow-follow {
    min-width: 66px;
    min-height: 40px;
  }
}

@media (max-width: 700px) {
  .board-queue {
    padding: 0;
  }

  .board-queue-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .board-queue-candidate {
    width: 128px;
    min-width: 128px;
    min-height: 44px;
    scroll-snap-align: start;
  }
}

/* FLOW: one public 9:16 video world, synchronized NOW, and 24-hour Stories. */
body[data-view="flow"] {
  height: 100dvh;
  overflow: hidden;
}

body[data-view="flow"] .app-shell,
body[data-view="flow"] .workspace,
body[data-view="flow"] .content-grid,
body[data-view="flow"] .main-column {
  min-height: 0;
}

body[data-view="flow"] .app-shell,
body[data-view="flow"] .workspace,
body[data-view="flow"] .content-grid {
  height: 100dvh;
}

body[data-view="flow"] .content-grid {
  padding-bottom: 24px;
  overflow: hidden;
}

body[data-view="flow"] .main-column {
  height: 100%;
}

.flow-section {
  height: 100%;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px 8px;
}

.flow-header > div {
  min-width: 0;
}

.flow-header h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.055em;
}

.flow-header p {
  max-width: 620px;
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.flow-chat-shortcut {
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.flow-chat-shortcut svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.flow-tabs,
.story-lenses {
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.flow-tabs::-webkit-scrollbar,
.story-lenses::-webkit-scrollbar {
  display: none;
}

.flow-tabs button,
.story-lenses button {
  min-width: max-content;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.flow-tabs button:hover,
.story-lenses button:hover,
.flow-tabs button:focus-visible,
.story-lenses button:focus-visible {
  color: var(--text);
  background: var(--surface-soft);
}

.flow-tabs button.is-active,
.story-lenses button.is-active {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
}

.story-lenses {
  padding-bottom: 8px;
}

.flow-section > .discover-loading,
.flow-section > .service-error,
.flow-section > .feed-empty {
  position: absolute;
  grid-row: 4 / 5;
  grid-column: 1 / -1;
  z-index: 8;
  top: 16px;
  right: 18px;
  left: 18px;
}

.flow-feed,
.flow-now,
.flow-stories,
.flow-history {
  grid-row: 4;
  min-height: 0;
}

.flow-header { grid-row: 1; }
.flow-tabs { grid-row: 2; }
.story-lenses { grid-row: 3; }

.flow-pagination {
  grid-row: 5;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 6px 2px;
}

.flow-pagination p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.flow-pagination p.is-empty { display: none; }

.flow-pagination .button-row { flex-wrap: wrap; }
.flow-pagination button { min-height: 44px; }

.getting-started-dialog { width: min(540px, calc(100vw - 24px)); }
.getting-started-steps { padding-left: 24px; margin: 18px 0; }
.getting-started-steps li { padding: 0 0 16px 4px; }
.getting-started-steps h3 { margin: 0 0 6px; font-size: 17px; }
.getting-started-steps p,
.discovery-explainer p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.getting-started-steps button { margin-top: 4px; }
.discovery-explainer summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 15px; }
.discovery-explainer summary:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.flow-feed {
  display: grid;
  grid-auto-rows: 100%;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

.flow-card {
  width: min(100%, 500px);
  min-width: 0;
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: #050506;
  color: #fff;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.flow-feed > .flow-card {
  height: 100%;
  aspect-ratio: auto;
}

.flow-visual,
.flow-video,
.flow-image {
  width: 100%;
  height: 100%;
}

.flow-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050506;
}

.flow-video,
.flow-image {
  object-fit: cover;
}

.flow-audio-art {
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.74);
  background: radial-gradient(circle at 40% 30%, #383840, #151519 58%, #050506);
  font-size: clamp(38px, 8vw, 72px);
  font-weight: 800;
}

.flow-audio {
  width: calc(100% - 32px);
  position: absolute;
  right: 16px;
  bottom: 176px;
  left: 16px;
  z-index: 3;
}

.flow-playback {
  min-width: 44px;
  min-height: 44px;
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(5, 5, 6, 0.58);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
}

.flow-media-error {
  position: absolute;
  z-index: 5;
  top: 72px;
  right: 16px;
  left: 16px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(12, 12, 14, 0.94);
  color: #fff;
}

.flow-media-error[hidden] { display: none; }
.flow-media-error p { margin: 0; font-size: 13px; line-height: 1.5; }
.flow-media-error .flow-media-retry {
  justify-self: start;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
}
.flow-media-retry[aria-disabled="true"] { opacity: 0.65; }

.flow-overlay {
  min-width: 0;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 64px;
  left: 0;
  display: grid;
  gap: 8px;
  padding: 48px 80px 8px 18px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22) 20%, rgba(0, 0, 0, 0.9) 100%);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.72);
}

.flow-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.flow-stage,
.flow-position,
.flow-rank {
  padding: 2px 0;
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.flow-stage {
  color: #fff;
}

.flow-author {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
}

.flow-author > span:last-child {
  min-width: 0;
  display: grid;
}

.flow-author strong,
.flow-author small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-author small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
}

.flow-overlay h2,
.flow-overlay p {
  margin: 0;
}

.flow-overlay h2 {
  overflow: hidden;
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-overlay > p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.flow-drop-link {
  color: inherit;
  text-decoration: none;
}

.flow-drop-link:hover,
.flow-drop-link:focus-visible {
  text-decoration: underline;
}

.flow-overlay .translation-control {
  width: max-content;
  max-width: 100%;
  color: #fff;
}

.flow-actions {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 76px;
  width: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.flow-actions button {
  min-width: 44px;
  min-height: 52px;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: inherit;
}

.flow-actions button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(0, 0, 0, 0.4);
}

.flow-transcript {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 4px;
  background: rgba(5, 5, 6, 0.75);
  color: #fff;
  font-size: 12px;
}

.media-transcript {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 4px;
  background: rgba(5, 5, 6, 0.75);
  color: #fff;
  font-size: 12px;
}

.drop-media-item:has(audio) .media-transcript {
  position: static;
  margin: 0 12px 8px;
  background: transparent;
  color: var(--text);
}

.flow-actions button.is-reacted {
  background: rgba(255, 255, 255, 0.18);
}

.flow-actions svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}

.flow-actions .reaction-heart.is-reacted svg {
  fill: currentColor;
}

.flow-now {
  overflow: hidden;
}

.flow-now-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: stretch;
  gap: 14px;
}

.flow-now-stage .flow-card {
  height: 100%;
  aspect-ratio: 9 / 16;
  justify-self: end;
}

.flow-now-live {
  position: absolute;
  z-index: 6;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 100px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 2px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(5, 5, 6, 0.7);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.flow-live-label {
  font-weight: 850;
  letter-spacing: 0.08em;
}

.flow-now-countdown {
  font-variant-numeric: tabular-nums;
}

.flow-now-audience {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.72);
}

.flow-live-chat {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
}

.flow-live-chat > header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

.flow-live-chat > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flow-live-chat > header strong {
  font-size: 12px;
}

.flow-live-chat > header small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-live-chat > header button {
  min-height: 40px;
  flex: 0 0 auto;
  font-size: 9px;
}

.flow-chat-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 6px 12px;
}

.flow-chat-message {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.flow-chat-message header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
}

.flow-chat-author {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-chat-message time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 8px;
}

.flow-chat-message p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.flow-chat-composer {
  padding: 9px;
  border-top: 1px solid var(--border);
}

.flow-chat-composer > .secondary-button {
  width: 100%;
  min-height: 44px;
}

.flow-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
}

.flow-chat-form textarea {
  min-width: 0;
  min-height: 44px;
  max-height: 88px;
  resize: none;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 10px;
}

.flow-chat-form button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.flow-chat-form button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.flow-chat-form .form-error {
  grid-column: 1 / -1;
  margin: 0;
}

.flow-now-empty,
.flow-history-gate {
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 32px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  color: var(--text-muted);
  text-align: center;
}

.flow-now-empty strong,
.flow-history-gate h2 {
  margin: 0;
  color: var(--text);
}

.flow-now-empty p,
.flow-history-gate p {
  max-width: 420px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.flow-stories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  padding: 2px 2px 22px;
}

.story-card {
  min-width: 0;
}

.story-card .flow-card {
  width: 100%;
  aspect-ratio: 9 / 16;
}

.story-card .flow-overlay {
  padding: 76px 76px 14px 14px;
}

.story-footer {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 3px 0;
  color: var(--text-muted);
  font-size: 10px;
}

.story-footer button {
  min-height: 44px;
}

.flow-history {
  overflow-y: auto;
  padding-bottom: 22px;
}

.flow-history-row {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
}

.flow-history-copy {
  min-width: 0;
}

.flow-history-copy h3,
.flow-history-copy p,
.flow-history-row p,
.flow-history-row small {
  margin: 0;
}

.flow-history-copy h3 {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-history-copy p,
.flow-history-row small {
  color: var(--text-muted);
  font-size: 10px;
}

.flow-history-row > strong {
  color: var(--text);
  font-size: 12px;
}

.flow-history-facts,
.flow-history-row > small {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  body[data-view="flow"] .content-grid {
    padding-bottom: 24px;
  }
}

@media (max-width: 820px) {
  body[data-view="flow"] {
    padding-bottom: 0;
  }

  body[data-view="flow"] .workspace {
    overflow: hidden;
  }

  body[data-view="flow"] .content-grid {
    height: calc(100dvh - var(--mobile-header-height, 58px) - var(--mobile-nav-height, 62px));
    padding: 0;
  }

  body[data-view="flow"] .main-column {
    height: 100%;
  }

  body[data-view="flow"] .room-now-mobile {
    display: none;
  }

  .flow-section {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    background: var(--bg);
  }

  .flow-pagination {
    grid-row: 5;
    gap: 4px 10px;
    padding: 4px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
  }

  .flow-pagination p {
    flex: 1 1 60px;
    font-size: 12px;
  }

  .flow-pagination .button-row {
    width: auto;
    gap: 4px;
    margin: 0;
  }

  .flow-pagination button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 auto;
    padding: 8px;
    font-size: 13px;
  }

  .flow-header {
    min-height: 44px;
    position: static;
    align-items: center;
    padding: 0 12px;
    background: var(--bg);
    color: var(--text);
  }

  .flow-header > div {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .flow-header h1 {
    font-size: 17px;
  }

  .flow-header p {
    display: none;
  }

  .flow-chat-shortcut {
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--text);
  }

  .flow-tabs {
    min-height: 44px;
    position: static;
    justify-content: flex-start;
    padding: 0 10px;
    margin-bottom: 0;
    background: var(--bg);
  }

  .flow-tabs button,
  .story-lenses button {
    min-height: 44px;
    color: var(--text-muted);
  }

  .flow-tabs button.is-active,
  .story-lenses button.is-active {
    border-color: var(--text);
    background: transparent;
    color: var(--text);
  }

  .story-lenses {
    min-height: 44px;
    position: static;
    padding: 0 10px;
    margin-bottom: 0;
    background: var(--bg);
  }

  .flow-feed,
  .flow-now,
  .flow-stories,
  .flow-history {
    grid-row: 4;
    width: 100%;
    height: 100%;
  }

  .flow-feed {
    gap: 0;
    scrollbar-width: none;
  }

  .flow-feed::-webkit-scrollbar {
    display: none;
  }

  .flow-feed > .flow-card,
  .flow-now-stage .flow-card {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
  }

  .flow-now {
    overflow-y: auto;
  }

  .flow-now-stage {
    display: grid;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max(440px, calc(100dvh - 209px)) 280px;
    gap: 0;
  }

  .flow-now-stage .flow-card {
    justify-self: auto;
  }

  .flow-live-chat {
    width: 100%;
    height: 280px;
    position: static;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
  }

  .flow-live-chat > header,
  .flow-chat-composer,
  .flow-chat-message {
    border-color: var(--border);
  }

  .flow-live-chat > header strong,
  .flow-live-chat .flow-chat-author {
    color: var(--text);
  }

  .flow-live-chat > header small,
  .flow-chat-message time,
  .flow-chat-message p {
    color: var(--text-muted);
  }

  .flow-chat-form textarea {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
  }

  .flow-card {
    box-shadow: none;
  }

  .flow-overlay {
    padding: 40px 76px 8px 12px;
  }

  .flow-context {
    padding-right: 0;
  }

  .flow-now-live {
    top: 14px;
  }

  .flow-now-empty,
  .flow-history-gate {
    padding-top: 24px;
    border: 0;
    border-radius: 0;
    background: var(--bg);
  }

  .flow-stories,
  .flow-history {
    padding: 16px 12px 20px;
    overflow-y: auto;
    background: var(--bg);
  }

  .flow-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .story-card .flow-overlay {
    padding: 24px 10px 6px;
  }

  .story-card .flow-context,
  .story-card .flow-actions,
  .story-card .flow-overlay > p {
    display: none;
  }

  .story-card .flow-overlay h2 {
    font-size: 14px;
  }

  .story-card .flow-author .avatar {
    width: 30px;
    height: 30px;
  }

  .flow-section > .discover-loading,
  .flow-section > .service-error,
  .flow-section > .feed-empty {
    z-index: 12;
    top: 16px;
  }

}

.story-pagination {
  grid-column: 1 / -1;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
}

.story-pagination p { margin: 0; }
.story-pagination .button-row { width: auto; margin: 0; gap: 8px; }
.story-pagination button { min-height: 44px; padding: 8px 12px; }

.flow-card.is-text {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.flow-card.is-text .flow-visual { display: none; }

.flow-card.is-text .flow-overlay {
  position: static;
  flex: 1;
  align-content: start;
  gap: 14px;
  padding: 20px;
  background: none;
  text-shadow: none;
}

.flow-card.is-text .flow-context:empty { display: none; }
.flow-card.is-text .flow-context,
.flow-card.is-text .flow-stage,
.flow-card.is-text .flow-position,
.flow-card.is-text .flow-rank { color: var(--text-muted); }
.flow-card.is-text .flow-author { color: var(--text); }
.flow-card.is-text .flow-author small { color: var(--text-muted); }
.flow-card.is-text .flow-follow {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text);
}

.flow-card.is-text .flow-overlay h2 {
  display: -webkit-box;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 20px;
  line-height: 1.3;
}

.flow-card.is-text .flow-overlay > p {
  display: -webkit-box;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 6;
}

.flow-card.is-text .flow-overlay .translation-control { color: var(--text); }
.flow-text-open {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-underline-offset: 4px;
}
.flow-text-open:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.flow-card.is-text .flow-actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  width: auto;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid var(--border);
  text-shadow: none;
}
.flow-card.is-text .flow-actions button { min-height: 48px; color: var(--text); }
.flow-card.is-text .flow-actions svg { filter: none; width: 24px; height: 24px; }
.flow-card.is-text .flow-actions button.is-reacted { background: var(--surface-active); }
.flow-card.is-text .flow-actions button:focus-visible { outline-color: var(--text); background: var(--surface-active); }
.story-card:has(> .flow-card.is-text) { align-self: start; }
.story-card .flow-card.is-text { height: auto; aspect-ratio: auto; }

@media (max-width: 520px) {
  .flow-stories {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 12px 20px;
    /* Snapping to a moving footer jumps past newly appended Stories. */
    scroll-snap-type: none;
  }

  .story-card {
    flex: 0 0 max(486px, 100%);
    display: grid;
    grid-template-rows: minmax(0, 1fr) 46px;
  }

  .story-card:has(> .flow-card.is-text) { flex: 0 0 auto; display: block; }

  .story-card .flow-card {
    height: 100%;
    aspect-ratio: auto;
  }

  .story-card .flow-overlay {
    padding: 40px 76px 8px 12px;
  }

  .story-card .flow-actions {
    display: grid;
  }

  .story-card .flow-overlay > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }

  .story-card .flow-overlay h2 {
    font-size: 18px;
  }

  .story-card .flow-author .avatar {
    width: 36px;
    height: 36px;
  }

  .story-footer {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .flow-header h1 {
    font-size: 15px;
  }

  .flow-chat-shortcut {
    font-size: 12px;
  }

  .flow-chat-shortcut svg {
    width: 19px;
    height: 19px;
  }

  .flow-tabs button,
  .story-lenses button {
    padding-right: 12px;
    padding-left: 12px;
  }

}

/* A short viewport scrolls the page; video controls keep their own space. */
@media (max-height: 700px) {
  body[data-view="flow"] {
    height: auto;
    overflow: visible;
  }

  body[data-view="flow"] .workspace,
  body[data-view="flow"] .content-grid,
  body[data-view="flow"] .main-column {
    height: auto;
    overflow: visible;
  }

  .flow-section {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto auto auto;
  }

  .flow-feed {
    height: auto;
    min-height: 440px;
    grid-auto-rows: 440px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .flow-now,
  .flow-stories,
  .flow-history {
    min-height: 440px;
  }
}

@media (max-height: 700px) and (max-width: 820px) {
  body[data-view="flow"] .content-grid {
    padding-bottom: calc(var(--mobile-nav-height, 62px) + 2px);
  }

  .flow-live-chat {
    scroll-margin-bottom: var(--mobile-nav-height, 62px);
  }
}

@media (max-height: 700px) and (max-width: 520px) {
  .flow-stories {
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
  }

  .story-card { flex-basis: 486px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-feed {
    scroll-behavior: auto;
    scroll-snap-type: y proximity;
  }
}

.translation-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
}

.translation-label {
  min-width: 0;
}

.translation-toggle {
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 700;
}

.translation-toggle:hover,
.translation-toggle:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
}

.translation-preferences {
  display: grid;
  gap: 12px;
  margin: 4px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.translation-preferences legend {
  padding: 0 6px;
  color: var(--text);
  font-weight: 800;
}

.preference-toggle {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.preference-toggle input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.preference-toggle span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.preference-toggle strong {
  color: var(--text);
  font-size: 0.9rem;
}

.preference-toggle small,
.translation-privacy-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.direct-message .translation-control {
  justify-content: flex-end;
  margin: 6px 2px 0;
}

.direct-message:not(.is-mine) .translation-control {
  justify-content: flex-start;
}

.moderation-translation {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.moderation-translation h4,
.moderation-translation p,
.moderation-translation small {
  margin: 0;
}

.moderation-translation small {
  color: var(--text-secondary);
}

@media (max-width: 420px) {
  .translation-control {
    align-items: flex-start;
    flex-direction: column;
  }

  .translation-toggle {
    width: auto;
  }
}

/* v0.6 connected surfaces: compact live context, galleries, records, and staff tools. */
.room-tools-mobile {
  display: none;
}

.room-tools-mobile > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  list-style: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
}

.room-tools-mobile > summary::-webkit-details-marker {
  display: none;
}

.room-now {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.room-now button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.room-now button:hover {
  background: var(--surface-hover);
}

.room-now button + button {
  border-top: 1px solid var(--border);
}

.room-now button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent-hover);
  outline-offset: -2px;
}

.room-now span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.room-now strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-now-mobile {
  display: none;
}

.room-now-desktop {
  display: grid;
  min-height: 146px;
  margin-bottom: 14px;
}

.chat-typing {
  min-height: 20px;
  padding: 3px 2px 1px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-typing[hidden] {
  display: block !important;
  visibility: hidden;
}

.drop-title-link {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.drop-title-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.discovery-rank-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.discovery-rank-meta strong {
  flex: 0 0 auto;
  color: var(--accent-hover);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.discovery-rank-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.exposure-panel {
  display: grid;
  gap: 7px;
  margin: 12px 16px 2px 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.exposure-heading {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.exposure-heading strong {
  font-size: 11px;
}

.exposure-heading .text-button {
  min-width: 44px;
  min-height: 32px;
}

.exposure-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hidden, not removed, while there is nothing to open: the heading keeps its size. */
.exposure-actions .text-button:disabled {
  visibility: hidden;
}

/* A guest's first post, drawn by the server before startup.js runs (app/shell.py), stands in for
   the loading skeleton; on a device with its own Home choice the skeleton stays instead. */
/* Only while the drawn card is still the server's: once the client adopts it the marker goes, and
   the skeleton behaves as before for every later read. */
:root:not([data-home-custom]) #feed-loading[data-server-card]:has(~ #feed > [data-server-drawn]) {
  display: none;
}

:root[data-home-custom] #feed > [data-server-drawn] {
  display: none;
}

/* One status line in every state; Details shows it whole with the rest. */
.exposure-panel .exposure-line {
  margin: 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.exposure-panel.is-open .exposure-line {
  white-space: normal;
}

.exposure-panel .exposure-line.is-error {
  color: var(--danger-text);
}

.exposure-more {
  display: grid;
  gap: 7px;
}

.exposure-more[hidden] {
  display: none;
}

.exposure-panel p,
.exposure-panel small {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.exposure-panel .is-complete {
  color: var(--positive);
  font-weight: 750;
}

.exposure-panel progress {
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  accent-color: var(--accent);
  background: var(--border);
}

.exposure-panel progress::-webkit-progress-bar {
  background: var(--border);
}

.exposure-panel progress::-webkit-progress-value {
  background: var(--accent);
}

.drop-media-gallery {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  overflow: hidden;
  background: var(--border);
}

.drop-media-gallery.is-multiple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drop-media-item {
  min-width: 0;
  min-height: 0;
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface-soft);
}

.drop-media-gallery:not(.is-multiple) .drop-media-item {
  max-height: min(640px, 72vh);
}

.drop-media-gallery.is-multiple .drop-media-item {
  aspect-ratio: 1 / 1;
}

.drop-media-item img,
.drop-media-item video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.drop-media-gallery:not(.is-multiple) .drop-media-item img,
.drop-media-gallery:not(.is-multiple) .drop-media-item video {
  height: auto;
  max-height: min(640px, 72vh);
  object-fit: contain;
}

.drop-media-item audio {
  width: calc(100% - 24px);
  display: block;
  margin: 18px 12px;
}

.drop-media-item.has-image-error { position: relative; }
.drop-media-item.has-image-error:not([data-gallery-active="false"]) { min-height: 132px; }
.drop-media-item.has-image-error > img { visibility: hidden; }
.image-recovery {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  text-align: center;
}
.image-recovery[hidden] { display: none; }
.image-recovery button { min-height: 44px; }

.drop-media-gallery.is-nonprimary-only {
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.composer-gallery {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.composer-gallery:empty {
  display: none;
}

.composer-gallery-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
}

.composer-gallery-preview {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 10px;
}

.composer-gallery-preview img,
.composer-gallery-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer-gallery-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.composer-gallery-copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-gallery-copy textarea {
  width: 100%;
  min-height: 44px;
  resize: vertical;
}

.gallery-accessibility {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--border);
}

.gallery-accessibility summary {
  min-height: 44px;
  padding: 12px 0;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}

.gallery-accessibility-field {
  display: grid;
  gap: 6px;
  padding: 8px 0;
}

.gallery-accessibility-field label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.composer-gallery-copy textarea,
.gallery-accessibility-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.gallery-accessibility-field textarea:disabled {
  opacity: 0.6;
}

.gallery-accessibility-field .metric-note { margin: 0; }
.gallery-accessibility-field button { justify-self: start; min-height: 44px; }
.gallery-accessibility-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.gallery-accessibility-field .metric-note.is-error { color: var(--danger); }

.composer-gallery-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.composer-gallery-actions button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.composer-gallery-actions button:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text);
}

.composer-gallery-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.composer-gallery-actions svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-move-down svg {
  transform: rotate(180deg);
}

.world-choropleth {
  min-width: 0;
  display: grid;
  gap: 12px;
  margin: 0;
}

.world-map-visual {
  width: 100%;
  position: relative;
  aspect-ratio: 2000 / 1001;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-inset);
}

.world-map-image,
.world-map-activity {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
}

.world-map-image {
  opacity: 0.22;
  filter: invert(1);
}

.world-map-activity {
  pointer-events: none;
}

.world-country-shape {
  fill: var(--border-strong);
  stroke: var(--map-stroke);
  stroke-width: 1.1px;
  vector-effect: non-scaling-stroke;
}

.world-country-shape.activity-level-1 {
  fill: #713b2a;
}

.world-country-shape.activity-level-2 {
  fill: #a64d31;
}

.world-country-shape.activity-level-3 {
  fill: #d9653f;
}

.world-country-shape.activity-level-4 {
  fill: #ff9878;
}

.world-country.activity-level-1 {
  border-left: 3px solid #713b2a;
}

.world-country.activity-level-2 {
  border-left: 3px solid #a64d31;
}

.world-country.activity-level-3 {
  border-left: 3px solid #d9653f;
}

.world-country.activity-level-4 {
  border-left: 3px solid #ff9878;
}

.world-choropleth figcaption {
  margin: 0;
  line-height: 1.5;
}

.world-choropleth figcaption a {
  color: inherit;
  text-underline-offset: 2px;
}

.capsule-date-controls {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 12px;
}

.capsule-date-controls label {
  min-width: 0;
}

.capsule-date-controls input {
  width: 100%;
  min-height: 44px;
}

.board-history-actions {
  flex-wrap: wrap;
}

.connected-staff-stack {
  display: grid;
  gap: 14px;
}

.connected-staff-tools {
  display: grid;
  gap: 10px;
}

.staff-tools-heading {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.staff-tools-heading .secondary-button,
.staff-tools-heading .danger-button {
  min-height: 44px;
}

.staff-tool-list {
  display: grid;
}

.staff-tool-row {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.staff-tool-row:first-child {
  border-top: 0;
}

.staff-tool-row > strong,
.staff-tool-row > p {
  margin: 0;
  overflow-wrap: anywhere;
}

.staff-tool-row > p {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.staff-private-note {
  padding: 7px 9px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-soft);
}

.staff-tool-row .compact-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 4px;
}

.staff-tool-row .compact-actions button {
  min-height: 44px;
}

.staff-capsule-form {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(140px, 0.8fr) minmax(220px, 1.4fr) auto;
  align-items: end;
  gap: 8px;
}

.staff-capsule-form > * {
  min-width: 0;
}

.poll-report-action {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 1180px) {
  body[data-view="all"]:not(.is-shared-drop):not(.is-personal-view) .room-tools-mobile:not([hidden]) {
    display: block;
    margin-top: 24px;
    border-top: 1px solid var(--border);
  }

  .room-now-desktop {
    display: none;
  }

  .room-now-mobile {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    margin-bottom: 12px;
  }

  .room-now-mobile button + button {
    border-top: 1px solid var(--border);
  }

  body[data-view="chat"] .main-column {
    flex-direction: column;
  }

  body[data-view="chat"] .chat-section {
    min-height: 0;
    flex: 1 1 auto;
  }
}

@media (max-width: 820px) {
  .room-now-mobile {
    margin-right: 0;
    margin-left: 0;
  }

  .exposure-panel {
    margin-right: 12px;
    margin-left: 52px;
  }

  .staff-capsule-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-capsule-form > :nth-last-child(-n + 2) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .room-now-mobile {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .room-now-mobile button {
    min-height: 44px;
    padding: 6px 8px;
  }

  .room-now-mobile strong {
    font-size: 14px;
  }

  .discovery-rank-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .exposure-panel {
    margin: 10px 12px 2px;
  }

  .drop-media-gallery.is-multiple {
    gap: 1px;
  }

  .composer-gallery-item {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .composer-gallery-preview {
    width: 54px;
    height: 54px;
  }

  .composer-gallery-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .world-country-list {
    grid-template-columns: 1fr;
  }

  .capsule-date-controls,
  .staff-capsule-form {
    grid-template-columns: 1fr;
  }

  .capsule-date-controls > *,
  .staff-capsule-form > *,
  .staff-capsule-form > :nth-last-child(-n + 2) {
    grid-column: auto;
  }

  .staff-tools-heading {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-country-shape,
  .room-now button,
  .drop-media-item {
    transition: none !important;
  }
}

/* Chat is a viewport surface: the transcript scrolls while its composer stays available. */
.room-presence {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.room-presence strong {
  color: inherit;
  font: inherit;
}

body[data-view="chat"] {
  height: 100dvh;
  overflow: hidden;
}

body[data-view="chat"] .app-shell,
body[data-view="chat"] .workspace,
body[data-view="chat"] .content-grid,
body[data-view="chat"] .main-column {
  min-height: 0;
}

body[data-view="chat"] .app-shell,
body[data-view="chat"] .workspace,
body[data-view="chat"] .content-grid {
  height: 100dvh;
}

body[data-view="chat"] .content-grid {
  padding-bottom: 0;
  overflow: hidden;
}

body[data-view="chat"] .main-column {
  height: 100%;
  display: flex;
}

body[data-view="chat"] .chat-section {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
}

body[data-view="chat"] .chat-toolbar {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}

body[data-view="chat"] .chat-transcript {
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body[data-view="chat"] .chat-messages {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  padding-bottom: 14px;
  overflow-y: auto;
}

body[data-view="chat"] .chat-loading,
body[data-view="chat"] .chat-empty {
  flex: 1 1 auto;
}

body[data-view="chat"] .chat-transcript > .service-error {
  margin: 14px;
}

body[data-view="chat"] .chat-new-messages {
  position: absolute;
  right: 16px;
  bottom: 14px;
  float: none;
  margin: 0;
}

body[data-view="chat"] .chat-composer {
  position: relative;
  inset: auto;
  z-index: 3;
  padding: 12px 0 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* Keep the conversation readable and inline emotes inside the text line. */
#chat .chat-message {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 10px 16px;
}

#chat .chat-message-meta {
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 0;
  line-height: 20px;
}

#chat .chat-author {
  max-width: 100%;
  min-height: 24px;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
  text-align: left;
}

#chat .chat-message-meta span {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 20px;
}

#chat .chat-message-body {
  margin-top: 2px;
  font-size: 15px;
  line-height: 24px;
}

#chat .chat-compose-row {
  gap: 8px;
}

#chat .chat-compose-row textarea {
  min-width: 0;
  min-height: 44px;
  padding: 11px 0;
  font-size: 15px;
  line-height: 22px;
}

@media (min-width: 1181px) {
  body[data-view="chat"] .chat-section {
    max-width: 1080px;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  #chat .chat-message {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px;
  }

  #chat .chat-avatar-button,
  #chat .chat-message .avatar {
    width: 36px;
    height: 36px;
  }

  /* Touch actions stay available without taking half the message's width. */
  #chat .chat-message-actions {
    grid-column: 2;
    justify-self: end;
    opacity: 1;
  }

  #chat .chat-message-actions:empty {
    display: none;
  }

}

@media (max-width: 820px) {
  #chat .chat-compose-row textarea {
    padding: 10px 0;
    font-size: 16px;
    line-height: 24px;
  }

  body[data-view="chat"] {
    padding-bottom: 0;
  }

  body[data-view="chat"] .workspace {
    overflow: hidden;
  }

  body[data-view="chat"] .content-grid {
    height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-top: 0;
    padding-bottom: 0;
  }

  body[data-view="chat"] .chat-section {
    width: calc(100% + 28px);
    margin-right: -14px;
    margin-left: -14px;
  }

  body[data-view="chat"] .chat-toolbar {
    padding-right: 12px;
    padding-left: 12px;
  }

  body[data-view="chat"] .chat-messages {
    padding-bottom: 14px;
  }

  body[data-view="chat"] .chat-composer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  body[data-view="chat"] .chat-new-messages {
    right: 12px;
    bottom: 12px;
  }
}

/* Native chat emotes: compact like a mature live-chat composer, with motion under user control. */
.chat-composer,
.message-form {
  position: relative;
}

.chat-compose-row {
  padding-left: 6px;
}

.message-form {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.emote-trigger {
  width: 44px;
  height: 44px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.emote-trigger:hover,
.emote-trigger[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--text);
}

.emote-trigger:focus-visible,
.emote-option:focus-visible,
.emote-motion-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.emote-trigger:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.emote-trigger svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.emote-picker {
  width: min(340px, calc(100% - 24px));
  max-height: min(390px, calc(100dvh - 180px));
  position: absolute;
  z-index: 40;
  right: 12px;
  bottom: calc(100% + 8px);
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-unread);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  color: var(--text);
}

.emote-picker-header {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.emote-picker-header strong {
  font-size: 13px;
}

.emote-motion-toggle {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.emote-motion-toggle:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.emote-search {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-inset);
}

.emote-search:focus-within {
  border-color: var(--border-strong);
}

.emote-search svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.8;
}

.emote-search input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.emote-search input::placeholder {
  color: var(--text-muted);
}

.emote-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: 220px;
  margin-top: 10px;
  padding: 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.emote-option-wrap {
  min-width: 0;
}

.emote-option {
  width: 100%;
  min-height: 66px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.emote-option:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.emote-picker-hint,
.emote-empty {
  color: var(--text-muted);
  font-size: 9px;
}

.emote-picker-hint {
  margin: 9px 2px 0;
}

.emote-picker-hint code {
  color: var(--text-secondary);
  font: inherit;
  font-weight: 750;
}

.emote-empty {
  grid-column: 1 / -1;
  margin: 16px 0;
  text-align: center;
}

.chat-emote {
  --emote-animation: none;
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  margin: 0;
  transform-origin: 50% 70%;
  vertical-align: -0.12em;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 1.15em;
  line-height: 1.25;
  text-align: center;
  user-select: none;
  animation: var(--emote-animation);
}

.emote-option .chat-emote {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 25px;
  vertical-align: middle;
}

.chat-emote-hype { --emote-animation: emote-hype 1.05s ease-in-out infinite; }
.chat-emote-love { --emote-animation: emote-pulse 1.2s ease-in-out infinite; }
.chat-emote-clap { --emote-animation: emote-clap 0.82s ease-in-out infinite; }
.chat-emote-lol { --emote-animation: emote-bounce 1.15s ease-in-out infinite; }
.chat-emote-hello { --emote-animation: emote-wave 1.3s ease-in-out infinite; }
.chat-emote-wow { --emote-animation: emote-pop 1.25s ease-in-out infinite; }
.chat-emote-gg { --emote-animation: emote-win 1.45s ease-in-out infinite; }
.chat-emote-go { --emote-animation: emote-launch 1.35s ease-in-out infinite; }

.emote-motion-off .chat-emote {
  animation: none;
}

@keyframes emote-hype {
  0%, 100% { transform: translateY(1px) scale(0.96) rotate(-2deg); }
  50% { transform: translateY(-2px) scale(1.08) rotate(2deg); }
}

@keyframes emote-pulse {
  0%, 100% { transform: scale(0.94); }
  45% { transform: scale(1.12); }
}

@keyframes emote-clap {
  0%, 100% { transform: rotate(-7deg) translateX(-1px); }
  50% { transform: rotate(7deg) translateX(1px); }
}

@keyframes emote-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-4px); }
}

@keyframes emote-wave {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(14deg); }
  70% { transform: rotate(-9deg); }
}

@keyframes emote-pop {
  0%, 100% { transform: scale(0.94); }
  32% { transform: scale(1.12); }
  55% { transform: scale(1); }
}

@keyframes emote-win {
  0%, 100% { transform: translateY(1px) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes emote-launch {
  0%, 100% { transform: translate(-1px, 1px) rotate(-5deg); }
  48% { transform: translate(3px, -4px) rotate(4deg); }
}

@media (max-width: 820px) {
  .emote-picker {
    width: auto;
    right: 10px;
    left: 10px;
    max-height: min(380px, calc(100dvh - 170px));
  }

  .emote-search {
    min-height: 44px;
  }

  .emote-search input {
    font-size: 16px;
  }

  .emote-option {
    min-height: 68px;
  }
}

/* Account sections */
.account-section-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 0;
  padding-bottom: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.account-section-tabs::-webkit-scrollbar {
  display: none;
}

.account-section-tabs button {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.account-section-tabs button:hover,
.account-section-tabs button:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
}

.account-section-tabs button.is-active {
  background: var(--surface-raised);
  color: var(--text);
}

.account-section-panel[hidden] {
  display: none;
}

.appearance-settings {
  padding: 18px 0;
}

.appearance-settings > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.appearance-settings > header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.appearance-settings > header p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
}

.appearance-settings > header > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-choice-group {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.theme-choice {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.theme-choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.theme-choice > span {
  display: grid;
  gap: 2px;
  color: var(--text);
}

.theme-choice:hover,
.theme-choice:has(input:checked) {
  background: var(--surface-soft);
}

.theme-choice strong,
.theme-choice small {
  overflow-wrap: anywhere;
}

.theme-choice strong {
  font-size: 16px;
}

.theme-choice small {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.theme-status {
  min-height: 21px;
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.account-panel-header,
.security-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-panel-header {
  min-height: 72px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.account-panel-header > .text-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
}

.account-panel-header h3,
.security-block h4 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.account-panel-header p,
.security-block header p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
}

.security-block {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.security-block > header {
  margin-bottom: 10px;
}

.security-list {
  display: grid;
}

.security-row {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.security-row > button {
  white-space: nowrap;
}

.security-row:first-child {
  border-top: 0;
}

.security-row .federated-provider-button {
  min-width: 92px;
}

.identity-connected {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
}

.security-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.security-row-copy strong,
.security-row-copy span,
.security-row-copy time {
  overflow: hidden;
  text-overflow: ellipsis;
}

.security-row-copy strong {
  color: var(--text);
  font-size: 12px;
}

.security-row-copy span,
.security-row-copy time {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.4;
}

.security-form-block {
  border-bottom: 1px solid var(--border);
}

.security-form-block > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.security-form-block > .auth-form {
  padding: 0 0 18px;
}

.security-notice {
  width: 100%;
  min-height: 68px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.security-notice:first-child {
  border-top: 0;
}

.security-notice.is-unread {
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 10px;
}

.security-notice:disabled {
  cursor: default;
  opacity: 0.75;
}

@media (max-width: 390px) {
  .federated-provider-list {
    grid-template-columns: 1fr;
  }

  .account-section-tabs {
    margin-right: -2px;
    margin-left: -2px;
  }

  .account-section-tabs button {
    padding-right: 10px;
    padding-left: 10px;
  }

  .security-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Commerce */
.purchase-list,
.creator-collection,
.creator-summary,
.creator-setup {
  border-bottom: 1px solid var(--border);
}

.purchase-row,
.creator-item-row,
.creator-setup-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.purchase-row:first-child,
.creator-setup-row:first-child,
.creator-item-row:first-of-type {
  border-top: 0;
}

.purchase-copy,
.creator-item-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.purchase-copy strong,
.creator-item-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-copy span,
.purchase-copy time,
.creator-item-copy span,
.creator-item-copy small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.purchase-actions,
.creator-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.purchase-actions a {
  text-decoration: none;
}

.creator-summary,
.creator-collection {
  padding: 18px 0;
}

.creator-summary h4,
.creator-collection h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.creator-collection > header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.creator-summary-rows {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.creator-summary-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 48px repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

.creator-summary-row:first-child {
  border-top: 0;
}

.creator-summary-row strong {
  color: var(--text);
  font-size: 11px;
}

.creator-summary-row span {
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.3;
}

.profile-status-panel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.profile-status-panel strong {
  color: var(--text);
  font-size: 12px;
}

.profile-status-panel span {
  color: var(--text-secondary);
  font-size: 10px;
}

.profile-offers {
  border-bottom: 1px solid var(--border);
}

.profile-offers > header {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.profile-offers h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.profile-offer-list {
  padding: 0 20px;
}

.profile-offer-row {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.profile-offer-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-offer-copy strong,
.profile-offer-copy span,
.profile-offer-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-offer-copy strong {
  color: var(--text);
  font-size: 13px;
}

.profile-offer-copy span {
  color: var(--text-secondary);
  font-size: 10px;
}

.profile-offer-copy b {
  color: var(--text);
  font-size: 11px;
}

.offer-form,
.sponsor-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.offer-form > .utility-copy,
.offer-form > .form-error,
.offer-form > button,
.sponsor-form > .utility-copy,
.sponsor-form > .form-error,
.sponsor-form > button {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .purchase-row,
  .creator-item-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-actions,
  .creator-item-actions {
    justify-content: flex-start;
  }

  .creator-summary-row {
    grid-template-columns: 46px repeat(2, minmax(0, 1fr));
  }

  .creator-summary-row strong { grid-column: 1; grid-row: 1 / span 3; }
  .creator-summary-row span:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .creator-summary-row span:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .creator-summary-row span:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .creator-summary-row span:nth-of-type(4) { grid-column: 3; grid-row: 2; }
  .creator-summary-row span:nth-of-type(5) { grid-column: 2 / -1; grid-row: 3; }

  .offer-form,
  .sponsor-form {
    grid-template-columns: 1fr;
  }

  .profile-offer-row {
    min-height: 88px;
  }
}

.admin-security,
.admin-sponsor-queue {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.admin-security > h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.admin-integrity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.admin-integrity.is-valid {
  border-color: color-mix(in srgb, var(--positive) 35%, transparent);
}

.admin-integrity.is-invalid {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}

.admin-integrity strong {
  font-size: 12px;
}

.admin-integrity span {
  color: var(--text-secondary);
  font-size: 10px;
}

.sponsor-review .button-row {
  justify-content: flex-end;
}

.sponsor-destination {
  overflow-wrap: anywhere;
}

.sponsor-destination a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sponsor-destination strong {
  color: var(--danger);
}

.profile-safety-menu {
  position: relative;
}

.profile-safety-menu summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.profile-safety-menu summary::-webkit-details-marker {
  display: none;
}

.profile-safety-menu summary:hover,
.profile-safety-menu[open] summary {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
}

.profile-safety-menu summary svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.profile-safety-menu-list {
  width: 176px;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.profile-safety-menu-list button {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

.profile-safety-menu-list button:hover,
.profile-safety-menu-list button:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
}

.profile-safety-menu-list button.is-danger {
  color: var(--danger-text);
}

.board-sponsor-label {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 8px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.board-card.is-sponsored {
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.profile-section .profile-rank-banner {
  margin: 0;
  padding: 16px 20px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.profile-stats strong {
  font-size: 18px;
}

.profile-stats span {
  font-size: 10px;
}

.profile-rank-copy strong {
  font-size: 13px;
}

.profile-rank-copy small,
.profile-board-count {
  font-size: 11px;
}

.profile-actions > button,
.chat-toolbar .text-button {
  min-height: 44px;
}

.chat-toolbar .text-button {
  padding: 0 8px;
}

.chat-compose-row textarea {
  min-height: 44px;
}

.mobile-search-wrap input {
  height: 44px;
}

.composer-dialog .upload-field-copy small,
.composer-dialog .composer-policy,
.composer-dialog .upload-action {
  font-size: 11px;
}

/* Connected discovery surfaces */
.discover-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
  -webkit-overflow-scrolling: touch;
}

.discover-tabs::-webkit-scrollbar {
  display: none;
}

.discover-tabs button {
  flex: 0 0 auto;
  min-width: 70px;
  min-height: 44px;
  padding: 0 14px;
  scroll-snap-align: start;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.discover-tabs button:hover,
.discover-tabs button:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
}

.discover-tabs button.is-active {
  border-bottom-color: var(--text);
  background: transparent;
  color: var(--text);
}

#discover-search-tools[hidden],
.world-surface[hidden],
.records-surface[hidden] {
  display: none;
}

.discover-surface-note {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 12px;
}

.world-surface,
.records-surface {
  margin: 0 -18px;
  border-top: 1px solid var(--border);
}

.utility-view-tabs {
  min-width: 0;
  display: flex;
  gap: 22px;
  padding: 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.utility-view-tabs::-webkit-scrollbar {
  display: none;
}

.utility-view-tabs button {
  position: relative;
  min-width: 44px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.utility-view-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  content: "";
}

.utility-view-tabs button:hover,
.utility-view-tabs button:focus-visible,
.utility-view-tabs button.is-active {
  color: var(--text);
}

.utility-view-tabs button.is-active::after {
  background: var(--text);
}

.world-panel {
  padding: 22px 18px;
  border-bottom: 1px solid var(--border);
}

.utility-card-list {
  display: grid;
}

.utility-card {
  min-width: 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.utility-card:first-child {
  border-top: 0;
}

.utility-card h4,
.utility-detail-heading h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.utility-eyebrow {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.utility-card-copy,
.utility-detail-heading > p,
.utility-response > p {
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.utility-card-meta {
  display: block;
  margin-top: 9px;
  color: var(--text-secondary);
  font-size: 10px;
}

.utility-card-actions,
.compact-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.utility-card-actions .publish-button,
.utility-card-actions .secondary-button,
.compact-actions .secondary-button {
  min-height: 44px;
  padding: 0 15px;
}

.utility-dialog-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.utility-detail-heading {
  min-width: 0;
}

.utility-own-response,
.utility-state-note {
  margin: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.utility-own-response strong {
  color: var(--text);
  font-size: 12px;
}

.utility-own-response p {
  margin: 6px 0;
  overflow-wrap: anywhere;
}

.utility-state-note.is-counted {
  border-color: color-mix(in srgb, var(--positive) 30%, transparent);
  color: var(--text);
}

.utility-state-note.is-discounted {
  color: var(--text-secondary);
}

.utility-inline-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}

.utility-inline-filters label {
  min-width: 0;
  display: grid;
  flex: 1 1 150px;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 10px;
}

.utility-inline-filters select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
}

.utility-answer-form {
  display: grid;
  gap: 12px;
}

.utility-primary-action {
  width: max-content;
  max-width: 100%;
}

.utility-response-list {
  display: grid;
}

.utility-response-list > h4,
.capsule-archive > h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 13px;
}

.utility-response {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.utility-response strong {
  color: var(--text);
  font-size: 12px;
}

.utility-response > span {
  color: var(--text-secondary);
  font-size: 10px;
}

.poll-options {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.poll-option {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.poll-option:not(:disabled):hover,
.poll-option:not(:disabled):focus-visible,
.poll-option.is-selected {
  border-color: var(--border-strong);
}

.poll-option:disabled {
  cursor: default;
  opacity: 1;
}

.poll-option-fill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  max-width: 100%;
  background: var(--poll-fill);
  pointer-events: none;
}

.poll-option.is-selected .poll-option-fill {
  background: var(--poll-selected-fill);
}

.poll-option strong,
.poll-option > span:last-child {
  position: relative;
  z-index: 1;
}

.poll-option strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poll-option > span:last-child {
  color: var(--text-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.utility-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.utility-facts span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 10px;
}

.collaboration-interest-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.collaboration-interest-row .utility-response {
  border-top: 0;
}

.collaboration-interest-row .compact-actions {
  justify-content: flex-end;
  margin: 0;
}

.world-panel-header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.world-panel-header h3,
.my-records h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.world-panel-header > .text-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
}

.world-panel-header > .compact-actions {
  flex-wrap: nowrap;
  margin-top: 0;
}

.world-panel-header > .compact-actions .text-button,
.world-panel-header > .compact-actions .secondary-button {
  min-height: 44px;
}

.world-metrics,
.my-record-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.world-metric {
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border-right: 1px solid var(--border);
}

.world-metric:last-child {
  border-right: 0;
}

.world-metric strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.world-metric span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-panel > .metric-note {
  margin: 10px 0 0;
}

.world-feature-title {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 18px;
}

.world-moment-panel > p,
.world-feature-meta span {
  color: var(--text-secondary);
  font-size: 12px;
}

.world-feature-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.world-feature-meta strong {
  color: var(--text);
  font-size: 14px;
}

.utility-entry-state {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.utility-entry-state .text-button {
  min-height: 42px;
}

.world-panel .drop-card {
  margin: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.world-country-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.world-country {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.world-country:hover,
.world-country:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

.world-country strong {
  font-size: 13px;
}

.world-country span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.world-region {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.world-region:hover,
.world-region:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
}

.world-lens {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.world-lens h4 {
  margin: 0 0 12px;
  font-size: 14px;
}

.utility-empty {
  margin: 0;
  padding: 16px 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.utility-dialog {
  width: min(440px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 24px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
}

.utility-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.utility-dialog .dialog-header {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--surface-raised);
}

.share-layouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.share-layout-button {
  min-width: 0;
  min-height: 82px;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.share-layout-button:hover,
.share-layout-button:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

.share-layout-button span {
  color: var(--text-secondary);
  font-size: 10px;
}

.record-toolbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
}

.record-toolbar .text-button {
  min-height: 44px;
}

.capsule-revisions summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.utility-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.utility-form-inner {
  display: grid;
  gap: 12px;
}

.utility-form select,
.utility-form input {
  width: 100%;
  min-height: 44px;
}

.utility-copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.utility-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}

.utility-success {
  color: var(--text);
  font-size: 15px;
}

.records-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.record-view-tabs {
  min-width: 0;
}

.board-history-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.board-history-row > time {
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.board-history-row.is-removed {
  opacity: 0.7;
}

.capsule-list {
  display: grid;
  gap: 8px;
}

.capsule-list > .utility-card {
  padding-top: 0;
}

.capsule-list .capsule-metrics {
  margin-top: 16px;
}

.capsule-categories {
  margin-top: 12px;
}

.capsule-archive {
  display: grid;
  margin-top: 10px;
}

.capsule-row,
.capsule-record-button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.capsule-row:hover,
.capsule-row:focus-visible,
.capsule-record-button:hover,
.capsule-record-button:focus-visible {
  color: var(--accent);
}

.capsule-row strong,
.capsule-record-button {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capsule-row span,
.capsule-record-line {
  color: var(--text-secondary);
  font-size: 10px;
}

.capsule-record-line {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.records-controls > label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 11px;
}

.records-controls select {
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.my-records {
  padding: 18px;
  border-bottom: 1px solid var(--border);
}

.my-records h3 {
  margin-bottom: 12px;
}

.my-records .my-record-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.my-records .world-metric {
  border-right: 1px solid var(--border);
}

.my-records .world-metric:last-child {
  border-right: 0;
}

.my-record-list {
  margin-top: 12px;
}

.my-record-list p {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
}

.record-focus {
  margin: 16px 18px 0;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.record-list {
  padding: 0 18px 18px;
}

.record-period {
  margin: 0;
  padding: 14px 0;
  color: var(--text-secondary);
  font-size: 11px;
}

.record-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.record-rank {
  color: var(--text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.record-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 0;
}

.record-copy[role="button"] {
  cursor: pointer;
}

.record-copy strong,
.record-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-copy strong {
  color: var(--text);
  font-size: 13px;
}

.record-copy span {
  color: var(--text-secondary);
  font-size: 11px;
}

.record-row.is-removed {
  opacity: 0.7;
}

@media (max-width: 620px) {
  .discover-tabs {
    margin-right: -14px;
    margin-left: -14px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .discover-tabs button {
    min-width: auto;
    padding-right: 12px;
    padding-left: 12px;
  }

  .world-surface,
  .records-surface {
    margin-right: 0;
    margin-left: 0;
  }

  .utility-view-tabs {
    padding-right: 14px;
    padding-left: 14px;
  }

  .world-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .world-metric:nth-child(2) {
    border-right: 0;
  }

  .world-metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .world-country-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .records-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .records-controls .segmented-control {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .records-controls .segmented-control::-webkit-scrollbar { display: none; }

  .records-controls .segmented-control button {
    min-width: 72px;
    flex: 1 0 auto;
  }

  .records-controls > label {
    flex: 1 1 130px;
  }

  .records-controls select {
    min-width: 0;
    flex: 1 1 auto;
  }

  .record-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .collaboration-interest-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .collaboration-interest-row .compact-actions {
    justify-content: flex-start;
    margin: -4px 0 12px;
  }

  .board-history-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }
}

@media (max-width: 360px) {
  .world-country-list {
    grid-template-columns: 1fr;
  }

  .world-feature-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .record-row .text-button {
    width: 44px;
    overflow: hidden;
    color: transparent;
    position: relative;
  }

  .record-row .text-button::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    content: "↗";
  }
}

/* Quiet overlays: spacing separates content; borders mark actual inputs and focus. */
html:has(dialog[open]) {
  overflow: hidden;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  line-height: 1.5;
}

dialog::backdrop,
.utility-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.dialog-header {
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 0;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) h2 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.composer-dialog .dialog-header h2 {
  font-size: 20px;
}

.composer-dialog .dialog-header .publish-button {
  min-height: 48px;
  font-size: 15px;
}

.composer-dialog .upload-field-copy small {
  font-size: 12px;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .dialog-header p,
.small-dialog header p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.profile-form {
  max-height: inherit;
  display: flex;
  flex-direction: column;
}

.profile-form > .dialog-header {
  flex-shrink: 0;
}

#account-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: clip;
}

#account-dialog .profile-form {
  flex: 1 1 auto;
  max-height: none;
}

.emote-picker-header strong {
  font-size: 16px;
}

.emote-motion-toggle {
  min-height: 44px;
  font-size: 13px;
}

.emote-search {
  min-height: 44px;
}

.emote-search:focus-within {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.emote-search input {
  font-size: 16px;
}

.share-layouts {
  grid-template-columns: 1fr;
  gap: 4px;
}

.share-layout-button {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 0;
  background: transparent;
  font-size: 16px;
  text-align: left;
}

.share-layout-button span {
  font-size: 14px;
}

:is(.profile-dialog, .comments-dialog, .admin-dialog) .dialog-header {
  grid-template-columns: minmax(0, 1fr) 44px;
}

:is(.profile-dialog, .comments-dialog, .admin-dialog) .dialog-header > .dialog-icon-button {
  grid-column: 2;
  grid-row: 1;
}

:is(.profile-dialog, .comments-dialog, .admin-dialog) .dialog-header > div {
  grid-column: 1;
  grid-row: 1;
}

.profile-body {
  min-height: 0;
  padding: 8px 28px 28px;
  overscroll-behavior: contain;
}

.small-dialog {
  padding: 24px;
}

.appearance-dialog > header {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.appearance-dialog .appearance-settings {
  padding: 8px 0 0;
}

.appearance-settings > header h3,
.account-panel-header h3,
.security-block h4 {
  font-size: 18px;
}

.appearance-settings > header p,
.account-panel-header p,
.security-block header p,
.security-row-copy span,
.security-row-copy time {
  font-size: 14px;
  line-height: 1.5;
}

.security-row-copy strong {
  font-size: 16px;
}

.comments-composer textarea {
  font-size: 16px;
  line-height: 1.5;
}

.sheet-dialog .feed-empty p {
  font-size: 14px;
  line-height: 1.5;
}

.profile-avatar-wrap > span:last-child,
.profile-dialog .upload-field-copy small {
  font-size: 14px;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) :is(.publish-button, .secondary-button, .danger-button, .text-button, .federated-provider-button) {
  min-height: 48px;
  font-size: 15px;
  line-height: 1.4;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .secondary-button {
  border-color: var(--border-control);
  background: transparent;
  color: var(--text);
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .secondary-button:hover {
  background: var(--surface-hover);
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field > span {
  font-size: 15px;
  font-weight: 600;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field > span small {
  font-size: 13px;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field :is(input, select, textarea) {
  min-height: 48px;
  font-size: 16px;
  line-height: 1.5;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) :is(.field-note, .form-error, .profile-note, .translation-privacy-note, .utility-copy, .utility-empty, .utility-state-note, .utility-own-response, .identity-connected) {
  font-size: 14px;
  line-height: 1.6;
}

.profile-dialog .auth-tabs button,
.profile-dialog .account-section-tabs button {
  min-height: 48px;
  font-size: 15px;
}

.auth-form .auth-switch {
  justify-self: start;
  padding: 0 4px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth-form h3 {
  margin: 0;
  font-size: 20px;
}

.guest-settings-link {
  display: none;
}

.auth-form .field-note {
  margin: -8px 0 0;
}

.account-shortcuts {
  gap: 4px;
  margin-bottom: 14px;
}

.account-shortcuts button {
  border: 0;
  background: transparent;
  font-size: 14px;
}

.account-section-tabs {
  gap: 4px;
  margin-top: 0;
  padding-bottom: 0;
}

.account-section-tabs button {
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.account-section-tabs button.is-active {
  border-bottom-color: var(--text);
  background: transparent;
}

.translation-preferences {
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.translation-preferences legend {
  padding-right: 12px;
  font-size: 18px;
}

.preference-toggle strong {
  font-size: 16px;
}

.preference-toggle small {
  font-size: 14px;
  line-height: 1.5;
}

.utility-dialog .dialog-header {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.utility-dialog-body,
.utility-form {
  gap: 20px;
  padding: 8px 24px 24px;
}

.utility-own-response,
.utility-state-note {
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-summary,
.analytics-panel,
.admin-overview,
.admin-users,
.report-review {
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.report-icon {
  display: none;
}

.action-menu,
.profile-safety-menu-list,
.emote-picker {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

.action-menu {
  width: 240px;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.action-menu button,
.profile-safety-menu-list button {
  min-height: 48px;
  height: auto;
  padding: 12px;
  gap: 14px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

.action-menu button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.board-queue {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

@media (max-width: 820px) {
  .profile-dialog:has(#guest-account:not([hidden])) .dialog-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 68px;
  }

  .profile-dialog:has(#guest-account:not([hidden])) .dialog-header > div {
    flex: 1 1 max-content;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .profile-dialog:has(#guest-account:not([hidden])) .dialog-header > .dialog-icon-button {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .guest-settings-link {
    display: block;
    grid-column: 2;
    grid-row: 1;
    padding: 0 4px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

@media (max-width: 600px) {
  .profile-dialog {
    width: calc(100vw - 24px);
    height: fit-content;
    max-height: calc(100dvh - 24px);
    margin: auto;
  }

  .profile-dialog .dialog-header {
    padding: 16px;
  }

  .profile-body {
    padding: 8px 18px 24px;
  }

  .profile-dialog .auth-tabs {
    gap: 8px;
  }

  .profile-dialog .auth-tabs button {
    padding-right: 2px;
    padding-left: 2px;
  }

  .profile-dialog .account-section-tabs {
    flex-wrap: wrap;
    overflow: visible;
  }

  .profile-dialog .account-section-tabs button {
    flex: 1 1 30%;
    padding: 0 8px;
    font-size: 14px;
  }

  .account-shortcuts button {
    min-height: 48px;
    padding: 8px 4px;
    white-space: nowrap;
  }

  .account-shortcuts button svg {
    display: none;
  }

  .small-dialog {
    padding: 20px;
  }

  .utility-dialog .dialog-header {
    padding: 16px;
  }

  .utility-dialog-body,
  .utility-form {
    padding-right: 18px;
    padding-left: 18px;
  }

  .small-dialog footer {
    flex-wrap: wrap;
  }

  .small-dialog footer > button {
    flex: 1 1 auto;
  }
}

/* Messages owns the workspace; inbox and transcript scroll independently. */
body[data-view="messages"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

body[data-view="messages"] .app-shell,
body[data-view="messages"] .workspace,
body[data-view="messages"] .content-grid,
body[data-view="messages"] .main-column {
  height: 100%;
  min-height: 0;
  min-width: 0;
}

body[data-view="messages"] .content-grid {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body[data-view="messages"] .right-rail { display: none; }

body[data-view="messages"] #messages {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

body[data-view="messages"] #messages-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(300px, 24vw, 340px) minmax(0, 1fr);
  overflow: hidden;
}

body[data-view="messages"] #messages-shell .conversation-pane {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface-deep);
}

#messages .messages-inbox-header {
  min-height: 80px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}

#messages-title { margin: 0 auto 0 0; font-size: 24px; letter-spacing: -0.04em; }

#messages .messages-new-button,
#messages .messages-clear-button {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

#messages .messages-new-button:hover,
#messages .messages-clear-button:hover { background: var(--surface-hover); }

#messages .messages-new-button svg,
#messages .messages-search-field svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

#messages .messages-search-tools { flex: 0 0 auto; padding: 0 16px 14px; }

#messages .messages-search-field {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
}

#messages .messages-search-field:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

#messages-search {
  width: 100%;
  min-width: 0;
  height: 44px;
  flex: 1 1 auto;
  padding: 0 12px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

#messages-search::-webkit-search-cancel-button { display: none; }
#messages .messages-clear-button { border: 0; background: transparent; }
#messages .messages-search-hint { margin: 7px 2px 0; color: var(--text-muted); font-size: 12px; }

#messages .messages-inbox,
#messages .messages-search-panel {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

#messages .conversation-scroll,
#messages .messages-search-panel {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

#messages .conversation-scroll { min-height: 0; flex: 1 1 auto; }
#messages .conversation-list { align-content: start; }

#messages .conversation-item,
#messages .message-person {
  min-height: 84px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
}

#messages .conversation-item.is-active {
  box-shadow: inset 3px 0 var(--accent);
  background: var(--surface-active);
}

#messages .avatar-small { width: 44px; height: 44px; }
#messages .conversation-copy { gap: 5px; }
#messages .conversation-copy strong { font-size: 14px; }
#messages .conversation-copy span { font-size: 13px; }
#messages .conversation-count { min-width: 22px; height: 22px; font-size: 11px; }
#messages .social-more { min-height: 44px; margin: 16px; width: calc(100% - 32px); }
#messages .conversation-empty { min-height: 240px; gap: 12px; padding: 32px 20px; }
#messages .conversation-empty strong { font-size: 15px; }
#messages .conversation-empty span { max-width: 230px; font-size: 13px; }
#messages-loading { padding: 20px 16px; }
#messages-error { margin: 0 16px 16px; padding: 16px; }

#messages .messages-search-status { margin: 0; padding: 16px; color: var(--text-secondary); font-size: 13px; }
#messages .messages-search-status:empty { display: none; }
#messages-search-error { margin: 16px; }
#messages-search-retry,
#messages-search-more { min-height: 44px; flex: 0 0 auto; margin: 12px 16px 16px; }
#messages .messages-search-results { display: grid; align-content: start; }

#messages .message-person {
  width: 100%;
  display: grid;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

#messages .message-person:hover { background: var(--surface-hover); }
#messages .message-person-copy { min-width: 0; display: grid; gap: 4px; }
#messages .message-person-copy strong,
#messages .message-person-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#messages .message-person-copy strong { font-size: 14px; }
#messages .message-person-copy span { color: var(--text-muted); font-size: 13px; }
#messages .message-person-action { color: var(--link); font-size: 12px; font-weight: 600; }

body[data-view="messages"] #messages-shell .message-thread {
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: var(--bg);
}

#messages .message-thread-empty {
  height: 100%;
  min-height: 0;
  gap: 16px;
  padding: 40px;
}

#messages .message-thread-empty > svg { width: 48px; height: 48px; color: var(--text-secondary); }
#messages .message-thread-empty h3 { font-size: 24px; letter-spacing: -0.035em; }
#messages .message-thread-empty p { max-width: 300px; font-size: 15px; }
#messages-empty-new { min-height: 44px; margin-top: 8px; padding-inline: 20px; }

body[data-view="messages"] #message-thread-content {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#messages .message-thread-header {
  min-height: 80px;
  gap: 10px;
  padding: 12px 24px;
  background: var(--surface);
}

#messages .message-participant { min-width: 0; gap: 12px; padding: 0; }
#messages .message-participant > span:last-child { min-width: 0; gap: 3px; }
#messages .message-participant strong,
#messages .message-participant small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#messages .message-participant strong { font-size: 16px; }
#messages .message-participant small { font-size: 13px; }
#messages .message-request:not([hidden]) { padding: 16px 24px; }
#messages .message-request-copy p { font-size: 13px; }
#messages-older { min-height: 44px; justify-self: center; margin: 8px 16px; }

#messages .message-list {
  min-height: 0;
  max-height: none;
  gap: 14px;
  padding: 24px 32px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

#messages .direct-message { max-width: min(80%, 640px); flex: 0 0 auto; padding: 12px 16px 4px; }
#messages .direct-message p { font-size: 15px; line-height: 1.6; }
#messages .direct-message footer { margin-top: 4px; font-size: 11px; }
#messages .direct-message footer button { min-width: 44px; min-height: 44px; justify-content: center; }

#messages .message-form {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  padding: 16px 24px max(16px, env(safe-area-inset-bottom));
  background: var(--surface);
}

#messages .message-form textarea {
  min-width: 0;
  min-height: 46px;
  max-height: min(180px, 30dvh);
  padding: 10px 14px;
  background: var(--surface-deep);
  font-size: 16px;
  line-height: 24px;
}

#messages .message-form .chat-send,
#messages .emote-trigger,
#messages-back { width: 44px; height: 44px; flex: 0 0 auto; }
#messages button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

@media (max-width: 1100px) {
  body[data-view="messages"] #messages-shell { grid-template-columns: minmax(0, 1fr); }
  body[data-view="messages"] #messages-shell .conversation-pane { border-right: 0; }
  body[data-view="messages"] #messages-shell .message-thread { display: none; }
  body[data-view="messages"] #messages-shell.has-thread .conversation-pane { display: none; }
  body[data-view="messages"] #messages-shell.has-thread .message-thread { display: block; }
  #messages-back { display: grid; margin-right: 0; }
}

/* An empty inbox has no conversation to show, so the inbox owns the whole surface.
   Mirrors the single-column shell that <=1100px already gets. The id is required:
   body[data-view="messages"] #messages-shell (1,1,1) outranks any bare class here. */
@media (min-width: 1101px) {
  body[data-view="messages"] #messages-shell.is-empty:not(.has-thread) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="messages"] #messages-shell.is-empty:not(.has-thread) .conversation-pane {
    border-right: 0;
  }

  body[data-view="messages"] #messages-shell.is-empty:not(.has-thread) .message-thread {
    display: none;
  }
}

@media (max-width: 820px) {
  body[data-view="messages"] .workspace { display: flex; flex-direction: column; }
  body[data-view="messages"] .mobile-header { flex: 0 0 auto; }
  body[data-view="messages"] .content-grid {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin-bottom: calc(62px + env(safe-area-inset-bottom));
  }
  body[data-view="messages"].message-thread-open .content-grid { margin-bottom: 0; }
  #messages .messages-inbox-header { min-height: 72px; padding: 12px 16px; }
  #messages .message-thread-header { min-height: 72px; padding: 12px 16px; }
  body[data-view="messages"].message-thread-open .message-thread-header {
    min-height: calc(72px + env(safe-area-inset-top));
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  #messages .message-request:not([hidden]) { padding: 12px 16px; }
  #messages .message-list { padding: 16px; }
  #messages .direct-message { max-width: 88%; padding: 10px 12px 2px; }
  #messages .message-form { gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
}

/* Staff workspace: fixed chrome with one bounded, keyboard-scrollable section. */
#admin-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
}

#admin-dialog .admin-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

#admin-dialog .admin-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 28px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

#admin-dialog .admin-workspace-heading { min-width: 0; }
#admin-dialog .admin-workspace-heading h2 { margin: 0; font-size: 24px; line-height: 1.25; }
#admin-dialog .admin-status { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; }
#admin-dialog .admin-status:empty { display: none; }
#admin-dialog .admin-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
#admin-dialog .admin-header-actions > button { min-height: 44px; }
#admin-dialog .admin-header-actions .dialog-icon-button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; }
#admin-dialog #admin-refresh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#admin-dialog #admin-refresh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

#admin-dialog .admin-workspace-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#admin-dialog .admin-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 20px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-right: 1px solid var(--border);
  background: var(--surface-raised);
}

#admin-dialog .admin-section-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

#admin-dialog .admin-section-button:hover { background: var(--surface-hover); color: var(--text); }
#admin-dialog .admin-section-button:is(.is-active, [aria-pressed="true"]) { border-color: var(--border-strong); background: var(--surface-active); color: var(--text); }
#admin-dialog .admin-section-button:is(.is-active, [aria-pressed="true"])::before { content: ""; width: 3px; height: 20px; flex: 0 0 auto; border-radius: 2px; background: var(--accent); }
#admin-dialog .admin-section-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

#admin-dialog .admin-content {
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 28px 32px calc(32px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 24px;
}

#admin-dialog .admin-content:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#admin-dialog .admin-content > * { min-width: 0; }
#admin-dialog .admin-workspace-panel { display: grid; align-content: start; gap: 22px; min-width: 0; max-width: 1440px; margin-inline: auto; }
#admin-dialog .admin-workspace-panel[hidden] { display: none; }
#admin-dialog .admin-panel-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
#admin-dialog .admin-panel-header :is(h2, h3) { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; }
#admin-dialog .admin-panel-copy { flex-basis: 100%; min-width: 0; max-width: 72ch; margin: 0; color: var(--text-secondary); }
#admin-dialog .admin-panel-copy p { margin: 8px 0 0; color: var(--text-secondary); }

#admin-dialog .admin-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; gap: 12px; }
#admin-dialog .admin-filters :is(input, select) { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-control); color: var(--text); font: inherit; font-size: 14px; }
#admin-dialog .admin-filters label { display: grid; gap: 6px; min-width: 0; }
#admin-dialog .admin-filters label > span { color: var(--text-secondary); font-size: 13px; }
#admin-dialog [data-admin-panel="safety-reports"] .admin-filters select { height: 46px; padding-block: 0; }
#admin-dialog :is(.admin-report-group, .admin-report-list) { display: grid; gap: 14px; min-width: 0; }
#admin-dialog .admin-report-group > h4 { margin: 0; font-size: 18px; }
#admin-dialog .admin-load-more { justify-self: start; min-height: 44px; }
#admin-dialog :is(.admin-section-loading, .admin-section-empty, .admin-section-error) { padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
#admin-dialog .admin-section-loading { color: var(--text-secondary); }
#admin-dialog .admin-section-empty { color: var(--text-secondary); }
#admin-dialog .admin-section-error { border-color: var(--danger-panel-border); background: var(--danger-panel-bg); }
#admin-dialog :is(.admin-section-empty, .admin-section-error) :is(h3, p) { margin: 0 0 10px; }
#admin-dialog :is(.admin-section-empty, .admin-section-error) > :last-child { margin-bottom: 0; }

#admin-dialog :is(.admin-summary, .admin-overview, .analytics-panel, .admin-users, .admin-security, .admin-sponsor-queue, .connected-staff-tools, .admin-beta-access) { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
#admin-dialog .admin-queue { min-width: 0; gap: 16px; }
#admin-dialog .admin-queue-title { margin: 0; font-size: 18px; }
#admin-dialog :is(.admin-overview-grid, .analytics-grid) { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
#admin-dialog :is(.admin-overview-grid, .analytics-grid) > div { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
#admin-dialog :is(.admin-overview-grid, .analytics-grid) dt { font-size: 12px; line-height: 1.5; }
#admin-dialog :is(.admin-overview-grid, .analytics-grid) dd { font-size: 19px; overflow-wrap: anywhere; }

#admin-dialog .report-review { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
#admin-dialog .report-review > :is(h3, p, a, blockquote, .field, .moderation-translation, .button-row) { grid-column: 1 / -1; min-width: 0; }
#admin-dialog .report-review > :is(select, input, textarea) { width: 100%; min-width: 0; }
#admin-dialog .report-review > input[type="number"] { grid-column: 1; }
#admin-dialog .report-review > button[type="submit"] { grid-column: 1 / -1; justify-self: end; align-self: end; min-width: 160px; }
#admin-dialog .admin-report-reference { grid-column: 1 / -1; min-width: 0; }
#admin-dialog .admin-report-reference code { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; color: var(--text-secondary); }
#admin-dialog .report-review .report-evidence { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#admin-dialog .report-review .field > span { font-size: 13px; }
#admin-dialog .report-review .staff-note-field small { font-size: 12px; }
#admin-dialog .report-review :is(select, input, textarea) { min-height: 44px; font-size: 14px; }
#admin-dialog .report-review textarea { min-height: 88px; resize: vertical; }
#admin-dialog .moderation-outcome { grid-template-columns: auto minmax(0, 1fr); }
#admin-dialog .moderation-outcome code { grid-column: 1 / -1; }
#admin-dialog .admin-user-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 0; }
#admin-dialog .admin-user-row > * { min-width: 0; }
#admin-dialog .admin-user-row :is(select, input) { min-height: 44px; font-size: 14px; }
#admin-dialog :is(.admin-user-identity small, .admin-user-signals, .admin-history-row time) { font-size: 12px; overflow-wrap: anywhere; }
#admin-dialog :is(.publish-button, .secondary-button, .danger-button, .text-button, summary) { min-height: 44px; }
#admin-dialog .admin-history { padding: 12px 0; }
#admin-dialog .admin-history-row { min-width: 0; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr) auto; padding: 14px 0; }
#admin-dialog .admin-history-row > * { min-width: 0; overflow-wrap: anywhere; }
#admin-dialog .admin-beta-access { display: grid; gap: 18px; }
#admin-dialog .admin-beta-access > :is(h3, h4, p) { margin: 0; }
#admin-dialog .admin-beta-capacity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
#admin-dialog .admin-beta-capacity > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
#admin-dialog .admin-beta-capacity :is(dt, dd) { margin: 0; overflow-wrap: anywhere; }
#admin-dialog .admin-beta-capacity dt { color: var(--text-secondary); font-size: 12px; }
#admin-dialog .admin-beta-capacity dd { margin-top: 4px; font-size: 19px; }
#admin-dialog .admin-beta-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
#admin-dialog .admin-beta-form { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
#admin-dialog .admin-beta-form h4 { margin: 0; }
#admin-dialog .admin-beta-form :is(input, select) { width: 100%; min-width: 0; min-height: 44px; font-size: 14px; }
#admin-dialog .admin-beta-token { display: grid; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-active); }
#admin-dialog .admin-beta-token[hidden] { display: none; }
#admin-dialog .admin-beta-token > p { margin: 0; }
#admin-dialog .admin-beta-token input { width: 100%; min-width: 0; min-height: 44px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
#admin-dialog .admin-beta-grant-list { display: grid; gap: 10px; min-width: 0; }
#admin-dialog .admin-beta-grant-row { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(180px, 1fr) minmax(170px, .8fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 9px; }
#admin-dialog .admin-beta-grant-row > * { min-width: 0; overflow-wrap: anywhere; }
#admin-dialog .admin-beta-grant-row code { grid-column: 1 / -1; font-size: 12px; color: var(--text-secondary); }

@media (max-width: 900px) {
  #admin-dialog .admin-workspace-header { min-height: 76px; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px; }
  #admin-dialog .admin-workspace-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #admin-dialog .admin-sections { flex-direction: row; gap: 8px; padding: 10px 16px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); }
  #admin-dialog .admin-section-button { width: auto; min-height: 44px; padding: 10px 14px; white-space: nowrap; }
  #admin-dialog .admin-section-button:is(.is-active, [aria-pressed="true"])::before { display: none; }
  #admin-dialog .admin-content { padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  #admin-dialog .admin-workspace-panel { gap: 18px; }
}

@media (max-width: 600px) {
  #admin-dialog .admin-workspace-header { gap: 10px; padding-inline: 14px; }
  #admin-dialog .admin-workspace-heading h2 { font-size: 21px; }
  #admin-dialog .admin-status { font-size: 12px; }
  #admin-dialog .admin-header-actions { gap: 6px; }
  #admin-dialog #admin-refresh { padding: 10px; }
  #admin-dialog #admin-refresh svg { display: none; }
  #admin-dialog .admin-content { padding: 18px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
  #admin-dialog .admin-panel-header :is(h2, h3) { font-size: 21px; }
  #admin-dialog :is(.admin-summary, .admin-overview, .analytics-panel, .admin-users, .admin-security, .admin-sponsor-queue, .connected-staff-tools, .admin-beta-access, .report-review, .admin-section-loading, .admin-section-empty, .admin-section-error) { padding: 16px; }
  #admin-dialog .admin-filters { grid-template-columns: minmax(0, 1fr); }
  #admin-dialog .report-review { grid-template-columns: minmax(0, 1fr); }
  #admin-dialog .report-review > * { grid-column: 1 / -1; }
  #admin-dialog .report-review > button[type="submit"] { justify-self: stretch; min-width: 0; }
  #admin-dialog .admin-user-row { grid-template-columns: minmax(0, 1fr); }
  #admin-dialog :is(.admin-filters, .report-review, .admin-user-row) :is(input, textarea, select) { font-size: 16px; }
  #admin-dialog :is(.admin-overview-grid, .analytics-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #admin-dialog .admin-history-row { grid-template-columns: minmax(0, 1fr); }
  #admin-dialog .admin-history-row p { grid-column: 1; }
  #admin-dialog .admin-beta-capacity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #admin-dialog .admin-beta-forms, #admin-dialog .admin-beta-grant-row { grid-template-columns: minmax(0, 1fr); }
  #admin-dialog .admin-beta-grant-row code { grid-column: 1; }
}

/* Keep a failed project-updates section explicit without dominating other notifications. */
/* Server-authoritative identity badges: the name truncates, never the check. */
.identity-name.identity-name { display: inline-flex; align-items: center; vertical-align: middle; gap: .3em; min-width: 0; max-width: 100%; overflow: visible; }
.identity-name > .identity-name-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; }
.identity-name > .identity-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.05em; width: 1.05em; height: 1.05em; min-width: 14px; min-height: 14px; max-width: 26px; max-height: 26px; overflow: visible; vertical-align: middle; }
.identity-badge > svg { display: block; width: 100%; height: 100%; }
.identity-name > .identity-badge--blue { color: #2685f5; }
.identity-name > .identity-badge--yellow { color: #f5c842; }
.identity-name > .identity-badge--orange { color: #f29035; }
#messages .identity-name > .identity-name-text, #chat .identity-name > .identity-name-text { font: inherit; color: inherit; }
#messages .identity-name.identity-name { overflow: visible; }
#messages .identity-name > .identity-badge, #chat .identity-name > .identity-badge { font-size: inherit; overflow: visible; }
#messages .identity-name > .identity-badge--blue, #chat .identity-name > .identity-badge--blue { color: #2685f5; }
#messages .identity-name > .identity-badge--yellow, #chat .identity-name > .identity-badge--yellow { color: #f5c842; }
#messages .identity-name > .identity-badge--orange, #chat .identity-name > .identity-badge--orange { color: #f29035; }
.identity-badge--blue .identity-badge-check { stroke: #fff; }
.identity-badge--yellow .identity-badge-check, .identity-badge--orange .identity-badge-check { stroke: #21170b; }
.identity-attribution, .notification-identity { min-width: 0; }
.identity-attribution > .identity-name, .notification-identity > .identity-name { vertical-align: bottom; }
.notification-copy > .notification-identity { display: flex; flex-wrap: wrap; gap: 0 .25em; overflow: visible; white-space: normal; }
.notification-identity > span { font: inherit; color: inherit; }
#admin-dialog .admin-user-entry { min-width: 0; padding-bottom: 16px; }
#admin-dialog .admin-creator-badge { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--border); }
#admin-dialog .admin-creator-badge > .metric-note { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
#admin-dialog .creator-badge-action { min-height: 44px; border-color: #2685f5; }
@media (max-width: 600px) {
  #admin-dialog .admin-creator-badge { grid-template-columns: minmax(0, 1fr); }
  #admin-dialog .creator-badge-action { width: 100%; white-space: normal; }
}

#project-updates-error:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0; padding: 14px 16px; border-radius: 10px; }
#project-updates-error p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
#project-updates-error .secondary-button { flex: 0 0 auto; min-height: 44px; font-size: 13px; }

@media (max-width: 600px) {
  #project-updates-error:not([hidden]) { align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px; }
}

/* Public Chat fills its workspace; rooms and conversation have independent scroll. */
body[data-view="chat"] { height: 100dvh; min-height: 0; padding-bottom: 0; overflow: hidden; }
body[data-view="chat"] .app-shell,
body[data-view="chat"] .workspace,
body[data-view="chat"] .content-grid,
body[data-view="chat"] .main-column { height: 100%; min-height: 0; min-width: 0; }
body[data-view="chat"] .content-grid { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; overflow: hidden; }
body[data-view="chat"] .right-rail { display: none; }
body[data-view="chat"] #chat { display: block; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--bg); overflow: hidden; }

#chat .chat-shell { display: grid; grid-template-columns: clamp(216px, 18vw, 248px) minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; overflow: hidden; }
#chat .chat-room-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; border-right: 1px solid var(--border); background: var(--surface-deep); overflow: hidden; }
#chat .chat-rooms-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 16px; }
#chat .chat-rooms-header h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.035em; }
#chat .chat-rooms-header p { display: none; }
#chat .chat-room-search { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-height: 46px; margin: 0 16px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text-muted); }
#chat .chat-room-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#chat .chat-room-search svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
#chat #chat-room-search { min-width: 0; width: 100%; min-height: 44px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
#chat .chat-room-status { min-height: 18px; margin: 10px 18px 4px; color: var(--text-muted); font-size: 12px; }
#chat .chat-room-status:empty { min-height: 0; }
#chat .chat-room-list { flex: 1 1 auto; min-height: 0; min-width: 0; padding: 8px 12px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#chat .chat-room-group { display: grid; gap: 4px; margin-bottom: 20px; }
#chat .chat-room-group > h3 { margin: 8px 10px; color: var(--text-muted); font-size: 12px; font-weight: 650; }
#chat .chat-room-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-secondary); text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
#chat .chat-room-button:hover { color: var(--text); background: var(--surface-hover); }
#chat .chat-room-button:is(.is-active, [aria-current="true"], [aria-current="page"]) { border-color: var(--border-strong); color: var(--text); background: var(--surface-active); }
#chat .chat-room-icon,
#chat .chat-room-glyph { display: grid; flex: 0 0 28px; place-items: center; color: var(--text-muted); font-size: 20px; }
#chat .chat-room-glyph:not(.is-flag) { color: #fff; }
#chat .chat-room-label { flex: 1 1 auto; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
#chat .chat-room-count,
#chat .chat-room-unread { flex: 0 0 auto; min-width: 22px; padding: 3px 6px; border-radius: 7px; background: var(--surface-hover); color: var(--text); font-size: 11px; text-align: center; }
#chat .chat-room-draft { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; }
#chat .chat-room-empty { margin: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
#chat .chat-room-error { margin: 12px 16px; padding: 14px; border: 1px solid var(--danger-panel-border); border-radius: 10px; background: var(--danger-panel-bg); }
#chat .chat-room-error p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
#chat .chat-room-error button { min-height: 44px; }
#chat .chat-room-switcher,
#chat .chat-rooms-close { display: none; align-items: center; justify-content: center; flex: 0 0 auto; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
#chat .chat-room-switcher svg,
#chat .chat-rooms-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

#chat .chat-conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
#chat .chat-room-header { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 6px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
#chat .chat-room-heading { min-width: 0; flex: 1 1 auto; }
#chat #chat-room-title { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat #chat-room-description { margin: 0; }
#chat .chat-room-visibility { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-secondary); font-size: 12px; }
#chat .chat-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; padding: 0; border: 0; background: transparent; }
#chat .chat-toolbar button { min-height: 44px; font-size: 13px; }
#chat .chat-toolbar .segmented-control { min-width: 0; padding: 0; border: 0; background: transparent; }
#chat .chat-toolbar .segmented-control button { padding-inline: 12px; }
#chat .chat-room-options { position: relative; flex: 0 0 auto; }
#chat .chat-room-options:not(:has(button:not([hidden]))) { display: none; }
#chat .chat-room-options summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; list-style: none; cursor: pointer; border-radius: 8px; }
#chat .chat-room-options summary::-webkit-details-marker { display: none; }
#chat .chat-room-options summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#chat .chat-room-options summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#chat .chat-room-options[open] summary { background: var(--surface-hover); }
#chat .chat-room-options-list { position: absolute; inset: calc(100% + 4px) 0 auto auto; z-index: 5; width: 180px; max-height: min(240px, 50dvh); overflow-y: auto; padding: 4px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-menu); box-shadow: var(--shadow); }
#chat .chat-room-options-list button { display: block; width: 100%; padding: 10px 12px; text-align: left; }
#chat .chat-transcript { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
#chat #chat-load-older { flex: 0 0 auto; min-height: 44px; margin: 8px auto; padding: 8px 16px; font-size: 13px; }
#chat .chat-messages { flex: 1 1 auto; min-height: 0; max-height: none; padding: 12px 0 18px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
#chat .chat-messages:empty { display: none; }
#chat .chat-loading,
#chat .chat-empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding: 24px; color: var(--text-secondary); text-align: center; font-size: 14px; }
#chat .chat-empty h3 { margin: 0; color: var(--text); font-size: 22px; }
#chat .chat-empty p { max-width: 42ch; margin: 0; font-size: 14px; line-height: 1.6; }
#chat .chat-transcript > .service-error { margin: 16px 20px; padding: 18px; font-size: 14px; }
#chat .chat-transcript > .service-error button { min-height: 44px; }
#chat .chat-new-messages { position: absolute; right: 20px; bottom: 14px; min-height: 44px; margin: 0; padding-inline: 16px; font-size: 13px; box-shadow: var(--shadow); }
#chat .chat-day-divider { display: flex; align-items: center; gap: 14px; margin: 18px 24px; color: var(--text-muted); font-size: 12px; text-align: center; }
#chat .chat-day-divider::before,
#chat .chat-day-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

#chat .chat-message { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 24px; }
#chat .chat-avatar-button,
#chat .chat-message .avatar { width: 44px; height: 44px; }
#chat .chat-author { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
#chat .chat-message-meta { align-items: center; }
#chat .chat-message-body { margin-top: 0; font-size: 16px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
#chat .chat-message-actions { gap: 2px; }
#chat .chat-message-actions button { width: 44px; height: 44px; }
#chat .chat-message-actions svg { width: 18px; height: 18px; }
#chat .chat-reply-quote { min-height: 44px; padding: 8px 12px; }
#chat .chat-reply-quote strong,
#chat .chat-reply-quote span { font-size: 12px; line-height: 1.5; }
#chat .chat-deleted { margin: 0; font-size: 13px; line-height: 24px; }
#chat .chat-message.is-grouped { padding-top: 2px; padding-bottom: 2px; }
#chat .chat-message.is-grouped .chat-avatar-button { visibility: hidden; }
#chat .chat-message.is-grouped .chat-message-meta { display: none; }
#chat .chat-message.is-grouped .chat-message-main { grid-column: 2; grid-row: 1; }
#chat .chat-message.is-grouped .chat-message-actions { grid-column: 3; grid-row: 1; }

#chat .chat-composer { position: relative; inset: auto; z-index: 3; min-width: 0; padding: 6px 16px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
#chat .chat-compose-row { align-items: flex-end; gap: 6px; min-height: 50px; padding: 2px; border-radius: 12px; background: var(--surface-deep); }
#chat .chat-compose-row:focus-within { border-color: var(--accent); }
#chat .chat-compose-row textarea { min-width: 0; min-height: 44px; max-height: 116px; padding: 11px 0; font-size: 15px; line-height: 22px; }
#chat #chat-send { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-width: 84px; height: 44px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; }
#chat #chat-send svg { width: 18px; height: 18px; }
#chat .chat-composer-meta { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 2px; }
#chat #chat-composer-note { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 18px; }
#chat #chat-composer-count { flex: 0 0 auto; color: var(--text-muted); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
#chat #chat-composer-count.is-near-limit { color: var(--danger); }
#chat .chat-composer-meta .chat-typing { position: absolute; inset: 0 64px auto 0; min-height: 18px; margin: 0; padding: 0; background: var(--surface); font-size: 12px; line-height: 18px; }
#chat .chat-typing[hidden] { display: none !important; }
#chat .chat-reply-context { align-items: center; margin-bottom: 6px; padding: 4px 8px; }
#chat .chat-reply-context :is(span, p) { font-size: 12px; }
#chat #chat-cancel-reply { flex: 0 0 auto; width: 44px; height: 44px; }
#chat #chat-form-error { max-height: 24dvh; margin-top: 8px; overflow-y: auto; font-size: 13px; }
#chat button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 1100px) {
  #chat .chat-shell { grid-template-columns: minmax(0, 1fr); }
  #chat .chat-room-pane { display: none; border-right: 0; }
  #chat .chat-room-visibility { display: none; }
  #chat .chat-room-switcher,
  #chat .chat-rooms-close { display: inline-flex; }
  #chat .chat-shell.is-rooms-open .chat-room-pane { display: flex; }
  #chat .chat-shell.is-rooms-open .chat-conversation { display: none; }
}

@media (max-width: 820px) {
  body[data-view="chat"] .workspace { display: flex; flex-direction: column; overflow: hidden; }
  body[data-view="chat"] .mobile-header { flex: 0 0 auto; }
  body[data-view="chat"] .content-grid { flex: 1 1 auto; height: auto; min-height: 0; margin-bottom: var(--mobile-nav-height, 62px); }
  #chat .chat-room-header { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; gap: 0 10px; padding: 4px 12px; }
  #chat #chat-room-title { font-size: 20px; }
  #chat .chat-room-visibility { display: none; }
  #chat .chat-rooms-header { min-height: 60px; padding: 8px 12px; }
  #chat .chat-toolbar { grid-column: 1 / -1; padding: 0; }
  #chat .chat-compose-row textarea { padding: 10px 0; font-size: 16px; line-height: 24px; }
  #chat #chat-room-search { font-size: 16px; }
  #chat .chat-composer { padding: 6px 16px max(6px, env(safe-area-inset-bottom)); }
  #chat .chat-message-actions { opacity: 1; }
}

@media (max-width: 600px) {
  #chat .chat-room-header { padding-inline: 12px; }
  #chat .chat-message { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; padding: 8px 12px; }
  #chat .chat-message-actions { grid-column: 2; justify-self: end; opacity: 1; }
  #chat .chat-message-actions:empty { display: none; }
  #chat .chat-message.is-grouped .chat-message-actions { grid-column: 2; grid-row: auto; }
  #chat .chat-day-divider { margin: 14px 12px; }
  #chat .chat-transcript > .service-error { margin: 12px; }
  #chat #chat-composer-note,
  #chat #chat-composer-count { font-size: 11px; }
  #chat #chat-send { min-width: 76px; gap: 5px; padding-inline: 10px; }
}

@media (max-height: 600px) and (max-width: 820px) {
  #chat .chat-room-header { padding-block: 2px; }
  #chat .chat-composer { padding-block: 4px; }
  #chat .chat-compose-row textarea { max-height: min(116px, 24dvh); }
}

/* Long drafts and errors scroll inside the composer on cramped screens. */
@media (max-width: 820px), (max-height: 600px) {
  #chat .chat-conversation { grid-template-rows: max-content minmax(48px, 1fr) minmax(64px, auto); }
  #chat .chat-composer { min-height: 64px; max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain; }
  #chat #chat-load-older { margin: 0 auto; }
}

/* The shared native emoji picker also remains usable in Messages and comments. */
.emote-picker { display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 24px)); max-height: min(520px, 70dvh); padding: 12px; border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; }
.emote-picker .emote-picker-header { flex: 0 0 auto; gap: 8px; min-height: 44px; margin: 0; }
.emote-picker .emote-picker-header strong { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 1.3; }
.emote-picker .emote-picker-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.emote-picker .emote-motion-toggle { min-height: 44px; padding-inline: 6px; font-size: 12px; }
.emote-picker #emote-close { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.emote-picker #emote-close:hover { background: var(--surface-hover); color: var(--text); }
.emote-picker #emote-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.emote-picker .emote-search { flex: 0 0 auto; min-height: 44px; }
.emote-picker .emote-search input { min-height: 42px; font-size: 16px; }
.emote-picker .emote-categories { display: flex; flex: 0 0 auto; gap: 4px; min-height: 44px; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.emote-picker .emote-categories button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; cursor: pointer; }
.emote-picker .emote-categories button:is(:hover, [aria-pressed="true"]) { border-color: var(--border-strong); background: var(--surface-active); color: var(--text); }
.emote-picker .emote-grid { flex: 1 1 auto; grid-template-columns: repeat(8, minmax(44px, 1fr)); gap: 4px; min-height: 44px; max-height: none; margin: 0; padding: 0; overflow-y: auto; }
.emote-picker .emote-option { min-height: 44px; height: 44px; gap: 0; padding: 0; }
.emote-picker .emote-option-glyph,
.emote-picker .native-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 28px; line-height: 1; }
.emote-picker .emote-category { font-size: 20px; }
.emote-picker .emote-empty { margin: 16px 4px; font-size: 13px; }
.emote-picker .emote-picker-hint { flex: 0 0 auto; margin: 0; font-size: 12px; line-height: 1.5; }
.emote-picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 600px) {
  .emote-picker { right: 8px; width: min(420px, calc(100vw - 16px)); max-height: min(520px, 70dvh); gap: 8px; padding: 8px; }
  .emote-picker .emote-grid { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
  .emote-picker .emote-picker-header strong { font-size: 15px; }
}

@media (max-height: 600px) {
  .emote-picker .emote-picker-hint { display: none; }
}

@media (max-width: 820px), (max-height: 600px) {
  .emote-picker { position: fixed; inset: auto 12px 12px auto; z-index: 90; max-height: min(520px, calc(100dvh - 24px)); }
}

@media (max-width: 820px) {
  .emote-picker { left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; max-height: min(520px, 70dvh, calc(100dvh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
}

/* Readable titles, quieter cards, a calmer empty room, no hidden categories */
.drop-title-link {
  text-decoration: none;
}

.drop-title-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.action-button b:empty {
  display: none;
}

.action-button.is-zero {
  gap: 0;
}

.exposure-status.is-pending {
  color: var(--text-secondary);
}

.exposure-trust-progress {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.board-section.is-quiet .board-timer,
.board-section.is-quiet .board-progress {
  display: none;
}

.board-section.is-quiet .board-content {
  min-height: 0;
}

.board-section.is-quiet .board-empty {
  padding: 0 20px 16px;
}

.room-now.is-quiet button span {
  font-size: 10px;
}

@media (min-width: 821px) {
  .category-strip {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 16px;
  }

  .category-scroll-button {
    display: none;
  }
}

/* Media-app rhythm, people over dashboards, motion */
.drop-title {
  font-size: 18px;
}

.author-copy small {
  font-size: 11px;
  text-transform: none;
}

.engagement-line:empty {
  display: none;
}

.action-button[data-signal="applaud"].is-reacted {
  color: var(--accent);
}

.action-button[data-signal="applaud"].is-reacted svg,
.action-button[data-signal="save"].is-reacted svg {
  fill: currentColor;
}

.action-button[data-signal="applaud"].is-reacted svg {
  animation: heart-pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes heart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.live-toggle > span {
  display: none;
}

.live-toggle {
  width: 40px;
  min-width: 40px;
  padding: 0;
  justify-content: center;
}

.room-card {
  display: none;
}

.rail-people-list {
  display: grid;
  gap: 2px;
  padding: 2px 8px 10px;
}

.rail-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rail-person:hover,
.rail-person:focus-visible {
  background: var(--surface-hover);
}

.rail-person-copy {
  min-width: 0;
  display: grid;
}

.rail-person-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-person-copy small {
  color: var(--text-muted);
  font-size: 11px;
}


.notifications-section {
  display: flex;
  flex-direction: column;
}

.notifications-section > .project-updates {
  order: 20;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.project-updates > header p {
  display: none;
}

.trending-focus {
  border-color: var(--border);
  background: var(--surface-soft);
}

.trending-focus span {
  color: var(--text-muted);
}

.person-card {
  min-height: 0;
  align-items: center;
  padding: 10px 12px;
}

.profile-stats > button,
.profile-stats > a,
.profile-stats > div {
  min-height: 60px;
  border-inline: 0;
}

.profile-rank-banner {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
}

@media (min-width: 821px) {
  .category-strip {
    gap: 6px;
    padding-bottom: 12px;
  }

  .category-chip {
    height: 34px;
    min-height: 34px;
    gap: 6px;
    padding: 0 12px;
    font-size: 12px;
  }

  .category-chip svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 820px) {
  .feed-header {
    min-height: 0;
    margin: 0 0 2px;
    padding: 0;
    border-bottom: 0;
    justify-content: flex-end;
  }

  .feed-header h2 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop-card,
  .action-button[data-signal="applaud"].is-reacted svg {
    animation: none;
  }
}

/* Mobile Home: the feed header is hidden */
@media (max-width: 820px) {
  body[data-view="all"] .feed-header {
    display: none;
  }
}

/* Text posts, people row, double-tap applause, skeleton loading */
.drop-card {
  position: relative;
  touch-action: manipulation;
}

.drop-card.is-text-only .drop-copy {
  margin-top: 8px;
  padding: 0;
  color: var(--text);
}


.drop-card.is-text-only .drop-title {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.drop-card.is-text-only .drop-title-link {
  color: inherit;
}

.drop-card.is-text-only .drop-description {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.drop-card.is-text-only .drop-copy .exposure-panel {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.drop-card.is-text-only .drop-copy .exposure-panel small,
.drop-card.is-text-only .drop-copy .exposure-panel p {
  color: var(--text-secondary);
}

.heart-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--accent);
  animation: heart-burst 760ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.heart-burst svg {
  width: 96px;
  height: 96px;
  fill: currentColor;
  stroke: currentColor;
}

@keyframes heart-burst {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1.05); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15) translateY(-10px); }
}

.people-row {
  margin: 4px 0 14px;
}

.people-row-scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.people-row-scroller::-webkit-scrollbar {
  display: none;
}

.people-row-item {
  flex: 0 0 auto;
  width: 68px;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}

.people-row-avatar {
  width: 56px;
  height: 56px;
  font-size: 16px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.people-row-name {
  max-width: 68px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not([data-view="all"]) .people-row {
  display: none;
}

@media (min-width: 821px) {
  .people-row {
    display: none;
  }
}

.loading-stack {
  display: grid;
  gap: 22px;
  padding: 18px 0;
}

.loading-stack span {
  display: block;
  height: 132px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--surface-soft) 25%, var(--surface-hover) 50%, var(--surface-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .heart-burst,
  .loading-stack span {
    animation: none;
  }
}

/* Comments inline on the Drop page */
.comments-inline {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.comments-inline .comments-shell {
  height: auto;
  min-height: 0;
  display: block;
}

.comments-inline .dialog-header {
  min-height: 0;
  padding: 14px 0 6px;
  border-bottom: 0;
}

.comments-inline .dialog-header [data-close-dialog] {
  display: none;
}

.comments-inline .comments-list {
  max-height: none;
  overflow: visible;
}

.comments-inline .comments-status,
.comments-inline .feed-empty {
  padding: 18px 0;
}

.comments-inline .dialog-header {
  display: block;
}

.comments-inline .dialog-header > div {
  min-width: 0;
}

.comments-inline #comments-summary {
  max-width: none;
  white-space: normal;
}

/* Everyone | Following switch for members */
.feed-scope {
  width: fit-content;
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-soft);
}

.feed-scope button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.feed-scope button.is-active {
  background: var(--text);
  color: var(--bg);
}

@media (max-width: 820px) {
  .feed-scope {
    margin: 2px auto 10px;
  }
}

/* Signed-in Home opens on the exchange */
.home-start,
.home-today {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.home-start-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

.home-start-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.home-start-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.home-start-mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
}

.home-start-step.is-done .home-start-mark {
  border-color: var(--accent);
  background: var(--accent);
}

.home-start-step.is-done .home-start-label {
  color: var(--text-muted);
  text-decoration: line-through;
}

.home-start-action,
.home-today-action {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.home-start-action:hover,
.home-today-action:hover {
  background: var(--surface-hover);
}

.home-today {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-today-copy {
  min-width: 0;
}

.home-today-copy small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-today-copy p {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.home-today-action {
  flex: 0 0 auto;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

body:not([data-view="all"]) .home-start:not(.home-start-guide),
body:not([data-view="all"]) .home-today {
  display: none;
}

/* One-page World, a familiar profile header, a calmer mobile Board */
#world-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#world-content > .world-section {
  display: grid;
  gap: 18px;
  scroll-margin-top: 72px;
}

#world-content > .world-section[hidden] {
  display: none;
}

#world-surface > .utility-view-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
}

@media (max-width: 820px) {
  #world-surface {
    scroll-margin-top: var(--mobile-header-height, calc(58px + env(safe-area-inset-top)));
  }
  #world-surface > .utility-view-tabs {
    top: var(--mobile-header-height, calc(58px + env(safe-area-inset-top)));
  }
}

.profile-hero {
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "avatar stats"
    "identity identity"
    "actions actions";
  gap: 14px 16px;
  padding: 20px 18px;
}

.profile-hero-avatar {
  grid-area: avatar;
  width: 84px;
  height: 84px;
}

.profile-hero .profile-stats {
  grid-area: stats;
  align-self: center;
  border-bottom: 0;
}

.profile-hero .profile-stats > button,
.profile-hero .profile-stats > a,
.profile-hero .profile-stats > div {
  min-height: 44px;
  padding: 0;
}

.profile-hero .profile-identity {
  grid-area: identity;
}

.profile-hero .profile-identity h1 {
  margin: 0;
  font-size: 20px;
}

.profile-hero .profile-actions {
  grid-area: actions;
  max-width: none;
  justify-content: flex-start;
}

.profile-hero .profile-actions > button {
  flex: 1 1 140px;
}

@media (min-width: 821px) {
  .profile-hero {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar stats actions"
      "avatar identity identity";
    gap: 12px 26px;
    padding: 26px;
  }

  .profile-hero-avatar {
    width: 110px;
    height: 110px;
    font-size: 30px;
  }

  .profile-hero .profile-actions {
    justify-content: flex-end;
  }

  .profile-hero .profile-actions > button {
    flex: 0 0 auto;
  }
}

@media (max-width: 820px) {
  .board-section.is-quiet .board-header,
  .board-section.is-quiet .board-content {
    display: none;
  }
}

/* Surface mode: core hides connected-world surfaces until the room has people */
[data-surface-mode="core"] .discover-tabs [data-discover-mode="world"],
[data-surface-mode="core"] .discover-tabs [data-discover-mode="records"],
[data-surface-mode="core"] .room-now,
[data-surface-mode="core"] .room-tools-mobile,
[data-surface-mode="core"] #world-surface,
[data-surface-mode="core"] #records-surface {
  display: none;
}

/* Texture and small layout fixes */
.text-button {
  min-height: 32px;
  font-size: 12px;
}

[data-search-input] {
  min-height: 30px;
}

.account-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.account-section-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.account-section-tabs > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chat-room-glyph {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 820px) {
  .account-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-tabs,
  .account-section-tabs {
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
}

/* Character. Tighter display type, a calm room strip, tinted categories,
   a segmented feed switch, an illustrated empty Trending, and press feedback. */
main h1,
main h2,
.rail-card-title h2,
.dialog-header h2 {
  letter-spacing: -0.015em;
}

.metric-note {
  font-size: 12px;
}

.feed-empty h3 {
  font-size: 16px;
}

.feed-empty p {
  font-size: 13px;
}

.empty-icon {
  border-color: transparent;
  background: var(--surface-progress);
}

/* Right now: one line with a dot, rows only when something is happening */
.room-now-desktop {
  border-radius: 14px;
  padding-bottom: 2px;
}

.room-now-desktop::before {
  content: attr(data-summary);
  display: block;
  padding: 10px 12px 8px 30px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: radial-gradient(circle at 15px 55%, var(--accent) 3.5px, transparent 4.5px) no-repeat;
}

.room-now-desktop.is-quiet::before {
  color: var(--text-secondary);
  background-image: radial-gradient(circle at 15px 55%, var(--text-muted) 3.5px, transparent 4.5px);
}

.room-now-desktop.is-quiet button {
  display: none;
}

.room-now-desktop button {
  padding: 8px 12px 9px;
}

.room-now-desktop button + button {
  border-top-color: var(--border);
}

.room-now-desktop span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Segmented feed switch with a sliding pill */
.feed-scope {
  position: relative;
  isolation: isolate;
}

.feed-scope button {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
  text-align: center;
}

@supports selector(:has(a)) {
  .feed-scope::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: var(--text);
    z-index: 0;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .feed-scope:has(button:nth-child(2).is-active)::before {
    transform: translateX(100%);
  }

  .feed-scope button.is-active {
    background: transparent;
  }
}

/* Active category chips carry their category colour */

/* Empty Trending: three bars instead of a sentence in a box */
.trending-empty {
  padding-top: 28px;
}

.trending-empty::before {
  content: "";
  display: block;
  width: 56px;
  height: 44px;
  margin: 0 auto 16px;
  background:
    linear-gradient(var(--text-muted), var(--text-muted)) 0 100% / 14px 22px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 21px 100% / 14px 44px no-repeat,
    linear-gradient(var(--text-muted), var(--text-muted)) 42px 100% / 14px 32px no-repeat;
  opacity: 0.85;
}

.trending-empty h3 {
  font-size: 16px;
}

.trending-empty p {
  font-size: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .trending-empty::before {
    animation: bars-breathe 3.6s ease-in-out infinite;
  }

  .publish-button,
  .secondary-button,
  .category-chip,
  .round-icon-button,
  .chat-room-button,
  .rail-person {
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
  }

  .publish-button:active,
  .secondary-button:active,
  .category-chip:active,
  .round-icon-button:active,
  .chat-room-button:active,
  .rail-person:active {
    transform: scale(0.97);
  }
}

@keyframes bars-breathe {
  50% {
    transform: translateY(2px);
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feed-scope::before {
    transition: none;
  }
}

/* The quiet strip is one line; account tabs never wrap */
.room-now-desktop.is-quiet {
  display: block;
  min-height: 0;
  padding: 0;
}

.room-now-desktop::before {
  line-height: 1.4;
}

#account-dialog .account-section-tabs,
.profile-dialog .account-section-tabs,
dialog .account-section-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

#account-dialog .account-section-tabs button,
dialog .account-section-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The phone. Less chrome before the first post, full-bleed posts, a header
   that gets out of the way, bottom sheets, and a story tile for your own Drop. */
.home-start-progress {
  margin-left: auto;
  padding-right: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.people-row-item.is-you .people-row-avatar {
  position: relative;
  outline-color: var(--border-strong);
}

.people-row-plus {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 820px) {
  .mobile-header {
    transition: transform 0.2s ease;
  }

  html.is-header-hidden .mobile-header {
    transform: translateY(-100%);
  }

  .mobile-header-actions {
    gap: 4px;
  }

  .mobile-bottom-nav > button.is-active svg {
    fill: currentColor;
    fill-opacity: 0.16;
  }

  .feed-scope {
    margin-top: 8px;
  }

  .category-chip {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }

  .home-start {
    padding: 10px 14px;
  }

  .home-start-head {
    cursor: pointer;
  }

  .home-start:not(.is-open) .home-start-steps {
    display: none;
  }

  .home-today {
    padding: 10px 14px;
  }

  .home-today-copy p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
  }

  .home-today-action {
    padding: 6px 12px;
    font-size: 12px;
  }

  .drop-card {
    padding: 14px 0 12px;
  }

  .drop-card + .drop-card {
    border-top: 0;
  }

  .drop-media {
    margin-inline: -14px;
    border-radius: 0;
  }

  #discover-drop-list .drop-media {
    margin-inline: -12px;
  }

  .drop-title {
    font-size: 21px;
  }

  .drop-description {
    font-size: 15px;
  }

  .small-dialog,
  .utility-dialog {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 86dvh;
    margin: 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
  }

  .small-dialog::before,
  .utility-dialog::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: -6px auto 14px;
    border-radius: 2px;
    background: var(--border-strong);
  }

  .project-updates {
    padding-inline: 15px;
  }

  .discover-header > div {
    display: none;
  }

  .discover-header {
    min-height: 0;
    padding: 8px 15px 0;
    justify-content: flex-end;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .small-dialog[open],
  .utility-dialog[open] {
    animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-header {
    transition: none;
  }
}

/* Trending in the Discover tab row; Notifications keeps its gutter on phones */
.discover-tabs .discover-trending-link {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

@media (max-width: 820px) {
  .discover-header {
    display: none;
  }

  .discover-tabs .discover-trending-link {
    margin-left: 6px;
  }

  #notifications .project-updates,
  .notifications-section .project-updates {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* Topics: member-made hashtags on cards, in the composer, and in Discover */
.drop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.drop-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.drop-card.is-text-only .drop-copy .drop-tags {
  position: relative;
  z-index: 1;
}

.drop-tags-preview {
  margin: 4px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.discover-topics {
  margin-bottom: 18px;
}

.discover-topics header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.discover-topics h3 {
  margin: 0;
  font-size: 15px;
}

.discover-topics header span {
  color: var(--text-muted);
  font-size: 12px;
}

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.topic-chip b {
  font-size: 14px;
}

.topic-chip small {
  color: var(--text-muted);
  font-size: 11px;
}

.topic-chip.is-trending {
  border-color: var(--accent);
}

.topic-chip.is-trending b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* A topic heading is a member-made word of up to 30 characters: it wraps rather than widening
   the page (at 390 px a long tag pushed Firefox 19 px sideways). */
body[data-view="topic"] .feed-header > div {
  min-width: 0;
}

body[data-view="topic"] .feed-header h2 {
  overflow-wrap: anywhere;
}

/* Topic pages keep their heading on phones */
@media (max-width: 820px) {
  body[data-view="topic"] .feed-header {
    justify-content: space-between;
    margin: 8px 0 6px;
  }

  body[data-view="topic"] .feed-header h2 {
    display: block;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 22px;
  }
}

/* Notifications that carry a reason or a category */
.notification-detail {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

/* Native feel on phones: press feedback, quiet selection, gestures, screen changes, installed mode */
@media (max-width: 820px) {
  /* Breathing room between the header and the category chips; a little less when the
     Everyone | Following pill already sits between them. */
  .category-rail {
    margin-top: 12px;
  }

  .feed-scope:not([hidden]) + .category-rail {
    margin-top: 4px;
  }

  .mobile-bottom-nav,
  .mobile-header,
  .category-strip,
  .people-row,
  .feed-scope,
  .drop-actions,
  .discover-tabs {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .mobile-bottom-nav > button {
    transition: transform 0.12s ease, color 0.15s ease;
  }

  .mobile-bottom-nav > button > span {
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .mobile-bottom-nav > button:active {
    transform: scale(0.92);
  }

  .mobile-bottom-nav .mobile-primary-icon {
    transition: transform 0.15s ease;
  }

  .mobile-bottom-nav .mobile-create-button:active .mobile-primary-icon {
    transform: scale(0.9);
  }

  .drop-card .action-button svg {
    transition: transform 0.12s ease;
  }

  .drop-card .action-button:active svg {
    transform: scale(0.82);
  }

  .discover-tabs button {
    border-radius: 0;
  }

  /* Phones have no hover: keep the per-message actions reachable but quiet. */
  .chat-message-actions {
    opacity: 0.55;
  }

  #chat-composer-note {
    font-size: 11px;
  }

  .pull-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 58px);
    left: 50%;
    z-index: 60;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--chrome);
    color: var(--text-muted);
    transform: translate(-50%, calc(var(--pull, 0px) - 48px));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }

  .pull-indicator.is-visible {
    opacity: 1;
  }

  .pull-indicator.is-armed {
    color: var(--accent);
    border-color: var(--accent);
  }

  .pull-indicator.is-refreshing {
    transform: translate(-50%, 16px);
  }

  .pull-indicator svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
  }

  .pull-indicator.is-armed svg {
    transform: rotate(180deg);
  }

  .pull-indicator.is-refreshing svg {
    animation: pull-spin 0.8s linear infinite;
  }
}

@keyframes pull-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (display-mode: standalone) {
  html {
    overscroll-behavior-y: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav > button,
  .mobile-bottom-nav .mobile-primary-icon,
  .drop-card .action-button svg,
  .pull-indicator,
  .pull-indicator svg {
    transition: none;
  }

  .pull-indicator.is-refreshing svg {
    animation: none;
  }
}

/* Handle fields show the @ people will see, so the word "handle" explains itself */
.handle-input {
  position: relative;
  display: block;
}

.handle-input > b {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-weight: 600;
  pointer-events: none;
}

.handle-input > input {
  min-width: 0;
  padding-left: 27px;
}

.handle-input > input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Staff media review: the sanitized derivative, bounded, never the original */
.media-review-preview {
  margin: 0 0 12px;
}

.media-review-preview img,
.media-review-preview video {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.media-review-preview audio {
  width: 100%;
}

/* Nothing behind a disclosure, fewer steps to the things people do most */
.primary-nav {
  gap: 4px;
  margin-top: 28px;
}

.nav-item {
  height: 46px;
  gap: 15px;
}

.nav-you {
  margin-top: 16px;
}

/* Log out sits in the Account header, visible from every tab */
.account-logout {
  grid-column: 3;
  grid-row: 1;
  padding: 0 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.account-logout:hover,
.account-logout:focus-visible {
  color: var(--text);
}

/* Legal links are reachable from the Account dialog on every screen size */
.account-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.account-legal a {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.account-legal a:hover,
.account-legal a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

/* Joining with a code is a tab beside Sign in, not a panel below it */
.invite-panel {
  display: grid;
  gap: 12px;
}

.invite-intro {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.invite-panel details {
  margin-top: 6px;
}

/* Composer: a held Drop reads as waiting, not failing */
.form-error.is-notice {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text-secondary);
}

/* Desktop category chips fit on one row */
@media (min-width: 821px) {
  .category-strip {
    gap: 6px;
  }

  .category-chip {
    height: 34px;
    gap: 6px;
    padding: 0 12px;
    font-size: 11.5px;
  }

  .category-chip svg {
    width: 14px;
    height: 14px;
  }
}

/* Country rooms: flags as tiles, and a folded Countries section so the core rooms stay in reach */
#chat .chat-room-glyph.is-flag { background: transparent; font-size: 22px; line-height: 1; }
#chat .chat-room-group.is-countries > h3 { margin: 4px 0 6px; }
#chat .chat-room-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; }
#chat .chat-room-toggle:hover { color: var(--text); background: var(--surface-hover); }
#chat .chat-room-toggle > span:first-child { flex: 1 1 auto; }
#chat .chat-room-toggle::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 8px 4px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 160ms ease; }
#chat .chat-room-toggle[aria-expanded="true"]::after { margin-bottom: 0; transform: rotate(-135deg); }
#chat .chat-room-suggested { flex: 0 0 auto; padding: 3px 7px; border-radius: 7px; background: var(--surface-hover); color: var(--text-muted); font-size: 11px; }

/* Here first: the badge on a Drop, the composer toggle, and who is hosting a chat room */
.here-first-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.here-first-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.composer-here-first { margin-top: 12px; }
#drop-here-first-window { margin-top: 8px; }
#drop-here-first-window > span:first-child { white-space: nowrap; }
#chat .chat-room-host { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
#chat .chat-room-host::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
#chat .chat-host-toggle { font-weight: 650; }
#chat .chat-room-live { flex: 0 0 auto; max-width: 45%; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 11px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat .chat-room-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.creator-keep-note { margin: 4px 0 12px; }

/* A feed that looks like a product people want to open. A reading spine and posts as
   cards with depth on desktop, poster-like tiles, an input-shaped comment prompt, slimmer Home
   modules, text tabs and a quiet chrome on phones, and Follow inside People to discover. */
:root {
  --card-border: rgb(255 255 255 / 0.06);
  --card-shadow: 0 10px 30px rgb(0 0 0 / 0.22);
  --tile-highlight: rgb(255 255 255 / 0.16);
}

:root[data-theme="light"] {
  --card-border: rgb(24 24 27 / 0.08);
  --card-shadow: 0 8px 24px rgb(39 33 27 / 0.08);
  --tile-highlight: rgb(255 255 255 / 0.22);
}

/* Actions: bigger targets, readable counts */
.action-button {
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
}

.action-button svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.action-button b {
  font-size: 13px;
}

/* The comment prompt looks like the input it opens */
.drop-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.drop-footer .engagement-line {
  min-width: 0;
}

/* People to discover: follow without leaving Home */
.rail-person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}

.rail-follow {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.rail-follow:hover {
  background: var(--surface-hover);
}

.rail-follow.is-following {
  border-color: var(--border);
  color: var(--text-muted);
}

.rail-follow:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Desktop: one reading spine, posts as cards, Home modules on one row */
@media (min-width: 821px) {
  body:is([data-view="all"], [data-view="following"], [data-view="saved"], [data-view="mine"], [data-view="drop"], [data-view="topic"]) .main-column {
    width: min(100%, 680px);
    justify-self: center;
  }

  .feed > .drop-card {
    margin: 0 0 14px;
    padding: 16px 18px 12px;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
    transition: border-color 160ms ease;
  }

  .feed > .drop-card:hover {
    border-color: var(--border-strong);
  }

  .feed > .drop-card .drop-copy {
    padding-top: 14px;
  }

  .feed-header {
    min-height: 0;
    margin: 0 0 4px;
    padding: 0 2px 8px;
    border-bottom: 0;
  }

  #feed-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .home-start {
    padding: 12px 16px 14px;
  }

  .home-start-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .home-start-step {
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 8px;
    padding: 12px 12px 10px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--surface-inset);
  }

  .home-start-step .home-start-label {
    line-height: 1.35;
  }

  .home-start-step .home-start-action {
    grid-column: 2;
    justify-self: start;
  }

  .board-section {
    border-radius: 20px;
  }
}

/* Phones: text tabs like a native feed, less before the first post */
@media (max-width: 820px) {
  .mobile-header {
    border-bottom-color: var(--card-border);
  }

  .mobile-bottom-nav {
    border-top-color: var(--card-border);
  }

  .mobile-bottom-nav > button {
    gap: 4px;
    font-size: 10px;
  }

  .mobile-bottom-nav > button > svg {
    width: 24px;
    height: 24px;
  }

  .feed-scope {
    width: 100%;
    justify-content: center;
    justify-content: safe center;
    gap: 28px;
    margin: 0 0 4px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .feed-scope::before {
    display: none;
  }

  .feed-scope button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 2px;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
  }

  .feed-scope button.is-active {
    background: transparent;
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--text);
  }

  .people-row {
    margin: 0 0 10px;
  }

  .people-row-avatar {
    width: 52px;
    height: 52px;
  }

  .home-start,
  .home-today {
    margin-bottom: 8px;
    padding: 8px 14px;
    border-radius: 14px;
  }

  .home-start-head {
    margin-bottom: 0;
    font-size: 13px;
  }

  .home-start.is-open .home-start-head {
    margin-bottom: 8px;
  }

  .home-today-copy small {
    font-size: 10px;
  }

  .home-today-copy p {
    -webkit-line-clamp: 1;
    margin-top: 2px;
    font-size: 14px;
  }

  .board-section.is-quiet {
    margin-bottom: 4px;
  }

}

/* Desktop follow-up: text-only chips fit the spine on one row; the feed header is a quiet label */
@media (min-width: 821px) {
  .category-chip {
    padding: 0 13px;
    gap: 0;
  }

  .category-chip svg {
    display: none;
  }

  .feed-header {
    align-items: center;
    margin: 2px 0 6px;
    padding: 0 4px 0 6px;
  }

  #feed-title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .live-toggle {
    min-width: 34px;
    height: 30px;
    padding: 0 9px;
  }
}

.drop-media-carousel {
  position: relative;
  isolation: isolate;
}

.drop-media-carousel .drop-media-gallery.is-multiple {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--surface-inset);
}

.drop-media-carousel .drop-media-gallery.is-multiple::-webkit-scrollbar {
  display: none;
}

.drop-media-carousel .drop-media-gallery.is-multiple .drop-media-item {
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.drop-media-count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

@media (min-width: 1181px) {
  body[data-view="discover"] #discover-drop-list.feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }

  body[data-view="discover"] #discover-drop-list.feed > .drop-card {
    margin: 0;
  }
}

/* Let the room name and filters wrap when text needs more room. */
@media (max-width: 820px) {
  #chat .chat-room-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    padding: 6px 12px;
  }

  #chat .chat-room-switcher { padding: 0; border: 0; background: transparent; }
  #chat .chat-room-switcher > span { display: none; }
  #chat .chat-room-heading { flex: 1 1 76px; }
  #chat .chat-room-options { margin-left: auto; }

  #chat .chat-room-heading h2 {
    overflow: hidden;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #chat .chat-toolbar {
    display: contents;
  }

  #chat .chat-toolbar .segmented-control {
    flex: 0 0 auto;
  }

  #chat .chat-toolbar .segmented-control button {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 12px;
  }

}

/* Category is one native control, keeping the draft and project options together. */
.composer-dialog .composer-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 6px;
  border-block: 1px solid var(--border);
}

.composer-category > .select-wrap {
  width: min(65%, 250px);
  min-width: 0;
}

.composer-category select {
  min-width: 0;
  min-height: 46px;
  padding-inline: 8px 28px;
  border: 0;
  background: transparent;
  text-align: right;
}

.composer-category select:invalid {
  color: var(--text-muted);
}

.composer-dialog #drop-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.composer-dialog #drop-body {
  min-height: 118px;
  font-size: 16px;
  line-height: 1.5;
}

/* Fewer rows. The date-of-birth step is one row; a quiet Board is one row on every screen;
   Discover's filters share the search row on desktop; the Messages hint lives in the placeholder;
   the Account dialog drops the shortcuts the sidebar already offers; the pause toggle joins the chip row. */
.age-panel {
  gap: 8px;
}

.age-panel > strong {
  font-size: 15px;
}

.age-panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.age-panel-row .field {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
}

.age-panel-row input[type="date"] {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--surface-control);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.age-panel-row .publish-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 20px;
}

.messages-search-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.board-policy {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.board-policy > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.category-rail {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-rail > .category-strip {
  flex: 1 1 auto;
  min-width: 0;
}

.category-rail > .live-toggle {
  flex: 0 0 auto;
  margin-bottom: 16px;
}

@media (min-width: 821px) {
  .board-section.is-quiet .board-header,
  .board-section.is-quiet .board-content {
    display: none;
  }

  .board-section.is-quiet .board-queue > summary {
    min-height: 52px;
  }

  body[data-view="all"] .feed-header {
    display: none;
  }

  #discover-search-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 12px;
  }

  #discover-search-tools .discover-search {
    flex: 1 1 auto;
    margin: 0;
  }

  #discover-search-tools .discover-controls {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    border: 0;
  }

  #discover-search-tools[hidden],
  #discover-search-tools .discover-search[hidden] {
    display: none;
  }

  .account-shortcuts {
    display: none;
  }
}

@media (max-width: 820px) {
  .category-rail > .live-toggle {
    display: none;
  }
}

/* Desktop chip row: room for the pause toggle at the end without wrapping */
@media (min-width: 821px) {
  .category-chip {
    padding: 0 11px;
  }

  .category-rail > .live-toggle {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
  }
}

/* Sweep follow-ups: Trending hides its banner and column labels while empty; the Security tab no
   longer repeats its own title; World and Records line up with the Discover tabs on desktop; the
   Undiscovered note keeps the phone gutter. */
.trending-section:has(#trending-empty:not([hidden])) .leaderboard-labels,
.trending-section:has(#trending-empty:not([hidden])) #trending-focus {
  display: none;
}

#account-security-panel > .account-panel-header {
  min-height: 0;
  padding: 0 0 6px;
  border-bottom: 0;
}

#account-security-panel > .account-panel-header h3,
#account-security-panel > .account-panel-header p {
  display: none;
}

#account-security-panel > .account-panel-header {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 821px) {
  .world-surface,
  .records-surface {
    margin: 0;
  }
}

@media (max-width: 820px) {
  .discover-surface-note {
    padding: 0 12px;
  }
}

/* Sidebar rows: the label is the only thing that shrinks, so badges and trailing icons are never clipped */
.nav-item {
  gap: 13px;
  padding: 0 12px;
}

.nav-item > svg:first-child,
.nav-item > .nav-count {
  flex: 0 0 auto;
}

.nav-item > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account > .avatar,
.sidebar-account > .account-more {
  flex: 0 0 auto;
}

.sidebar-account > .account-copy {
  flex: 1 1 auto;
}

/* Short windows: the whole sidebar stays in view, so Settings and Moderation never scroll out of sight */
@media (min-width: 821px) and (max-height: 880px) {
  .desktop-sidebar {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .primary-nav {
    gap: 2px;
    margin-top: 16px;
  }

  .nav-item {
    height: 40px;
    font-size: 13px;
  }

  .nav-item svg {
    width: 20px;
    height: 20px;
  }

  .nav-you {
    margin-top: 8px;
  }

  .nav-section-label {
    padding-bottom: 3px;
  }

  .create-button {
    min-height: 44px;
  }

  .sidebar-account {
    min-height: 52px;
    margin-top: 8px;
  }
}

@media (min-width: 821px) and (max-height: 880px) {
  .create-button {
    height: 44px;
  }
}

/* Sidebar height tiers: every entry stays in view on common laptop screens */
@media (min-width: 821px) and (max-height: 960px) {
  .desktop-sidebar {
    padding-top: 16px;
    padding-bottom: 12px;
  }

  .primary-nav {
    gap: 2px;
    margin-top: 14px;
  }

  .nav-item {
    height: 40px;
    font-size: 13px;
  }

  .nav-item svg {
    width: 20px;
    height: 20px;
  }

  .nav-you {
    margin-top: 8px;
  }

  .nav-section-label {
    padding-bottom: 3px;
  }

  .create-button {
    height: 44px;
  }

  .sidebar-account {
    min-height: 52px;
    margin-top: 8px;
  }
}

@media (min-width: 821px) and (max-height: 720px) {
  .desktop-sidebar {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .primary-nav {
    gap: 0;
    margin-top: 8px;
  }

  .nav-item {
    height: 36px;
    font-size: 12.5px;
  }

  .nav-item svg {
    width: 18px;
    height: 18px;
  }

  .nav-section-label {
    display: none;
  }

  .nav-you {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }

  .create-button {
    height: 40px;
  }

  .sidebar-account {
    min-height: 46px;
    margin-top: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (min-width: 821px) and (max-height: 960px) {
  .primary-nav {
    margin-top: 10px;
  }

  .nav-item {
    height: 38px;
  }
}

@media (min-width: 821px) and (max-height: 720px) {
  .primary-nav {
    margin-top: 6px;
  }

  .nav-item {
    height: 35px;
  }
}

/* ------------------------------------------------------------------ */
/* Post cards read media first, like a photo feed */
/* ------------------------------------------------------------------ */

/* makeDropCard uses the same media-first order for layout, reading and keyboard focus. */
.drop-card:not(.is-text-only) {
  display: flex;
  flex-direction: column;
}

.drop-card:not(.is-text-only) > .drop-media { margin-top: 12px; }
.drop-card:not(.is-text-only) > .drop-actions { padding-top: 4px; }
.drop-card:not(.is-text-only) > .drop-footer { margin-top: 0; }
.drop-card:not(.is-text-only) > .drop-copy { padding-top: 4px; }

/* The caption under a photo is quieter than a headline over one. */
.drop-card:not(.is-text-only) .drop-title {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.drop-card:not(.is-text-only) .drop-description {
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.5;
}

.drop-card:not(.is-text-only) .here-first-badge {
  margin: 2px 0 8px;
}

/* Social proof, then the conversation line: "12 applause" / "View all 4 comments". */
.engagement-proof {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
}

.drop-comments-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  position: relative;
}

/* The line itself is 20px tall, under the 24px minimum for a pointer target, and it is
   the most repeated control in the product: one per Drop. Extending the hit area with a
   pseudo-element rather than padding keeps every card exactly the height it is today. The
   3px reach stays inside the line's own top margin, so it cannot cover a neighbour. */
.drop-comments-line::after {
  content: "";
  position: absolute;
  inset-block: -3px;
  inset-inline: 0;
}

.drop-comments-line:hover,
.drop-comments-line:focus-visible {
  color: var(--text);
}

.drop-card.is-text-only > .drop-comments-line {
  margin-top: 4px;
}

/* The photo counter sits lighter on the picture. */
.drop-media-count {
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  background: rgb(0 0 0 / 0.5);
  font-size: 11px;
  font-weight: 600;
}

/* People row: the ring is lit only when the creator has a Drop from the last day you
   have not opened. Your own avatar keeps the plus badge and a quiet ring. */
.people-row-avatar {
  outline-color: var(--border-strong);
}

.people-row-item.is-fresh .people-row-avatar {
  outline-color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Notifications read as an activity inbox */
/* ------------------------------------------------------------------ */

.notification-section {
  margin: 18px 20px 6px;
  font-size: 15px;
  font-weight: 700;
}

.notification-section:first-child {
  margin-top: 8px;
}

.notification-item {
  min-height: 60px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 9px 20px;
  border-bottom: 0;
}

.notification-item > .avatar,
.notification-avatars .avatar {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

.notification-avatars {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
}

.notification-avatars.is-stacked .avatar {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.notification-avatars.is-stacked .avatar:first-child {
  top: 0;
  left: 0;
  z-index: 1;
}

.notification-avatars.is-stacked .avatar:last-child {
  right: 0;
  bottom: 0;
  outline: 2px solid var(--surface);
}

.notification-line {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}

.notification-line .notification-identity {
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
}

.notification-identity > .identity-name {
  font-weight: 600;
}

.notification-identity .identity-name-text {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.notification-copy > .notification-time {
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.notification-copy .notification-detail {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 13px;
}

.notification-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 10px;
}

.notification-side .notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.notification-item.is-unread {
  background: transparent;
}

.notification-item.is-unread:hover,
.notification-item:hover {
  background: var(--surface-soft);
}

/* ------------------------------------------------------------------ */
/* The profile reads as a portfolio */
/* ------------------------------------------------------------------ */

.profile-hero {
  grid-template-columns: 86px minmax(0, 1fr);
  grid-template-areas:
    "avatar stats"
    "identity identity"
    "actions actions";
  gap: 12px 18px;
  padding: 18px 16px 16px;
}

.profile-hero-avatar {
  width: 86px;
  height: 86px;
  font-size: 26px;
}

.profile-hero .profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  align-self: center;
}

.profile-hero .profile-stats > button,
.profile-hero .profile-stats > a,
.profile-hero .profile-stats > div {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
}

.profile-hero .profile-stats > *:nth-child(-n + 2) {
  border-bottom: 0;
}

.profile-hero .profile-stats strong {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.profile-hero .profile-stats span {
  color: var(--text-secondary);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
}

.profile-hero .profile-identity h1 {
  margin: 0;
  font-size: 18px;
}

.profile-identity > p:nth-of-type(1) {
  margin-top: 2px;
  font-size: 13px;
}

.profile-identity > p:nth-of-type(2) {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
}

.profile-meta {
  margin-top: 6px;
  font-size: 12.5px;
}

.profile-hero .profile-actions > button {
  min-height: 36px;
}

@media (min-width: 821px) {
  .profile-hero {
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-areas:
      "avatar identity"
      "avatar actions"
      "stats stats";
    gap: 14px 24px;
    padding: 34px 28px 26px;
  }

  .profile-hero-avatar {
    width: 150px;
    height: 150px;
    font-size: 42px;
  }

  .profile-hero .profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-self: start;
  }

  .profile-hero .profile-stats > button,
  .profile-hero .profile-stats > a,
  .profile-hero .profile-stats > div {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 5px;
    text-align: left;
  }

  .profile-hero .profile-stats strong {
    font-size: 15px;
  }

  .profile-hero .profile-stats span {
    font-size: 14px;
  }

  .profile-hero .profile-identity h1 {
    font-size: 22px;
  }

  .profile-identity > p:nth-of-type(2) {
    max-width: 520px;
  }

  .profile-hero .profile-actions {
    justify-content: flex-start;
  }
}

/* Optional records stay available without pushing the profile's photos down. */
.profile-achievements > summary {
  min-height: 44px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
}

.profile-achievements > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.profile-achievements .profile-status-panel {
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  body[data-view="profile"] .back-control {
    margin-block: 4px;
  }

}

/* Drops on a profile: a three-across grid first, the full cards on request. */
.profile-posts {
  padding: 0 0 24px;
}

.profile-posts > header {
  align-items: center;
  min-height: 46px;
  margin-bottom: 0;
  padding: 0 14px;
  border-top: 1px solid var(--border);
}

.profile-posts h3 {
  font-size: 13px;
}

.profile-layout {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-inset);
}

.profile-layout button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.profile-layout button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-layout button[aria-pressed="true"] {
  background: var(--surface-raised);
  color: var(--text);
}

.profile-layout button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.profile-grid[hidden] {
  display: none;
}

.profile-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-inset);
  color: #fff;
  text-decoration: none;
}

.profile-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-tile.is-poster {
  background: var(--surface-soft);
  color: var(--text);
}


.profile-tile-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px;
}

.profile-tile-poster small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.profile-tile-poster strong {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.profile-tile-mark {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.55));
}

.profile-tile-mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-tile-stats {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 120ms ease;
}

.profile-tile-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-tile-stats svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
}

@media (hover: hover) {
  .profile-tile:hover .profile-tile-stats,
  .profile-tile:focus-visible .profile-tile-stats {
    opacity: 1;
  }
}

.profile-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (min-width: 821px) {
  .profile-posts > header {
    padding: 0 6px;
  }
}

/* Notifications sit in the same reading spine as the feed. A one-line row does not need the whole
   desktop column, and the unread dot stays near the text it belongs to instead of 900 px away. */
@media (min-width: 821px) {
  #notifications {
    width: min(100%, 660px);
  }
}

/* ------------------------------------------------------------------ */
/* Categories: one colour table, and a rail that scrolls               */
/* ------------------------------------------------------------------ */

/* Every category's two colours are declared once here and read by the poster tile, the composer
   chip, the profile tile and the Home chip. Adding a category is one row. */
.drop-card.is-text-only[data-kind="music"] .drop-copy,
.profile-tile[data-kind="music"],
.category-chip[data-filter="music"] { --tile-a: #3b1d6e; --tile-b: #7a2f9a; }
.drop-card.is-text-only[data-kind="video"] .drop-copy,
.profile-tile[data-kind="video"],
.category-chip[data-filter="video"] { --tile-a: #7a1f2b; --tile-b: #b3412e; }
.drop-card.is-text-only[data-kind="photo"] .drop-copy,
.profile-tile[data-kind="photo"],
.category-chip[data-filter="photo"] { --tile-a: #143a5c; --tile-b: #2f7fae; }
.drop-card.is-text-only[data-kind="art"] .drop-copy,
.profile-tile[data-kind="art"],
.category-chip[data-filter="art"] { --tile-a: #0f4c5c; --tile-b: #1b7f8f; }
.drop-card.is-text-only[data-kind="design"] .drop-copy,
.profile-tile[data-kind="design"],
.category-chip[data-filter="design"] { --tile-a: #123f3a; --tile-b: #22806f; }
.drop-card.is-text-only[data-kind="writing"] .drop-copy,
.profile-tile[data-kind="writing"],
.category-chip[data-filter="writing"] { --tile-a: #3a3326; --tile-b: #6f6045; }
.drop-card.is-text-only[data-kind="podcast"] .drop-copy,
.profile-tile[data-kind="podcast"],
.category-chip[data-filter="podcast"] { --tile-a: #4a1633; --tile-b: #8f2f5c; }
.drop-card.is-text-only[data-kind="fashion"] .drop-copy,
.profile-tile[data-kind="fashion"],
.category-chip[data-filter="fashion"] { --tile-a: #55172a; --tile-b: #a33a4e; }
.drop-card.is-text-only[data-kind="food"] .drop-copy,
.profile-tile[data-kind="food"],
.category-chip[data-filter="food"] { --tile-a: #5a2a12; --tile-b: #a85a1f; }
.drop-card.is-text-only[data-kind="travel"] .drop-copy,
.profile-tile[data-kind="travel"],
.category-chip[data-filter="travel"] { --tile-a: #2a4a12; --tile-b: #5a9a22; }
.drop-card.is-text-only[data-kind="comedy"] .drop-copy,
.profile-tile[data-kind="comedy"],
.category-chip[data-filter="comedy"] { --tile-a: #5c3a10; --tile-b: #b07a18; }
.drop-card.is-text-only[data-kind="gaming"] .drop-copy,
.profile-tile[data-kind="gaming"],
.category-chip[data-filter="gaming"] { --tile-a: #5a1b5f; --tile-b: #a02d8f; }
.drop-card.is-text-only[data-kind="tech"] .drop-copy,
.profile-tile[data-kind="tech"],
.category-chip[data-filter="tech"] { --tile-a: #1c2b3a; --tile-b: #35617f; }
.drop-card.is-text-only[data-kind="learn"] .drop-copy,
.profile-tile[data-kind="learn"],
.category-chip[data-filter="learn"] { --tile-a: #2f2a5e; --tile-b: #5b4fae; }
.drop-card.is-text-only[data-kind="event"] .drop-copy,
.profile-tile[data-kind="event"],
.category-chip[data-filter="event"] { --tile-a: #0f4d2e; --tile-b: #1f8a4c; }
.drop-card.is-text-only[data-kind="collab"] .drop-copy,
.profile-tile[data-kind="collab"],
.category-chip[data-filter="collab"] { --tile-a: #17364a; --tile-b: #2f7a86; }
.drop-card.is-text-only[data-kind="ask"] .drop-copy,
.profile-tile[data-kind="ask"],
.category-chip[data-filter="ask"] { --tile-a: #2a2f7a; --tile-b: #4a55c2; }
.drop-card.is-text-only[data-kind="product"] .drop-copy,
.profile-tile[data-kind="product"],
.category-chip[data-filter="product"] { --tile-a: #6b4a11; --tile-b: #b97a12; }
.drop-card.is-text-only[data-kind="business"] .drop-copy,
.profile-tile[data-kind="business"],
.category-chip[data-filter="business"] { --tile-a: #1f2a44; --tile-b: #33507a; }
.drop-card.is-text-only[data-kind="profile"] .drop-copy,
.profile-tile[data-kind="profile"],
.category-chip[data-filter="profile"] { --tile-a: #4a2e1a; --tile-b: #8a5a2e; }

/* An active chip paints itself from that table: the dark end behind white text so every category
   reads at any size, the light end as the ring that carries the hue. Chips without a category in
   the table (All, Here first) keep the neutral treatment. */
.category-chip.is-active:is(
  [data-filter="music"],
  [data-filter="video"],
  [data-filter="photo"],
  [data-filter="art"],
  [data-filter="design"],
  [data-filter="writing"],
  [data-filter="podcast"],
  [data-filter="fashion"],
  [data-filter="food"],
  [data-filter="travel"],
  [data-filter="comedy"],
  [data-filter="gaming"],
  [data-filter="tech"],
  [data-filter="learn"],
  [data-filter="event"],
  [data-filter="collab"],
  [data-filter="ask"],
  [data-filter="product"],
  [data-filter="business"],
  [data-filter="profile"]
) {
  border-color: var(--tile-b);
  background: var(--tile-a);
  color: #fff;
}

/* Twenty categories do not fit on a desktop row, and wrapping them cost four rows of the screen
   before anything else. One scrolling row holds any number. The arrows sit in the row rather than
   floating over it: overlaid, the right-hand arrow landed exactly on the pause control and swallowed
   its clicks, and it hid whichever category happened to be beneath it. */
@media (min-width: 821px) {
  .category-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 14px;
  }

  /* Two earlier blocks style these with `:not([hidden])`, which outranks a bare class, so the
     override has to carry the same weight or the arrows stay absolutely positioned. */
  .category-scroll-button:not([hidden]),
  .category-scroll-button[hidden] {
    position: static;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    /* The strip carries 14px of bottom padding, so the same margin keeps the arrows on the chips'
       line rather than on the centre of the taller strip box. */
    margin-bottom: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: none;
    cursor: pointer;
  }

  /* Nothing to scroll to in that direction. The arrow keeps its place so the row does not jump by
     its width the moment the other end becomes scrollable; `visibility` leaves it inert and out of
     the accessibility tree. The `!important` is the only way past the global `[hidden]` rule and is
     scoped to this one control. */
  .category-rail > .category-scroll-button[hidden] {
    display: grid !important;
    visibility: hidden;
  }

  .category-scroll-button:hover {
    background: var(--surface-active);
  }

  .category-scroll-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .category-scroll-previous svg {
    transform: rotate(90deg);
  }

  .category-scroll-next svg {
    transform: rotate(-90deg);
  }
}

/* Seats left in the room. It sits at the top of the sign-up form because the number is the reason
   to finish it, and it turns quiet and factual rather than alarming once the room is full. */
.capacity-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-inset);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.capacity-note.is-full {
  border-color: var(--border-strong);
  color: var(--text-muted);
  font-weight: 500;
}

/* A held-back sign-up button reads as a state of the room, not as a failure of the person. */
#register-form button[type="submit"]:disabled {
  border-color: var(--border);
  background: var(--surface-inset);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Account switching stays behind the current username. */
.account-switcher-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.account-switcher-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-switcher-trigger svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-dialog.account-switcher-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); height: fit-content; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.account-switcher-handle { display: none; width: 36px; height: 4px; margin: 10px auto 0; border-radius: 8px; background: var(--border-strong); }
.account-switcher-header { display: flex; align-items: center; gap: 8px; min-height: 68px; padding: 12px 16px 4px; }
.sheet-dialog .account-switcher-header h2 { flex: 1; margin: 0; padding-left: 8px; font-size: 18px; letter-spacing: -0.02em; }
.account-switcher-header h2:focus { outline: none; }
.account-switcher-body { padding: 4px 12px 16px; }
.managed-account-list { display: grid; gap: 0; }
.managed-account-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.managed-account-row:hover:not(:disabled) { background: var(--surface-soft); }
.managed-account-row:disabled { cursor: default; }
:is(.managed-account-row, .account-switcher-trigger):focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.managed-account-row .avatar, .managed-account-add-icon { flex: none; width: 48px; height: 48px; }
.managed-account-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.managed-account-copy > strong, .managed-account-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managed-account-copy > strong, .managed-account-add > strong { font-size: 15px; font-weight: 600; }
.managed-account-copy > span { color: var(--text-secondary); font-size: 13px; }
.managed-account-check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: var(--bg); background: var(--text); font-size: 14px; font-weight: 700; }
.managed-account-add { margin-top: 4px; }
.managed-account-add-icon { display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 28px; font-weight: 300; }
.account-switcher-body > :is(.form-error, .field-note, .text-button), #managed-account-limit { margin: 8px 12px; }
#managed-account-form { padding: 4px 12px 8px; }
#managed-account-form > .field-note { margin: 0; }
#managed-account-form > .publish-button { width: 100%; margin-top: 8px; min-height: 48px; }
#managed-signin-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
@media (max-width: 600px) {
  .sheet-dialog.account-switcher-dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px)); margin: auto 0 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .account-switcher-handle { display: block; }
  .account-switcher-header { min-height: 56px; padding-top: 4px; }
  .account-switcher-trigger { font-size: 22px; }
}

/* A reply sits under what it answers: one step of indent, a quiet marker naming the
   person, and nothing else. One level only, so a thread on a phone never marches off the
   right-hand edge. */
.drop-comment.is-reply { margin-left: 34px; }
/* A display name that wraps mid-word reads as a rendering fault. The meta row may wrap so
   the handle and time drop to their own line; the name itself never breaks. This was true
   before replies existed and the indent only made it easy to see. */
.drop-comment .chat-message-meta { flex-wrap: wrap; row-gap: 0; }
.drop-comment .chat-author {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-comment-answering { margin: 0 0 2px; color: var(--text-secondary); font-size: 12px; }
.comments-reply-draft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 13px;
}
.comments-reply-draft[hidden] { display: none; }

/* The order the reader picks. Lighter than the category chips underneath,
   so the hierarchy reads lens, then order, then category, top to bottom. */
.feed-order {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.feed-order[hidden] {
  display: none;
}

.feed-order button {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.feed-order button:hover {
  color: var(--text);
}

/* Filled when chosen, like the category chip directly underneath. An outlined
   active state here would read as the opposite convention two rows apart. */
.feed-order button.is-active {
  background: var(--text);
  color: var(--bg);
}

/* Following a topic. The live toggle moves into the category rail at runtime, so
   this is the only other child of the feed header and space-between puts it right. */
.topic-follow {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 12px;
  /* Transparent rather than none, so gaining the outline below costs no reflow. */
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.topic-follow[hidden] {
  display: none;
}

/* Following is a state, not an invitation: it goes quiet so the accent keeps
   meaning "the thing to press", exactly as the Follow on a card does. */
.topic-follow[aria-pressed="true"] {
  border-color: var(--border);
  background: transparent;
  color: var(--text);
}

.topic-follow:disabled {
  opacity: 0.6;
}

/* Events. A card is a time, a host and who said they are coming --
   deliberately not a Drop card, because an event is not a post. */
.events-surface[hidden],
.events-list[hidden],
.events-empty[hidden] {
  display: none;
}

@media (max-width: 820px) {
  .events-surface {
    padding-inline: 16px;
  }
}

.events-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 4px 0 12px;
}

/* At 320px the row squeezed this to 72px and "New event" broke across two lines.
   It keeps its words and drops below the text instead. */
.events-header > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.events-header > div {
  flex: 1 1 12rem;
  min-width: 0;
}

.events-header h3 {
  margin: 0 0 2px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.events-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.events-when {
  margin-bottom: 14px;
}

.events-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.event-card {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.event-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.event-card-head h4 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.015em;
}

.event-cancelled {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}

.event-when {
  margin: 6px 0 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
}

.event-body {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.event-host,
.event-attendance {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.event-answer {
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

/* Pressing the answer you already gave withdraws it, so the filled state has to
   read as "this is you", not as "press here". */
.event-answer.is-active {
  border-color: transparent;
  background: var(--text);
  color: var(--bg);
}

.events-empty {
  margin: 18px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.event-dialog-body {
  display: grid;
  gap: 6px;
  padding: 0 20px 20px;
}

.event-dialog-body label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
}

.event-dialog-body input,
.event-dialog-body textarea {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-control);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.event-dialog-body textarea {
  resize: vertical;
}

.event-dialog-body .publish-button {
  margin-top: 8px;
}

/* An event has an address of its own. The share control sits with the answers
   when there are any, and alone on the card when there are not. */
.event-share {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.event-share:hover {
  color: var(--text);
}

.event-card > .event-share {
  margin-top: 10px;
  margin-left: -12px;
}

/* A card reached by its own link says so briefly, rather than looking like any other. */
.event-card.is-focused {
  border-color: var(--accent);
}

/* The answer the author lifted. It reads as a state, not a decoration, so the
   marker says who chose it rather than only showing an icon. */
.drop-comment-pinned {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.chat-message.drop-comment.is-pinned {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

.chat-message-actions button.is-active {
  color: var(--accent);
}

/* A word filter the member controls, and what it does to a comment. */
.word-filter[hidden] {
  display: none;
}

.word-filter form {
  display: flex;
  gap: 8px;
  margin: 10px 0 6px;
}

.word-filter input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-control);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

/* Not moderation: it says who hid it and offers the text back in one press. */
.comment-muted-veil {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-style: italic;
  text-align: left;
  cursor: pointer;
}

.comment-muted-veil:hover {
  color: var(--text);
}

/* A pinned message. The marker is small and unattributed on purpose -- a
   conversation is shared, and naming who pinned it invites an argument. */
.message-pinned {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--accent);
}

/* The base svg rule sets only display, so every component supplies its own paint.
   Without this the pin filled black -- an outline path filled solid, which on a dark
   thread read as a small dark blob rather than a pin. */
.message-pinned svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#message-action-pin {
  width: 100%;
  min-height: 58px;
  padding: 15px 20px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#message-action-pin[hidden] {
  display: none;
}

#message-action-pin:hover {
  background: var(--surface-hover);
}

/* Folders on the saved lens. Same chip idiom as the order strip above it, so the
   two rows read as one control surface rather than two designs. */
.save-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}

.save-folders[hidden] {
  display: none;
}

.save-folder-chip {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.save-folder-chip:hover {
  color: var(--text);
}

.save-folder-chip.is-active {
  background: var(--text);
  color: var(--bg);
}

/* Who has seen a story. Only its author opens this, and the count can be larger
   than the list: a blocked viewer is counted without being named. */
.story-viewers-dialog { max-width: 26rem; }

.story-viewers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  max-height: 50vh;
  overflow-y: auto;
}

.story-viewer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-viewer-when {
  margin-left: auto;
  font-size: 0.85em;
  opacity: 0.7;
  white-space: nowrap;
}

.story-viewers-note {
  font-size: 0.85em;
  opacity: 0.7;
  margin: 4px 0 0;
}

/* Installing the app. The steps are only drawn on Apple devices, where there is no
   prompt event and the Share menu is the only route. */
.install-steps {
  margin: 10px 0 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.install-steps li { font-size: 0.92em; }

/* A Drop folded away by the viewer's own filter. The card keeps its place in the
   shared chronological order -- nothing is removed or reordered -- and collapses
   to a single strip naming the phrase that matched, with a control to open it.
   See app/static/personal-filter.js. */
.drop-card.is-personally-filtered { padding: 0; }
.personal-filter-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 14px 16px; border-radius: inherit;
  background: var(--surface-inset);
  border: 1px dashed var(--border-strong);
}
.personal-filter-strip-copy { margin: 0; font-size: 14px; color: var(--text-secondary); }
.personal-filter-strip-copy strong { color: var(--text); }
/* 44px is this site's touch-target floor (see business.css, familiar-ui.css and
   DM-TOUCH-TARGETS-20260906.md). A real 375px browser measured this control at
   32px before the min-height was added. */
.personal-filter-reveal { flex: 0 0 auto; min-height: 44px; padding: 0 12px; }

.personal-filter-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.personal-filter-form .field { flex: 1 1 200px; margin: 0; }
.personal-filter-form input { width: 100%; min-height: 44px; box-sizing: border-box; font-size: 16px; }
.personal-filter-form .publish-button { min-height: 44px; }
.personal-filter-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.personal-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 12px;
  background: var(--surface-inset);
}
.personal-filter-phrase { flex: 1 1 120px; font-weight: 600; overflow-wrap: anywhere; }
.personal-filter-strength { flex: 0 1 auto; max-width: 100%; min-height: 44px; font: inherit; font-size: 16px; }
.personal-filter-remove { flex: 0 0 auto; min-height: 44px; padding: 0 12px; }

@media (max-width: 600px) {
  .personal-filter-row { align-items: stretch; }
  .personal-filter-phrase { flex-basis: 100%; }
}

/* Drops whose wording resembles the one being read. A supplementary list on the
   Drop page, not a feed: no ranking authority, no ordering promise. See
   app/related.py and renderRelatedDrops in app.js. */
.related-drops { margin: 16px 0 0; padding: 16px; border-radius: 16px; background: var(--surface-raised); border: 1px solid var(--border); }
.related-drops-title { margin: 0 0 4px; font-size: 1rem; font-weight: 650; color: var(--text); }
.related-drops-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.related-drops-link {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center;
  padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none;
}
.related-drops-link:hover, .related-drops-link:focus-visible { background: var(--surface-hover); }
.related-drops-heading { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.related-drops-author { color: var(--text-secondary); font-size: .85rem; }
.message-forward-targets {
  display: grid;
  gap: .5rem;
  max-height: 35vh;
  overflow: auto;
}
.message-forward-targets button {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.message-forward-targets button[aria-pressed="true"] {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}
.message-forwarded-label {
  display: block;
  font-style: italic;
}

/* Mixed galleries preserve complete video pixels and a separate control row. */
.drop-media-carousel .drop-media-gallery.is-multiple .drop-media-item {
  aspect-ratio: auto;
  align-self: start;
}
/* Keep inactive slides in the horizontal track without sizing its visible height. */
.drop-media-carousel .drop-media-gallery.is-multiple .drop-media-item[data-gallery-active="false"] {
  height: 0;
}
.drop-media-carousel .drop-media-gallery.is-multiple .drop-media-item > img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.drop-media-carousel .drop-media-gallery.is-multiple .drop-media-item > video {
  height: auto;
  max-height: min(640px, 64svh);
  object-fit: contain;
}
.drop-media-navigation { display: flex; justify-content: space-between; gap: 12px; padding: 8px; }
.drop-media-navigation button { min-width: 44px; min-height: 44px; }
.drop-media-carousel [role="region"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Responsive guardrails: keep the phone chrome on one line and keep every search/control
   surface inside its deliberate gutter. These are final overrides because the stylesheet also
   contains the older feature-specific phone rules above. */
@media (max-width: 820px) {
  .mobile-header {
    min-width: 0;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: clip;
  }

  .brand-mobile {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .brand-mobile .brand-wordmark {
    width: clamp(70px, 24vw, 94px);
    max-width: 100%;
  }

  .mobile-header-actions {
    min-width: 0;
    flex: 0 0 auto;
    gap: clamp(0px, 0.5vw, 4px);
  }

  .mobile-header .round-icon-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  .content-grid,
  .main-column,
  .discover-section,
  .discover-people,
  .discover-drops,
  .discover-controls,
  #discover-search-tools {
    min-width: 0;
  }

  #discover-search-tools {
    width: auto;
    max-width: calc(100% - 32px);
    margin: 16px 16px 0;
  }

  #discover-search-tools .discover-search,
  #discover-search-tools .discover-controls {
    width: 100%;
  }

  #discover-search-tools .segmented-control {
    min-width: 0;
    flex: 1 1 auto;
  }

  #discover-search-tools .segmented-control button {
    min-width: 0;
    flex: 1 1 0;
    padding-right: clamp(6px, 2.5vw, 11px);
    padding-left: clamp(6px, 2.5vw, 11px);
    white-space: nowrap;
  }

  .mobile-bottom-nav {
    /* Keep destinations in place while capability checks hide or restore actions. */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow-x: clip;
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }

  .mobile-bottom-nav > button {
    min-width: 0;
    grid-row: 1;
    max-width: none;
    padding-right: 2px;
    padding-left: 2px;
  }

  .mobile-bottom-nav > button:nth-child(1) { grid-column: 1; }
  .mobile-bottom-nav > button:nth-child(2) { grid-column: 2; }
  .mobile-bottom-nav > button:nth-child(3) { grid-column: 3; }
  .mobile-bottom-nav > button:nth-child(4) { grid-column: 4; }
  .mobile-bottom-nav > button:nth-child(5) { grid-column: 5; }

  .mobile-bottom-nav > button > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  .mobile-header {
    gap: 4px;
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .mobile-header .round-icon-button {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .brand-mobile .brand-wordmark {
    width: clamp(66px, 24vw, 84px);
  }
}

/* The app is an interaction surface, not a document: prevent accidental drag/text
   selection while keeping every editable control selectable and usable. */
html,
body,
body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body :where(input, textarea, select, [contenteditable="true"], [contenteditable=""], [role="textbox"], [role="combobox"]),
body :where(input, textarea, select, [contenteditable="true"], [contenteditable=""], [role="textbox"], [role="combobox"]) * {
  -webkit-user-select: text;
  user-select: text;
}

/* Asset cache reset: R148 recovery from pre-release URL caching. */

.app-update-notice {
  position: fixed;
  z-index: 400;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 6px 24px #0003;
}
.app-update-notice[hidden] { display: none; }
.app-update-notice p { flex: 1; margin: 0; font-size: 14px; line-height: 1.4; }
.app-update-notice button { min-height: 44px; flex-shrink: 0; }
@media (max-width: 480px) {
  .app-update-notice { flex-wrap: wrap; }
  .app-update-notice p { flex-basis: 100%; }
}

/* Keep secondary Home panels out of the first loading frame. */
body[data-view="all"]:has(#feed-loading:not([hidden])) .right-rail [data-room-chrome] { visibility: hidden; }

/* Daily content updates independently from its stable archive control. */
.world-daily-content { display: grid; gap: 12px; }

/* Discover search uses Instagram Explore's grid, measured at 375 px on 2026-09-23:
   three columns of square 125 px tiles with 1 px gaps. A tile opens its post. */
#discover-drop-list.discover-grid,
body[data-view="discover"] #discover-drop-list.feed.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  min-height: 0;
}

#discover-drop-list.discover-grid > .profile-tile {
  aspect-ratio: 1 / 1;
}

#discover-drop-list.discover-grid > .discover-section-empty {
  grid-column: 1 / -1;
}

@media (max-width: 820px) {
  /* Edge to edge on phones, as Instagram's grid is (0-375 px at 375 px). Undo the section's
     16px padding rather than using 100vw, which also counts a desktop scrollbar. */
  #discover-drop-list.discover-grid {
    margin-inline: -16px;
  }
}

/* A folded Discover tile keeps its square: the phrase and "Show anyway" fill it, centred. */
.profile-tile.is-personally-filtered .personal-filter-strip {
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  text-align: center;
  overflow: hidden;
}

.profile-tile.is-personally-filtered .personal-filter-strip-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 11px;
  line-height: 14px;
  overflow-wrap: anywhere;
}

/* Keeps the 44px touch floor; two text lines and the button fit a 106px tile at 320px. */
.profile-tile.is-personally-filtered .personal-filter-reveal {
  padding: 0 6px;
  font-size: 12px;
  white-space: nowrap;
}

/* Compact Discover, like Instagram's Explore: the search field and the grid only. Headings and
   the people directory return as soon as the viewer starts a search (see discoverCompact). */
#discover.is-compact .discover-drops > header,
#discover.is-compact .discover-people {
  display: none;
}

.discover-search-cancel {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 4px;
  font-weight: 600;
}

.discover-search-cancel[hidden] {
  display: none;
}

@media (max-width: 820px) {
  #discover-search-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
  }

  #discover-search-tools .discover-search {
    flex: 1 1 0;
    min-width: 0;
  }

  #discover-search-tools .discover-controls {
    flex: 1 0 100%;
  }
}

/* Instagram leaves 13 px between its search field and the grid (56 -> 69 px at 375 px). */
#discover.is-compact #discover-search-tools {
  margin-bottom: 12px;
}

/* Comments read as Instagram's: name and text, then one quiet line with the age, Reply and More. */
.drop-comment {
  grid-template-columns: 38px minmax(0, 1fr);
}

.drop-comment .drop-comment-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 2px 0 0;
  opacity: 1;
  color: var(--muted, #8e8e96);
  font-size: 12px;
}

.drop-comment .drop-comment-actions button {
  width: auto;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
}

.drop-comment .drop-comment-more svg {
  width: 18px;
  height: 18px;
}

.drop-comment .drop-comment-actions button[data-comment-action="pin"],
.drop-comment .drop-comment-actions button[data-comment-action="report"],
.drop-comment .drop-comment-actions button[data-comment-action="delete"] {
  width: 32px;
}

.drop-comment .drop-comment-time {
  font-variant-numeric: tabular-nums;
}

/* The feed and the empty state share row 4. Placed implicitly, the feed was pushed into an extra
   19 px column (measured on louderr.app), which squeezed the empty state and the Refresh strip. */
.flow-section > .flow-feed,
.flow-section > .flow-now,
.flow-section > .flow-stories,
.flow-section > .flow-history {
  grid-column: 1 / -1;
}

.drop-comment .chat-message-main + .drop-comment-actions {
  margin-top: -6px;
}

/* On a post's own page the card's bottom edge already divides it from the comments: one line, not two 8 px apart. */
.is-shared-drop .comments-inline {
  border-top: 0;
}

/* A post's own page lists its comments right below; the card's "View all N comments" line would repeat them. */
.is-shared-drop .drop-card .drop-comments-line {
  display: none;
}

/* business.css */
/* Scoped business UI. Loaded after styles.css; never changes organic card or feed styles. */
.business-surface { min-width: 0; display: grid; gap: 18px; color: var(--text); }
.business-surface[hidden], .business-surface [hidden], .business-ad-host[hidden] { display: none !important; }
.business-header, .business-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.business-header h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.2; letter-spacing: -.035em; }
.business-surface h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.business-panel { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.business-note { margin: 8px 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.55; overflow-wrap: anywhere; }
.business-campaign-list { display: grid; gap: 16px; }
.business-status, .business-disclosure { display: inline-flex; flex-shrink: 0; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 9px; color: var(--text-secondary); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.business-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.business-button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; max-width: 100%; padding: 10px 15px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-soft); color: var(--text); font: inherit; font-size: .85rem; font-weight: 650; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.business-button:hover { background: var(--surface-hover); text-decoration: none; }
.business-button--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.business-button--primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.business-button--danger { color: var(--danger-text); background: var(--danger-panel-bg); border-color: var(--danger-panel-border); }
.business-button--quiet { background: transparent; }
.business-button:disabled { opacity: .55; cursor: not-allowed; }
.business-button:focus-visible, .business-surface summary:focus-visible, .business-field input:focus-visible, .business-field select:focus-visible, .business-field textarea:focus-visible, .business-check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.business-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 14px; }
.business-metric { min-width: 0; }
.business-metric dt { margin-bottom: 6px; color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.business-metric dd { margin: 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.business-surface summary { min-height: 44px; padding: 10px 0; color: var(--text); font-size: .9rem; font-weight: 650; cursor: pointer; }
.business-details { margin-top: 12px; border-top: 1px solid var(--border); }
.business-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.business-field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.business-field-label { color: var(--text-secondary); font-size: .82rem; font-weight: 650; }
.business-field input, .business-field textarea, .business-field select { display: block; min-width: 0; width: 100%; min-height: 44px; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-control); color: var(--text); font: inherit; font-size: 16px; line-height: 1.45; }
.business-field textarea { min-height: 116px; resize: vertical; }
.business-field:has(textarea), .business-form > .business-note, .business-form > .business-check, .business-form > .business-error, .business-form > .business-actions, .business-form > .business-form-preview, .business-form > .business-button { grid-column: 1 / -1; }
.business-field .business-note { margin: 0; font-size: .75rem; }
.business-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.5; cursor: pointer; }
.business-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.business-error { margin: 10px 0; border-left: 3px solid var(--danger); padding: 10px 12px; color: var(--danger-text); background: var(--danger-panel-bg); font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; }
.business-confirmation { margin: 12px 0; padding: 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-soft); }
.business-confirmation .business-button { margin: 5px 8px 0 0; }
.business-creative { min-width: 0; padding: 20px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface-raised); color: var(--text); overflow-wrap: anywhere; }
.business-creative h3 { margin: 14px 0 8px; font-size: 1.15rem; line-height: 1.35; letter-spacing: -.02em; }
.business-creative-body { margin: 8px 0 16px; color: var(--text-secondary); font-size: .9rem; line-height: 1.6; white-space: pre-wrap; }
.business-sponsored-card { border-color: var(--border-strong); }
.business-ad-report { margin-top: 14px; border-top: 1px solid var(--border); }
.business-ad-report summary { min-height: 44px; padding: 12px 0; color: var(--text-secondary); font-size: .8rem; cursor: pointer; }
.business-ad-report summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.business-ad-report [hidden] { display: none !important; }
.business-ad-host { min-width: 0; margin: 16px 0; }
.business-ad-host[data-ad-surface="flow"] { scroll-snap-align: start; display: grid; align-content: center; min-height: min(70svh, 680px); padding: 16px; }
.business-price { margin: 12px 0; font-size: 1.5rem; line-height: 1.3; font-weight: 750; letter-spacing: -.03em; }
.business-perks { margin: 10px 0; padding-left: 22px; color: var(--text-secondary); font-size: .9rem; line-height: 1.7; }
@media (max-width: 600px) {
  .business-panel, .business-creative { padding: 16px; border-radius: 14px; }
  .business-header { flex-wrap: wrap; }
  .business-row { flex-wrap: wrap; gap: 8px; }
  .business-form { grid-template-columns: minmax(0, 1fr); }
  .business-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .business-actions > .business-button { flex: 1 1 auto; }
  .business-ad-host[data-ad-surface="flow"] { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .business-surface *, .business-sponsored-card * { scroll-behavior: auto; transition: none; }
}

/* familiar-ui.css */
/*
 * LOUDERR interaction and visual hierarchy.
 *
 * Shared social-app controls, reading hierarchy and task-specific overlays.
 */

:root {
  --ui-gutter: 16px;
  --ui-control: 44px;
  --ui-dialog-radius: 16px;
  --ui-popover-radius: 12px;
  --ui-overlay-border: var(--border-strong);
  --ui-overlay-shadow: 0 24px 72px rgba(0, 0, 0, 0.48);
  --ui-popover-shadow: 0 14px 42px rgba(0, 0, 0, 0.42);
}

/* Quiet chrome lets member content carry the colour. */
.nav-item {
  border-inline-start: 3px solid transparent;
  color: var(--text-secondary);
  font-weight: 500;
}

.nav-item.is-active {
  border-inline-start-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.nav-section-label { display: none; }

/* The same branded primary action anchors desktop and mobile navigation. */
.desktop-sidebar > .create-button {
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.desktop-sidebar > .create-button svg { stroke: currentColor; }
.desktop-sidebar > .create-button:hover:not(:disabled) { background: var(--accent-hover); }
.desktop-sidebar :is(.nav-item, .create-button):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -4px;
}

.feed-scope {
  display: flex;
  gap: 24px;
  width: auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.feed-scope::before { display: none; }

.feed-scope button {
  min-height: 48px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
}

.feed-scope button.is-active {
  border-bottom-color: var(--accent);
  box-shadow: none;
  background: transparent;
  color: var(--text);
}
.feed-scope button:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }

/* Three lenses of very different length: size to content and let the strip scroll, like feed tabs. */
.feed-scope {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.feed-scope::-webkit-scrollbar { display: none; }

.feed-scope button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 2px 10px;
}

.feed-scope button[hidden] { display: none; }

#category-strip .category-chip {
  border-radius: 8px;
  background: var(--surface-soft);
  border-color: transparent;
  color: var(--text-secondary);
  font-weight: 600;
}

#category-strip .category-chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

#category-strip .category-chip:hover:not(.is-active) {
  background: var(--surface-hover);
  color: var(--text);
}

/* Realtime refreshes must not fade the reading surface out and back in. */
.feed > .drop-card { animation: none; }
.drop-card .author-copy strong { font-size: 14px; font-weight: 600; }
.drop-card .author-copy small { font-size: 12px; }
.drop-card .drop-description { color: var(--text); }
.drop-card.is-text-only .drop-description { color: var(--text); }
.drop-card .more-button { width: 44px; height: 44px; }
.drop-card .repost-action { min-width: 44px; min-height: 44px; }
.drop-card .repost-action.is-reposted,
.flow-actions .flow-repost.is-reposted { color: var(--accent); }
.flow-card.is-text .flow-actions { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
/* Keep every action reachable when the media stage is shorter than the action stack. */
.flow-card:not(.is-text) .flow-actions {
  max-height: calc(100% - 144px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 4px 0;
}
.drop-card .drop-media { border-radius: 4px; }
.drop-card .drop-footer:has(.engagement-line:empty):has(.drop-link[hidden]) { display: none; }

@media (min-width: 821px) {
  html { scrollbar-gutter: stable; }
  .desktop-sidebar { padding: 24px 16px 16px; }
  .desktop-sidebar > .brand { flex-shrink: 0; }
  .primary-nav {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    gap: 12px;
    margin: 24px 0 12px;
    padding: 2px;
  }
  .nav-group { gap: 4px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .nav-you { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--border); }
  .nav-item { height: 48px; min-height: 48px; gap: 8px; padding-inline: 8px; font-size: 16px; border-radius: 8px; }
  .nav-item svg { width: 24px; height: 24px; }
  .create-button { flex-shrink: 0; min-height: 48px; font-size: 15px; }
  .sidebar-account { flex-shrink: 0; min-height: 56px; margin-top: 8px; }
  .desktop-search { border-radius: 8px; }
  body:is([data-view="all"], [data-view="following"], [data-view="saved"], [data-view="mine"], [data-view="drop"], [data-view="topic"]) .main-column {
    width: min(100%, 620px);
  }
  .feed > .drop-card:not(.is-personally-filtered) {
    margin-bottom: 20px;
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  .feed > .drop-card:not(.is-new):not(.is-personally-filtered) { background: transparent; }
  .feed > .drop-card:hover { border-color: var(--border); }
}

/* The final interaction layer must also respect short laptop windows. Keep
   every destination available; very short windows still scroll the nav only. */
@media (min-width: 821px) and (max-height: 800px) {
  .desktop-sidebar { padding: 16px 12px 12px; }
  .primary-nav { gap: 8px; margin: 12px 0 8px; }
  .nav-group { gap: 2px; }
  .nav-you { margin-top: 0; padding-top: 8px; }
  .nav-item { height: 44px; min-height: 44px; font-size: 15px; }
  .nav-item svg { width: 22px; height: 22px; }
  .create-button { height: 44px; min-height: 44px; margin-top: 6px; }
  .sidebar-account { min-height: 52px; margin-top: 4px; padding-block: 8px; }
}

@media (max-width: 820px) {
  .feed-scope { justify-content: center; justify-content: safe center; gap: 12px; margin-bottom: 8px; }
  .feed-scope button { min-height: 44px; padding-bottom: 8px; }
  .drop-card .drop-media { border-radius: 0; }
  .mobile-bottom-nav > button.is-active { color: var(--accent); }
  .mobile-bottom-nav .mobile-primary-icon { border-radius: 10px; }
  .mobile-bottom-nav > button:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
}

@media (max-width: 360px) {
  .feed-scope button { font-size: 14px; }
}

@media (forced-colors: active) {
  .nav-item.is-active { border-inline-start-color: Highlight; }
  .feed-scope button.is-active { border-bottom-color: Highlight; }
}

/* Keep the Home room rich; let every other destination own its canvas. */
@media (min-width: 821px) {
  .content-grid {
    max-width: 1320px;
    margin-inline: auto;
    padding: 24px 28px 72px;
  }

  :is(
    body[data-view="profile"],
    body[data-view="drop"],
    body[data-view="saved"],
    body[data-view="mine"],
    body[data-view="notifications"],
    body[data-view="flow"]
  ) .content-grid {
    max-width: 980px;
    grid-template-columns: minmax(0, 1fr);
  }

  :is(
    body[data-view="discover"],
    body[data-view="trending"],
    body[data-view="advertise"],
    body[data-view="premium"]
  ) .content-grid {
    max-width: 1120px;
    grid-template-columns: minmax(0, 1fr);
  }

  :is(
    body[data-view="profile"],
    body[data-view="drop"],
    body[data-view="saved"],
    body[data-view="mine"],
    body[data-view="notifications"],
    body[data-view="discover"],
    body[data-view="trending"],
    body[data-view="advertise"],
    body[data-view="premium"],
    body[data-view="flow"]
  ) .right-rail {
    display: none;
  }

  /* Home keeps live context, but the four passive counters do not compete with the Floor. */
  body[data-view="all"] .right-rail .room-stats {
    display: none;
  }
}

/* A post and its conversation share the desktop canvas. Keep natural page
   scrolling and the same DOM order when the layout stacks on smaller screens. */
@media (min-width: 1100px) {
  body[data-view="drop"].comments-inline-open .content-grid { max-width: 1120px; }
  body[data-view="drop"].comments-inline-open .main-column { width: 100%; }
  body[data-view="drop"].comments-inline-open #floor {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  body[data-view="drop"].comments-inline-open #floor > * { min-width: 0; grid-column: 1 / -1; }
  body[data-view="drop"].comments-inline-open #feed { grid-column: 1; grid-row: 1; }
  body[data-view="drop"].comments-inline-open #drop-comments-inline {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
  body[data-view="drop"].comments-inline-open .comments-inline .dialog-header { padding-top: 0; }
  body[data-view="drop"].comments-inline-open .comments-inline .drop-comment { padding-inline: 0; }
  body[data-view="drop"].comments-inline-open .comments-inline .comments-composer { padding-inline: 0; }
}

/* The intro repeats information already available from How it works. */
.right-rail .explainer-card {
  display: none;
}

/* Native dialogs preserve focus trapping, Escape, and focus restoration. */
html:has(dialog[open]) {
  overflow: hidden;
}

dialog::backdrop,
.utility-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) {
  border: 1px solid var(--ui-overlay-border);
  border-radius: var(--ui-dialog-radius);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--ui-overlay-shadow);
  font-size: 14px;
  line-height: 1.5;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog)[open] {
  animation: familiar-dialog-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes familiar-dialog-in {
  from {
    transform: translateY(8px) scale(0.99);
  }
}

.sheet-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
}

.profile-dialog {
  width: min(640px, calc(100vw - 32px));
}

.dialog-header {
  min-height: 64px;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

:is(.profile-dialog, .admin-dialog) h2 {
  font-size: 22px;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .dialog-header p,
.small-dialog header p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.dialog-icon-button {
  width: var(--ui-control);
  height: var(--ui-control);
}

.dialog-icon-button:hover {
  background: var(--surface-hover);
}

.composer-scroll,
.profile-body,
.project-scroll {
  padding: 18px 20px 24px;
}

/* Account navigation remains available while the selected section scrolls. */
#account-dialog .dialog-header {
  grid-template-columns: minmax(0, 1fr) auto 44px;
}

#account-dialog .dialog-header > .dialog-icon-button {
  grid-column: 3;
}

#account-dialog .account-logout {
  grid-column: 2;
  min-height: 44px;
  font-size: 14px;
}

#account-dialog .profile-body {
  scroll-padding-top: 64px;
}

#account-dialog .profile-body:has(#member-account:not([hidden])) {
  padding-top: 0;
}

#account-dialog .account-section-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-raised);
}

#account-dialog .account-section-tabs {
  position: relative;
  --account-fade-left: 0px;
  --account-fade-right: 0px;
  scroll-padding-inline: 24px;
  mask-image: none;
}

#account-dialog .account-section-tabs.can-scroll-back { --account-fade-left: 24px; }
#account-dialog .account-section-tabs.can-scroll-forward { --account-fade-right: 24px; }
#account-dialog .account-section-tabs:is(.can-scroll-back, .can-scroll-forward) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--account-fade-left), #000 calc(100% - var(--account-fade-right)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--account-fade-left), #000 calc(100% - var(--account-fade-right)), transparent);
}

#account-dialog .account-section-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* Loading replaces rows above these controls. Avoid moving a target during a tap;
   visibility preserves the current space and restores the tools on errors too. */
#account-security-panel:has(#security-loading:not([hidden])) > :is(.security-block, .security-form-block, .account-actions) {
  visibility: hidden;
}

#account-dialog .enforcement-panel {
  gap: 8px;
  padding: 20px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#account-dialog .enforcement-panel > p {
  font-size: 14px;
}

#account-dialog #enforcement-list {
  gap: 0;
}

#account-dialog .enforcement-card {
  gap: 10px;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  scroll-margin-top: 8px;
}

#account-dialog .enforcement-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#account-dialog .enforcement-card > strong {
  font-size: 16px;
  text-transform: none;
}

#account-dialog .enforcement-card small,
#account-dialog .enforcement-state {
  font-size: 13px;
  line-height: 1.5;
}

#account-dialog .enforcement-reference {
  color: var(--text-secondary);
  font-size: 13px;
}

#account-dialog .enforcement-reference summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#account-dialog .enforcement-reference code {
  display: block;
  padding-bottom: 8px;
  font-size: 12px;
  user-select: all;
}

/* Publication feedback stays beside Publish while the draft scrolls independently. */
.composer-dialog .composer {
  display: flex;
  flex-direction: column;
  max-height: min(818px, calc(100dvh - 34px));
}

.composer-dialog .dialog-header {
  flex-shrink: 0;
}

.composer-dialog .composer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.composer-dialog #form-error {
  flex: 0 0 auto;
  max-height: 30dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 12px 16px;
  border-width: 0 0 1px;
  border-radius: 0;
}

.small-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
}

.small-dialog > header,
.small-dialog > form > header {
  gap: 12px;
}

.small-dialog footer {
  gap: 8px;
  margin-top: 20px;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) :is(
  .publish-button,
  .secondary-button,
  .danger-button,
  .text-button,
  .federated-provider-button
) {
  min-height: var(--ui-control);
  font-size: 14px;
  line-height: 1.4;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field {
  gap: 7px;
  margin-top: 16px;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field > span {
  font-size: 14px;
  font-weight: 650;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field > span small {
  font-size: 12px;
}

:is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field :is(input, select, textarea) {
  min-height: var(--ui-control);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
}

:is(#report-dialog, #chat-report-dialog, #dm-report-dialog, #profile-report-dialog) .danger-button {
  border-color: var(--danger-panel-border);
  background: var(--danger-soft);
  color: var(--danger-text);
}

:is(#report-dialog, #chat-report-dialog, #dm-report-dialog, #profile-report-dialog) .danger-button:hover {
  border-color: var(--danger);
  background: var(--danger-panel-bg);
}

/* Familiar desktop overflow menus: compact, anchored, and flat. */
.action-menu,
.profile-safety-menu-list,
.emote-picker {
  border: 1px solid var(--ui-overlay-border);
  border-radius: var(--ui-popover-radius);
  background: var(--surface-menu);
  box-shadow: var(--ui-popover-shadow);
}

.action-menu {
  width: 220px;
  padding: 6px;
}

.action-menu button,
.profile-safety-menu-list button {
  min-height: var(--ui-control);
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.action-menu button svg {
  width: 19px;
  height: 19px;
}

.action-menu .danger-menu-item {
  margin-top: 4px;
  box-shadow: inset 0 1px var(--border);
  color: var(--danger-text);
}

.toast {
  min-height: var(--ui-control);
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-size: 13px;
  line-height: 1.4;
}

/* A tighter mobile Home exposes the first Drop sooner. */
@media (max-width: 820px) {
  html:has(.action-menu:not([hidden])) {
    overflow: hidden;
  }

  body[data-view="all"] .mobile-search-wrap {
    display: none;
  }

  body[data-view="all"] #board.is-empty .board-content {
    display: none;
  }

  body[data-view="all"] #board.is-empty .board-header {
    min-height: 52px;
    padding: 8px 14px;
  }

  body[data-view="all"] #board.is-empty .board-queue > summary {
    min-height: var(--ui-control);
    padding-block: 8px;
  }

  body[data-view="all"] .feed-section {
    padding-top: 14px;
  }

  .flow-chat-shortcut {
    min-height: var(--ui-control);
  }

  /* Creation stays a dedicated full-screen task on compact screens. */
  .composer-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .composer-dialog .composer {
    height: 100%;
    max-height: 100%;
  }

  .profile-hero {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 6px 12px;
    padding: 12px 16px;
  }

  .profile-hero-avatar {
    width: 64px;
    height: 64px;
    font-size: 20px;
  }

  .profile-identity h1 {
    overflow-wrap: anywhere;
  }

  .profile-actions {
    gap: 8px;
    margin-top: 2px;
  }

  .profile-safety-menu-list {
    right: 0;
    left: auto;
  }

  .profile-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-stats > * {
    min-height: 60px;
    border-bottom: 0;
  }

  .profile-stats > *:nth-child(2) {
    border-right: 1px solid var(--border);
  }

  .profile-dialog {
    height: fit-content;
    max-height: calc(100dvh - 32px);
    margin: auto;
  }

  :is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog) .field :is(input, select, textarea) {
    font-size: 16px;
  }

  .profile-dialog .dialog-header,
  .utility-dialog .dialog-header {
    padding: 10px 14px;
  }

  .profile-body,
  .utility-dialog-body,
  .utility-form {
    padding: 14px 16px 20px;
  }

  .small-dialog {
    width: calc(100vw - 24px);
    padding: 18px;
    border-radius: 14px;
  }

  :is(#report-dialog, #chat-report-dialog, #dm-report-dialog, #profile-report-dialog) footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(#report-dialog, #chat-report-dialog, #dm-report-dialog, #profile-report-dialog) footer > button {
    width: 100%;
  }

  /* app.js anchors this menu on desktop; mobile intentionally becomes a sheet. */
  body:has(.action-menu:not([hidden]))::before {
    content: "";
    position: fixed;
    z-index: 79;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: auto;
  }

  .action-menu:not([hidden]) {
    top: auto !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72dvh, 560px) !important;
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 -14px 48px rgba(0, 0, 0, 0.34);
  }

  .action-menu button {
    min-height: 52px;
    padding: 12px 14px;
    font-size: 15px;
  }

  .toast {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  .profile-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: var(--ui-dialog-radius);
  }
}

@media (max-width: 620px) {
  .discover-tabs {
    margin-right: 14px;
    margin-left: 14px;
    padding-right: 0;
    padding-left: 0;
    scroll-padding-inline: 12px;
  }

  /* Conversation context remains visible above a familiar bottom sheet. */
  .comments-dialog {
    width: 100%;
    height: min(82dvh, 760px);
    max-height: calc(100dvh - 12px);
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px 16px 0 0;
  }
}

@media (max-width: 360px) {
  .small-dialog {
    width: calc(100vw - 16px);
    padding: 16px;
  }

  :is(#report-dialog, #chat-report-dialog, #dm-report-dialog, #profile-report-dialog) footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.sheet-dialog, .small-dialog, .admin-dialog, .utility-dialog)[open] {
    animation: none;
  }
}

/* Profile identity and saving stay together while editing. */
.profile-photo-editor { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.profile-photo-editor .profile-avatar-wrap { flex: 0 0 auto; margin: 0; }
.profile-photo-editor .profile-upload-field { flex: 1; min-width: 0; margin: 0; padding: 10px; min-height: 44px; }
.profile-photo-editor .upload-field-icon { display: none; }
.profile-photo-editor .upload-field-copy { min-width: 0; }
.profile-photo-editor .upload-field-copy strong { font-size: 14px; }
/* Settings use ordinary rows and one destination at a time. */
#account-dialog:has(#member-account:not([hidden])) .dialog-header { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
#account-dialog .dialog-header > .back-control { position: static; grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
#account-dialog #account-back { grid-column: 1; grid-row: 1; color: var(--text); }
#account-dialog .dialog-header > .account-close { grid-column: 4; grid-row: 1; }
#account-dialog:has(#member-account[hidden]) .dialog-header > .account-close { grid-column: 3; }
#account-dialog:has(#member-account:not([hidden])) .dialog-header > div { grid-column: 2; grid-row: 1; min-width: 0; }
#account-dialog[data-section="settings"]:has(#member-account:not([hidden])) .dialog-header > div { grid-column: 2 / -1; }
#account-dialog #account-page-title { font-size: 20px; line-height: 1.25; font-weight: 700; outline: none; }
#account-dialog #profile-save { grid-column: 3; grid-row: 1; min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--text); font-size: 14px; }
#account-dialog:not([data-section="profile"]) #profile-save,
#account-dialog:has(#member-account[hidden]) #profile-save,
#account-dialog:has(#profile-form[hidden]) #profile-save { display: none; }
#account-dialog .profile-body:has(#member-account:not([hidden])) { padding: 14px 20px 24px; scroll-padding-top: 12px; }
#account-dialog .settings-identity { display: flex; gap: 12px; align-items: center; padding: 4px 0 18px; border-bottom: 1px solid var(--border); }
#account-dialog .settings-identity .account-switcher-trigger { font-size: 16px; min-height: 44px; }
#account-dialog .settings-list { display: grid; gap: 0; padding: 8px 0; }
#account-dialog .settings-list button { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 12px 0; border: 0; border-radius: 0; background: none; color: var(--text); font-size: 15px; font-weight: 550; text-align: left; }
#account-dialog .settings-list button:hover { background: var(--surface-hover); }
#account-dialog .settings-list svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#account-dialog .settings-list .settings-chevron { width: 16px; height: 16px; transform: rotate(-90deg); color: var(--text-muted); }
#account-dialog .settings-list button:focus-visible, #account-dialog #profile-save:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#account-dialog .account-shortcuts { display: grid; border-top: 1px solid var(--border); padding: 8px 0; margin: 0; }
#account-dialog .account-shortcuts button { justify-content: flex-start; min-height: 48px; padding: 10px 0; background: none; border: 0; gap: 14px; font-size: 15px; }
#account-dialog .account-logout { display: block; padding: 12px 0; margin-top: 4px; min-height: 48px; }
#account-dialog #account-profile-panel { padding-top: 4px; }
#account-dialog .account-section-panel > .appearance-settings:first-child { margin-top: 0; }
#account-dialog .account-section-panel > p { color: var(--text-muted); line-height: 1.5; margin: 0 0 20px; }
#account-dialog #account-information-panel .account-actions { display: grid; justify-items: start; gap: 14px; }
#account-dialog #account-information-panel #delete-account { margin-top: 20px; }
#account-dialog:has(#member-account:not([hidden])):not([data-section="help"]) :is(.account-help, .account-legal) { display: none; }
.discover-destinations { display: flex; gap: 20px; padding: 8px 0 16px; }
#register-form { gap: 12px; }
#register-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; }
#register-form fieldset[hidden] { display: none; }
#register-form legend { width: 100%; padding: 0 0 8px; font-size: 22px; font-weight: 700; }
#register-form legend:focus { outline: none; }
#register-form .field { min-width: 0; margin: 0; }
#register-form input { min-height: 48px; }
#register-form .field-note { margin: -4px 0 2px; font-size: 13px; }
.registration-progress { margin: 0; color: var(--text-muted); font-size: 13px; }
#sign-in-dialog { --registration-bottom-space: max(24px, env(safe-area-inset-bottom)); }
.registration-actions { position: sticky; bottom: calc(-1 * var(--registration-bottom-space)); z-index: 1; display: flex; align-items: center; gap: 16px; padding: 12px 0 var(--registration-bottom-space); border-top: 1px solid var(--border); background: var(--surface-raised); }
#sign-in-dialog .profile-body { scroll-padding-block: 12px 84px; }
#sign-in-dialog .auth-tabs { margin-bottom: 20px; }
#sign-in-dialog:has(#register-form:not([hidden])) #account-dialog-copy { display: none; }
#guest-account:has(#register-form:not([hidden]):is([data-stage="2"], [data-stage="3"])) :is(#federated-auth, .auth-tabs) { display: none; }
.registration-actions .publish-button { flex: 1; min-height: 48px; }
.password-input { position: relative; display: block; min-width: 0; }
.password-input > input { width: 100%; min-width: 0; padding-right: 52px; }
.password-input > .password-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.password-eye:hover { color: var(--text); }
.password-eye svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-eye [data-eye-open], .password-eye[aria-pressed="true"] [data-eye-closed] { display: none; }
.password-eye[aria-pressed="true"] [data-eye-open] { display: inline; }
#account-dialog input[type="date"] { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 48px; }
#account-dialog input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.25em; }
#sign-in-dialog #guest-open-settings { display: none; }
@media (max-width: 700px), (max-width: 900px) and (max-height: 540px) {
  #sign-in-dialog:has(#guest-account:not([hidden])) { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  #sign-in-dialog:has(#guest-account:not([hidden])) > .profile-form { height: 100%; max-height: none; }
  #sign-in-dialog:has(#guest-account:not([hidden])) .dialog-header { padding: max(12px, env(safe-area-inset-top)) 18px 12px; }
  #sign-in-dialog:has(#guest-account:not([hidden])) .profile-body { flex: 1; max-height: none; padding: 20px 18px var(--registration-bottom-space); }
  #sign-in-dialog:has(#guest-account:not([hidden])) .auth-form input { font-size: 16px; }
}
@media (max-width: 900px) and (max-height: 540px) {
  #sign-in-dialog:has(#guest-account:not([hidden])) .dialog-header { min-height: 48px; padding-block: 4px; }
  #sign-in-dialog:has(#guest-account:not([hidden])) .profile-body { padding-top: 12px; }
  #sign-in-dialog .auth-tabs { margin-bottom: 12px; }
  #sign-in-dialog .federated-auth { margin-bottom: 8px; }
  #register-form { gap: 8px; }
}
@media (min-width: 701px) and (max-width: 900px) and (max-height: 540px) {
  #guest-account:has(#register-form:not([hidden])[data-stage="1"]) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  #guest-account:has(#register-form:not([hidden])[data-stage="1"]) > .auth-tabs { grid-area: 1 / 1; margin: 0; }
  #guest-account:has(#register-form:not([hidden])[data-stage="1"]) > #federated-auth { grid-area: 1 / 2; margin: 0; }
  #guest-account:has(#register-form:not([hidden])[data-stage="1"]) .auth-divider { display: none; }
  #guest-account:has(#register-form:not([hidden])[data-stage="1"]) > #register-form { grid-column: 1 / -1; }
}
.discover-destinations button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; color: var(--text); font-size: 14px; font-weight: 600; }
/* Familiar patterns: inline Follow, story ring, own collections, Discover order. */
.drop-header .drop-follow { flex: 0 0 auto; margin-left: auto; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.drop-header .drop-follow[aria-busy="true"] { opacity: 0.6; }
.people-row-item.has-story .people-row-avatar { outline-color: var(--accent); }
.profile-posts header { flex-wrap: wrap; row-gap: 8px; }
.profile-self-tabs { display: inline-flex; gap: 6px; margin-left: 10px; }
.profile-self-tabs[hidden] { display: none; }
.profile-self-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.profile-self-tabs button:hover { background: var(--surface-hover); color: var(--text); }
.profile-self-tabs button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (max-width: 820px) {
  .profile-self-tabs { margin-left: 0; }
  .profile-self-tabs button { min-height: 44px; padding-inline: 6px; }
  .profile-layout button { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .profile-layout button span,
  .profile-posts > header:has(.profile-self-tabs:not([hidden])) > h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
#discover-search-tools + .discover-tabs { margin-top: 6px; }
.discover-controls[hidden] { display: none; }
.profile-actions .profile-settings-button { display: inline-flex; align-items: center; gap: 6px; }
.profile-actions .profile-settings-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Profile identity and controls share the shell's type and selection hierarchy. */
.profile-hero .profile-identity h1 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.profile-hero .profile-actions > button {
  min-height: 44px;
  padding-inline: 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.profile-hero .profile-stats > :is(button, a, div) {
  min-width: 44px;
  min-height: 44px;
}
.profile-hero .profile-stats strong { font-weight: 600; }
@media (max-width: 820px) {
  .profile-hero .profile-actions { justify-content: flex-end; }
  .profile-hero .profile-actions > button { flex-basis: 96px; }
}
@media (max-width: 360px) {
  .profile-hero .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
}
.profile-posts > header { padding-block: 8px; }
.profile-layout { border-radius: 10px; }
.profile-layout button { min-height: 44px; border-radius: 8px; font-size: 14px; }
.profile-layout button[aria-pressed="true"] { color: var(--accent); }
#profile-post-tabs { gap: 24px; margin: 0 0 12px; border-bottom: 1px solid var(--border); }
#profile-post-tabs .sv-tab { flex: 0 0 auto; min-width: 64px; padding-inline: 12px; font-weight: 600; }
#profile-post-tabs .sv-tab[aria-selected="true"] { border-bottom-color: var(--accent); }
:is(.profile-self-tabs, .profile-layout, #profile-post-tabs) button:focus-visible,
.profile-hero :is(.profile-stats > button, .profile-actions > button):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -4px;
}
@media (forced-colors: active) {
  #profile-post-tabs .sv-tab[aria-selected="true"] { border-bottom-color: Highlight; }
}
@keyframes ui-skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.discover-loading, .chat-loading { position: relative; display: block; min-height: 236px; margin: 0; padding: 0; overflow: hidden; color: transparent; font-size: 0; line-height: 0; text-align: left; }
.discover-loading[hidden], .chat-loading[hidden] { display: none; }
.discover-loading::before, .chat-loading::before {
  content: "";
  position: absolute;
  inset: 8px 0 auto 0;
  height: 220px;
  background-image:
    radial-gradient(circle, var(--surface-soft) 19px, transparent 20px),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    linear-gradient(var(--surface-soft), var(--surface-soft));
  background-repeat: no-repeat;
  background-size: 40px 40px, 45% 12px, 100% 130px, 70% 12px;
  background-position: 0 0, 52px 14px, 0 56px, 0 202px;
  animation: ui-skeleton-pulse 1.4s ease-in-out infinite;
}
.chat-loading::before { height: 160px; background-size: 40px 40px, 55% 12px, 40px 40px, 65% 12px; background-position: 0 0, 52px 14px, 0 60px, 52px 74px; }
/* People and profiles should not promise a photo card while they load. */
#profile-view-loading,
#discover:has(#discover-search-type-control:not([hidden]) [data-search-type="people"][aria-pressed="true"]) #discover-loading {
  min-height: 244px;
  padding: 12px 14px;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
#profile-view-loading::before {
  inset: 46px 14px auto;
  height: 184px;
  background-image:
    radial-gradient(circle, var(--surface-soft) 31px, transparent 32px),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    linear-gradient(var(--surface-soft), var(--surface-soft));
  background-size: 64px 64px, 50% 12px, 32% 10px, 100% 10px, 85% 10px, 100% 40px;
  background-position: 0 0, 80px 12px, 80px 36px, 0 86px, 0 110px, 0 144px;
}
#discover:has(#discover-search-type-control:not([hidden]) [data-search-type="people"][aria-pressed="true"]) #discover-loading::before {
  inset: 46px 14px auto;
  height: 184px;
  background-image:
    radial-gradient(circle, var(--surface-soft) 19px, transparent 20px),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    radial-gradient(circle, var(--surface-soft) 19px, transparent 20px),
    linear-gradient(var(--surface-soft), var(--surface-soft)),
    radial-gradient(circle, var(--surface-soft) 19px, transparent 20px),
    linear-gradient(var(--surface-soft), var(--surface-soft));
  background-size: 40px 40px, 55% 12px, 40px 40px, 65% 12px, 40px 40px, 50% 12px;
  background-position: 0 0, 56px 14px, 0 64px, 56px 78px, 0 128px, 56px 142px;
}
@media (prefers-reduced-motion: reduce) { .discover-loading::before, .chat-loading::before { animation: none; } }
@media (max-width: 620px) {
  /* Comments open as a half-height sheet, so the post stays in view behind them. */
  .comments-dialog { height: min(64dvh, 560px); }
  .comments-dialog::backdrop { background: rgba(0, 0, 0, 0.32); }
}
.discover-destinations svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (max-width: 700px) {
  #account-dialog:has(#member-account:not([hidden])) { width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0; border: 0; border-radius: 0; }
  #account-dialog:has(#member-account:not([hidden])) > .profile-form { height: auto; max-height: none; }
  #account-dialog:has(#member-account:not([hidden])) .dialog-header { padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
  #account-dialog:has(#member-account:not([hidden])):not([data-section="settings"]) .dialog-header { grid-template-columns: 44px minmax(0, 1fr) auto; }
  #account-dialog:has(#member-account:not([hidden])):not([data-section="settings"]) .account-close { display: none; }
  #account-dialog .profile-body:has(#member-account:not([hidden])) { padding: 12px 18px max(24px, env(safe-area-inset-bottom)); }
  #account-dialog[data-section="settings"] #account-settings-panel { padding-bottom: calc(var(--mobile-nav-height, 62px) + max(24px, env(safe-area-inset-bottom))); }
  #account-dialog[data-section="profile"] #account-profile-panel { padding-bottom: calc(var(--mobile-nav-height, 62px) + max(24px, env(safe-area-inset-bottom))); }
  #account-dialog .form-error { scroll-margin-bottom: calc(var(--mobile-nav-height, 62px) + 16px); }
  #account-dialog[data-section="settings"] .settings-list button { min-height: 50px; padding: 10px 0; }
}

/* People results keep a predictable rhythm as bios and screen sizes vary. */
#discover-people-list { grid-auto-rows: 1fr; }
#discover-people-list .person-card { min-height: 96px; padding: 12px; }
#discover-people-list .person-card-copy { align-content: center; }
#discover-people-list .person-card-bio { display: block; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#discover-people-list[aria-busy="true"] { opacity: .7; }
.people-paging { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.people-paging[hidden] { display: none; }
.people-paging button { min-width: 96px; min-height: 44px; }
.discover-people { scroll-margin-block-start: 80px; }
@media (max-width: 700px) { #discover-people-list .person-card { min-height: 92px; } }

/* home.css */
.home-hub { margin: 12px 0 20px; min-width: 0; }
.home-hub[hidden], .home-hub [hidden] { display: none !important; }
.home-hub-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--border); }
.home-hub-toggle::-webkit-details-marker { display: none; }
.home-hub-toggle svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; }
.home-hub[open] > .home-hub-toggle { margin-bottom: 12px; }
.home-hub[open] > .home-hub-toggle svg { transform: rotate(180deg); }
.home-welcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-welcome h2 { font-size: 18px; line-height: 1.35; margin: 0; }
.home-welcome .text-button { color: var(--accent); }
.home-eyebrow { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#home-project-refresh { margin-inline-start: auto; }
.home-welcome button, .home-hub button, .home-hub summary { min-height: 44px; }
.home-note { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.home-programme, .home-catchup { margin: 16px 0 0; }
.home-programme:empty { display: none; }
.home-event { border-top: 1px solid var(--border); padding: 14px 0 0; }
.home-event + .home-event { margin-top: 8px; }
.home-event h3 { margin: 4px 0; font-size: 16px; overflow-wrap: anywhere; }
.home-event p { margin: 6px 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.home-event time { display: block; }
.home-event .text-button { display: block; }
.home-recaps { margin-top: 10px; }
.home-recaps summary { cursor: pointer; display: flex; align-items: center; font-size: 13px; color: var(--text-muted); }
.home-section-heading { margin-bottom: 4px; }
.home-section-heading h2 { font-size: 16px; margin: 0; }
.home-section-heading p { margin: 4px 0 0; }
.home-project-list { min-width: 0; }
.home-project-list > .home-note { margin: 8px 0 12px; }
.home-project-card { border-bottom: 1px solid var(--border); min-width: 0; }
.home-project-title { display: block; width: 100%; padding: 12px 0; color: inherit; text-align: left; border: 0; background: none; font: inherit; cursor: pointer; }
.home-project-name { font-size: 14px; line-height: 1.45; font-weight: 650; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-project-meta { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.home-project-author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-project-prompt { flex-shrink: 0; }
.home-project-prompt::before { content: "·"; margin-inline-end: 6px; }
@media (hover: hover) { .home-project-title:hover .home-project-name { text-decoration: underline; text-underline-offset: 3px; } }
.home-update { width: 100%; display: grid; gap: 5px; text-align: left; padding: 14px 0; background: none; color: inherit; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; overflow-wrap: anywhere; }
.home-catchup-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; }
/* Home shows the story row when someone has a Story or is live, and always to a member who can post one,
   as Instagram keeps "Your story" first; without Stories that row holds only your own tile. */
body[data-view="all"] #home-people:not(.has-stories):not(.can-post-story) { display: none; }
body[data-view="all"] #home-people.has-stories .people-row-item:not(.has-story):not(.is-you) { display: none; }
body[data-view="all"] #home-people.can-post-story:not(.has-stories) .people-row-item:not(.is-you) { display: none; }
/* A session cookie reserves presentation only, until the account and feature
   replies decide whether a real story tray is available. No private content. */
@media (max-width: 820px) {
  body[data-view="all"][data-home-session-pending][data-startup-pending] #home-people {
    display: block !important;
  }
  .story-placeholder { pointer-events: none; }
  .story-placeholder .avatar { background: var(--surface-hover); color: transparent; }
}
.getting-started-dialog .home-start-head { cursor: default; }
.right-rail .home-today { flex-wrap: wrap; }
body[data-view="all"] #home-intro { margin-top: 0; padding-top: 0; }
.home-hub button:focus-visible, .home-hub summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.project-update-item.is-unread { border-inline-start: 3px solid var(--accent); padding-inline-start: 12px; }
@media (max-width: 700px) {
  .home-hub { margin: 8px 0 16px; }
}

/* A successful empty Home has one starting point; loading and errors stay visible. */
.home-hub:has(#home-projects[hidden]):has(#home-catchup[hidden]):has(#home-programme:empty) { display: none; }
body[data-view="all"] #board.is-quiet { display: none; }
/* The empty feed supplies its own account action. Keep the utility row's geometry
   while removing the duplicate action from focus and assistive technology. */
body[data-view="all"]:has(#feed-empty:not([hidden])) #home-intro:has(p[data-registration-open="true"]) #home-join { visibility: hidden; }
body[data-view="all"] #feed-empty {
  justify-items: start; text-align: left; padding: 40px 0 48px;
}
body[data-view="all"] #feed-empty .empty-icon { display: none; }
body[data-view="all"] #feed-empty h3 { max-width: 420px; font-size: 22px; line-height: 1.3; letter-spacing: -0.3px; margin: 0 0 12px; }
body[data-view="all"] #feed-empty p { max-width: 380px; font-size: 15px; margin-bottom: 24px; }
body[data-view="all"] #feed-empty-action { min-height: 44px; }

body[data-view="all"] #feed:empty { min-height: 0; }

/* A phone Home is stories and posts, as on Instagram. The room's extras stay one tap away in
   Discover > World, and the Board folds to one line that opens the spotlight. */
.board-fold { display: none; }
@media (max-width: 820px) {
  body[data-view="all"] #home-today,
  body[data-view="all"] #home-hub,
  body[data-view="all"] .room-tools-mobile { display: none !important; }
  body[data-view="all"] #board:not(.is-open) .board-progress,
  body[data-view="all"] #board:not(.is-open) .board-content,
  body[data-view="all"] #board:not(.is-open) .board-queue { display: none; }
  body[data-view="all"] #board .board-fold {
    display: inline-grid; place-items: center; width: 36px; height: 36px; margin-inline-start: 4px;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer;
  }
  body[data-view="all"] #board .board-fold svg { width: 18px; height: 18px; transition: transform .15s ease; }
  body[data-view="all"] #board.is-open .board-fold svg { transform: rotate(180deg); }
}

/* The guide keeps its exit in view while the explanation scrolls. */
.getting-started-dialog[open] {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(860px, calc(100dvh - 24px)); box-sizing: border-box;
}
.getting-started-dialog::before { flex-shrink: 0; }
.getting-started-dialog > header { flex: 0 0 auto; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.getting-started-dialog > header > div { min-width: 0; }
.getting-started-dialog > header > button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
.getting-started-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 3px 3px; }

/* One available video view does not need a second, identical navigation row. */
.flow-tabs:not(:has([data-flow-view]:not([data-flow-view="feed"]):not([hidden]))) { display: none; }
.flow-section:has([data-flow-view="feed"][aria-selected="false"]) .flow-empty-create,
.flow-section:has(#flow-loading:not([hidden])) #flow-empty,
.flow-section:has(#flow-error:not([hidden])) #flow-empty { display: none; }
.flow-empty-create { margin-top: 16px; }
.flow-empty-create button { min-height: 44px; }
.flow-section > #flow-empty .publish-button,
.flow-section > .flow-empty-create .publish-button {
  border-radius: 999px;
}
.flow-section > .feed-empty {
  position: static; min-height: 0; overflow-y: auto; align-content: start;
  padding: clamp(12px, 4vh, 40px) 16px;
}
@media (max-height: 600px) {
  .flow-section > .feed-empty .empty-icon { display: none; }
  .flow-section > .feed-empty h3 { margin: 0 0 8px; }
  .flow-section > .feed-empty p { margin-bottom: 12px; }
  .flow-empty-create { margin-top: 0; }
}

/* messages.css */
/* Private conversations use the site palette: own messages on the accent, incoming on the soft surface. Neither bubble carries a border. */
#message-notice-slot { grid-row: 5; min-width: 0; display: none; }
#message-notice-slot:has(.is-visible) { display: block; }
#message-notice-slot .toast {
  position: static; width: auto; max-width: none; margin: 0 20px;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--dm-incoming); color: var(--dm-ink); box-shadow: none;
  font-size: 13px; font-weight: 400; line-height: 1.45;
  overflow-wrap: anywhere; transform: none; transition: none;
}
#message-notice-slot .toast.is-error { background: var(--toast-error-bg); color: var(--toast-error-text); }
#messages {
  --dm-incoming: var(--surface-soft); --dm-ink: var(--text);
  --dm-muted: var(--text-muted); --dm-seen: var(--accent); --dm-field: var(--surface-control);
}
body[data-view="messages"] #messages:not([hidden]) { display: flex; flex-direction: column; }
body[data-view="messages"] #messages #messages-shell { flex: 1 1 0; height: auto; min-height: 0; }
#messages .message-tools-status { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--surface-soft); }
#messages .message-tools-status[hidden] { display: none; }
#messages .message-tools-status p { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; }
#messages .message-tools-status button { flex: 0 0 auto; min-height: 44px; }
#messages .conversation-pane { background: var(--bg); }
#messages .conversation-item { border: 0; border-radius: 10px; margin: 2px 8px; width: calc(100% - 16px); padding: 12px; min-height: 78px; }
#messages .conversation-item.is-active { box-shadow: none; background: var(--surface-hover); }
#messages .conversation-copy { gap: 4px; }
#messages .conversation-count { background: var(--accent); color: var(--on-accent); }
#messages .messages-inbox-header, #messages .message-thread-header { background: var(--bg); }
#messages .message-thread-header > .back-control {
  position: static;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
}
#messages .messages-new-button { border: 0; background: transparent; padding: 10px; }
#messages .messages-new-button span { display: none; }
#messages .messages-search-field { min-height: 42px; border: 0; border-radius: 10px; background: var(--dm-incoming); }
#messages .messages-search-hint { display: none; }
#messages .messages-inbox { border-top: 0; }
#messages .message-thread-header { min-height: 78px; padding: 14px 26px; border-bottom: 1px solid var(--border); }
#messages .message-participant { gap: 12px; }
#messages .message-participant strong { font-size: 15px; font-weight: 650; }
#messages .message-participant small { color: var(--dm-muted); font-size: 12px; }
#messages .message-list { gap: 16px; padding: 24px 44px 14px; }
#messages .message-list > :first-child { margin-top: auto; }
#messages .message-date { flex: none; align-self: center; padding: 14px 0 8px; color: var(--dm-muted); font-size: 11px; font-weight: 500; }
#messages .direct-message {
  position: relative; flex: 0 0 auto; min-width: 0; max-width: min(76%, 560px);
  padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--dm-ink);
}
#messages .direct-message.is-grouped { margin-top: -10px; }
#messages .direct-message-bubble { padding: 10px 15px; border-radius: 20px 20px 20px 5px; background: var(--dm-incoming); }
#messages .direct-message.is-mine .direct-message-bubble { padding: 10px 15px; border: 0; border-radius: 20px 20px 5px 20px; background: var(--own-message-fill); color: var(--own-message-ink); }
#messages .direct-message.is-grouped .direct-message-bubble { border-top-left-radius: 5px; }
#messages .direct-message.is-mine.is-grouped .direct-message-bubble { border-top-left-radius: 20px; border-top-right-radius: 5px; }
#messages .direct-message p { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; }
#messages .direct-message.is-mine p a { color: currentColor; text-decoration: underline; }
#messages .direct-message.is-deleted .direct-message-bubble { background: transparent; color: var(--dm-muted); border: 1px solid var(--border); font-style: italic; }
#messages .direct-message footer { display: flex; justify-content: flex-start; gap: 7px; margin: 5px 9px 0; min-height: 15px; color: var(--dm-muted); font-size: 10px; line-height: 1.4; white-space: nowrap; }
#messages .direct-message.is-mine footer { justify-content: flex-end; }
#messages .message-receipt { display: inline-flex; align-items: center; gap: 4px; }
#messages .message-receipt svg { width: 18px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#messages .message-receipt.is-seen { color: var(--dm-seen); }
#messages .message-receipt .receipt-label { font-size: 10px; }
#messages .message-options { position: absolute; top: 0; right: -46px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: var(--dm-muted); opacity: 0; cursor: pointer; }
#messages .direct-message.is-mine .message-options { right: auto; left: -46px; }
#messages .message-options svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; }
#messages .direct-message:hover .message-options, #messages .direct-message:focus-within .message-options { opacity: 1; }
#messages .message-options:hover { background: var(--surface-hover); color: var(--text); }
#messages .message-form { display: block; padding: 16px 24px max(18px, env(safe-area-inset-bottom)); border: 0; background: var(--bg); }
/* Flex, not a fixed three-column grid. The grid assumed exactly one control before
   the textarea; attaching media added a second, so the textarea landed in the 44px
   send column and Send wrapped to its own row. Flex survives another control. */
#messages .message-input-shell { display: flex; align-items: end; gap: 4px; padding: 5px 6px; border: 1px solid var(--border-strong); border-radius: 27px; background: var(--dm-field); }
#messages .message-input-shell:focus-within { border-color: var(--dm-muted); }
#messages .message-form textarea { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 44px; min-height: 44px; max-height: min(180px, 30dvh); margin: 0; padding: 10px 2px; resize: none; border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none; outline: none; font-size: 16px; line-height: 24px; }
#messages .message-form textarea:focus { box-shadow: none; outline: none; border: 0; }
#messages .message-form .chat-send { width: 44px; height: 44px; margin: 0; padding: 8px; border: 4px solid transparent; border-radius: 50%; background: var(--accent); background-clip: padding-box; color: var(--on-accent); }
#messages .chat-send svg { width: 20px; height: 20px; }
#messages .emote-trigger { border: 0; border-radius: 50%; color: var(--text-secondary); }
#messages .message-form .form-error { margin: 10px 8px 0; }
#message-actions-dialog { width: min(340px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); }
#message-actions-dialog .message-actions-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 20px; }
#message-actions-dialog h2 { margin: 0; font-size: 16px; }
#message-actions-time { margin: 0; padding: 0 20px 16px; color: var(--text-muted); font-size: 12px; }
#message-action-confirm { width: 100%; min-height: 58px; padding: 15px 20px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--danger); font: inherit; text-align: left; cursor: pointer; }
#message-action-confirm:hover { background: var(--surface-hover); }
@media (hover: none), (pointer: coarse) { #messages .message-options { opacity: .7; } }
@media (max-width: 820px) {
  #messages .message-thread-header { min-height: 68px; padding: 10px 16px; }
  body[data-view="messages"].message-thread-open .message-thread-header { min-height: calc(68px + env(safe-area-inset-top)); padding-top: calc(10px + env(safe-area-inset-top)); }
  #messages .message-list { padding: 18px 20px 12px; gap: 16px; }
  #messages .direct-message { max-width: calc(100% - 44px); padding: 0; }
  #messages .message-options { opacity: .6; }
  #messages .message-form { padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
}

/* An attachment sits inside the bubble and never widens it: the image scales down to the
   bubble, and reserving width/height from the asset keeps the thread from jumping while it
   loads. Video gets the same box so both read as one kind of thing. */
#messages .direct-message-media { margin: 6px 0 0; }
#messages .direct-message-media img,
#messages .direct-message-media video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--surface-soft);
}

/* The pending attachment sits above the input, like the reply draft, so what is about
   to be sent is visible before Send is pressed. */
#messages .message-media-draft {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 13px;
}
#messages .message-media-draft[hidden] { display: none; }
#messages .message-media-draft img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }

/* A shared Drop reads as one tappable object inside the bubble, in the same shape as the
   attachment above it: a thumbnail, a title, and who made it. Nothing decorative. */
#messages .direct-message-shared {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#messages .direct-message-shared-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
#messages .direct-message-shared-text { display: grid; gap: 2px; min-width: 0; }
#messages .direct-message-shared-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#messages .direct-message-shared-author { color: var(--text-secondary); font-size: 12px; }

/* The picker follows the Studio sheet: a grid body, generous rows, house tokens. */
.send-drop-body { display: grid; gap: 12px; margin-top: 14px; }
/* The header subtitle is hidden on phones by the small-dialog rules, so the Drop being
   sent is named here instead -- otherwise you would be choosing a person with no idea
   what you are about to send them. */
.send-drop-subject { margin: 0; color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.send-drop-subject:empty { display: none; }
.send-drop-list { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.send-drop-row {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.send-drop-row:hover { background: var(--surface-soft); }
.send-drop-row[disabled] { opacity: 0.6; cursor: default; }
.send-drop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#send-drop-note { width: 100%; min-height: 44px; }
.send-drop-name { flex: 1; min-width: 0; }
.send-drop-name strong, .send-drop-name small { display: block; overflow: hidden; text-overflow: ellipsis; }
.send-drop-name small { color: var(--text-secondary); font-size: 13px; }
.send-drop-action { color: var(--accent); font-size: 14px; font-weight: 700; }
#send-drop-status { margin: 0; }
#send-drop-status:empty { display: none; }
#send-drop-more, #send-drop-retry { min-height: 44px; }
.send-drop-dialog .send-drop-search { min-height: 44px; font-size: 16px; }

/* Recording a voice message. The panel replaces nothing: it sits above the composer
   so the text draft a person already typed is still there when they cancel. */
.voice-note-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised, var(--surface));
}

.voice-note-status, .voice-note-actions { display: flex; align-items: center; gap: 8px; }
.voice-note-actions { flex-wrap: wrap; justify-content: flex-end; }
.voice-note-actions > button { min-height: 44px; padding: 0 12px; }
.voice-note-state { font-size: 13px; }
.voice-note-status .voice-note-state { flex: 1; }
.voice-note-preview-audio { width: 100%; min-width: 0; height: 40px; }
.voice-note-panel[data-phase="paused"] .voice-note-dot { animation: none; opacity: 0.45; }

.voice-note-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
  .voice-note-dot { animation: voice-note-pulse 1.4s ease-in-out infinite; }
}

@keyframes voice-note-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.voice-note-elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: auto;
}

#message-voice-button[aria-pressed="true"] { color: var(--accent); }

.direct-message-media.is-voice {
  display: flex;
  align-items: center;
  gap: 8px;
}

.direct-message-media.is-voice audio {
  width: min(240px, 60vw);
  height: 36px;
}

.direct-message-voice-length {
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  opacity: 0.75;
}

/* The composer's "+" tray is not phone-only: a wide screen used to render Attach file, Create poll,
   Send later and Scheduled in a row that fell past the bottom of the window. messages-mobile.css
   keeps the phone-sized refinements on top of these. */
#messages .message-tools-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 4px 8px;
}
#messages .message-tools-tray[hidden] { display: none; }
#messages .message-more-tools { flex: 0 0 40px; width: 40px; height: 40px; align-self: center; }
#messages .message-more-tools[aria-expanded="true"] { color: var(--text); }

/* messages-mobile.css */
/* Messages on phones (paired with messages-mobile.js, which moves the controls and sets
   body.messages-phone-layout). Desktop rules are untouched. */

/* Thread header: one row, avatar + name, options menu at the end. */
body.messages-phone-layout #messages .message-thread-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 56px;
  padding: 6px 10px;
}
body.messages-phone-layout[data-view="messages"].message-thread-open #messages .message-thread-header {
  min-height: calc(56px + env(safe-area-inset-top));
  padding-top: calc(6px + env(safe-area-inset-top));
}
body.messages-phone-layout #messages .message-participant { flex: 1 1 auto; min-width: 0; overflow: hidden; }
body.messages-phone-layout #messages .message-participant > span:last-child { min-width: 0; }
body.messages-phone-layout #messages .message-participant strong,
body.messages-phone-layout #messages .message-participant small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.messages-phone-layout #conversation-organization > div > #message-search-button,
body.messages-phone-layout #conversation-organization > div > #message-call-controls {
  display: block;
  width: 100%;
  text-align: left;
}
body.messages-phone-layout #conversation-organization > div > #message-call-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

/* Calls: a phone and a video icon in the thread header, standing in for the Voice/Video text buttons that
   sit in the options menu with Call history (the text buttons hide there on phones). */
body.messages-phone-layout #messages .message-call-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
body.messages-phone-layout #messages .message-call-icon[hidden] { display: none; }
body.messages-phone-layout #messages .message-call-icon:hover { background: var(--surface-hover); }
body.messages-phone-layout #messages .message-call-icon:disabled { opacity: 0.45; cursor: default; }
body.messages-phone-layout #messages .message-call-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.messages-phone-layout #conversation-organization > div > #message-call-controls > button[data-call-mode] {
  display: none;
}

/* Composer: one row; the "+" opens a tray with photo, file, poll and scheduling. */
body.messages-phone-layout #messages .message-schedule-tools { display: none; }
body.messages-phone-layout #messages .message-tools-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 4px 8px;
}
body.messages-phone-layout #messages .message-tools-tray[hidden] { display: none; }
body.messages-phone-layout #messages .message-tools-tray .secondary-button { min-height: 44px; }
body.messages-phone-layout #messages .message-tools-tray .emote-trigger {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  background: var(--dm-field);
}
body.messages-phone-layout #messages .message-more-tools {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-self: center;
}
body.messages-phone-layout #messages .message-more-tools[aria-expanded="true"] { color: var(--text); }
body.messages-phone-layout #messages .message-input-shell { gap: 4px; }
body.messages-phone-layout #messages .message-input-shell textarea { flex: 1 1 auto; min-width: 0; }

/* Inbox: the header keeps the title, one more menu and New (styles in parity-ui.css); the search row holds the field alone. */
body.messages-phone-layout #messages .messages-search-field { display: flex; align-items: center; gap: 6px; }
body.messages-phone-layout #messages .messages-search-field input { flex: 1 1 auto; min-width: 0; }

/* First Create: one sentence under the title. */
#composer .dialog-header .composer-intro {
  display: block;
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

/* conversation-organization.css */
.conversation-folders { display: flex; gap: 6px; padding: 10px 16px; }
.conversation-folders button { flex: 1; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.conversation-folders button[aria-pressed="true"] { background: var(--surface-active); border-color: var(--accent); font-weight: 650; }
.conversation-archive-hint { margin: 0; padding: 0 16px 12px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.conversation-pinned { color: var(--text-secondary); font-size: 11px; }
.conversation-organization { position: relative; flex: 0 0 44px; }
.conversation-organization summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; list-style: none; }
.conversation-organization summary::-webkit-details-marker { display: none; }
.conversation-organization summary svg { width: 22px; height: 22px; }
.conversation-organization summary:hover, .conversation-organization[open] summary { background: var(--surface-hover); }
.conversation-organization > div { position: absolute; z-index: 20; right: 0; top: 48px; width: 210px; max-width: calc(100vw - 32px); padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px #0003; }
.conversation-organization button { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; text-align: left; font: inherit; color: var(--text); background: transparent; cursor: pointer; }
.conversation-organization button:hover { background: var(--surface-hover); }
.conversation-organization button:disabled { opacity: .5; cursor: default; }
.conversation-organization-error { padding: 10px 16px; background: var(--surface-raised); font-size: 13px; }
#message-notice-slot:has(.conversation-organization-error:not([hidden])) { display: block; }
.conversation-organization-error .text-button { display: block; min-height: 44px; }

/* categories.css */
/* Fade the scrolling content itself, so either theme blends with its real background. */
.category-rail { display: flex; align-items: center; gap: 8px; min-width: 0; }
.category-rail > .category-strip {
  --category-fade-left: 0px;
  --category-fade-right: 0px;
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 4px 0;
  scroll-padding-inline: 28px;
}
.category-strip.can-scroll-back { --category-fade-left: 28px; }
.category-strip.can-scroll-forward { --category-fade-right: 28px; }
.category-strip:is(.can-scroll-back, .can-scroll-forward) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--category-fade-left), #000 calc(100% - var(--category-fade-right)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--category-fade-left), #000 calc(100% - var(--category-fade-right)), transparent);
}
.category-search-toggle {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  padding: 11px; border: 0; border-radius: 50%; color: var(--text); background: transparent; cursor: pointer;
}
.category-search-toggle:hover { background: var(--surface-hover); }
.category-search-toggle:focus-visible, .category-search-result:focus-visible, .category-search-close:focus-visible, .category-choice:focus-visible {
  outline: 2px solid var(--accent-hover); outline-offset: -3px;
}
.category-search-toggle svg, .category-search-field svg, .category-result-icon svg, .category-search-close svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.category-rail > .live-toggle { margin-bottom: 0; }
.category-search-dialog {
  width: min(420px, calc(100vw - 32px)); max-height: min(600px, calc(100dvh - 48px));
  padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 80px #0004;
}
.category-search-dialog[open] { display: flex; flex-direction: column; }
.category-search-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.category-search-dialog::backdrop { background: #0008; }
.category-search-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 12px 12px 8px 20px; }
.category-search-header h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.02em; }
.category-search-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 50%; color: var(--text-muted); background: transparent; cursor: pointer; }
.category-search-close:hover { background: var(--surface-hover); color: var(--text); }
.category-search-field { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; min-height: 46px; margin: 0 16px 12px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: var(--surface-hover); color: var(--text-muted); }
.category-search-field:focus-within { border-color: var(--border-strong); }
.category-search-field > svg { flex: 0 0 20px; }
.category-search-field input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; color: var(--text); background: transparent; box-shadow: none; font: inherit; font-size: 16px; line-height: 24px; }
.category-search-field input:focus { outline: none; box-shadow: none; }
.category-search-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px; scroll-padding-block: 8px; }
.category-search-result { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 10px; color: var(--text); background: transparent; text-align: left; font: inherit; font-size: 15px; cursor: pointer; }
.category-search-result:hover, .category-search-result[aria-pressed="true"] { background: var(--surface-hover); }
.category-result-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: var(--text-secondary); font-size: 22px; }
.category-result-selected { margin-inline-start: auto; font-size: 17px; }
.category-search-empty { margin: 8px 20px 24px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
@media (min-width: 821px) {
  .category-rail { margin-bottom: 14px; }
  .category-rail > .category-scroll-button:not([hidden]), .category-rail > .category-scroll-button[hidden] {
    position: static; display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px;
    margin: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: none;
  }
  .category-rail > .category-scroll-button[hidden] { display: grid !important; visibility: hidden; }
}
@media (max-width: 820px) {
  .category-rail { padding-inline: 12px; }
  .category-search-dialog { inset: auto 0 0; width: 100%; max-height: min(620px, 80dvh); margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); border-bottom: 0; border-radius: 22px 22px 0 0; }
}
/* One stable control row: Everything | Following and Filter, at every screen size. */
  .home-controls { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
  .home-controls:not(:has(> :not([hidden]))) { display: none; }
  .home-controls > .feed-scope { flex: 1 1 auto; min-width: 0; margin: 0; justify-content: flex-start; gap: 24px; }
  .home-controls > .category-rail { flex: 0 0 auto; margin: 0; margin-inline-start: auto; padding-inline: 0; }
  .home-controls #category-strip,
  .home-controls .category-scroll-button,
  .home-controls #feed-order-toggle { display: none !important; }
  /* Sorting and less-used feed views remain available in Filter. */
  body:has(.home-controls) #feed-order { display: none; }
  .home-controls .feed-scope button[data-view="topics"],
  .home-controls .feed-scope button[data-view="unseen"] { display: none; }
  #category-search-toggle {
    display: flex; align-items: center; justify-content: flex-start; gap: 7px;
    flex: 0 0 auto; width: clamp(90px, 20vw, 136px); height: 44px;
    padding: 0 10px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 600;
  }
  #category-search-toggle > svg { flex: 0 0 20px; }
  .category-filter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #category-search-toggle[data-active="true"] { background: var(--surface-hover); }
  .home-controls { flex-wrap: wrap; }
  .home-controls > .feed-scope { min-width: min-content; }
@media (max-width: 480px) {
  .home-controls > .feed-scope { gap: 12px; }
  .home-controls > .feed-scope button { font-size: 13px; }
}
@media (max-width: 820px) {
  .home-controls { padding-inline: 12px 4px; }
}
.category-choices { flex: 0 0 auto; display: grid; gap: 10px; padding: 0 20px 10px; }
.category-choices[hidden] { display: none; }
.category-choice-title { margin: 0 0 6px; color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.category-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.category-choice { min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.category-choice[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--surface); }
/* On short screens, filters and categories share the available scrolling area.
   The close control remains outside it when vertical space is limited. */
@media (max-height: 520px) {
  .category-search-dialog { max-height: calc(100dvh - 24px); }
  .category-search-body { display: block; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px; }
  .category-search-results { overflow-y: visible; }
}

/* coauthors.css */
.coauthor-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .45rem; color: var(--text-secondary); font-size: .85rem; min-width: 0; }
.coauthor-byline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; max-width: 100%; }
.coauthor-byline .identity-name { max-width: 100%; }
.drop-header { flex-wrap: wrap; }
.drop-header > .coauthor-byline { flex: 1 0 100%; padding-left: 0; }
.flow-author-line { flex-wrap: wrap; }
.flow-author-line > .coauthor-byline { flex-basis: 100%; color: inherit; }
.board-info > .coauthor-byline { margin: .5rem 0; }
.coauthors-inbox { border-bottom: 1px solid var(--border); padding: 1rem 0; margin-bottom: 1rem; }
.coauthors-inbox > header { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.coauthors-inbox h2 { margin: 0; font-size: 1.1rem; }
.coauthors-inbox header p { color: var(--text-secondary); font-size: .9rem; }
.coauthors-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.coauthors-dialog .dialog-header { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.coauthors-body { display: grid; gap: .85rem; padding: .85rem 20px 20px; }
.coauthors-body > p { margin: 0; }
#coauthors-post > p { margin: .5rem 0 0; }
.coauthors-body > div:empty { display: none; }
/* Keep empty live regions available for announcements without reserving a grid row. */
.coauthors-body > [role="status"]:empty:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.coauthor-post-link { font-weight: 700; overflow-wrap: anywhere; }
.coauthor-post-copy { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9rem; overflow-y: auto; }
.coauthor-consent { font-size: .9rem; line-height: 1.5; color: var(--text-secondary); }
.coauthor-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.coauthor-person { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.coauthor-person small, .coauthor-state { color: var(--text-secondary); font-size: .85rem; }
.coauthor-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.coauthor-row button, .coauthors-dialog button, .coauthors-inbox button { min-height: 44px; white-space: normal; }
.coauthor-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.coauthor-search label { display: grid; gap: .35rem; min-width: 0; }
.coauthor-search input { width: 100%; box-sizing: border-box; }
.coauthor-inbox-row { padding: 1rem 0; border-top: 1px solid var(--border); }
.coauthor-inbox-post > p { margin: .45rem 0; }
.coauthor-inbox-post .coauthor-post-copy { max-height: 4rem; }
.coauthor-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.coauthor-error { color: var(--danger); overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .coauthor-row { align-items: stretch; flex-direction: column; }
  .coauthor-actions { justify-content: flex-start; }
  .coauthor-search { grid-template-columns: minmax(0, 1fr); }
  .coauthors-body { padding-inline: 14px; }
}

/* studio.css */
/* Media first creation and a local, touch-sized editor. */
.composer-dialog .dialog-header { grid-template-columns: 44px minmax(0, 1fr) auto; }
.composer-dialog .dialog-header > div { min-width: 0; }
.composer-dialog .dialog-header:has(#composer-back:not([hidden])) > [data-close-dialog] { display: none; }
.composer-dialog .dialog-header:has(#composer-back:not([hidden])) #composer-back { grid-column: 1; grid-row: 1; }
.composer-media-intro { text-align: center; padding: 24px 8px 12px; }
.composer-media-intro h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.03em; }
.composer-media-intro p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
#composer-media-step > .upload-field { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; margin: 16px 0; }
#composer-media-step > .upload-field.has-file { min-height: 76px; flex-direction: row; text-align: left; }
#composer-media-step:has(.composer-gallery-item) > :is(.composer-media-intro, .composer-capture-actions, .composer-create-options) { display: none; }
#composer-media-step:has(.composer-gallery-preview video) > .upload-field { display: none; }
#composer-media-step .upload-field-copy strong { font-size: 17px; }
#composer-media-step .upload-field-copy small { font-size: 12px; }
.composer-capture-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.studio-file-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text); background: var(--surface-soft); font-size: 14px; font-weight: 600; cursor: pointer; overflow: hidden; }
.studio-file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.studio-file-button:focus-within { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.studio-file-button svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.composer-create-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0; }
.composer-create-options .secondary-button { flex: 1; }
.composer-media-review { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 8px 12px; border-radius: 12px; background: var(--surface-soft); font-size: 14px; }
#composer-details-step .composer-author { margin: 8px 0 20px; }
#composer-details-step .composer-more { margin-top: 18px; }
.composer-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 0; color: var(--text); cursor: pointer; list-style: none; border-top: 1px solid var(--border); }
.composer-more > summary::-webkit-details-marker { display: none; }
.composer-more > summary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 4px; border-radius: 4px; }
.composer-more > summary > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.composer-more[open] > summary > svg { transform: rotate(180deg); }
.composer-more-body { display: grid; gap: 16px; padding: 12px 0 4px; }

.composer-dialog .composer-gallery-item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 16px; margin: 12px 0; overflow: hidden; }
.composer-dialog .composer-gallery-preview { width: 100%; height: min(52dvh, 340px); max-height: 340px; aspect-ratio: auto; border-radius: 12px; background: #0b0b0d; }
.composer-dialog .composer-gallery-preview :is(img, video) { width: 100%; height: 100%; max-height: 340px; object-fit: contain; }
.composer-dialog .composer-gallery-copy { padding: 0 4px; }
.composer-dialog .composer-gallery-copy > strong { display: none; }
.gallery-accessibility { margin: 0; padding: 0 14px; font-size: 13px; color: var(--text-secondary); }
.gallery-accessibility summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.gallery-accessibility[open] { padding-bottom: 12px; }
.gallery-accessibility textarea { margin: 8px 0; font-size: 16px; }
.drop-copy:has(> .drop-title[hidden]):has(> .drop-description[hidden]):not(:has(.project-badge, .translation-control)) { display: none; }
.composer-dialog .composer-gallery-actions { display: flex; flex-direction: row; justify-content: flex-end; gap: 8px; }
.composer-gallery-actions .gallery-studio { width: auto; padding: 8px 18px; min-height: 44px; margin-right: auto; border-radius: 22px; font-size: 14px; font-weight: 600; }
/* The editor keeps the site's dark palette in both site themes, like the video player. */
.sheet-dialog.studio-dialog {
  --bg: #0b0b0d; --chrome: #0a0a0c; --surface: #111114; --surface-raised: #151519; --surface-soft: #1b1b20;
  --surface-hover: #202026; --surface-inset: #0d0d10; --surface-control: #101013; --surface-menu: #19191e;
  --text: #f5f5f7; --text-secondary: #b2b2ba; --text-muted: #9696a1;
  --border: #29292f; --border-strong: #383840; --border-control: #62626c;
  --accent: #ff4a2e; --accent-hover: #ff6a4d; --accent-soft: rgba(255, 74, 46, 0.15); --on-accent: #101013; --link: #f0a088;
  --danger: #ff6673; --danger-text: #ffb7bd; --danger-panel-bg: #211516; --danger-panel-border: #6c3030;
  width: min(1080px, calc(100vw - 48px)); height: min(880px, calc(100dvh - 48px));
  max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border-strong);
  border-radius: 18px; background: var(--bg); color: var(--text); overflow: hidden; color-scheme: dark;
  font-size: 14px; line-height: 1.4;
}
.studio-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) 48px auto 84px; grid-template-areas: "header" "preview" "transport" "timeline" "tools"; }
.studio-dialog.tool-open { grid-template-columns: minmax(0, 1fr) 310px; grid-template-areas: "header header" "preview drawer" "transport drawer" "timeline drawer" "tools tools"; }
.studio-dialog::backdrop { background: rgb(0 0 0 / 78%); }
.studio-dialog [hidden] { display: none !important; }
.studio-dialog svg { display: block; flex: none; width: 22px; height: 22px; }
.studio-dialog button, .studio-dialog input, .studio-dialog select, .studio-dialog textarea { font: inherit; letter-spacing: normal; }
.studio-dialog button { cursor: pointer; color: inherit; }
.studio-dialog button:disabled { opacity: .3; cursor: default; }
.studio-dialog :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.studio-header { grid-area: header; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.studio-dialog .studio-header h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.studio-header h2:focus, #studio-tool-title:focus { outline: none; }
.studio-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 10px; border: 0; border-radius: 10px; background: transparent; }
.studio-icon:hover:not(:disabled) { background: var(--surface-hover); }
.studio-save { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--accent); color: var(--on-accent) !important; font-size: 13px !important; font-weight: 650 !important; }
.studio-save svg { width: 16px; height: 16px; }
/* Save to phone and the draft panel sit in the header; the panel floats so the grid stays fixed. */
#studio-download, #studio-draft-toggle { color: var(--text-secondary); }
#studio-download:hover:not(:disabled), #studio-draft-toggle:hover:not(:disabled) { color: var(--text); }
.studio-draft-panel { position: absolute; top: 68px; right: 16px; z-index: 12; width: min(320px, calc(100% - 32px)); padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-menu); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.studio-draft-panel .studio-note { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.studio-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-status { position: absolute; bottom: 91px; left: 16px; right: 16px; z-index: 8; margin: 0; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-menu); color: var(--text); font-size: 12px; }
.studio-device-result { position: absolute; top: 76px; right: 16px; z-index: 14; width: min(350px, calc(100% - 32px)); box-sizing: border-box; max-height: calc(100% - 172px); overflow: auto; padding: 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-menu); box-shadow: 0 12px 32px rgb(0 0 0 / 45%); }
.studio-device-result h3 { margin: 0 0 8px; font-size: 16px; }
.studio-device-result p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.studio-device-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.studio-device-actions a { display: inline-flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; min-height: 44px; }
.studio-device-actions a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* A saved sound decision takes its own row and never covers the audio drawer or transport. */
.studio-dialog:has(> .studio-sound-review:not([hidden])) { grid-template-rows: 64px minmax(0, 1fr) 48px auto auto 84px; grid-template-areas: "header" "preview" "transport" "timeline" "sound-review" "tools"; }
.studio-dialog.tool-open:has(> .studio-sound-review:not([hidden])) { grid-template-areas: "header header" "preview drawer" "transport drawer" "timeline drawer" "sound-review sound-review" "tools tools"; }
.studio-sound-review { grid-area: sound-review; flex: 0 1 auto; min-height: 92px; max-height: min(180px, 24dvh); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 10px 16px; border-top: 1px solid var(--border-strong); background: var(--surface-menu); }
.studio-sound-review p { margin: 0 0 6px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.studio-sound-review .studio-device-actions { margin-top: 6px; }
.studio-sound-review button { min-height: 44px; max-width: 100%; white-space: normal; }
/* The standalone Studio entry: a small sheet with one file button, a draft to resume, and a result to publish. */
.sheet-dialog.studio-start-dialog {
  width: min(520px, calc(100vw - 32px));
  height: fit-content;
  max-height: min(820px, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}
.studio-start-dialog[open] { display: flex; flex-direction: column; }
.studio-start-dialog > .dialog-header { flex: 0 0 auto; }
.studio-start-body { display: grid; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 14px; padding: 18px 22px 24px; }
.studio-start-pick { width: 100%; min-height: 56px; font-size: 15px; }
.studio-start-note { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.studio-start-draft, .studio-start-result { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.studio-start-draft p, .studio-start-result p { margin: 0 0 10px; font-size: 14px; }
.studio-start-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.composer-resume-studio { margin: -8px 0 12px; }

@media (max-width: 600px) {
  .sheet-dialog.studio-start-dialog {
    width: min(520px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    margin: max(14px, env(safe-area-inset-top, 0px)) auto 0;
  }
}

.studio-preview { grid-area: preview; position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px 16px 8px; background: var(--bg); }
#studio-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; }
.studio-format-shortcut { position: absolute; top: 24px; right: 24px; min-height: 34px; padding: 4px 11px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 6px; background: rgba(11, 11, 13, 0.85); color: var(--text); font-size: 11px !important; font-weight: 600 !important; }
.studio-preview-hint { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 5px; background: rgba(11, 11, 13, 0.85); color: var(--text); font-size: 11px; white-space: nowrap; pointer-events: none; }
.studio-transport { grid-area: transport; display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; padding: 0 16px; background: var(--surface); }
.studio-time { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.studio-time span { color: var(--text-muted); }
.studio-history { display: flex; justify-content: flex-end; gap: 0; }
.studio-history .studio-icon { width: 36px; min-width: 36px; height: 44px; padding: 9px; }
.studio-history svg { width: 19px; height: 19px; }
#studio-play { border-radius: 50%; }
#studio-play svg { width: 22px; height: 22px; }
/* Transport: frame steps around play; timeline: waveforms, transition marks and a zoom control beside Add. */
.studio-transport { grid-template-columns: 1fr auto 1fr; }
.studio-transport-center { display: flex; align-items: center; justify-content: center; gap: 2px; }
.studio-time-group { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.studio-frame { padding: 1px 5px; border-radius: 4px; background: var(--surface-soft); color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.studio-step svg { width: 18px; height: 18px; }
.studio-timeline-side { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 38px; }
.studio-timeline-side .studio-add-clip { margin-top: 0; }
.studio-zoom { display: flex; align-items: center; gap: 2px; }
.studio-zoom button { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-soft); color: var(--text-secondary); font-size: 13px; line-height: 1; }
.studio-zoom output { min-width: 32px; text-align: center; font-size: 9px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.studio-clip-wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 16px; background: rgba(0, 0, 0, 0.45); pointer-events: none; }
.studio-clip-transition { position: absolute; top: 2px; right: 4px; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.72); color: var(--link); font-size: 10px; line-height: 14px; }
.studio-audio-track { position: relative; overflow: hidden; }
.studio-audio-wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.studio-audio-track span, .studio-audio-track svg { position: relative; }
.studio-trim-wave { position: absolute; left: 14px; bottom: 8px; width: calc(100% - 28px); height: 18px; pointer-events: none; opacity: .9; }
/* Drawer sections: a quiet title, one rule, no boxes inside boxes. */
.studio-section { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.studio-section-title { display: flex; justify-content: space-between; margin: 0 0 8px; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.studio-section-title output { text-transform: none; letter-spacing: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.studio-inout { display: flex; gap: 8px; margin: 8px 0 0; }
.studio-inout .studio-command { flex: 1; border: 1px solid var(--border-strong); }
.studio-segmented { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.studio-segmented button { flex: 1; min-height: 40px; padding: 6px 4px; border: 0; background: transparent; color: var(--text-secondary); font-size: 11px !important; }
.studio-segmented button + button { border-left: 1px solid var(--border-strong); }
.studio-segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); }
.studio-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.studio-chips .studio-chips { margin: 0; }
.studio-chip { max-width: 150px; min-height: 32px; padding: 4px 11px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-secondary) !important; font-size: 11px !important; text-overflow: ellipsis; white-space: nowrap; }
.studio-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--link) !important; }
.studio-chip-add { border-style: dashed; }
.studio-text-empty { margin: 4px 0 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.studio-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 0; font-size: 12px; color: var(--text-secondary); }
.studio-dialog .studio-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); box-shadow: none; }
.studio-check-row { display: flex; gap: 16px; }
.studio-check-row > * { flex: 1; min-width: 0; }
.studio-adjust .studio-range { margin: 0; }
.studio-adjust-head { display: flex; align-items: center; justify-content: space-between; }
.studio-adjust-head .studio-section-title { margin: 0; }
.studio-timeline { grid-area: timeline; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; min-height: 124px; padding: 0 16px 18px; background: var(--surface); }
.studio-timeline-scroll { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-control) transparent; padding: 0 2px 5px; }
.studio-timeline-inner { position: relative; min-width: 1px; }
.studio-ruler { position: relative; height: 38px; overflow: hidden; color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; background: repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px 10px) 0 27px / 100% 3px no-repeat; }
.studio-ruler span { position: absolute; top: 5px; padding: 0 3px; background: var(--surface); }
.studio-dialog .studio-position { position: absolute; top: 0; left: 0; width: 100%; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 0; appearance: none; background: transparent; cursor: ew-resize; z-index: 3; box-shadow: none; }
.studio-position::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.studio-position::-webkit-slider-thumb { appearance: none; height: 18px; width: 2px; margin-top: -8px; border: 0; background: var(--text); }
.studio-position::-moz-range-track { height: 2px; background: transparent; }
.studio-position::-moz-range-thumb { height: 18px; width: 2px; border: 0; background: var(--text); }
.studio-playhead { position: absolute; top: 28px; bottom: 0; width: 2px; background: var(--text); z-index: 4; pointer-events: none; }
.studio-playhead::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 7px; border-radius: 2px 2px 4px 4px; background: var(--text); }
.studio-clips { display: flex; height: 62px; gap: 0; overflow: hidden; border-radius: 5px; }
.studio-clips.has-overlap { display: block; position: relative; height: 126px; }
.studio-clips.has-overlap .studio-clip { position: absolute; height: 62px; }
#studio-transition .studio-segmented { flex-wrap: wrap; }
.studio-clip { position: relative; flex: none; min-width: 0; height: 62px; padding: 0; overflow: hidden; border: 2px solid var(--border-strong); border-radius: 5px; background: var(--surface-soft); }
.studio-clip[aria-pressed="true"] { border-color: var(--accent); z-index: 1; }
.studio-clip-frames { display: flex; height: 100%; width: 100%; pointer-events: none; }
.studio-clip-frames img { min-width: 0; flex: 1 1 0; width: 0; height: 100%; object-fit: cover; opacity: .85; }
.studio-clip-duration { position: absolute; right: 4px; bottom: 3px; max-width: calc(100% - 6px); overflow: hidden; padding: 1px 4px; border-radius: 3px; font-size: 10px; font-variant-numeric: tabular-nums; background: rgb(0 0 0 / 72%); color: #fff; white-space: nowrap; }
.studio-audio-track { display: flex; align-items: center; gap: 6px; width: 100%; height: 25px; margin: 6px 0 0; padding: 3px 8px; border: 0; border-radius: 4px; background: var(--accent-soft); color: var(--link) !important; text-align: left; }
.studio-audio-track svg { width: 13px; height: 13px; }
.studio-audio-track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.studio-add-clip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 44px; height: 62px; margin-top: 38px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; overflow: hidden; }
.studio-add-clip input, .studio-audio-picker input, .studio-custom-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.studio-add-clip:focus-within, .studio-audio-picker:focus-within, .studio-custom-color:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.studio-add-clip:has(input:disabled) { opacity: .3; }
.studio-duration { grid-column: 1 / -1; font-size: 11px; color: var(--danger-text); }
.studio-duration:empty { display: none; }
.studio-tools { grid-area: tools; display: flex; align-items: stretch; justify-content: space-evenly; padding: 9px 12px 10px; border-top: 1px solid var(--border); background: var(--surface-menu); }
.studio-tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 54px; max-width: 120px; flex: 1; padding: 6px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary) !important; }
.studio-tool svg { width: 23px; height: 23px; }
.studio-tool span { font-size: 11px; font-weight: 500; white-space: nowrap; }
.studio-tool[aria-expanded="true"] { color: var(--link) !important; background: var(--accent-soft); }
.studio-tool:hover { background: var(--surface-hover); }
.studio-tools { overflow-x: auto; }
.studio-tool { flex-shrink: 0; }
.studio-overlay-row { height: 26px; margin-top: 4px; }
.studio-overlay-bar { display: block; height: 26px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--accent-soft); color: var(--text-primary); text-align: left; font-size: 11px; }
.studio-overlay-bar[aria-pressed="true"] { outline: 2px solid var(--link); outline-offset: -2px; }
.studio-overlay-upload { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; font-weight: 600; }
.studio-overlay-upload input { max-width: 100%; min-width: 0; font-size: 12px; }
#studio-overlay-select { width: 100%; max-width: 100%; margin-bottom: 8px; }
#studio-panel-overlay .studio-inline-field input { width: 82px; min-width: 0; padding: 6px; }
#studio-panel-overlay .studio-clip-commands { flex-wrap: wrap; }
.studio-dialog[data-tool="overlay"] #studio-canvas { touch-action: none; cursor: move; }
.studio-drawer { grid-area: drawer; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--border-strong); background: var(--surface-raised); }
.studio-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.studio-drawer-header > div { min-width: 0; }
.studio-drawer h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
#studio-selection-label { color: var(--text-muted); font-size: 11px; }
.studio-dialog #studio-clip-select { display: block; width: 100%; max-width: 218px; min-height: 30px; margin: 0; padding: 3px 22px 3px 0; overflow: hidden; text-overflow: ellipsis; border: 0; border-radius: 4px; background-color: transparent; color: var(--text-secondary); font-size: 11px; }
.studio-done { display: flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: var(--accent) !important; font-size: 12px !important; font-weight: 600 !important; }
.studio-done svg { width: 17px; height: 17px; }
.studio-drawer-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 16px; }
.studio-range { display: block; margin: 8px 0; }
.studio-range > span, .studio-inline-field > span { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 12px; }
.studio-range output { font-variant-numeric: tabular-nums; }
.studio-dialog .studio-range input[type="range"] { display: block; width: 100%; height: 34px; margin: 0; padding: 0; background: transparent; border: 0; accent-color: var(--accent); box-shadow: none; }
.studio-inline-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 8px 0 0; }
.studio-dialog .studio-inline-field select { width: auto; min-width: 88px; height: 38px; padding: 7px 28px 7px 11px; border: 1px solid var(--border-control); border-radius: 7px; background-color: var(--surface-control); color: var(--text); font-size: 12px; }
.studio-command { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; font-size: 12px !important; }
.studio-command svg { width: 18px; height: 18px; }
.studio-command:hover, .studio-small-button:hover { background: var(--surface-hover); }
.studio-clip-commands { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.studio-clip-commands .studio-command { padding: 8px 4px; }
.studio-clip-commands .studio-icon { min-width: 36px; width: 36px; }
.studio-trim-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 10px; color: var(--text-secondary); }
.studio-trim-info output { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.studio-trim-track { position: relative; height: 68px; }
.studio-trim-frames { position: absolute; inset: 8px 14px; display: flex; overflow: hidden; border-radius: 4px; }
.studio-trim-frames img { min-width: 0; width: 0; flex: 1 1 0; height: 100%; object-fit: cover; opacity: .55; }
.studio-trim-selection { position: absolute; top: 6px; bottom: 6px; border: 2px solid var(--accent); background: var(--accent-soft); border-radius: 4px; pointer-events: none; }
.studio-dialog .studio-trim-handle { position: absolute; top: 0; left: 0; appearance: none; width: 100%; height: 68px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; pointer-events: none; box-shadow: none; }
.studio-trim-handle::-webkit-slider-runnable-track { height: 56px; background: transparent; }
.studio-trim-handle::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 28px; height: 56px; border: 0; border-radius: 4px; background: linear-gradient(90deg, transparent 9px, var(--accent) 9px 19px, transparent 19px); cursor: ew-resize; }
.studio-trim-handle::-moz-range-track { height: 56px; background: transparent; }
.studio-trim-handle::-moz-range-thumb { pointer-events: auto; width: 28px; height: 56px; border: 0; border-radius: 4px; background: linear-gradient(90deg, transparent 9px, var(--accent) 9px 19px, transparent 19px); cursor: ew-resize; }
.studio-trim-handle:focus-visible { outline-offset: 1px !important; }
.studio-formats { display: flex; gap: 6px; justify-content: space-between; }
.studio-formats button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-width: 0; flex: 1; min-height: 76px; padding: 8px 3px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; font-size: 10px !important; color: var(--text-secondary); }
.studio-formats button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--link); }
.studio-ratio-shape { display: block; height: 22px; border: 1.5px solid currentColor; border-radius: 2px; }
.studio-formats [data-format="original"] .studio-ratio-shape { aspect-ratio: 1.2; }
.studio-formats [data-format="portrait"] .studio-ratio-shape { aspect-ratio: 9 / 16; }
.studio-formats [data-format="square"] .studio-ratio-shape { aspect-ratio: 1; }
.studio-formats [data-format="feed"] .studio-ratio-shape { aspect-ratio: 4 / 5; }
.studio-formats [data-format="wide"] .studio-ratio-shape { aspect-ratio: 16 / 9; }
.studio-crop-actions { display: flex; justify-content: center; gap: 16px; margin: 8px 0; }
.studio-fine-position { color: var(--text-muted); font-size: 11px; }
.studio-fine-position summary { display: flex; align-items: center; min-height: 38px; cursor: pointer; }
.studio-fine-position summary::after { content: "+"; margin-left: auto; }
.studio-fine-position[open] summary::after { content: "−"; }
.studio-dialog .studio-text-field textarea { display: block; width: 100%; min-height: 60px; max-height: 100px; padding: 10px 12px; resize: none; border: 1px solid var(--border-control); border-radius: 8px; background: var(--surface-inset); color: var(--text); font-size: 16px; }
.studio-colors { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin: 10px -4px; }
.studio-colors > button { display: flex; align-items: center; justify-content: center; width: 36px; height: 40px; min-width: 30px; padding: 7px; border: 0; background: transparent; border-radius: 50%; }
.studio-colors > button::before { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); border: 1px solid var(--text-muted); }
.studio-colors [data-color="#ffffff"] { --swatch: #ffffff; }
.studio-colors [data-color="#14171b"] { --swatch: #14171b; }
.studio-colors [data-color="#d4f4de"] { --swatch: #d4f4de; }
.studio-colors [data-color="#f9dc97"] { --swatch: #f9dc97; }
.studio-colors [data-color="#ff91a7"] { --swatch: #ff91a7; }
.studio-colors [data-color="#a9c9ff"] { --swatch: #a9c9ff; }
.studio-colors > button[aria-pressed="true"]::before { outline: 2px solid var(--accent); outline-offset: 3px; }
.studio-looks { display: flex; gap: 10px; overflow-x: auto; padding: 3px 2px 10px; scrollbar-width: thin; }
.studio-look { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 65px; flex: none; padding: 0 0 5px; border: 0; background: transparent; color: var(--text-secondary) !important; font-size: 11px !important; }
.studio-look canvas { display: block; width: 65px; height: 75px; object-fit: cover; border: 2px solid transparent; border-radius: 7px; }
.studio-look[aria-pressed="true"] { color: var(--accent) !important; }
.studio-look[aria-pressed="true"] canvas { border-color: var(--accent); }
.studio-audio-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.studio-audio-heading > span { flex: 1; }
.studio-audio-heading svg { width: 17px; height: 17px; }
.studio-small-button { min-height: 36px; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary) !important; font-size: 11px !important; }
.studio-audio-picker { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-soft); overflow: hidden; }
.studio-audio-picker span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.studio-audio-picker svg:last-of-type { width: 16px; height: 16px; }
.studio-note { color: var(--text-secondary); font-size: 11px; }
.studio-error { position: absolute; bottom: 91px; left: 16px; right: 16px; z-index: 8; margin: 0; max-height: 100px; overflow: auto; padding: 12px 14px; border: 1px solid var(--danger); border-radius: 8px; background: var(--danger-panel-bg); color: var(--danger-text); font-size: 12px; }
.studio-export-state { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: rgba(11, 11, 13, 0.94); }
.studio-export-card { width: min(100%, 330px); text-align: center; }
.studio-export-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 0 20px; border: 1px solid var(--accent); border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.studio-export-card h3 { margin: 0 0 20px; font-size: 18px; font-weight: 500; }
.studio-export-card output { display: block; margin: 0 0 12px; font-size: 36px; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.studio-export-card progress { width: 100%; height: 5px; accent-color: var(--accent); }
.studio-export-card p { margin: 18px 0 24px; color: var(--text-muted); font-size: 12px; }
.studio-cancel-save { height: 42px; min-width: 100px; padding: 8px 20px; border: 1px solid var(--border-control); border-radius: 8px; background: transparent; font-size: 12px !important; }
@media (max-width: 700px) {
  .studio-sound-review .studio-device-actions:has(> #studio-sound-keep:not([hidden])) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sheet-dialog.studio-dialog { width: 100%; height: 100dvh; max-width: 100%; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .studio-dialog[open], .studio-dialog.tool-open { display: flex; flex-direction: column; }
  .studio-header { flex: none; height: calc(60px + env(safe-area-inset-top, 0px)); padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; }
  .studio-preview { flex: 1 1 0; padding: 8px 12px; }
  .studio-format-shortcut { top: 18px; right: 22px; }
  .studio-transport { flex: none; height: 48px; padding: 0 14px; }
  .studio-timeline { flex: none; min-height: 116px; padding: 0 14px 12px; }
  .studio-tools { flex: none; min-height: calc(82px + env(safe-area-inset-bottom, 0px)); padding: 9px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .studio-drawer { flex: none; max-height: min(290px, 40dvh); border-left: 0; border-top: 1px solid var(--border-strong); border-radius: 14px 14px 0 0; }
  .studio-drawer-header { min-height: 60px; padding: 8px 18px; }
  .studio-drawer-body { padding: 12px 18px 14px; }
  .studio-formats { gap: 8px; }
  .studio-formats button { min-height: 68px; }
  .studio-looks { gap: 12px; }
  .studio-look, .studio-look canvas { width: 62px; }
  .studio-history .studio-icon { width: 40px; min-width: 40px; }
  .studio-error, .studio-status { bottom: calc(91px + env(safe-area-inset-bottom, 0px)); }
  .studio-dialog .studio-inline-field select { font-size: 16px; min-width: 88px; }
  .studio-dialog.tool-open .studio-timeline { display: none; }
  .studio-dialog[data-tool="trim"] .studio-timeline { display: grid; min-height: 40px; padding-bottom: 0; }
  .studio-dialog[data-tool="trim"] :is(#studio-clips, #studio-audio-track, .studio-add-clip, .studio-timeline-side) { display: none; }
  .studio-check-row { flex-direction: column; gap: 0; }
  .studio-dialog[data-tool="trim"] .studio-timeline { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) and (max-height: 650px) {
  .studio-dialog.tool-open .studio-timeline { display: none; }
  .studio-drawer { max-height: 48dvh; }
  .studio-tools { min-height: 66px; padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .studio-tool { gap: 3px; }
}
@media (max-width: 600px) {
  .sheet-dialog.composer-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .composer-dialog .dialog-header { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
  .composer-dialog .composer-scroll { padding: 12px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .composer-media-intro { padding: 28px 0 12px; }
  .composer-media-intro h3 { font-size: 23px; }
}

/* The source window is expressed in the sound's verified media timeline. */
.studio-sound-window { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.studio-sound-window legend { padding: 0 5px; font-size: 12px; font-weight: 600; }
.studio-sound-window-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.studio-dialog .studio-sound-window input[type="number"] { width: 100%; min-width: 0; min-height: 40px; margin: 4px 0; padding: 6px; font-variant-numeric: tabular-nums; }
.studio-sound-window .studio-note { margin: 4px 0 0; }

/* video-player.css */
/* Keep video pixels and captions intact; controls have their own touch area. */
.flow-video { object-fit: contain; }
.video-player { width: 100%; min-width: 0; background: #0b0b0d; color: #fff; }
.video-picture { position: relative; display: grid; place-items: center; overflow: hidden; }
.drop-media-gallery .drop-media-item .video-player video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(640px, 64svh);
  min-height: 120px;
  aspect-ratio: var(--video-ratio, 4 / 3);
  object-fit: contain;
  background: #0b0b0d;
}
.drop-media-gallery .drop-media-item:has(> .video-player) { max-height: none; }
.video-controls { display: flex; align-items: center; gap: 2px; padding: 2px 4px; min-height: 48px; }
.video-player .video-control {
  display: grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 44px; min-height: 44px; padding: 10px;
  border: 0; border-radius: 8px; background: transparent; color: #fff;
  cursor: pointer; touch-action: manipulation;
}
.video-player .video-control:hover { background: #ffffff1a; }
.video-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.video-player .video-control[hidden] { display: none; }
.video-player .video-seek {
  width: 100%; min-width: 32px; height: 44px; padding: 0; margin: 0 4px;
  border: 0; box-shadow: none; background: transparent; accent-color: #fff; cursor: pointer;
}
.video-time { flex: 0 0 auto; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #b2b2ba; }
.video-toggle { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #fff; touch-action: manipulation; cursor: pointer; }
.video-state { display: none; border-radius: 50%; padding: 18px; min-width: 60px; background: rgba(11, 11, 13, 0.74); text-align: center; font-size: 21px; line-height: 1; }
.is-paused .video-state, .is-buffering .video-state, .has-error .video-state { display: block; }
.is-buffering .video-state, .has-error .video-state { font-size: 13px; border-radius: 18px; }
.video-message { position: absolute; bottom: 12px; left: 12px; right: 12px; padding: 8px; border-radius: 6px; background: rgba(11, 11, 13, 0.91); text-align: center; font-size: 12px; pointer-events: none; }
.video-message:empty { display: none; }
.video-player button:focus-visible, .video-player input:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.video-player:fullscreen { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.video-player:fullscreen .video-picture { flex: 1; min-height: 0; }
.drop-media-gallery .drop-media-item .video-player:fullscreen video { max-height: calc(100dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: 100%; }
@media (max-width: 360px) { .video-time { display: none; } }

/* parity-ui.css */
/*
 * LOUDERR parity layer.
 *
 * Small interaction details that people already know from the feed apps on their phones:
 * the comment field with the send arrow inside it, the story tray leading Home, one compact
 * control row above the feed. Colours come only from the site tokens in styles.css.
 */

/* ---- Comment composer: one pill, the send arrow inside it ---- */

.comments-composer {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.comments-field {
  position: relative;
  min-width: 0;
}

.comments-composer .comments-field textarea {
  display: block;
  min-height: 52px;
  max-height: 132px;
  padding: 12px 56px 12px 16px;
  border-color: var(--border);
  border-radius: 26px;
  resize: none;
  field-sizing: content;
}

.comments-composer .comments-field textarea:focus {
  outline: 0;
  border-color: var(--border-strong);
  background: var(--surface-control);
}

.comments-composer .comments-send {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  color: var(--on-accent);
  font-size: 0;
  line-height: 0;
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.comments-composer .comments-send::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  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='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4m-7 7 7-7 7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4m-7 7 7-7 7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

/* The arrow rests until there is something to send. */
.comments-field:has(textarea:placeholder-shown) .comments-send {
  opacity: 0.4;
  transform: none;
}

.comments-composer .comments-send:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.comments-composer .comments-send:disabled {
  opacity: 0.55;
}

/* The composer sits at the foot of the sheet. The old grid template assigned the flexible
   track by position, so once the hidden status rows collapsed the list landed in a fixed
   track and the empty flexible track opened up beneath the composer. */
.comments-dialog .comments-shell {
  display: flex;
  flex-direction: column;
}

.comments-dialog .comments-shell > .comments-list {
  flex: 1 1 auto;
  min-height: 0;
}

/* Comments on a large screen fit their content instead of opening an empty tower. */
@media (min-width: 821px) {
  .comments-dialog {
    height: auto;
    min-height: 260px;
    max-height: min(760px, calc(100dvh - 32px));
  }

  .comments-dialog .comments-shell {
    height: auto;
    max-height: min(760px, calc(100dvh - 32px));
  }
}

/* ---- Home on a phone: story tray first, one control row ---- */

.feed-order-toggle {
  display: none;
}

@media (max-width: 820px) {
  .people-row {
    margin: 2px 0 4px;
  }

  .people-row-scroller {
    gap: 12px;
    padding: 6px 2px 6px;
  }

  .people-row-item {
    width: 70px;
  }

  .people-row-avatar {
    width: 62px;
    height: 62px;
    font-size: 18px;
  }

  .feed-scope {
    margin-top: 0;
  }

  
  /* The order strip folds behind one control until someone asks for it. */
  body:not(.feed-order-open) #feed-order:not([hidden]) {
    display: none;
  }

  #feed-order {
    margin: 0 0 8px;
  }

  .feed-order-toggle {
    display: inline-grid;
    position: relative;
  }

  body:has(#feed-order[hidden]) .feed-order-toggle {
    display: none;
  }

  body.feed-order-open .feed-order-toggle {
    background: var(--surface-hover);
    color: var(--text);
  }

  body:has(#feed-order [data-sort]:not([data-sort="new"])[aria-pressed="true"]) .feed-order-toggle::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
  }

  #category-strip .category-chip {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
  }

  #category-strip .category-chip svg {
    width: 15px;
    height: 15px;
  }
}

/* ---- Confirmation sheet: the question, the consequence, and the verb on the button ---- */

.confirm-dialog {
  width: min(400px, calc(100vw - 32px));
  padding: 22px 22px 18px;
}

.confirm-dialog h2 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.confirm-dialog p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.confirm-dialog p[hidden] {
  display: none;
}

.confirm-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.confirm-dialog footer button {
  min-width: 96px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.confirm-dialog .danger-button:hover {
  filter: brightness(1.08);
}

@media (max-width: 820px) {
  /* Phones get an edge-to-edge sheet with the verb first and Cancel beneath it. */
  .small-dialog,
  .utility-dialog {
    width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .confirm-dialog {
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  }

  .confirm-dialog h2 {
    margin-top: 10px;
    font-size: 19px;
  }

  .confirm-dialog footer {
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 20px;
  }

  .confirm-dialog footer button {
    width: 100%;
    min-height: 50px;
    font-size: 16px;
  }

  .confirm-dialog footer .secondary-button {
    border-color: transparent;
    background: var(--surface-soft);
  }
}

/* ---- Card action menu: grouped, one icon per item, an edge-to-edge sheet on phones ---- */

.action-menu button {
  border-radius: 10px;
}

.action-menu button svg {
  flex: 0 0 auto;
  color: var(--text-secondary);
}

/* Group starts: creator tools, then the safety actions, then the post itself. */
.action-menu [data-menu-action="nominate"],
.action-menu [data-menu-action="hide"],
.action-menu [data-menu-action="archive"] {
  margin-top: 6px;
  padding-top: 12px;
  box-shadow: inset 0 1px var(--border);
}

.action-menu [data-menu-action="hide"] + [data-menu-action="mute"],
.action-menu [data-menu-action="restrict"] + [data-menu-action="block"] {
  margin-top: 0;
}

.action-menu .danger-menu-item {
  margin-top: 0;
  box-shadow: none;
}

.action-menu .danger-menu-item svg {
  color: var(--danger-text);
}

@media (min-width: 821px) {
  .action-menu {
    width: 240px;
    padding: 8px;
    animation: menu-in 140ms ease both;
  }

  @keyframes menu-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

@media (max-width: 820px) {
  .action-menu:not([hidden]) {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    max-height: min(78dvh, 640px) !important;
    padding: 4px 8px calc(10px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.36);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .action-menu:not([hidden])::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 10px;
    border-radius: 2px;
    background: var(--border-strong);
  }

  .action-menu button svg {
    width: 22px;
    height: 22px;
  }

  /* The message long-press menu is the same kind of sheet. */
  #message-actions-dialog {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  #message-actions-dialog::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 2px;
    background: var(--border-strong);
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .action-menu:not([hidden]) {
    animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ---- Card follow: a quiet round control, not a second accent on every card ---- */

.drop-header .drop-follow {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text);
  transition: background 140ms ease, border-color 140ms ease;
}

.drop-header .drop-follow svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drop-header .drop-follow:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.drop-header .drop-follow:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

/* ---- Toast with one action (Undo) ---- */

.toast.has-action {
  gap: 14px;
  padding-right: 6px;
}

/* Only a visible toast takes taps; a faded one must not swallow them or undo anything. */
.toast.has-action.is-visible {
  pointer-events: auto;
}

.toast:not(.is-visible) .toast-action {
  visibility: hidden;
  transition: visibility 0s linear 160ms;
}

.toast .toast-text {
  min-width: 0;
}

.toast .toast-action {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

:root[data-theme="light"] .toast .toast-action {
  color: #ff8a6d;
}

.toast .toast-action:hover {
  background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .toast .toast-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

.toast .toast-action:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 1px;
}

@media (max-width: 820px) {
  .toast.has-action {
    max-width: calc(100vw - 32px);
  }
}

/* ---- Share sheet: people first, then the link and the device share in one row ---- */

.send-drop-dialog {
  width: min(440px, calc(100vw - 32px));
}

.send-drop-search {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.send-drop-search:focus {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.send-drop-row[hidden] {
  display: none;
}

.share-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.share-actions::-webkit-scrollbar {
  display: none;
}

.share-action {
  flex: 0 0 auto;
  min-width: 84px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 6px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.share-action[hidden] {
  display: none;
}

.share-action:hover {
  background: var(--surface-soft);
}

.share-action:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.share-action-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-soft);
}

.share-action-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Comments beside the media on a large screen ---- */

.comments-media {
  display: none;
}

@media (min-width: 821px) {
  .comments-dialog.has-media[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    width: min(1120px, calc(100vw - 48px));
    max-width: none;
    height: min(760px, calc(100dvh - 48px));
    max-height: none;
    overflow: hidden;
  }

  .comments-dialog.has-media > .comments-media {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--surface-inset);
  }

  .comments-dialog.has-media > .comments-shell {
    height: 100%;
    max-height: none;
    min-height: 0;
  }

  .comments-media .drop-media-gallery {
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
  }

  .comments-media .drop-media-gallery.is-multiple {
    display: grid;
    grid-auto-flow: row;
    align-content: center;
    overflow-y: auto;
  }

  .comments-media .drop-media-item {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    background: transparent;
  }

  .comments-media .drop-media-item img,
  .comments-media .drop-media-item video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
  }

  .comments-media-text {
    display: grid;
    align-content: center;
    padding: 40px 48px;
  }

  .comments-media-title {
    margin: 0 0 12px;
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .comments-media-body {
    margin: 0;
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.55;
    white-space: pre-wrap;
  }

  .comments-media-byline {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
  }

  .comments-media-byline strong {
    color: var(--text);
  }
}

.send-drop-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.send-drop-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  font-size: 13px;
}

@media (max-width: 820px) {
  .send-drop-dialog {
    width: 100%;
  }

  .send-drop-list {
    max-height: 42dvh;
  }
}

/* ---- Create, first step: one prompt, one button, the rest as quiet links ----
 * The feed apps open Create with a single prompt and a single button. What used to compete
 * with that here (an intro under the title, a second heading, a dashed box with its own
 * caption, two capture tiles, a Studio button, the policy line and the draft footer) is
 * folded into the one prompt, demoted to a text link, or left to the step where it applies. */

#composer-media-step > .upload-field {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 12px 0 0;
  padding: 36px 20px 24px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: center;
}

#composer-media-step > .upload-field:hover,
#composer-media-step > .upload-field:focus-within {
  border-color: transparent;
  background: transparent;
}

#composer-media-step > .upload-field:focus-within {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

#composer-media-step > .upload-field .upload-field-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text-secondary);
}

#composer-media-step > .upload-field .upload-field-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

#composer-media-step > .upload-field .upload-field-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
}

#composer-media-step > .upload-field .upload-field-copy strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#composer-media-step > .upload-field .upload-field-copy small {
  max-width: none;
  overflow: visible;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
}

#composer-media-step > .upload-field .upload-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 16px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  transition: background 140ms ease;
}

#composer-media-step > .upload-field:hover .upload-action,
#composer-media-step > .upload-field:focus-within .upload-action {
  background: var(--accent-hover);
}

#composer-media-step > .upload-field .upload-field-limit {
  display: block;
  order: 1;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}

/* Once something is chosen the same field becomes one quiet row: the count, then Add more. */
#composer-media-step > .upload-field.has-file {
  flex-direction: row;
  gap: 12px;
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

#composer-media-step > .upload-field.has-file:hover,
#composer-media-step > .upload-field.has-file:focus-within {
  border-color: var(--border);
}

#composer-media-step > .upload-field.has-file .upload-field-copy {
  display: none;
}

#composer-media-step > .upload-field.has-file .upload-field-icon {
  width: 40px;
  height: 40px;
  margin: 0;
  background: transparent;
}

#composer-media-step > .upload-field.has-file .upload-field-icon svg {
  width: 22px;
  height: 22px;
}

#composer-media-step > .upload-field.has-file .upload-field-limit {
  flex: 1 1 auto;
  order: 0;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

#composer-media-step > .upload-field.has-file .upload-action {
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  background: transparent;
  color: var(--accent-hover);
}

#composer-media-step > .upload-field.has-file:hover .upload-action,
#composer-media-step > .upload-field.has-file:focus-within .upload-action {
  background: transparent;
  color: var(--link);
}

/* Explicit photo/video choices; the handler selects in-app capture or the native fallback. */
.composer-capture-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 0;
}

.composer-capture-actions .studio-file-button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
}

.composer-capture-actions .studio-file-button svg {
  width: 18px;
  height: 18px;
}

/* A text-only post remains a quiet alternative below media creation. */
.composer-create-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 12px 0 4px;
}

.composer-create-options > .text-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.composer-create-options > .text-button:hover {
  color: var(--text);
}

/* The policy line and the draft footer wait for a draft: renderComposerStep marks the dialog
 * composer-blank while the first step shows nothing chosen and nothing typed. */
.composer-dialog.composer-blank .composer-policy,
.composer-dialog.composer-blank .composer-draft-footer {
  display: none;
}

/* Keep Post/Story directly below the header, with media choices in a predictable order.
 * A :has() may not nest another :has(), so the media-step gate is on the section itself below. */
@media (max-width: 820px) {
  .composer-dialog .composer:has(> .composer-scroll > #composer-media-step:not([hidden])) {
    height: 100%;
  }

  .composer-dialog .composer-scroll:has(> #composer-media-step:not([hidden])) {
    display: flex;
    flex-direction: column;
  }

  #composer-media-step:not(:has(.composer-gallery-item)) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 24px;
  }

  #composer-media-step:not(:has(.composer-gallery-item)) > .upload-field {
    padding-top: 12px;
  }
}

/* A saved Studio publication offers itself below the links, centered, never full width. */
#composer-media-step > .composer-resume-studio:not([hidden]),
#composer-media-step > .secondary-button:not([hidden]) {
  display: block;
  margin: 8px auto 0;
}

/* ---- Creative: projects, Studio and the work behind the Drops, off the Home feed ----
 * Home keeps the shared programme in its hub; the project surfaces (latest projects, new in your
 * projects) moved here with their ids, so home.js renders into the same nodes. */

.creative-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* Moved nodes no longer sit under .home-hub, whose [hidden] rule kept them collapsible. */
#creative [hidden] {
  display: none !important;
}

.creative-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 26px 12px;
}

.creative-header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.creative-header p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.creative-body {
  display: grid;
  gap: 22px;
  padding: 8px 26px 28px;
}

.creative-prompt {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
}

.creative-prompt h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.creative-prompt p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.creative-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
}

.creative-prompt-actions .publish-button {
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
}

.creative-prompt-actions .text-button {
  min-height: 44px;
  font-size: 14px;
}

#creative .home-welcome h2,
#creative .home-section-heading h2 {
  font-size: 18px;
}

@media (max-width: 820px) {
  .creative-section {
    margin: 0 -14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .creative-header {
    padding: 20px 15px 8px;
  }

  .creative-body {
    padding: 8px 15px 24px;
  }
}

/* Creative is a standalone destination like Discover: one column, no right rail. The lists that
 * say so for the other views live in familiar-ui.css, which test_familiar_ui pins, so the two
 * rules are repeated here in the same media context. */
@media (min-width: 821px) {
  body[data-view="creative"] .content-grid {
    max-width: 1120px;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="creative"] .right-rail {
    display: none;
  }
}

/* ---- Messages header: title, one more menu, New ----
 * Archived conversations, Scheduled messages, Search messages, New group and Notification
 * settings sit behind one control on every size, as the feed apps do. The Inbox/Archived boxes
 * are hidden; their buttons stay in the DOM for the folder controller, which still paints
 * aria-pressed on them, so the menu item and the hint read the folder from that. */

/* The menu is placed against the whole header, not the 44px trigger: a 300px conversation pane with
 * overflow hidden would clip a trigger-anchored menu on a laptop. */
#messages .messages-inbox-header {
  position: relative;
}

.messages-more {
  position: static;
  flex: 0 0 auto;
}

/* Guests would find two of the items inert (folders and message search need a viewer). */
body[data-viewer="guest"] #messages .messages-more {
  display: none;
}

.messages-more-menu {
  position: absolute;
  top: calc(100% - 8px);
  right: 16px;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 248px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.messages-more-menu[hidden] {
  display: none;
}

.messages-more-menu > button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.messages-more-menu > button:hover,
.messages-more-menu > button:focus-visible {
  background: var(--surface-hover);
}

/* scheduled-messages.css and message-search.css styled the old standalone buttons (margins, padding);
 * inside the menu they are rows like the others. */
.messages-more-menu > #messages-scheduled,
.messages-more-menu > #messages-search-history {
  margin: 0;
  padding: 0 12px;
}

.messages-more-menu > button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.messages-more-menu .when-archived {
  display: none;
}

#messages:has([data-conversation-folder="archived"][aria-pressed="true"]) .when-inbox {
  display: none;
}

#messages:has([data-conversation-folder="archived"][aria-pressed="true"]) .when-archived {
  display: inline;
}

#messages .conversation-folders {
  display: none;
}

#messages .conversation-archive-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 4px 16px 12px;
}

#messages .conversation-archive-hint[hidden] {
  display: none;
}

#messages .messages-back-to-inbox {
  min-height: 36px;
  padding: 0 4px;
  font-size: 13px;
}

/* ---- Settings shortcuts: rows, like the list above them ---- */

#account-dialog .account-shortcuts {
  grid-template-columns: minmax(0, 1fr);
  gap: 0 24px;
}

@media (min-width: 821px) {
  #account-dialog .account-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#account-dialog .account-shortcuts button {
  width: 100%;
  min-height: 48px;
  justify-content: flex-start;
  color: var(--text);
  text-align: left;
  white-space: normal;
}

/* The phone rules in styles.css hid the icons and forbade wrapping for the old three-tile grid. */
#account-dialog .account-shortcuts svg {
  display: inline-block;
}

#account-dialog .account-shortcuts button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Saved folders: chips that read as chips ---- */

#save-folders .save-folder-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  background: var(--surface-soft);
  color: var(--text-secondary);
}

#save-folders .save-folder-chip:hover {
  background: var(--surface-hover);
  color: var(--text);
}

#save-folders .save-folder-chip.is-active {
  background: var(--text);
  color: var(--bg);
}

#save-folders .saved-folder-manage {
  background: transparent;
  text-decoration: none;
}

/* ---- Create: Post | Story | Live, and a post that finishes in the background ---- */

.composer-mode {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-hover);
}

.composer-mode[hidden] {
  display: none;
}

.composer-mode-choice {
  flex: 1 1 0;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.composer-mode-choice.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.composer-mode-choice[hidden] {
  display: none;
}

.posting-bar {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  z-index: 121;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-50%);
}

.posting-bar[hidden] {
  display: none;
}

.posting-bar-spinner {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sv-posting-spin 0.9s linear infinite;
}

.posting-bar.is-done .posting-bar-spinner {
  border-color: #1db954;
  background: #1db954;
  animation: none;
}

.posting-bar.is-failed .posting-bar-spinner {
  border-color: var(--danger, #e5484d);
  background: var(--danger, #e5484d);
  animation: none;
}

.posting-bar-view {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.posting-bar-view[hidden] {
  display: none;
}

/* On a phone the bar sits just under the sticky header, not over the logo. */
@media (max-width: 820px) {
  .posting-bar {
    /* The measured header height already includes the safe area. */
    top: calc(var(--mobile-header-height, calc(58px + env(safe-area-inset-top))) + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .posting-bar-spinner {
    animation: none;
  }
}

.coauthors-inbox.is-empty {
  display: none;
}

/* Feed cards on a phone: name and time over the picture; the category and the tag row stay on the Drop's page. */
@media (max-width: 820px) {
  body:not(.is-shared-drop) #feed .drop-header .drop-kind,
  body:not(.is-shared-drop) #feed .drop-header .drop-kind + span,
  body:not(.is-shared-drop) #feed .drop-tags {
    display: none;
  }
}

/* ---- Discover: result counts stay with screen readers ---- */

/* "2 people shown" repeats what is on screen, and "5 Drops" counted only what had loaded. */
#discover-drops-note,
#discover-people-note:not(.is-paging) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Settings shortcuts: the same rows as the list above them ---- */

#account-dialog .account-shortcuts button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 550;
}

#account-dialog .account-shortcuts .settings-chevron {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  color: var(--text-muted);
}

/* parity-social.css */
/* Stories, camera, reposts, disappearing messages and time controls.
   Paired with camera.js, stories-v2.js and social-extras.js. */

/* Shared full-screen layers and sheets. They are modal <dialog> elements so they stack
   above the composer and Settings; reset the user-agent dialog box first. */
dialog.sv-overlay, dialog.lc-camera {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
}
dialog.sv-overlay:not([open]), dialog.lc-camera:not([open]) { display: none; }
dialog.sv-overlay::backdrop, dialog.lc-camera::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog.sv-sheet-overlay::backdrop { background: rgba(0, 0, 0, 0.45); }
.sv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #000;
  color: #fff;
}
.sv-sheet-overlay {
  z-index: 1300;
  align-items: flex-end;
  background: transparent;
  color: var(--text);
}
.sv-sheet {
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-menu);
  box-shadow: var(--shadow);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 821px) {
  .sv-sheet-overlay { align-items: center; }
  .sv-sheet { border-radius: var(--radius-lg); }
}
.sv-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 6px;
}
.sv-sheet-header h2 { margin: 0; font-size: 17px; }
.sv-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 18px;
  overflow-y: auto;
}
.sv-sheet-body h3 { margin: 12px 0 0; font-size: 15px; }
.sv-hint { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.sv-empty { margin: 6px 0; color: var(--text-muted); font-size: 14px; list-style: none; }
.sv-icon { display: inline-flex; width: 20px; height: 20px; }
.sv-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sv-icon-button, .sv-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sv-round { background: rgba(0, 0, 0, 0.45); color: #fff; backdrop-filter: blur(6px); }
.sv-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sv-choice[aria-pressed="true"] { border-color: var(--text); background: var(--surface-active); }
.sv-choice:disabled { opacity: 0.5; cursor: default; }
.sv-recovery-list { display: grid; gap: 14px; }
.sv-recovery-card { min-width: 0; display: grid; gap: 6px; }
.sv-recovery-open { align-items: stretch; }
.sv-recovery-preview { position: relative; display: grid; place-items: center; flex: 0 0 52px; height: 72px; overflow: hidden; border-radius: 6px; background: var(--surface-control); }
.sv-recovery-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-recovery-description { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.sv-recovery-name, .sv-recovery-caption { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sv-recovery-detail { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.sv-recovery-delete { min-height: 44px; width: auto; justify-self: end; }
.sv-recovery-open:focus-visible, .sv-recovery-delete:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.sv-danger { color: var(--danger); }
.sv-field, .sv-text-input, .sv-sheet-body select, .sv-sheet-body input[type="time"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface-control);
  color: var(--text);
  font: inherit;
}
.sv-text-input { resize: vertical; min-height: 88px; }
.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.sv-chip[aria-pressed="true"] { border-color: var(--text); }
.sv-people { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sv-person { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.sv-person > span:not(.avatar) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-person-button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sv-avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.sv-vote-note { color: var(--text-secondary); }
.sv-sheet-actions { display: flex; justify-content: flex-end; }

/* Camera */
.lc-camera {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  grid-template-rows: 1fr;
  background: #000;
  color: #fff;
}
.lc-camera-stage { position: relative; overflow: hidden; }
.lc-camera-frame {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100vw, calc(100dvh * var(--lc-frame-ratio, 9 / 16)));
  height: min(100dvh, calc(100vw / (var(--lc-frame-ratio, 9 / 16))));
  overflow: hidden;
  background: #000;
}
.lc-camera-video, .lc-camera-review img, .lc-camera-review video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.lc-camera-video.is-mirrored { transform: scaleX(-1); }
.lc-camera-frame .lc-camera-video { object-fit: cover; }
.lc-camera-top {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
}
.lc-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer;
}
.lc-round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lc-spacer { visibility: hidden; }
.lc-camera-status {
  position: absolute;
  top: 45%;
  left: 24px;
  right: 24px;
  margin: 0;
  text-align: center;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.lc-camera-status:empty { display: none; }
.lc-camera-retry {
  display: block; min-height: 44px; margin: 12px auto 0; padding: 8px 16px;
  border: 1px solid #fff; border-radius: 999px; background: #fff; color: #111;
  font: inherit; cursor: pointer;
}
.lc-camera-timer {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: #d92d20;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lc-camera-filters {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lc-filter {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lc-filter[aria-checked="true"] { background: #fff; color: #111; border-color: #fff; }
.lc-camera-modes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(154px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 18px;
}
.lc-mode {
  min-height: 32px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  cursor: pointer;
}
.lc-mode[aria-pressed="true"] { color: #fff; }
.lc-camera-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.lc-shutter {
  width: 78px;
  height: 78px;
  border: 5px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.lc-shutter:active { transform: scale(0.94); }
.lc-shutter.is-video { background: #d92d20; }
.lc-shutter.is-recording { border-radius: 22px; background: #d92d20; transform: scale(0.8); }
/* The shutter is named by its aria-label; the circle itself carries no words. */
.lc-shutter { font-size: 0; color: transparent; }
.lc-camera-review-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
}
.lc-camera-review-bar > * { flex: 1 1 0; min-height: 48px; }

/* Story stage, composer and viewer */
.sv-stage {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #111;
  touch-action: none;
  user-select: none;
}
@media (min-width: 821px) {
  .sv-stage { height: calc(100% - 32px); margin-top: 16px; border-radius: var(--radius-lg); }
}
/* Preserve the captured frame in both composer and viewer, including during rotation. */
.sv-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Media of another shape is shown whole, over a blurred copy of the photo or a dark gradient. */
.sv-backdrop {
  position: absolute;
  inset: -32px;
  width: calc(100% + 64px);
  height: calc(100% + 64px);
  object-fit: cover;
  filter: blur(28px) brightness(0.6) saturate(1.15);
  pointer-events: none;
  display: none;
}
.sv-stage.is-contained { background: radial-gradient(circle at 50% 40%, #2b2b33, #0b0b0e 72%); }
.sv-stage.is-contained .sv-backdrop { display: block; }
/* A soft shade under the header keeps the name and buttons readable on light pictures. */
.sv-stage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}
.sv-layer { position: absolute; inset: 0; z-index: 1; }
.sv-media-status {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(85%, 320px);
  padding: 16px;
  border-radius: 12px;
  background: rgba(17, 17, 20, 0.94);
  color: #fff;
  text-align: center;
}
.sv-media-status[hidden] { display: none; }
.sv-media-status p { margin: 0 0 8px; }
.sv-media-status .sv-choice { color: #fff; justify-content: center; }
.sv-element {
  position: absolute;
  max-width: 86%;
  transform-origin: center;
  cursor: grab;
  text-align: center;
}
.sv-viewer .sv-element { cursor: default; }
.sv-element.is-selected { outline: 2px dashed rgba(255, 255, 255, 0.8); outline-offset: 6px; border-radius: 6px; }
.sv-composer .sv-element:focus-visible { outline: 3px solid #fff; outline-offset: 5px; box-shadow: 0 0 0 5px #111; border-radius: 6px; }
.sv-element-text span {
  display: inline-block;
  padding: 4px 10px;
  color: var(--text-colour, #fff);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sv-element-text.is-plain span { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.sv-element-text.is-box span { border-radius: 8px; background: rgba(0, 0, 0, 0.6); }
.sv-element-text.is-outline span {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.85);
  paint-order: stroke fill;
}
.sv-emoji-art { font-size: 44px; line-height: 1; }
.sv-mention, .sv-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.sv-mention { color: #7a35ff; }
.sv-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.sv-poll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(280px, 70vw);
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.sv-poll strong { font-size: 16px; }
.sv-poll small { color: #555; }
.sv-poll-status { margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.sv-poll-retry { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px; border: 1px solid #777; border-radius: 8px; background: #f4f4f6; color: #111; font: inherit; cursor: pointer; }
.sv-poll:focus-visible, .sv-poll-retry:focus-visible, .sv-poll-option:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.sv-poll-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-poll-option {
  position: relative;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f4f4f6;
  color: #111;
  font: inherit;
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}
.sv-poll-option.has-result {
  background: linear-gradient(90deg, rgba(122, 53, 255, 0.18) var(--share, 0%), #f4f4f6 var(--share, 0%));
}
.sv-poll-option.is-chosen { border-color: #7a35ff; }
.sv-poll-option:disabled { cursor: default; }
.sv-poll-share { display: block; font-size: 12px; font-weight: 600; color: #444; }

.sv-composer-top, .sv-viewer-header {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  z-index: 2;
}
.sv-viewer-header { top: calc(22px + env(safe-area-inset-top)); color: #fff; }
.sv-composer-top, .sv-viewer-header {
  left: 50%;
  right: auto;
  width: min(100vw, calc(100vh * 9 / 16));
  transform: translateX(-50%);
}
.sv-tools { display: flex; gap: 8px; }
.sv-tool-text span { font-size: 17px; }
.sv-edit-bar {
  position: absolute;
  top: calc(70px + env(safe-area-inset-top));
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.sv-composer-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  z-index: 2;
}
.sv-caption {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
}
.sv-caption::placeholder { color: rgba(255, 255, 255, 0.7); }
.sv-audience { display: flex; gap: 8px; }
.sv-audience-choice {
  flex: 1 1 0;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sv-audience-choice[aria-checked="true"] { background: #fff; color: #111; }
.sv-audience-choice.is-close-friends[aria-checked="true"] { background: #1db954; border-color: #1db954; color: #04130a; }
.sv-status { margin: 0; min-height: 1em; color: #fff; font-size: 13px; }
.sv-status:empty { display: none; }
.sv-draft-save {
  align-self: flex-start;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sv-draft-save[hidden] { display: none; }
.sv-draft-save:disabled { opacity: 0.6; cursor: wait; }
.sv-draft-save:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sv-status.is-error {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  font-weight: 600;
}
.sv-share { min-height: 48px; }
.sv-share-row { display: flex; gap: 10px; }
.sv-share-row > .sv-share {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sv-share-row > .sv-share:disabled { opacity: 0.5; cursor: default; }
.sv-share-story { background: #fff; color: #111; }
.sv-share-friends { background: #1db954; color: #04130a; }
.sv-share-friends .sv-icon svg { width: 18px; height: 18px; }
.sv-share-avatar { width: 26px; height: 26px; flex: 0 0 26px; font-size: 11px; }

/* A story that is still posting, or waiting to be tried again, on the own tray tile. */
.people-row-item.sv-posting .people-row-avatar { position: relative; }
.people-row-item.sv-posting .people-row-avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid rgba(122, 53, 255, 0.25);
  border-top-color: var(--accent);
  animation: sv-posting-spin 0.9s linear infinite;
}
.people-row-item.sv-posting.is-failed .people-row-avatar::after { animation: none; border-color: #e5484d; }
.people-row-item.sv-posting.is-failed .people-row-name { color: #e5484d; font-weight: 700; }
@keyframes sv-posting-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .people-row-item.sv-posting .people-row-avatar::after { animation: none; border-color: var(--accent); }
}

.sv-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sv-swatch {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--swatch);
  cursor: pointer;
}
.sv-swatch[aria-checked="true"] { outline: 3px solid var(--text); outline-offset: 2px; }
.sv-swatches .sv-swatch:focus-visible { outline: 3px dashed var(--text); outline-offset: 4px; }
.sv-style-choices, .sv-special-stickers { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.sv-emoji {
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-raised);
  font-size: 28px;
  cursor: pointer;
}

.sv-progress {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 16px), calc((100vh * 9 / 16) - 16px));
  display: flex;
  gap: 3px;
  z-index: 3;
}
.sv-bar { flex: 1 1 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.sv-bar-fill { display: block; width: 100%; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.sv-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sv-identity-text { display: flex; flex-direction: column; }
.sv-identity-text strong { font-size: 14px; }
.sv-identity-text small { color: rgba(255, 255, 255, 0.78); font-size: 12px; }
.sv-viewer.is-close-friends .sv-identity-text small { color: #62e38e; }
.sv-viewer-header .sv-icon-button svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.sv-view-caption {
  position: absolute;
  left: 50%;
  bottom: calc(118px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100vw - 32px), calc((100vh * 9 / 16) - 32px));
  margin: 0;
  color: #fff;
  font-size: 15px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 2;
}
.sv-viewer-footer {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100vw, calc(100vh * 9 / 16));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  z-index: 2;
}
.sv-viewer-footer:empty { display: none; }
.sv-quick-reactions { display: flex; justify-content: space-between; }
.sv-quick { min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 26px; cursor: pointer; }
.sv-reply { display: flex; align-items: center; gap: 6px; }
.sv-reply-status { margin: 0; color: #fff; font-size: 12px; line-height: 1.4; }
.sv-reply-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
}
.sv-reply-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.sv-seen, .sv-footer-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sv-viewer-footer.sv-own-footer {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.sv-viewer-footer .sv-seen { margin-right: auto; }
.sv-viewer-footer .sv-footer-action {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: 4px 6px;
  border-radius: 12px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
}
.sv-viewer-footer .sv-footer-action:hover,
.sv-viewer-footer .sv-footer-action:focus-visible { background: rgba(0, 0, 0, 0.45); }

/* Tray rings on the Home people row */
.people-row-item.has-story .people-row-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--border-strong); }
.people-row-item.has-story.is-unseen .people-row-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.people-row-item.has-story.is-close-friends.is-unseen .people-row-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #1db954; }
.profile-hero-avatar.sv-has-story { cursor: pointer; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

/* Your own tile carries two controls: the face opens the Story you have, the badge on its corner
   starts the next one. The badge lives inside the face so it keeps the avatar's corner at every
   avatar size, and it sits above the face control so a tap on the corner adds instead of opens. */
.people-row-item.sv-own-tile { position: relative; }
.sv-own-face { position: relative; display: inline-grid; }
.sv-own-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.people-row-plus.sv-own-add {
  z-index: 2;
  margin: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
}
/* The badge is 20px of paint and a finger-sized target around it. */
.people-row-plus.sv-own-add::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }

/* Highlights */
.sv-highlights {
  display: flex;
  gap: 16px;
  padding: 6px 2px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sv-highlight {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.sv-highlight-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--bg);
}
.sv-highlight-ring :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.sv-highlight-ring svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sv-highlight-title { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sv-highlights[data-sv-empty="true"] { padding: 0 16px; }
.sv-highlights[data-sv-empty="true"] .sv-highlight-new { flex-direction: row; width: auto; min-height: 44px; gap: 8px; }
.sv-highlights[data-sv-empty="true"] .sv-highlight-ring { width: 20px; height: 20px; border: 0; background: none; box-shadow: none; }
.sv-highlights[data-sv-empty="true"] .sv-highlight-ring svg { width: 18px; height: 18px; }
.sv-highlights[data-sv-empty="true"] .sv-highlight-title { max-width: none; font-size: 13px; }
.sv-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sv-highlight-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sv-highlight-item { display: flex; align-items: center; gap: 10px; }
.sv-highlight-item > :is(img, video) { width: 40px; height: 64px; object-fit: cover; border-radius: 5px; }
.sv-highlight-item > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sv-archive-tile {
  position: relative;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--surface-soft);
  overflow: hidden;
  cursor: pointer;
}
.sv-archive-tile :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.sv-archive-tile.is-close-friends { box-shadow: inset 0 0 0 2px #1db954; }
.sv-archive-tile[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--text);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.sv-archive-date {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* Reposts */
.sv-profile-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.sv-tab {
  flex: 1 1 0;
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sv-tab[aria-selected="true"] { border-bottom-color: var(--text); color: var(--text); }
.sv-tab-hidden { display: none !important; }
#profile-reposts-more[aria-disabled="true"] { opacity: .65; cursor: wait; }
.sv-repost { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sv-repost-note { margin: 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; }

/* Disappearing messages */
.sv-disappearing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}
.sv-disappearing-banner[hidden] { display: none; }
.sv-expiry-label { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.sv-story-reply { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-secondary); }
.sv-story-reply-thumb {
  width: 44px;
  height: 78px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface-soft);
  overflow: hidden;
  cursor: pointer;
}
.sv-story-reply-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Time controls */
.sv-usage-today { margin: 0; font-size: 22px; font-weight: 800; }
.sv-usage-chart { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 120px; }
.sv-usage-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.sv-usage-bar { display: block; width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--text-secondary); }
.sv-usage-day small { color: var(--text-muted); font-size: 11px; }
.sv-form { display: flex; flex-direction: column; gap: 10px; }
.sv-form label, .sv-sheet-body > label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.sv-form label.sv-inline { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.sv-inline input { width: 22px; height: 22px; }
.sv-times { display: flex; align-items: center; gap: 8px; }
.sv-times[hidden] { display: none; }
.sv-supervised { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.sv-invite { display: flex; flex-direction: column; gap: 8px; }
.sv-invite-list ul { margin: 4px 0 0; padding-left: 20px; }

@media (prefers-reduced-motion: reduce) {
  .lc-shutter, .sv-bar-fill { transition: none; }
}

/* Keep the same two capture choices at every size. Native inputs are fallback-only. */
.composer-capture-actions { flex-wrap: wrap; }
.composer-create-options > #composer-open-story::before {
  content: "\00b7";
  margin-right: 12px;
  color: var(--text-muted);
}

/* Stories on large screens: styles.css keeps the people strip for phones, but a live Story
 * belongs above the feed everywhere, so the strip returns on Home when it carries Stories. */
@media (min-width: 821px) {
  body[data-view="all"] #home-people.has-stories { display: block; }
}

/* Quick reactions appear with the reply (the reply field adds .is-open), not over every Story. */
.sv-quick-reactions:not(.is-open) {
  display: none;
}

/* live.css */
/* Live video: the host and viewer screens, the tray badge and the Go live entry.
   Paired with live.js. The overlay and sheet boxes come from parity-social.css (sv-overlay). */

.lv-overlay { background: #000; }
.lv-stage {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}
@media (max-width: 820px) {
  .lv-stage { width: 100vw; }
}
.lv-video, .lv-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lv-video video { object-fit: cover; background: #000; }
.lv-video video.is-mirrored { transform: scaleX(-1); }

.lv-top {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.lv-top .lv-close { margin-left: auto; }
.lv-top .lv-report + .lv-close { margin-left: 0; }
.lv-top .lv-report { margin-left: auto; }
.lv-top .sv-icon-button svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.lv-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lv-identity-avatar { width: 36px; height: 36px; flex: none; }
.lv-identity-text { display: flex; flex-direction: column; min-width: 0; }
.lv-identity-text strong,
.lv-identity-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.lv-identity-text small { opacity: 0.85; font-size: 12px; }
.lv-status { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.lv-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: #e5263b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.lv-badge[hidden] { display: none; }
.lv-clock, .lv-count {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lv-clock:empty, .lv-count:empty { display: none; }

.lv-comments {
  position: absolute;
  left: 12px;
  right: 72px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 2;
  max-height: 38%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  mask-image: linear-gradient(to bottom, transparent, #000 24px);
  scrollbar-width: none;
}
.lv-comment { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: #fff; }
.lv-comment-avatar { width: 28px; height: 28px; flex: none; }
.lv-comment-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.lv-comment-text strong { margin-right: 2px; }
.lv-comment-remove { min-width: 32px; min-height: 32px; margin-left: auto; color: #fff; opacity: 0.75; }

.lv-notice {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 42%;
  z-index: 4;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.lv-notice:empty { display: none; }
.lv-stage.is-ended .lv-video { opacity: 0.35; }

.lv-bottom {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.lv-stage.is-preview .lv-bottom { flex-direction: column; align-items: stretch; }
.lv-title-input, .lv-compose-input {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
}
.lv-title-input::placeholder, .lv-compose-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.lv-hint { margin: 0; font-size: 13px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.lv-primary, .lv-end {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #e5263b;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.lv-primary:disabled { opacity: 0.6; cursor: progress; }
.lv-end { margin-left: auto; min-height: 44px; }
.lv-pill {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lv-pill.is-off { background: #fff; color: #000; }
.lv-round { background: rgba(0, 0, 0, 0.35); color: #fff; }
.lv-compose { display: flex; flex: 1; gap: 8px; min-width: 0; }
.lv-compose-input { flex: 1; min-width: 0; }
.lv-compose-send {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.lv-compose-send:disabled { opacity: 0.6; }
.lv-heart-button .sv-icon svg { fill: #ff4d6d; stroke: #ff4d6d; }
.lv-sound {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: 800;
  transform: translate(-50%, -50%);
}
.lv-sound[hidden] { display: none; }

.lv-hearts {
  position: absolute;
  right: 18px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 3;
  width: 40px;
  height: 45%;
  pointer-events: none;
}
.lv-heart {
  position: absolute;
  bottom: 0;
  left: 8px;
  color: #ff4d6d;
  font-size: 26px;
  animation: lv-rise 1.6s ease-out forwards;
}
@keyframes lv-rise {
  from { opacity: 1; transform: translate(0, 0) scale(0.8); }
  to { opacity: 0; transform: translate(var(--lv-drift, 0px), -260px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .lv-heart { animation: lv-fade 1.2s ease-out forwards; }
  @keyframes lv-fade { from { opacity: 1; } to { opacity: 0; } }
}

/* The Home tray tile of somebody who is live. */
.lv-tray-item .people-row-avatar { position: relative; box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px #e5263b; }
.lv-tray-badge {
  position: absolute;
  left: 50%;
  bottom: -7px;
  padding: 1px 5px;
  border: 2px solid var(--surface, #fff);
  font-size: 9px;
  transform: translateX(-50%);
}

/* Go live next to Add to story in the composer, and on a live person's profile. */
#composer-go-live[hidden], #profile-watch-live[hidden] { display: none; }
#profile-watch-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #e5263b;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* profile-photo.css */
.profile-photo-dialog {
  width: min(440px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  height: fit-content;
  margin: auto;
  overflow: auto;
}
.profile-photo-body { padding: 20px; display: grid; gap: 16px; min-width: 0; }
.profile-photo-body h2, .profile-photo-body p { margin: 0; }
.profile-photo-body p { font-size: .875rem; line-height: 1.5; color: var(--text-muted); }
.profile-photo-stage {
  width: min(100%, 300px, 42dvh);
  aspect-ratio: 1;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 2px solid var(--text-muted);
  touch-action: none;
  cursor: grab;
}
.profile-photo-stage:active { cursor: grabbing; }
.profile-photo-stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.profile-photo-stage canvas { display: block; width: 100%; height: 100%; }
.profile-photo-zoom { width: 100%; min-width: 0; min-height: 44px; padding: 0; }
.profile-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-photo-actions button { flex: 1; min-height: 44px; white-space: nowrap; }
#profile-photo-adjust { margin-top: 8px; min-height: 44px; }
.profile-photo-editor .profile-avatar-wrap { flex-direction: column; gap: 0; }

/* profile-places.css */
.profile-places { min-width: 0; }
.profile-places .field { margin: 0; }
.profile-place-options {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  max-height: min(240px, 35dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
}
.profile-place-options [role="option"] {
  min-height: 44px;
  padding: 12px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  color: var(--text);
  font-size: .875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.profile-place-options [role="option"]:hover,
.profile-place-options [aria-selected="true"] { background: var(--surface-hover); }
.profile-place-options [aria-selected="true"] { outline: 1px solid var(--border-control); outline-offset: -1px; }
.profile-places .field-note { margin: 8px 0 0; }
.profile-places .profile-place-status { margin: 8px 0 0; font-size: .8125rem; color: var(--text-secondary); }
.profile-places .profile-place-status:empty { display: none; }
.profile-place-attribution { display: block; margin-top: 5px; font-size: .75rem; line-height: 1.5; color: var(--text-muted); }
.profile-place-attribution a { color: inherit; text-underline-offset: 2px; }
.profile-places [data-place-retry] { min-height: 44px; }
.profile-places [role="alert"] { margin-top: 8px; }

/* message-albums.css */
.message-album-dialog .message-album-name {display:grid;gap:12px;margin:16px 0;}
.message-album-dialog .message-album-consent {display:flex;gap:12px;align-items:flex-start;}
.message-album-dialog .message-album-consent input {min-width:24px;min-height:24px;margin-top:4px;}
.message-album-dialog .message-album-consent span {line-height:1.5;}
.message-album-dialog video {max-width:100%;max-height:320px;object-fit:contain;}
.message-album-dialog input[type=text] {min-height:44px;width:100%;box-sizing:border-box;}
.message-album-dialog a.secondary-button {display:inline-flex;align-items:center;min-height:44px;}

/* message-shared-items.css */
.message-shared-dialog { width: min(740px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.message-shared-dialog h2 { margin: 0 0 12px; }
.message-shared-dialog > button { margin-bottom: 16px; min-height: 44px; }
.message-shared-dialog select { width: 100%; min-height: 44px; }
.message-shared-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.message-shared-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; overflow-wrap: anywhere; }
.message-shared-item img { width: 100%; height: 160px; object-fit: contain; border-radius: 8px; }
.message-shared-item time, .message-shared-item > span { color: var(--text-muted); font-size: 12px; }
.message-shared-item button { margin-top: auto; min-height: 44px; }
.message-shared-navigation { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.message-shared-navigation button { min-height: 44px; }

/* message-search.css */
.message-search-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.message-search-dialog h2 { margin: 0 0 16px; }
.message-search-dialog form { display: grid; gap: 12px; }
.message-search-dialog input, .message-search-dialog select { min-height: 44px; width: 100%; box-sizing: border-box; }
.message-search-dialog .message-search-results { max-height: 45dvh; }
.message-search-hit { display: block; width: 100%; padding: 14px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.message-search-hit:hover { background: var(--surface-raised); }
.message-search-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.message-search-hit strong, .message-search-hit .message-search-sender, .message-search-hit time { display: block; }
.message-search-hit time, .message-search-sender { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.message-search-hit p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#messages-search-history { width: 100%; margin-top: 10px; min-height: 44px; }
#message-history-navigation { grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 14px 0; }
#message-history-navigation[hidden] { display: none; }
#message-history-navigation button { min-height: 44px; padding: 8px 10px; }
#message-history-navigation #messages-older { margin: 0; }
#message-history-status { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: 12px; }
.direct-message.message-search-focus { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
@media (max-width: 600px) {
  #message-history-navigation { gap: 4px; padding: 5px 8px 0; }
  #message-history-navigation button { font-size: 12px; padding-inline: 8px; }
  .message-search-dialog { padding: 18px; }
}

/* message-polls.css */
.message-poll { width: min(100%, 28rem); min-width: 0; overflow-wrap: anywhere; }
.message-poll h3 { font-size: 1rem; margin: 0 0 .6rem; }
.message-poll-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.message-poll-option { display: flex; align-items: center; gap: .6rem; padding: .65rem .4rem; min-height: 44px; cursor: pointer; }
.message-poll-option input, .message-poll-multiple input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--accent); }
.message-poll-option span { flex: 1; min-width: 0; }
.message-poll-count { font-variant-numeric: tabular-nums; }
.message-poll-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.message-poll-status { font-size: .85rem; margin: .4rem 0; }
.message-poll-status:empty { display: none; }
.message-poll-voters { font-size: .85rem; margin: .7rem 0; }
.message-poll-voters summary { cursor: pointer; min-height: 32px; }
.message-poll-voters p { margin: .4rem 0; }
.message-poll-dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.message-poll-dialog input:not([type=checkbox]) { width: 100%; min-width: 0; box-sizing: border-box; }
.message-poll-choice { display: flex; align-items: end; gap: .5rem; margin: .5rem 0; }
.message-poll-choice label { flex: 1; min-width: 0; }
.message-poll-choice button { max-width: 7rem; }
.message-poll-multiple { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; }

/* message-files.css */
.message-file-download { display: block; padding: .7rem; border: 1px solid var(--border, #777); border-radius: .6rem; overflow-wrap: anywhere; color: inherit; min-height: 44px; }
.message-file-download:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.message-file-unavailable { opacity: .7; }
#message-file-check { min-height: 44px; }

/* message-tools.css */
.message-reply-draft { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 10px; border-left: 3px solid var(--accent); background: var(--surface-raised); border-radius: 8px; }
.message-reply-draft > div { min-width: 0; flex: 1; }
.message-reply-draft p { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.message-reply-draft strong { font-size: 13px; }
.message-reply-draft button { flex-shrink: 0; min-height: 44px; }
.message-quote { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid currentColor; border-radius: 5px; background: color-mix(in srgb, currentColor 8%, transparent); font-size: 12px; }
.message-quote p { margin: 3px 0 0; max-height: 4.5em; overflow: auto; white-space: pre-wrap; }
.message-reactions, .message-reaction-picker { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.message-reaction { min-width: 44px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-raised); color: var(--text); cursor: pointer; }
.message-reaction[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.message-reaction-picker .message-reaction { font-size: 21px; min-height: 44px; }
.message-history-link { display: block; color: inherit; opacity: .8; padding: 6px 0; font-size: 11px; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.message-tools-dialog { max-height: calc(100dvh - 24px); overflow: auto; }
.message-tools-dialog h2 { margin: 0 0 16px; }
.message-tools-dialog textarea { width: 100%; box-sizing: border-box; }
.message-tools-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.message-tools-note { color: var(--text-muted); font-size: 13px; }
.message-history p, .message-search-result p { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-history section, .message-search-result { border-bottom: 1px solid var(--border); padding: 12px 0; }
.message-search-result time { display: block; font-size: 12px; color: var(--text-muted); }
.message-search-results { max-height: 45dvh; overflow: auto; margin-block: 14px; }
#message-search-button { flex-shrink: 0; min-height: 44px; padding-inline: 10px; }
#message-extra-actions { display: grid; gap: 8px; margin-bottom: 10px; }
.message-form .message-reply-draft { grid-column: 1 / -1; }

/* scheduled-messages.css */
.message-schedule-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.message-schedule-tools button, #messages-scheduled { min-height: 44px; padding: 8px 12px; }
#messages-scheduled { margin: 4px 12px 8px; }
.scheduled-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-sizing: border-box; overflow: auto; }
.scheduled-dialog h2 { margin: 0 0 16px; }
.scheduled-dialog input, .scheduled-dialog select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; }
.scheduled-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.scheduled-dialog button { min-height: 44px; white-space: normal; }
.scheduled-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24dvh; overflow: auto; }
.scheduled-item { padding: 14px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.scheduled-item h3 { margin: 0 0 8px; font-size: 15px; }
.scheduled-item p { margin: 8px 0; }
.scheduled-unresolved:not(:empty) { border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 12px; }
.scheduled-confirmation { font-weight: 600; overflow-wrap: anywhere; }

/* message-typing.css */
#message-typing-status {
  min-height: 1.5em;
  margin: 0;
  padding: 0 .85rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* group-invites.css */
.group-invite-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.group-invite-body { display: grid; gap: .85rem; min-width: 0; }
.group-invite-body .field { min-width: 0; }
.group-invite-body input { width: 100%; min-width: 0; box-sizing: border-box; }
.group-invite-qr { display: block; width: min(100%, 18rem); height: auto; justify-self: center; background: white; }
.group-invite-body footer { display: flex; flex-wrap: wrap; gap: .6rem; }
.group-invite-body footer button { flex: 1 1 8rem; }
.group-invite-limits { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.group-invite-body > a { text-align: center; }

/* message-groups.css */
.group-dialog { width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.group-dialog h2 { margin: 0 0 16px; }
.group-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.group-dialog button { min-height: 44px; }
.group-dialog .field { min-width: 0; }
.group-dialog input { width: 100%; box-sizing: border-box; }
.group-rename, .group-invite { display: grid; gap: 10px; }
.group-rename > button, .group-invite > button { justify-self: start; }
.group-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px; }
.group-selected-person { padding: 6px 10px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); border-radius: 16px; overflow-wrap: anywhere; }
.group-search-results { display: grid; gap: 6px; max-height: 24dvh; overflow: auto; }
.group-person { text-align: left; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-raised); color: var(--text); overflow-wrap: anywhere; }
.group-person:disabled { opacity: .5; }
.group-members { display: grid; gap: 10px; max-height: 40dvh; overflow: auto; }
.group-member { display: grid; gap: 8px; border-bottom: 1px solid var(--border); padding-block: 10px; }
.group-member-copy { display: grid; gap: 3px; overflow-wrap: anywhere; }
.group-member-copy span, .group-member-copy small { color: var(--text-muted); font-size: 12px; }
.group-member-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.group-member-actions button { font-size: 12px; }
.group-invite { margin-top: 18px; }
.messages-inbox-header #messages-new-group { flex-shrink: 0; }

/* voice-playback.css */
.voice-playback-dock {
  position: fixed; z-index: 70; right: 20px; bottom: 20px;
  width: min(480px, calc(100vw - 32px)); box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: 0 6px 24px #0003;
}
.voice-playback-dock[hidden], .voice-playback-button[hidden] { display: none; }
.direct-message-media audio[hidden] { display: none; }
.voice-playback-title { min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
.voice-playback-button { min-height: 44px; padding: 6px 10px; border: 0; border-radius: 9px; color: inherit; background: transparent; cursor: pointer; font: inherit; font-size: 13px; }
.voice-playback-button:hover { background: var(--surface-hover); }
.voice-playback-media { min-width: 0; }
.voice-playback-media audio { display: block; width: 100%; height: 44px; }
.voice-playback-speed { display: flex; align-items: center; justify-content: flex-end; font-size: 13px; }
.voice-playback-speed select { min-height: 44px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); color: inherit; font: inherit; }
.voice-playback-dock :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.has-voice-player[data-view="messages"].message-thread-open #message-list { margin-bottom: var(--voice-player-space, 130px); }
@media (max-width: 760px) {
  .voice-playback-dock { right: 8px; width: calc(100vw - 16px); bottom: calc(78px + env(safe-area-inset-bottom, 0px)); padding: 8px 12px; gap: 2px 8px; }
  .voice-playback-dock .voice-playback-button { font-size: 12px; }
}

/* calls.css */
.message-call-controls, .call-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.call-button { min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; color: inherit; background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
.call-button:disabled { opacity: .55; cursor: default; }
.call-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.call-panel { position: fixed; z-index: 90; right: 16px; bottom: 16px; width: min(480px, calc(100vw - 32px)); max-height: 70dvh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 6px 24px #0003; }
.call-panel[hidden] { display: none; }
.call-card { padding: 12px; border-bottom: 1px solid var(--border); }
.call-card p { margin: 6px 0; font-size: 13px; }
.call-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; }
.call-media video { width: 100%; max-height: 200px; background: #111; border-radius: 8px; }
.call-media audio { display: none; }
.call-history { width: min(560px, calc(100vw - 32px)); max-height: 80dvh; overflow: auto; padding: 18px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.call-history::backdrop { background: #0008; }
.call-history p { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
@media (max-width: 760px) {
  .message-thread-header { flex-wrap: wrap; }
  .message-call-controls { flex-basis: 100%; }
  .call-panel { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); right: 8px; width: calc(100vw - 16px); }
}

/* saved-folders.css */
.saved-folder-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); }
.saved-folder-body { padding: 16px; display: grid; gap: 14px; min-width: 0; }
.saved-folder-body p { margin: 0; overflow-wrap: anywhere; }
.saved-folder-list { display: grid; gap: 8px; max-height: 38dvh; overflow: auto; }
.saved-folder-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.saved-folder-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saved-folder-row > button:first-child { flex: 1; text-align: left; overflow-wrap: anywhere; }
.saved-folder-body button, .saved-folder-manage, .save-folder-chip { min-height: 44px; }
.saved-folder-list [aria-pressed="true"] { border: 2px solid var(--text); }
.saved-folder-form { display: grid; gap: 10px; }
.saved-folder-form input { width: 100%; min-width: 0; min-height: 44px; }
.saved-folder-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-folder-confirmation { padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.saved-folder-confirmation .saved-folder-buttons { margin-top: 10px; }
.saved-folder-body [hidden] { display: none; }
.saved-folder-manage { text-decoration: underline; }
.saved-folder-body button:focus-visible, .saved-folder-body input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.saved-folder-choice { display: flex; align-items: center; gap: 12px; min-height: 44px; width: 100%; padding: 8px; cursor: pointer; }
.saved-folder-choice input { flex: 0 0 20px; width: 20px; height: 20px; }
.saved-folder-choice span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .saved-folder-row { flex-wrap: wrap; }
  .saved-folder-label { flex-basis: 100%; }
}

/* original-sounds.css */
.original-sound-credit { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; margin-top: 8px; min-width: 0; }
.original-sound-credit > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.original-sound-label { flex-basis: 100%; font-size: 12px; opacity: .7; }
.original-sound-credit a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.original-sound-credit a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.flow-overlay .original-sound-credit { pointer-events: auto; }
.original-sound-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.original-sound-dialog > div { display: grid; gap: 12px; padding: 18px; min-width: 0; }
.original-sound-form { display: grid; gap: 12px; }
.original-sound-form > label { display: grid; gap: 6px; }
.original-sound-form input[type="text"], .original-sound-form select { width: 100%; min-width: 0; min-height: 44px; }
.original-sound-dialog .original-sound-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.original-sound-consent input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
.original-sound-rows { display: grid; gap: 18px; min-width: 0; }
.original-sound-row { border-top: 1px solid var(--border); padding-top: 14px; display: grid; gap: 10px; min-width: 0; }
.original-sound-row h3, .original-sound-row p { margin: 0; overflow-wrap: anywhere; }
.original-sound-row audio { width: 100%; max-width: 100%; }
.original-sound-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.original-sound-dialog button { min-height: 44px; }
.original-sound-dialog [hidden] { display: none !important; }
.sound-playback-status { position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 4; margin: 0; padding: 10px 12px; border-radius: 8px; color: #fff; background: rgb(0 0 0 / .8); font-size: 13px; line-height: 1.4; pointer-events: none; }
.sound-playback-status[hidden] { display: none; }

/* video-remix-review.css */
.admin-video-review .media-review {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: 880px;
}
.admin-video-review .media-review h4,
.admin-video-review .media-review p { margin: 0; }
.admin-video-review .media-review-preview { margin: 0; max-width: 640px; width: 100%; }
.admin-video-review .media-review-preview video { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.admin-video-review .media-review > label { display: flex; align-items: flex-start; gap: 10px; }
.admin-video-review .media-review > label input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 20px; margin: 2px 0 0; flex: 0 0 20px;
}
.admin-video-review .media-review textarea { width: 100%; min-height: 84px; }
.admin-video-review .media-review .button-row { flex-wrap: wrap; }

/* shared-collections.css */
.shared-collection-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); }
.shared-collection-body { padding: 16px; display: grid; gap: 14px; min-width: 0; }
.shared-collection-body p { margin: 0; overflow-wrap: anywhere; }
.shared-collection-body button, .shared-collection-body input:not([type="checkbox"]) { min-height: 44px; }
.shared-collection-body [hidden] { display: none; }
.shared-collection-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.shared-collection-list { display: grid; gap: 8px; min-width: 0; }
.shared-collection-choice, .shared-collection-post-link { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: left; overflow-wrap: anywhere; min-width: 0; }
.shared-collection-post { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shared-collection-post-link { flex: 1; }
.shared-collection-post-link small { display: block; margin-top: 4px; color: var(--muted); }
.shared-collection-form { display: grid; gap: 10px; }
.shared-collection-form input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.shared-collection-sharing { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.shared-collection-sharing input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
.shared-collection-confirmation { padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.shared-collection-confirmation .shared-collection-buttons { margin-top: 12px; }
.shared-collection-body :is(button,input):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 700px) { .small-dialog.shared-collection-dialog { width: 100%; max-width: 100%; margin-inline: 0; } }
@media (max-width: 380px) { .shared-collection-post { align-items: stretch; flex-direction: column; } }

/* post-archive.css */
.post-archive-dialog { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.post-archive-body { padding: 16px; display: grid; gap: 14px; min-width: 0; }
.post-archive-body p { margin: 0; overflow-wrap: anywhere; }
.post-archive-body button { min-height: 44px; }
.post-archive-body [hidden] { display: none; }
.post-archive-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.post-archive-list, .post-archive-detail { display: grid; gap: 12px; min-width: 0; }
.post-archive-choice { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: left; overflow-wrap: anywhere; min-width: 0; }
.post-archive-choice small { display: block; margin-top: 6px; color: var(--muted); }
.post-archive-copy { white-space: pre-wrap; }
.post-archive-media { min-width: 0; }
.post-archive-media :is(img, video, audio) { max-width: 100%; }
.post-archive-media :is(img, video) { max-height: 60dvh; object-fit: contain; }
.post-archive-confirmation { padding: 12px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 12px; }
.post-archive-body button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 700px) { .small-dialog.post-archive-dialog { width: 100%; max-width: 100%; margin-inline: 0; } }

/* follow-requests.css */
/* Follow requests use the same readable rows and actions as the social surfaces. */
.notifications-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notifications-header-actions > button { min-height: 44px; }
.follow-requests-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(760px, calc(100dvh - 32px)); padding: 20px; }
.follow-requests-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.follow-requests-header h2 { margin: 0; flex: 1; font-size: 20px; }
.follow-requests-header button { min-width: 44px; min-height: 44px; }
.follow-requests-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; overflow: auto; max-height: calc(100dvh - 230px); overscroll-behavior: contain; }
.follow-requests-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.follow-requests-profile { display: flex; flex: 1 1 180px; min-width: 0; align-items: center; gap: 10px; min-height: 44px; text-align: left; background: transparent; border: 0; color: inherit; padding: 0; }
.follow-requests-profile .avatar { width: 42px; height: 42px; flex: 0 0 42px; }
.follow-requests-profile strong, .follow-requests-profile span { overflow-wrap: anywhere; }
.follow-requests-identity { display: grid; gap: 2px; min-width: 0; }
.follow-requests-identity small { color: var(--text-muted); }
.follow-requests-row-status { flex: 1 0 100%; margin: 0; overflow-wrap: anywhere; }
.follow-requests-actions { display: flex; align-items: center; gap: 8px; }
.follow-requests-action { min-width: 72px; min-height: 44px; padding: 8px 12px; }
.follow-requests-status, .follow-requests-error { margin: 12px 0; overflow-wrap: anywhere; }
.follow-requests-error { color: var(--danger, #ff8a8a); }
.follow-requests-dialog button[aria-disabled="true"] { opacity: .65; }
.follow-requests-dialog > button { min-height: 44px; margin-top: 12px; }
.drop-header .drop-follow.is-requested, .drop-header .drop-follow:has(.follow-request-label:not([hidden])) { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 44px; height: 44px; min-height: 44px; border-radius: 999px; gap: 6px; padding-inline: 10px; }
.follow-request-label { font-size: 12px; font-weight: 600; }
[data-follow-author][aria-busy="true"] { opacity: .65; }
@media (max-width: 420px) {
  .follow-requests-dialog { padding: 16px; }
  .follow-requests-profile { flex-basis: 140px; }
  .follow-requests-action { min-width: 66px; padding-inline: 10px; }
}

/* connections.css */
.connections-dialog { width: min(540px, calc(100vw - 24px)); }
.connections-dialog > div { min-width: 0; }
.connections-dialog .connections-list {
  max-height: min(480px, calc(100dvh - 225px));
  overscroll-behavior: contain;
  overflow-anchor: none;
}
.connections-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.connections-row .connection-person {
  min-width: 0;
  min-height: 48px;
  padding: 4px 0;
  border: 0;
  border-radius: 6px;
}
.connections-identity { min-width: 0; display: grid; text-align: left; }
.connections-identity > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connections-actions { display: flex; align-items: center; gap: 4px; }
.connections-follow, .connections-check { min-height: 44px; padding: 8px 10px; white-space: nowrap; }
.connections-more { min-width: 44px; min-height: 44px; padding: 8px; }
.connections-row-status { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--text-muted); }
.connections-menu {
  grid-column: 1 / -1;
  justify-self: end;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-menu);
}
.connections-remove { min-height: 44px; padding: 10px 14px; text-align: left; }
.connections-row button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.connections-row [aria-busy="true"], .connections-row [aria-disabled="true"] { opacity: .65; }
@media (max-width: 820px) {
  .connections-dialog { width: 100%; }
}
@media (max-width: 380px) {
  .connections-row { grid-template-columns: minmax(0, 1fr); }
  .connections-actions { justify-content: flex-end; }
}