:root:not([data-capabilities-loaded]) [data-requires-capability],
.capability-withheld {
  display: none !important;
}

: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-message-fill: #d63a1f;
  --own-message-ink: #ffffff;
  --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;
  --own-message-fill: #b81f0c;
  --own-message-ink: #ffffff;
  --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 {
  -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 {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

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-live-dot {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--positive);
}

.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;
}

.page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 3px 2px 24px;
}

.page-intro h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.page-intro p {
  max-width: 620px;
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connection-pill {
  height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 650;
}

.connection-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}

.connection-pill.is-live i {
  background: var(--positive);
}

.connection-pill.is-offline i {
  background: var(--danger);
}

.intro-create-button {
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.intro-create-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* 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);
}

.section-kicker {
  margin: 0 0 7px;
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.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-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-drops {
  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 h3,
.discover-drops h3 {
  margin: 0;
  font-size: 13px;
}

.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; }

.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-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: 10px; }
.connection-person small { color: var(--text-muted); font-size: 9px; }
.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-header {
  min-height: 112px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 26px 21px;
  border-bottom: 1px solid var(--border);
}

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

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

.chat-presence {
  margin-top: 3px;
  flex: 0 0 auto;
}

.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;
}

.live-orb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--positive);
}

.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);
  animation: card-in 180ms ease both;
}

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

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

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

.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;
}

.presence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 9px;
}

.presence-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
}

.presence-badge strong {
  color: var(--text-secondary);
}

.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-alt-field {
  margin-top: 13px;
}

.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;
}

.media-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(4, 4, 6, 0.97);
}

.media-viewer > button {
  width: 44px;
  height: 44px;
  position: fixed;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

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

#media-viewer-content {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 50px;
}

#media-viewer-content img,
#media-viewer-content video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#media-viewer-content audio {
  width: min(680px, 90vw);
}

.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 {
    padding-bottom: calc(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;
  }

  .page-intro {
    padding: 20px 1px 14px;
  }

  .page-intro h1 {
    font-size: 24px;
  }

  .page-intro p {
    max-width: 310px;
    font-size: 11px;
    line-height: 1.55;
  }

  .connection-pill {
    width: 24px;
    padding: 0;
    justify-content: center;
  }

  .connection-pill span {
    display: none;
  }

  .intro-create-button {
    display: grid;
  }

  .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) {
  .page-intro p {
    max-width: 285px;
  }

  .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-summary p { margin: 6px 0 0; }

.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;
  }

  .discover-search {
    margin-right: 12px;
    margin-left: 12px;
  }

  .discover-controls {
    padding-right: 12px;
    padding-left: 12px;
  }

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

  .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-header {
    min-height: 104px;
    padding: 21px 15px 17px;
  }

  .chat-header h2 {
    font-size: 24px;
  }

  .chat-header p:last-child {
    max-width: 250px;
    font-size: 10px;
  }

  .chat-presence {
    padding-right: 7px;
    padding-left: 7px;
    font-size: 9px;
  }

  .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;
  }

  .chat-header {
    gap: 10px;
  }

  .chat-header p:last-child {
    max-width: 220px;
  }
}

@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;
}

.page-intro p {
  font-size: 14px;
  line-height: 1.55;
}

body:has(#chat:not([hidden])) .page-intro,
body:has(#discover:not([hidden])) .page-intro,
body:has(#notifications:not([hidden])) .page-intro,
body:has(#messages:not([hidden])) .page-intro,
body:has(#trending:not([hidden])) .page-intro,
body:has(#profile-view:not([hidden])) .page-intro {
  display: none;
}

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;
}

.section-kicker {
  font-size: 11px;
}

.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;
}

.presence-badge {
  font-size: 11px;
}

.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;
  }

  .page-intro {
    padding-top: 18px;
  }

  .page-intro p {
    max-width: 340px;
    font-size: 13px;
    line-height: 1.5;
  }

  .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 {
    min-height: 96px;
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .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) {
  .page-intro:not([hidden]) {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    margin: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  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);
  }

  .mobile-primary-icon {
    width: 48px;
    height: 48px;
    position: absolute;
    top: -10px;
    left: 50%;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 4px solid var(--bg);
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
  }

  .mobile-primary-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-primary-destination > span:last-child {
    transform: translateY(15px);
  }

  .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 h3,
.discover-drops 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 {
  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;
  }

  .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-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-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-option-label {
  width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

.emote-option-label {
  font-size: 12px;
}

.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 .messages-list-heading {
  margin: 0;
  padding: 16px 20px 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

#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 .admin-report-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#admin-dialog .admin-report-toolbar p { margin: 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-copy { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
#chat .chat-room-copy strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
#chat .chat-room-copy span { color: var(--text-muted); font-size: 12px; 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-group-time { grid-column: 1; grid-row: 1; align-self: start; padding-top: 4px; color: var(--text-muted); font-size: 10px; line-height: 20px; text-align: center; }
#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 12px; }
  #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-label { display: none; }
.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))); }
}

/* Beta fixes 2026-09-02: readable titles, quieter cards, 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;
  }
}

/* Design pass 2026-09-02: 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;
}

.engagement-prompt {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.engagement-prompt:hover,
.engagement-prompt:focus-visible {
  color: var(--text);
}

.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); }
}

.drop-card {
  animation: drop-in 220ms ease-out both;
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.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;
  }
}

/* Design pass follow-up: mobile Home feed header 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;
  }
}

/* Design tranche 2b: 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;
}

/* Design tranche 2c: 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;
  }
}

/* Design tranche 3: 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,
body:not([data-view="all"]) .home-today {
  display: none;
}

/* Design tranche 4: one-page World, Instagram profile header, calmer mobile Board */
#world-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#world-content > .world-section {
  order: 2;
  display: grid;
  gap: 18px;
  scroll-margin-top: 72px;
}

.world-section-anchor {
  height: 0;
  scroll-margin-top: 72px;
}

.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;
}

/* Tranche 6: audit fixes and texture */
.engagement-prompt {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0;
}

.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);
  }
}

/* Tranche 7: 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;
  }
}

/* Tranche 7 follow-up: 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;
}

/* Tranche 8: 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;
  }

  .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);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-header {
    transition: none;
  }
}

/* Tranche 8 follow-up: 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;
}

/* 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: translateX(-50%) 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;
  }
}

main.is-entering {
  animation: view-in 0.16s ease-out;
}

@keyframes view-in {
  from {
    opacity: 0.001;
  }
}

@keyframes pull-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (display-mode: standalone) {
  html {
    overscroll-behavior-y: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  main.is-entering {
    animation: none;
  }

  .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%;
}

/* Tranche 10: 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;
}

/* Phones: one account entry in the header, showing the avatar once signed in */
.mobile-account-button .mobile-account-avatar {
  width: max-content;
  height: auto;
  min-width: 30px;
  min-height: 30px;
  aspect-ratio: 1;
  padding: 2px;
  font-size: 11px;
  line-height: 1;
}

body[data-viewer="guest"] .mobile-account-avatar,
body:not([data-viewer="guest"]) .mobile-account-guest {
  display: none;
}

/* 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: the link sits with the other fields; a held Drop reads as waiting, not failing */
.composer-dialog .composer-link {
  margin-top: 10px;
}

.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; }

/* Tranche 11: 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;
}

.engagement-prompt.is-input {
  width: 100%;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: 13px;
  text-align: left;
}

.engagement-prompt.is-input:hover,
.engagement-prompt.is-input:focus-visible {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

/* 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;
}

.drop-media-dots {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.drop-media-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
  outline: 1px solid rgb(0 0 0 / 0.2);
  transition: background 160ms ease, transform 160ms ease;
}

.drop-media-dots i.is-active {
  background: #fff;
  transform: scale(1.25);
}

@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;
}

.composer-dialog .composer-link {
  margin-top: 14px;
}

/* Tranche 12: 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;
  }
}

/* ------------------------------------------------------------------ */
/* Tranche 13: 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);
}

/* ------------------------------------------------------------------ */
/* Tranche 13: 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);
}

/* ------------------------------------------------------------------ */
/* Tranche 13: 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) auto;
    grid-template-areas:
      "avatar identity actions"
      "avatar stats stats";
    gap: 14px 44px;
    padding: 34px 28px 26px;
  }

  .profile-hero-avatar {
    width: 150px;
    height: 150px;
    font-size: 42px;
  }

  .profile-hero .profile-stats {
    display: flex;
    gap: 28px;
    align-self: start;
  }

  .profile-hero .profile-stats > button,
  .profile-hero .profile-stats > a,
  .profile-hero .profile-stats > div {
    display: inline-flex;
    align-items: baseline;
    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-end;
  }
}

/* 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: 3px;
}

.profile-grid[hidden] {
  display: none;
}

.profile-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  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-grid {
    gap: 4px;
  }

  .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; }
}