/* =====================================================================
   3itter layout: Twitter-style three columns on M3 Expressive surfaces.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--app-bg); color: var(--md-on-surface);
  font: 400 16px/24px var(--md-font); letter-spacing: 0.2px;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--md-spring-slow-effects-dur) var(--md-spring-slow-effects);
}
a { color: inherit; }
button { font-family: inherit; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.link { color: var(--md-primary); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Shell */
.shell {
  --rail-w: 272px; --main-w: 620px; --side-w: 352px;
  display: grid; grid-template-columns: var(--rail-w) minmax(0, var(--main-w)) var(--side-w);
  justify-content: center; gap: 24px; min-height: 100dvh; padding-inline: 12px;
}
.rail {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 0 16px; overflow-y: auto; scrollbar-width: none;
}
.brand { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px; text-decoration: none; color: var(--md-on-surface); }
.brand-mark {
  width: 40px; height: 40px; flex: none; background: var(--md-primary);
  transition: transform var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial), clip-path var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial);
}
.brand:hover .brand-mark { transform: rotate(120deg) scale(1.08); }
.brand-name { font: 800 28px/32px var(--md-font); font-stretch: 125%; letter-spacing: -0.5px; }
.rail-items { display: flex; flex-direction: column; gap: 2px; margin-block: 8px 16px; }
.rail-fab { align-self: flex-start; margin-inline-start: 4px; min-width: 200px; }
.rail-spacer { flex: 1; }
.account-chip {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0;
  border-radius: 32px; background: transparent; color: var(--md-on-surface); text-align: start; cursor: pointer;
  transition: var(--t-shape);
}
.account-chip:active { border-radius: 16px; }
.ac-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-name { font: 700 15px/20px var(--md-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-handle { font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { min-width: 0; padding-bottom: 48px; }
.sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 16px; padding-block: 12px 24px; max-height: 100dvh; overflow-y: auto; scrollbar-width: none; }

.mobile-fab { display: none; }

/* Collapsed rail (tablet) */
.rail-collapsed-mode .shell { --rail-w: 88px; }
.rail-collapsed-mode .rail { align-items: center; }
.rail-collapsed-mode .brand-name, .rail-collapsed-mode .ac-text, .rail-collapsed-mode .ac-more, .rail-collapsed-mode .rail-fab-label { display: none; }
.rail-collapsed-mode .brand { padding: 0; }
.rail-collapsed-mode .rail-items { gap: 6px; align-items: center; }
.rail-collapsed-mode .rail-item { width: 80px; }
.rail-collapsed-mode .rail-fab { align-self: center; min-width: 0; width: 64px; height: 64px; padding: 0; margin: 0; border-radius: 18px; }
.rail-collapsed-mode .account-chip { width: auto; padding: 8px; }

@media (max-width: 1079px) {
  .shell { grid-template-columns: var(--rail-w) minmax(0, var(--main-w)); }
  .sidebar { display: none; }
}
@media (max-width: 639px) {
  .shell { display: block; padding-inline: 0; }
  .rail { display: none; }
  .navbar { display: flex; }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mobile-fab { display: inline-flex; position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40; }
  body.is-thread .mobile-fab, body[data-route="messages"] .mobile-fab, body[data-route="settings"] .mobile-fab { display: none; }
  .snackbar-host { bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.is-thread .navbar { display: none; }
}

/* ---------------------------------------------------------- Views */
.view { display: flex; flex-direction: column; gap: 12px; }
.view-enter { animation: view-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
@keyframes view-in { from { opacity: 0; transform: translateY(16px); } }
.view-loading { min-height: 60dvh; display: grid; place-items: center; }
.section-title { padding: 20px 8px 8px; }

/* Top app bar: large headline that condenses on scroll */
.topbar {
  position: sticky; top: 0; z-index: 30;
  margin-inline: -12px; padding: 8px 12px 8px;
  background: var(--app-bg);
  transition: box-shadow var(--md-spring-default-effects-dur) var(--md-spring-default-effects);
}
.scrolled .topbar { box-shadow: 0 1px 0 var(--md-outline-variant); }
.topbar-row { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.topbar-titles { flex: 1; min-width: 0; padding-inline: 8px; }
.topbar-title {
  font: 700 22px/28px var(--md-font); font-stretch: 110%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform-origin: left center;
  transition: font-size var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial),
              line-height var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial);
}
.topbar.big .topbar-title { font-size: 36px; line-height: 44px; font-weight: 800; font-stretch: 122%; letter-spacing: -0.5px; }
.scrolled .topbar.big .topbar-title { font-size: 24px; line-height: 32px; }
.topbar-sub { font: 400 13px/18px var(--md-font); color: var(--md-on-surface-variant); }
.topbar-actions { display: flex; gap: 4px; }
.topbar-extra { padding: 4px 0 4px; }
.topbar-extra .btn-group { max-width: 420px; }
.topbar .tabs { margin-top: 4px; border-bottom: 0; }
.topbar-avatar { display: none; padding: 0; border: 0; background: none; cursor: pointer; margin-inline-start: 4px; }
.thread-user { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
@media (max-width: 639px) {
  .topbar { margin-inline: 0; padding-inline: 8px; }
  .topbar-avatar { display: block; }
  .view { gap: 8px; }
  .view > :not(.topbar) { margin-inline: 8px; }
  .topbar.big .topbar-title { font-size: 30px; line-height: 38px; }
}

/* ---------------------------------------------------------- Avatars */
.avatar {
  --uh: 285; --size: 48px;
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--size); height: var(--size);
  background: oklch(0.86 0.09 var(--uh)); color: oklch(0.33 0.12 var(--uh));
  font: 800 calc(var(--size) * 0.42) / 1 var(--md-font); font-stretch: 115%;
  text-decoration: none; overflow: hidden;
  transition: clip-path var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial),
              background-color var(--md-spring-default-effects-dur) var(--md-spring-default-effects);
}
[data-theme="dark"] .avatar { background: oklch(0.45 0.12 var(--uh)); color: oklch(0.94 0.04 var(--uh)); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-xs { --size: 20px; } .av-sm { --size: 36px; } .av-md { --size: 48px; } .av-lg { --size: 64px; } .av-xl { --size: 120px; }
a.avatar:hover { filter: brightness(0.95); }
.avatar-ring { padding: 5px; background: var(--app-card); display: inline-grid; transition: clip-path var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }

/* ---------------------------------------------------------- Composer */
.composer-card { background: var(--app-card); border-radius: var(--md-shape-xl); overflow: hidden; }
.composer { position: relative; padding: 16px 16px 12px; }
.composer .wavy-progress { position: absolute; inset: 0 0 auto 0; }
.composer-grid { display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
.composer-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.composer-input {
  width: 100%; min-height: 48px; max-height: 50dvh; padding: 10px 0 4px; border: 0; outline: none; resize: none;
  background: transparent; color: var(--md-on-surface); font: 400 20px/28px var(--md-font);
}
.composer-input::placeholder { color: var(--md-on-surface-variant); }
.composer-media { position: relative; }
.composer-media img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 20px; animation: dialog-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
.composer-media .icon-btn { position: absolute; top: 8px; left: 8px; }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid transparent; transition: border-color 200ms; }
.composer.active .composer-bar { border-top-color: var(--md-outline-variant); }
/* Floating toolbar (expressive) */
.toolbar { display: flex; gap: 2px; padding: 4px; margin-inline-start: -8px; border-radius: 28px; background: transparent; transition: var(--t-color); }
.composer.active .toolbar { background: var(--md-surface-container-high); margin-inline-start: 0; }
.toolbar .icon-btn { color: var(--md-primary); }
.composer-right { display: flex; align-items: center; gap: 12px; }
.counter { position: relative; display: grid; place-items: center; width: 26px; height: 26px; }
.counter svg { transform: rotate(-90deg); }
.ctr-track { fill: none; stroke: var(--md-outline-variant); stroke-width: 2.5; }
.ctr-fill { fill: none; stroke: var(--md-primary); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.counter.warn .ctr-fill { stroke: var(--md-tertiary); }
.counter.over .ctr-fill { stroke: var(--md-error); }
.ctr-num { position: absolute; font: 600 11px/1 var(--md-font); color: var(--md-on-surface-variant); }
.counter.over .ctr-num { color: var(--md-error); }
.counter.warn, .counter.over { transform: scale(1.2); transition: transform var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }

.emoji-grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 2px; }
.emoji-btn { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; font-size: 22px; cursor: pointer; transition: var(--t-shape), var(--t-color); }
.emoji-btn:hover { background: color-mix(in oklab, var(--md-on-surface) 8%, transparent); }
.emoji-btn:active { border-radius: 10px; }

/* ---------------------------------------------------------- Posts */
.feed { --seg-r: 28px; }
.post {
  position: relative; padding: 14px 16px 6px; background: var(--app-card); cursor: pointer;
  transition: background-color var(--md-spring-fast-effects-dur) var(--md-spring-fast-effects);
}
.post:hover { background: var(--app-card-hover); }
.post.enter { animation: post-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
.post.leaving { animation: post-out 260ms var(--md-spring-fast-effects) forwards; }
@keyframes post-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
@keyframes post-out { to { opacity: 0; transform: scale(0.96); } }
.post.unread, .notif.unread { background: color-mix(in oklab, var(--app-card), var(--md-primary) 7%); }
.post-missing { display: flex; align-items: center; gap: 8px; color: var(--md-on-surface-variant); cursor: default; padding: 16px; font: 400 14px/20px var(--md-font); }
.post-context { display: flex; align-items: center; gap: 6px; margin: -2px 0 4px 36px; font: 600 13px/18px var(--md-font); color: var(--md-on-surface-variant); }
.post-context a { text-decoration: none; }
.post-context a:hover { text-decoration: underline; }
.post-grid { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
.post-side { display: flex; flex-direction: column; align-items: center; }
.post.thread-down .post-side::after { content: ""; flex: 1; width: 2px; margin-top: 4px; margin-bottom: -10px; border-radius: 1px; background: var(--md-outline-variant); }
.post-main { min-width: 0; }
.post-head { display: flex; align-items: center; gap: 4px; min-width: 0; height: 24px; }
.post-name { font: 700 15px/20px var(--md-font); color: var(--md-on-surface); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; }
a.post-name:hover { text-decoration: underline; }
.post-handle, .post-dot, .post-time { font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); white-space: nowrap; text-decoration: none; }
.post-head .post-handle { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 2; }
.post-time:hover { text-decoration: underline; }
.post-more { margin-inline-start: auto; margin-inline-end: -8px; }
.post-replying { font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); }
.post-text { font: 400 16px/24px var(--md-font); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.post-media-btn { display: block; width: 100%; margin-top: 12px; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 20px; overflow: hidden; }
.post-media { display: block; width: 100%; max-height: 560px; object-fit: cover; background: var(--md-surface-container-high); transition: transform var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial); }
.post-media-btn:hover .post-media { transform: scale(1.015); }
.quote { margin-top: 12px; padding: 12px 14px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--md-outline-variant); cursor: pointer; transition: var(--t-color); }
.quote:hover { background: color-mix(in oklab, var(--md-on-surface) 4%, transparent); }
.quote-missing { display: flex; align-items: center; gap: 8px; color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); cursor: default; }
.quote-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.quote-head .post-name { font-size: 14px; }
.quote-head .post-handle { overflow: hidden; text-overflow: ellipsis; }
.quote-text { margin-top: 4px; font: 400 15px/22px var(--md-font); white-space: pre-wrap; overflow-wrap: anywhere; }
.quote-media { display: block; width: 100%; max-height: 280px; object-fit: cover; margin-top: 8px; border-radius: 14px; }

.post-actions { display: flex; justify-content: space-between; max-width: 460px; margin: 6px 0 0 -10px; }
.act {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; min-width: 36px; padding: 0 10px 0 8px; border: 0;
  border-radius: 18px; background: transparent; color: var(--md-on-surface-variant); cursor: pointer;
  font: 500 13px/16px var(--md-font); font-variant-numeric: tabular-nums;
  transition: var(--t-shape), var(--t-color);
}
.act .icon { font-size: 20px; }
.act .count:empty { display: none; }
.act:active { border-radius: 10px; }
.act-reply:hover, .act-share:hover, .act-bookmark:hover { color: var(--md-primary); background: color-mix(in oklab, var(--md-primary) 10%, transparent); }
.act-repost:hover, .act-repost.on { color: var(--repost); }
.act-repost:hover { background: color-mix(in oklab, var(--repost) 12%, transparent); }
.act-like:hover, .act-like.on { color: var(--like); }
.act-like:hover { background: color-mix(in oklab, var(--like) 12%, transparent); }
.act-bookmark.on { color: var(--md-primary); }
.act.on .icon { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.act-like.pop .icon { animation: like-pop var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.act-like.pop { animation: like-shape var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
@keyframes like-pop { from { transform: scale(0.4) rotate(-20deg); } }
@keyframes like-shape { 0% { border-radius: 8px; background: color-mix(in oklab, var(--like) 22%, transparent); } }

/* Post detail */
.post.main { cursor: default; padding: 16px 20px 6px; }
.post.main:hover { background: var(--app-card); }
.main-head { display: flex; align-items: center; gap: 12px; }
.main-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-names .post-name { font-size: 16px; }
.post.main .post-replying { margin-top: 8px; }
.post.main .post-text { font: 400 20px/30px var(--md-font); margin-top: 12px; }
.post-meta { margin-top: 14px; padding-bottom: 14px; font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); border-bottom: 1px solid var(--md-outline-variant); }
.post-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 0; font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); border-bottom: 1px solid var(--md-outline-variant); }
.post-stats b { color: var(--md-on-surface); font-weight: 700; }
.post-actions.big { max-width: none; margin: 2px 0; padding: 4px 0; justify-content: space-around; }
.post-actions.big .act { height: 44px; padding: 0 14px; border-radius: 22px; }
.post-actions.big .act .icon { font-size: 24px; }
.reply-slot { background: var(--app-card); }
.inline-reply .composer-input { font-size: 18px; }
.replies-slot:empty { display: none; }

/* Compose dialog */
dialog.compose { width: min(600px, calc(100vw - 32px)); }
.compose-dialog .composer { padding-top: 8px; }
.compose-parent .post { background: transparent; cursor: default; padding-bottom: 0; }
.compose-parent .post-actions, .compose-parent .post-more { display: none; }
.compose-parent .post-main { padding-bottom: 14px; }
@media (max-width: 639px) {
  dialog.m3-dialog.fullscreen-mobile { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
}

/* ---------------------------------------------------------- Users */
.user-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; transition: var(--t-color); }
.user-row:hover { background: var(--app-card-hover); }
.user-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-row-bio { margin-top: 4px; font: 400 14px/20px var(--md-font); overflow-wrap: anywhere; }
.user-row .follow-btn { align-self: center; }
.tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); font: 500 11px/18px var(--md-font); vertical-align: 1px; }
.follow-btn { min-width: 88px; }

/* ---------------------------------------------------------- Profile */
.profile { background: var(--app-card); border-radius: var(--md-shape-xl); overflow: hidden; }
.profile-banner {
  --uh: 285; position: relative; aspect-ratio: 3 / 1; overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 100%, oklch(0.72 0.15 calc(var(--uh) + 40)) 0%, transparent 60%),
    linear-gradient(135deg, oklch(0.62 0.17 var(--uh)), oklch(0.80 0.11 calc(var(--uh) - 30)));
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-banner .deco { position: absolute; background: oklch(1 0 0 / 0.22); animation: drift 18s ease-in-out infinite alternate; }
.profile-banner .d1 { width: 46%; aspect-ratio: 1; right: -8%; top: -40%; }
.profile-banner .d2 { width: 22%; aspect-ratio: 1; right: 34%; bottom: -30%; background: oklch(1 0 0 / 0.16); animation-duration: 24s; }
.profile-banner .d3 { width: 12%; aspect-ratio: 1; left: 18%; top: 16%; background: oklch(1 0 0 / 0.14); animation-duration: 14s; }
@keyframes drift { to { transform: rotate(60deg) translateY(8%); } }
.profile-body { padding: 0 20px 12px; }
.profile-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -64px; }
.profile-top .avatar-ring { position: relative; }
.profile-actions { display: flex; gap: 8px; padding-bottom: 8px; }
.profile-name { margin-top: 12px; overflow-wrap: anywhere; }
.profile-bio { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); }
.profile-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.profile-counts { display: flex; gap: 20px; margin-top: 12px; font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); }
.profile-counts a { text-decoration: none; }
.profile-counts a:hover { text-decoration: underline; }
.profile-counts b { color: var(--md-on-surface); font-weight: 700; }
@media (max-width: 639px) { .av-xl { --size: 96px; } .profile-top { margin-top: -52px; } }

/* Edit profile */
.edit-profile .dialog-head { padding: 12px; }
.edit-profile .dialog-head h2 { flex: 1; }
.ep-banner { --uh: 285; position: relative; aspect-ratio: 3 / 1; margin: 8px 16px 0; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, oklch(0.62 0.17 var(--uh)), oklch(0.80 0.11 calc(var(--uh) - 30))); }
.ep-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-banner-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ep-avatar-row { display: flex; align-items: flex-end; gap: 16px; margin: -48px 0 0 28px; }
.ep-avatar-row .avatar-ring { background: var(--md-surface-container-high); }
.ep-avatar-actions { display: flex; gap: 8px; padding-bottom: 6px; }
.ep-fields { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.ep-fields h3 { margin-bottom: 12px; }
.shape-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.shape-opt { aspect-ratio: 1; padding: 8px; border: 0; border-radius: 16px; background: var(--md-surface-container-highest); cursor: pointer; transition: var(--t-shape), var(--t-color); }
.shape-opt span { display: block; width: 100%; height: 100%; background: var(--md-on-surface-variant); transition: transform var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color 150ms; }
.shape-opt:hover span { transform: rotate(30deg) scale(0.92); }
.shape-opt[aria-checked="true"] { background: var(--md-primary-container); border-radius: 26px; }
.shape-opt[aria-checked="true"] span { background: var(--md-primary); transform: scale(1.05); }

/* ---------------------------------------------------------- Notifications */
.notif { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; background: var(--app-card); transition: var(--t-color); }
.notif:hover { background: var(--app-card-hover); }
.notif-icon { display: grid; place-items: start end; padding-top: 4px; }
.notif-icon .icon { font-size: 30px; }
.notif-icon.like { color: var(--like); }
.notif-icon.repost { color: var(--repost); }
.notif-icon.follow { color: var(--md-primary); }
.notif-icon.reply { color: var(--md-tertiary); }
.notif-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.notif-text { font: 400 15px/22px var(--md-font); }
.notif-snippet { color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-wrap; }

/* ---------------------------------------------------------- Explore / trends */
.trend { align-items: center; }
.trend-rank { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font: 800 16px/1 var(--md-font); font-stretch: 115%; }
.trend .li-head { font-weight: 700; }
.explore-people .seg { margin-bottom: 4px; }

/* Sidebar */
.side-card { padding: 20px 8px 8px; }
.side-card h2 { padding: 0 12px 8px; }
.side-trend { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 16px; text-decoration: none; transition: var(--t-color), var(--t-shape); }
.side-trend:hover { background: color-mix(in oklab, var(--md-on-surface) 6%, transparent); }
.side-trend:active { border-radius: 24px; }
.st-label, .st-count { font: 400 13px/18px var(--md-font); color: var(--md-on-surface-variant); }
.st-tag { font: 700 15px/22px var(--md-font); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; cursor: pointer; transition: var(--t-color); }
.side-user:hover { background: color-mix(in oklab, var(--md-on-surface) 6%, transparent); }
.su-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.su-text .post-handle { overflow: hidden; text-overflow: ellipsis; }
.side-user .follow-btn { min-width: 0; }
.side-more { margin: 4px 4px 4px; }
.side-empty { padding: 8px 12px 12px; color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); }
.side-foot { padding: 0 16px; font: 400 12px/16px var(--md-font); color: var(--md-on-surface-variant); }
.side-card .loader { margin: 16px auto; }
body[data-route="explore"] .side-search { display: none; }

/* ---------------------------------------------------------- Messages */
.conv { align-items: center; }
.conv-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.conv-top .li-head { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-top .post-handle { overflow: hidden; text-overflow: ellipsis; }
.conv-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .conv-last { color: var(--md-on-surface); font-weight: 600; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--md-primary); flex: none; }
.mobile-fab-msg { display: none; }
@media (max-width: 639px) { .mobile-fab-msg { display: inline-flex; position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40; } }

.thread-view { min-height: calc(100dvh - 48px); }
.thread { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 16px 8px; }
.thread-intro { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 48px 16px; text-align: center; color: var(--md-on-surface-variant); }
.thread-intro h2 { color: var(--md-on-surface); margin-top: 12px; }
.bubble-row { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; }
.bubble-row.gp { margin-top: 0; }
.bubble-row.mine { align-items: flex-end; }
.bubble {
  max-width: min(78%, 460px); padding: 10px 16px; border-radius: 22px;
  background: var(--md-surface-container-highest); color: var(--md-on-surface);
  white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/22px var(--md-font);
  animation: bubble-in var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial);
}
.bubble-row.mine .bubble { background: var(--md-primary); color: var(--md-on-primary); }
.bubble-row.mine .bubble .link { color: inherit; text-decoration: underline; }
.bubble-row:not(.mine).gp .bubble { border-top-left-radius: 6px; }
.bubble-row:not(.mine).gn .bubble { border-bottom-left-radius: 6px; }
.bubble-row.mine.gp .bubble { border-top-right-radius: 6px; }
.bubble-row.mine.gn .bubble { border-bottom-right-radius: 6px; }
.bubble-time { padding: 4px 8px 0; font: 400 12px/16px var(--md-font); color: var(--md-on-surface-variant); }
@keyframes bubble-in { from { transform: scale(0.8); opacity: 0; } }
.thread-composer { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 12px 0 16px; background: var(--app-bg); }
.msg-input { flex: 1; background: var(--app-card); }
@media (max-width: 639px) { .thread-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } }

/* New message dialog */
.nm-search { padding: 12px 16px; }
.nm-results { padding: 0 16px 16px; --app-card: var(--md-surface-container-highest); --app-card-hover: var(--md-surface-container-highest); }
.nm-results:empty { display: none; }
.nm-empty { padding: 16px; color: var(--md-on-surface-variant); background: transparent !important; }

/* ---------------------------------------------------------- Settings */
.settings { display: flex; flex-direction: column; gap: 12px; }
.settings .card { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-sub { font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); }
.theme-mode .btn { gap: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.swatch span {
  position: absolute; inset: 4px; background: oklch(0.62 0.17 var(--sh));
  transition: transform var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), clip-path var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial);
}
.swatch:hover span { transform: scale(1.08); }
.swatch[aria-checked="true"] span { transform: rotate(45deg) scale(1.1); }
.swatch[aria-checked="true"]::after { content: "check"; position: relative; font-family: "Material Symbols Rounded"; font-size: 22px; color: #fff; }
.profile-swatch .icon { position: relative; color: #fff; }
.profile-swatch[aria-checked="true"] .icon { display: none; }
.account-line { display: flex; align-items: center; gap: 12px; }
.playground .pg-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pg-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px; }
.pg-shape { aspect-ratio: 1; background: var(--md-tertiary-container); transition: transform var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial), background-color 150ms; }
.pg-shape:hover { transform: rotate(45deg) scale(1.15); background: var(--md-tertiary); }
.playground .wavy-progress { margin-top: 4px; }
.playground .loader { margin: 0; }

/* ---------------------------------------------------------- Empty states & lists */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; text-align: center; }
.empty p { max-width: 360px; color: var(--md-on-surface-variant); }
.empty .btn { margin-top: 8px; }
.empty-art { display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 8px; background: var(--md-primary-container); color: var(--md-on-primary-container); animation: empty-wobble 6s ease-in-out infinite; }
.empty-art .icon { font-size: 44px; animation: empty-counter 6s ease-in-out infinite; }
@keyframes empty-wobble { 50% { transform: rotate(25deg) scale(1.04); } }
@keyframes empty-counter { 50% { transform: rotate(-25deg); } }
.ilist-foot:empty { display: none; }
.ilist-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; color: var(--md-on-surface-variant); }

/* ---------------------------------------------------------- Auth */
.auth {
  min-height: 100dvh; max-width: 1240px; margin: 0 auto; padding: 48px 32px;
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 64px;
}
.auth-hero { display: flex; flex-direction: column; gap: 24px; }
.auth-hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -1.5px; }
.auth-hero p { max-width: 520px; color: var(--md-on-surface-variant); }
.auth-art { position: relative; width: 260px; height: 220px; }
.auth-blob { position: absolute; display: block; }
.auth-blob.morph { width: 180px; height: 180px; left: 0; top: 20px; background: var(--md-primary); animation: m3-shape-morph 9s infinite; }
.auth-blob.b2 { width: 88px; height: 88px; left: 160px; top: 0; background: var(--md-tertiary-container); animation: drift 7s ease-in-out infinite alternate; }
.auth-blob.b3 { width: 64px; height: 64px; left: 190px; top: 130px; background: var(--md-secondary-container); animation: drift 9s ease-in-out infinite alternate-reverse; }
.auth-blob.b4 { width: 40px; height: 40px; left: 130px; top: 170px; background: var(--md-tertiary); animation: spin 12s linear infinite; }
.auth-card { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: var(--md-shape-xl-increased); box-shadow: var(--md-elev-1); }
.auth-card .brand { padding: 0; height: auto; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-error { padding: 12px 16px; border-radius: 16px; background: var(--md-error-container); color: var(--md-on-error-container); font: 500 14px/20px var(--md-font); animation: dialog-in var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.auth-fine { font: 400 12px/16px var(--md-font); color: var(--md-on-surface-variant); text-align: center; }
@media (max-width: 899px) {
  .auth { grid-template-columns: 1fr; gap: 32px; padding: 24px 16px; }
  .auth-art { width: 200px; height: 150px; transform: scale(0.7); transform-origin: left top; margin-bottom: -40px; }
}

/* =====================================================================
   v2: badges, pronouns, flags, settings, admin, docs
   ===================================================================== */

/* Text size (Settings → Appearance) */
.post-text { font-size: calc(16px * var(--ts, 1)); line-height: calc(24px * var(--ts, 1)); }
.post.main .post-text { font-size: calc(20px * var(--ts, 1)); line-height: calc(30px * var(--ts, 1)); }
.quote-text, .bubble { font-size: calc(15px * var(--ts, 1)); line-height: calc(22px * var(--ts, 1)); }
.composer-input { font-size: calc(20px * var(--ts, 1)); line-height: calc(28px * var(--ts, 1)); }

/* Higher contrast */
.high-contrast { --md-outline-variant: var(--md-outline); --md-on-surface-variant: color-mix(in oklab, var(--md-on-surface) 85%, var(--md-outline)); }
.high-contrast .post, .high-contrast .card, .high-contrast .profile { box-shadow: inset 0 0 0 1px var(--md-outline); }

/* Verified badge: a sunny shape with a check */
.name-text { overflow: hidden; text-overflow: ellipsis; }
.post-name { display: inline-flex; align-items: center; gap: 3px; }
.vbadge { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin-inline-start: 2px; }
.vb-shape { position: absolute; inset: 0; background: var(--md-primary); transition: transform var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial); }
.vbadge .icon { position: relative; font-size: 0.72em; color: var(--md-on-primary); font-variation-settings: "FILL" 1, "wght" 800, "GRAD" 0, "opsz" 20; }
.vbadge:hover .vb-shape { transform: rotate(90deg) scale(1.1); }
.staff-badge { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px 0 6px; height: 22px; border-radius: 11px; vertical-align: middle;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font: 600 12px/22px var(--md-font); letter-spacing: 0.3px; }
.remote-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px 0 5px; height: 20px; border-radius: 10px; vertical-align: middle;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 500 11px/20px var(--md-font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pronouns { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 8px; background: var(--md-surface-container-highest);
  color: var(--md-on-surface-variant); font: 500 13px/22px var(--md-font); }
.profile-handle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.profile-name .staff-badge { margin-inline-start: 6px; }
.profile-flags { margin-top: 10px; }
.profile-alert { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: var(--md-error-container); color: var(--md-on-error-container); font: 500 14px/20px var(--md-font); }

/* Pride flags */
.flag { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; transition: transform var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.flag:hover { transform: scale(1.25) rotate(-6deg); }
.flag.inline { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.flag-row { display: inline-flex; gap: 4px; margin-inline-start: 6px; vertical-align: middle; }
.profile-flags .flag-row { margin: 0; gap: 6px; }
.profile-flags .flag { width: 34px; height: 34px; }
.user-row .flag { width: 20px; height: 20px; }
.flag-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.flag-opt { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 0; border-radius: 14px; cursor: pointer; text-align: start;
  background: var(--md-surface-container-highest); color: var(--md-on-surface); font: 500 13px/18px var(--md-font); transition: var(--t-shape), var(--t-color); }
.flag-opt img { width: 32px; height: 32px; flex: none; }
.flag-opt:active { border-radius: 22px; }
.flag-opt[aria-pressed="true"] { background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: 22px; box-shadow: inset 0 0 0 2px var(--md-primary); }
.flag-credit { margin-top: 8px; font: 400 12px/16px var(--md-font); color: var(--md-on-surface-variant); }

/* Generic helpers */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.center { text-align: center; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.list-empty { padding: 12px 4px; color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); background: transparent !important; }
.tag.ok { background: color-mix(in oklab, var(--repost) 22%, transparent); color: var(--md-on-surface); }
.tag.warn { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.tag.bad { background: var(--md-error-container); color: var(--md-on-error-container); }
.tag.info { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.tag.current { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.warn-text { color: var(--md-tertiary); font-weight: 600; }
.error-text { display: flex; align-items: center; gap: 4px; color: var(--md-error) !important; }
.li-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 14px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.li-icon.staff { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
input.checkbox { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 2px solid var(--md-on-surface-variant); border-radius: 6px; cursor: pointer; display: grid; place-items: center; transition: var(--t-color), var(--t-shape); }
input.checkbox:checked { background: var(--md-primary); border-color: var(--md-primary); border-radius: 10px; }
input.checkbox:checked::after { content: "check"; font-family: "Material Symbols Rounded"; font-size: 16px; color: var(--md-on-primary); }

/* Settings */
.settings-me { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; transition: var(--t-color); }
.settings-me > div { flex: 1; min-width: 0; }
.settings-me:hover { background: var(--app-card-hover); }
.settings-nav .list-item { min-height: 72px; }
.settings .seg.tight { --seg-r: 20px; }
.settings .seg.tight > * { background: var(--md-surface-container-low); }
[data-theme="dark"] .settings .seg.tight > * { background: var(--md-surface-container-high); }
label.list-item { cursor: pointer; }
.danger-zone { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--md-error) 40%, transparent); }
.size-labels { display: flex; justify-content: space-between; font: 500 12px/16px var(--md-font); color: var(--md-on-surface-variant); margin-top: -4px; }
.size-preview { border-radius: 20px; background: var(--md-surface-container-low); cursor: default; padding-bottom: 14px; }
.settings .card { --gap-bg: var(--app-card); }
.fed-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.fed-art, .doc-art, .peer-art { display: grid; place-items: center; width: 72px; height: 72px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.fed-art .icon, .doc-art .icon { font-size: 34px; }
.fed-addr { overflow-wrap: anywhere; }
.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.how li { display: flex; gap: 14px; align-items: flex-start; }
.how .icon { color: var(--md-primary); }
.about-hero { display: flex; flex-direction: column; gap: 12px; }
.about-hero > div:first-of-type { display: flex; flex-direction: column; }
.brand-mark.big { width: 64px; height: 64px; }
.about-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.about-stats > div { flex: 1; min-width: 120px; display: flex; flex-direction: column; padding: 14px 16px; border-radius: 20px; background: var(--md-surface-container-high); }
.about-stats span { color: var(--md-on-surface-variant); font: 400 13px/18px var(--md-font); }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rules li { display: flex; gap: 12px; align-items: center; }
.rule-n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font: 800 14px/1 var(--md-font); }
@media (max-width: 639px) { .fed-hero { grid-template-columns: 1fr; } }

/* Messages: blocked notice */
.thread-blocked { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 12px 0 24px; padding: 14px; border-radius: 20px; background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }

/* Report dialog */
.reason-list { --app-card: var(--md-surface-container-highest); --app-card-hover: var(--md-surface-container-highest); }
.reason-opt input { appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--md-on-surface-variant); flex: none; transition: border-width var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.reason-opt input:checked { border: 6px solid var(--md-primary); }
.reason-opt:has(input:checked) { background: var(--md-secondary-container) !important; }

/* Admin */
.admin-tabs .tab > span { gap: 2px; }
.tab-badge { margin-inline-start: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--md-error); color: var(--md-on-error); font: 600 11px/18px var(--md-font); text-align: center; }
.admin-body { display: flex; flex-direction: column; gap: 12px; }
.admin-filter { max-width: 320px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: 24px; text-decoration: none; color: inherit; transition: var(--t-color), var(--t-shape); }
.stat-tile.link:hover { background: var(--app-card-hover); border-radius: 32px; }
.stat-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 14px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.stat-label { font: 500 13px/18px var(--md-font); color: var(--md-on-surface-variant); }
.stat-value { font: 800 34px/40px var(--md-font); font-stretch: 115%; font-variant-numeric: tabular-nums; }
.stat-sub { font: 400 12px/16px var(--md-font); color: var(--md-on-surface-variant); }
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } }
.chart-card { display: flex; flex-direction: column; gap: 12px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chart { position: relative; height: 180px; padding: 0 0 22px 28px; }
.chart-grid { position: absolute; inset: 0 0 22px 28px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.gridline { position: relative; border-top: 1px solid color-mix(in oklab, var(--md-outline-variant) 60%, transparent); }
.gridline:last-child { border-top-color: var(--md-outline-variant); }
.gridline span { position: absolute; right: calc(100% + 6px); top: -8px; font: 400 11px/16px var(--md-font); color: var(--md-on-surface-variant); }
.bars { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 2px; }
.bar-slot { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.bar-slot::before { content: ""; position: absolute; inset: 0 -1px; border-radius: 6px; background: currentColor; opacity: 0; color: var(--md-on-surface); }
.bar-slot:hover::before, .bar-slot:focus-visible::before { opacity: 0.05; }
.bar { width: min(70%, 18px); min-height: 0; border-radius: 4px 4px 0 0; background: var(--md-primary); transform-origin: bottom; animation: bar-in var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial) backwards; }
.bar-slot:nth-child(n) .bar { animation-delay: calc(var(--i, 0) * 20ms); }
@keyframes bar-in { from { transform: scaleY(0); } }
.bar-label { position: absolute; top: 100%; margin-top: 4px; font: 400 10px/14px var(--md-font); color: var(--md-on-surface-variant); white-space: nowrap; }
.chart-tip { position: absolute; z-index: 1500; padding: 6px 10px; border-radius: 10px; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font: 500 12px/16px var(--md-font); pointer-events: none; animation: pop-in var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }
.chart-table summary { cursor: pointer; font: 500 13px/20px var(--md-font); color: var(--md-primary); }
.chart-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font: 400 13px/20px var(--md-font); }
.chart-table td, .chart-table th { padding: 4px 8px; text-align: start; border-bottom: 1px solid var(--md-outline-variant); }
.chart-table td:last-child, .chart-table th:last-child { text-align: end; font-variant-numeric: tabular-nums; }

.report { display: flex; flex-direction: column; gap: 12px; }
.report.leaving { animation: post-out 260ms forwards; }
.report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag.reason { background: var(--md-error-container); color: var(--md-on-error-container); font-size: 12px; padding: 0 10px; height: 24px; line-height: 24px; border-radius: 8px; }
.report-target { display: flex; align-items: center; gap: 10px; }
.report-target .tag { margin-inline-start: 4px; }
.report-note { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--md-surface-container-high); font: 400 14px/20px var(--md-font); white-space: pre-wrap; }
.report-post { border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.report-post .post { background: transparent; }
.report-post .post-actions, .compose-parent .post-actions, .post.preview .post-more { display: none; }
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.report-resolution { display: flex; align-items: center; gap: 6px; color: var(--md-on-surface-variant); font: 400 13px/18px var(--md-font); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-search { background: var(--app-card); }
.admin-user .li-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-user .remote-chip { margin-inline-start: 4px; }
.peer { align-items: flex-start; }
.peer-art { width: 44px; height: 44px; flex: none; }
.peer-art.warn { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.peer-art.bad { background: var(--md-error-container); color: var(--md-on-error-container); }
.peer-actions { display: flex; gap: 4px; align-self: center; flex-wrap: wrap; justify-content: flex-end; }
.peer .li-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fed-identity { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.fed-identity .setting { gap: 12px; cursor: pointer; }
@media (max-width: 639px) { .fed-identity { grid-template-columns: 1fr; } }
.add-peer { display: flex; gap: 8px; align-items: center; }
.add-peer .search-bar { flex: 1; }
.instance-form { --field-bg: var(--app-card); }
.audit code { font: 600 13px/20px ui-monospace, Menlo, monospace; color: var(--md-primary); }

/* Docs */
.doc { display: flex; flex-direction: column; gap: 24px; padding: 28px; }
.doc-hero { display: flex; align-items: center; gap: 20px; }
.doc-updated { color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); }
.doc-section { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 90px; }
.doc-section p, .doc-section li { font: 400 15px/24px var(--md-font); color: var(--md-on-surface); }
.doc-section ul, .doc-section ol { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc-highlights { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px !important; }
.doc-highlights li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 20px; background: var(--md-surface-container-high); }
.doc-highlights .icon { color: var(--md-primary); }
.doc-switch { color: var(--md-on-surface-variant); }
.doc-view.standalone { max-width: 820px; margin: 0 auto; padding: 16px 16px 64px; }
.doc-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 16px; }
@media (max-width: 639px) { .doc { padding: 20px; } .doc-hero { flex-direction: column; align-items: flex-start; } }

/* Auth additions */
.consent { display: flex; gap: 12px; align-items: flex-start; font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); cursor: pointer; }
.consent input { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--md-on-surface-variant); border-radius: 6px; display: grid; place-items: center; cursor: pointer; transition: var(--t-color), var(--t-shape); }
.consent input:checked { background: var(--md-primary); border-color: var(--md-primary); border-radius: 10px; }
.consent input:checked::after { content: "check"; font-family: "Material Symbols Rounded"; font-size: 16px; color: var(--md-on-primary); }
.auth-closed { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); font: 500 14px/20px var(--md-font); }
.auth-domain { margin-inline-start: auto; font: 500 13px/18px var(--md-font); color: var(--md-on-surface-variant); }
.auth-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--md-on-surface-variant); font: 500 14px/20px var(--md-font); }
.auth-fine a, .side-foot a { color: inherit; }
.side-foot { line-height: 20px; }
.sidebar > * { flex-shrink: 0; }
.m3-dialog .dialog-head { background: var(--md-surface-container-high); }
.admin-tabs .tab { padding: 0 10px; }

/* Pride flags after display names */
.name-flags { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-inline-start: 3px; }
.name-flags .flag { width: 1.3em; height: 1.3em; }
.name-flags .flag:hover { transform: scale(1.35) rotate(-6deg); }
.profile-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.profile-name .post-name, .profile-name > .name-text { font: inherit; }
.profile-name .name-flags { gap: 4px; margin-inline-start: 4px; }
.profile-name .name-flags .flag { width: 1.15em; height: 1.15em; }
.profile-name .vbadge { width: 0.85em; height: 0.85em; }
.name-flags { vertical-align: -0.28em; }
.topbar-title .name-flags .flag, .ac-name .name-flags .flag { width: 1.15em; height: 1.15em; }
.ac-name { display: inline-flex; align-items: center; min-width: 0; }

/* Name row: display name, verified badge and flags share one centred line everywhere */
.name { display: inline-flex; align-items: center; gap: 0.25em; max-width: 100%; min-width: 0; vertical-align: bottom; }
.name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name .vbadge { width: 0.95em; height: 0.95em; margin: 0; vertical-align: baseline; }
.name .vbadge .icon { font-size: 0.68em; line-height: 1; }
.name .name-flags { gap: 0.15em; margin: 0; vertical-align: baseline; }
.name .name-flags .flag { width: 1.3em; height: 1.3em; margin: -0.15em 0; }
.topbar-title .name, .ac-name .name { vertical-align: top; height: 100%; }
.topbar-title .name .flag, .ac-name .name .flag { width: 1.2em; height: 1.2em; }
.profile-name .name { gap: 0.2em; }
.profile-name .name .vbadge { width: 0.8em; height: 0.8em; }
.profile-name .name .flag { width: 1.1em; height: 1.1em; }
.auth-eyebrow { font: 700 14px/20px var(--md-font); letter-spacing: 1.5px; text-transform: uppercase; color: var(--md-primary); }

/* =====================================================================
   v3: media grid, content warnings, polls, edits, composer tools
   ===================================================================== */

/* Media grid: 1–4 images, rounded outer corners, 3px gaps (segmented like lists) */
.media-grid { position: relative; display: grid; gap: 3px; margin-top: 12px; border-radius: 20px; overflow: hidden; }
.media-grid.n1 { grid-template-columns: 1fr; }
.media-grid.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.media-grid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.media-grid.n3 .media-cell:first-child { grid-row: span 2; }
.media-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.media-cell { position: relative; display: block; min-height: 0; padding: 0; border: 0; background: var(--md-surface-container-high); cursor: zoom-in; overflow: hidden; }
.media-cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial), filter 250ms; }
.media-grid.n1 .media-cell img { height: auto; max-height: 560px; }
.media-cell:hover img { transform: scale(1.02); }
.alt-badge { position: absolute; left: 8px; bottom: 8px; padding: 0 6px; height: 20px; border-radius: 6px; background: oklch(0 0 0 / 0.65); color: #fff; font: 700 11px/20px var(--md-font); letter-spacing: 0.5px; }
.media-grid.sensitive:not(.revealed) .media-cell img { filter: blur(28px) saturate(1.2); transform: scale(1.1); }
.sensitive-cover {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: oklch(0 0 0 / 0.25); color: #fff; cursor: pointer; text-shadow: 0 1px 6px oklch(0 0 0 / 0.5);
}
.sc-btn { margin-top: 4px; padding: 6px 16px; border-radius: 16px; background: oklch(1 0 0 / 0.22); font: 600 13px/18px var(--md-font); backdrop-filter: blur(6px);
  transition: var(--t-shape); }
.sensitive-cover:active .sc-btn { border-radius: 8px; }
.quote-media.blurred { filter: blur(20px); }
.quote-cw, .quote-poll { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--md-on-surface-variant); font: 500 13px/18px var(--md-font); }

/* Content warning */
.cw { margin-top: 6px; }
.cw-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.cw-text { flex: 1; min-width: 0; font: 600 14px/20px var(--md-font); overflow-wrap: anywhere; }
.cw-head .btn { --btn-h: 32px; background: var(--md-surface-container-lowest); color: var(--md-on-surface); }
.cw-body:not([hidden]) { animation: dialog-in var(--md-spring-fast-spatial-dur) var(--md-spring-fast-spatial); }

/* Polls */
.poll { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.poll-choice {
  height: 44px; padding: 0 16px; border: 0; border-radius: 22px; cursor: pointer; text-align: start;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--md-primary); color: var(--md-primary);
  font: 600 15px/20px var(--md-font); transition: var(--t-shape), var(--t-color);
}
.poll-choice:hover { background: color-mix(in oklab, var(--md-primary) 8%, transparent); }
.poll-choice:active { border-radius: 10px; }
.poll-choice[aria-pressed="true"] { background: var(--md-primary); color: var(--md-on-primary); border-radius: 12px; }
.poll-submit { margin-top: 2px; }
.poll-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 14px;
  border-radius: 12px; overflow: hidden; isolation: isolate; font: 500 15px/20px var(--md-font); }
.poll-row::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: max(var(--w), 6px); border-radius: inherit;
  background: var(--md-surface-container-highest); transform-origin: left; animation: poll-grow var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial); }
.poll-row.mine::before, .poll-row.winner::before { background: var(--md-primary-container); }
.poll-row.winner { font-weight: 800; }
.poll-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.poll-label .icon { color: var(--md-primary); }
.poll-pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.poll-foot { margin-top: 2px; color: var(--md-on-surface-variant); font: 400 13px/18px var(--md-font); }
@keyframes poll-grow { from { transform: scaleX(0); } }

/* Edited / reply notes */
.edited { margin-inline-start: 2px; padding: 0 6px; height: 20px; border: 0; border-radius: 6px; background: var(--md-surface-container-highest);
  color: var(--md-on-surface-variant); font: 500 11px/20px var(--md-font); cursor: pointer; transition: var(--t-shape); }
.edited:hover { color: var(--md-on-surface); border-radius: 10px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.reply-note { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; color: var(--md-primary); font: 500 13px/18px var(--md-font); }
.act-reply[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.edit-history { list-style: none; margin: 0; padding: 0; --app-card: var(--md-surface-container-highest); }
.eh-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.eh-head { display: flex; align-items: center; justify-content: space-between; color: var(--md-on-surface-variant); font: 400 13px/18px var(--md-font); }
.eh-cw { display: flex; align-items: center; gap: 4px; color: var(--md-tertiary); font: 600 13px/18px var(--md-font); }
.eh-item .post-text { color: var(--md-on-surface); }

/* Composer tools */
.composer-field { position: relative; }
.cw-input { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 44px; border-radius: 14px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.cw-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: 500 15px/20px var(--md-font); }
.cw-input input::placeholder { color: color-mix(in oklab, var(--md-on-tertiary-container) 65%, transparent); }
.composer-images { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); }
.composer-images.n1 { grid-template-columns: 1fr; }
.ci-item { position: relative; display: flex; flex-direction: column; gap: 6px; animation: dialog-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
.ci-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
.composer-images.n1 .ci-item img { aspect-ratio: auto; max-height: 380px; }
.ci-remove { position: absolute; top: 8px; left: 8px; }
.ci-alt { height: 36px; padding: 0 12px; border: 0; border-radius: 12px; outline: none; background: var(--md-surface-container-high); color: var(--md-on-surface); font: 400 13px/18px var(--md-font); }
.ci-alt:focus { box-shadow: inset 0 0 0 2px var(--md-primary); }
.composer.drop { box-shadow: inset 0 0 0 2px var(--md-primary); border-radius: 24px; }
.poll-builder { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.pb-options { display: flex; flex-direction: column; gap: 12px; }
.pb-option { display: flex; align-items: center; gap: 4px; }
.pb-option .field { flex: 1; }
.pb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pb-length { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 12px; background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }
.pb-length select { border: 0; background: transparent; color: var(--md-on-surface); font: 500 14px/20px var(--md-font); outline: none; }
.pb-multi { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--md-font); cursor: pointer; }
.pb-remove { margin-inline-start: auto; color: var(--md-error); }
.reply-policy { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border: 0; border-radius: 15px;
  background: transparent; color: var(--md-primary); font: 600 13px/18px var(--md-font); cursor: pointer; transition: var(--t-shape), var(--t-color); }
.reply-policy:hover { background: color-mix(in oklab, var(--md-primary) 10%, transparent); }
.reply-policy:active { border-radius: 8px; }
.reply-policy.limited { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.composer:not(.active) .reply-policy { display: none; }
.composer .toolbar { flex-wrap: wrap; }
.icon-btn[data-c][aria-pressed="true"] { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* Autocomplete */
.ac-pop { position: absolute; top: 100%; left: 0; z-index: 60; width: min(320px, 100%); max-height: 300px; overflow-y: auto; }
.ac-item { height: 52px; }
.ac-item[aria-selected="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.ac-item .avatar { --size: 32px; }
.ac-main { display: inline-flex; min-width: 0; font-weight: 700; }
.ac-sub { margin-inline-start: auto; color: var(--md-on-surface-variant); font: 400 12px/16px var(--md-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

/* New posts pill */
.new-pill {
  position: sticky; top: 118px; z-index: 25; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px 0 14px;
  border: 0; border-radius: 20px; background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--md-elev-3);
  font: 600 14px/20px var(--md-font); cursor: pointer; margin-block: -6px; animation: pill-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial);
  transition: var(--t-shape);
}
.new-pill:active { border-radius: 10px; }
@keyframes pill-in { from { transform: translateY(-24px) scale(0.6); opacity: 0; } }
@media (max-width: 639px) { .new-pill { top: 112px; } }

/* Lightbox gallery */
dialog.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
dialog.lightbox figcaption { max-width: min(680px, 90vw); padding: 10px 16px; border-radius: 14px; background: oklch(0 0 0 / 0.6); color: #fff; font: 400 14px/20px var(--md-font); }
dialog.lightbox .lb-close { top: 16px; left: 16px; }
dialog.lightbox .lb-prev, dialog.lightbox .lb-next { position: fixed; top: 50%; transform: translateY(-50%); }
dialog.lightbox .lb-prev { left: 16px; }
dialog.lightbox .lb-next { right: 16px; }
dialog.lightbox .icon-btn:disabled { opacity: 0.3; }
.lb-count { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); color: #fff; font: 600 14px/20px var(--md-font); }

/* Keyboard */
.post.kb-focus { box-shadow: inset 0 0 0 2px var(--md-primary); z-index: 1; }
.shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; color: var(--md-on-surface); }
.shortcuts dl { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.shortcuts dl > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.shortcuts dt { white-space: nowrap; color: var(--md-on-surface-variant); }
.shortcuts dd { margin: 0; font: 400 14px/20px var(--md-font); text-align: end; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--md-surface-container-highest);
  box-shadow: inset 0 -2px 0 var(--md-outline-variant); font: 600 12px/1 ui-monospace, Menlo, monospace; color: var(--md-on-surface); }
dialog.lightbox .lb-prev { top: 50%; left: 16px; right: auto; }
dialog.lightbox .lb-next { top: 50%; left: auto; right: 16px; }

/* =====================================================================
   v4: UI fixes and new components
   ===================================================================== */

/* Menus, popovers and toasts live in the top layer (Popover API) so they sit above dialogs.
   Undo the UA [popover] defaults. */
.menu[popover] { inset: auto; margin: 0; border: 0; overflow: visible; color: var(--md-on-surface); background: var(--md-surface-container); }
.menu[popover]:not(:popover-open) { display: none; }
.snackbar-host[popover] { inset: auto auto 24px 50%; margin: 0; border: 0; padding: 0; overflow: visible; background: transparent; color: inherit; }
@media (max-width: 639px) { .snackbar-host[popover] { bottom: calc(88px + env(safe-area-inset-bottom)); } }
.emoji-grid { padding: 2px; }

/* Content warning "Show" button: readable on the tertiary container in both themes */
.cw-head .btn { background: var(--md-on-tertiary-container); color: var(--md-tertiary-container); }

/* Autofilled fields keep the theme instead of the browser's yellow/blue */
.field input:-webkit-autofill, .search-bar input:-webkit-autofill {
  -webkit-text-fill-color: var(--md-on-surface);
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg, var(--app-card)) inset;
  caret-color: var(--md-on-surface);
  transition: background-color 9999s;
}
input[type=number]::-webkit-inner-spin-button { opacity: 0.4; }
select { color-scheme: inherit; }

/* Mobile overflow fixes */
.add-peer { flex-wrap: wrap; }
.add-peer .search-bar { min-width: 0; flex: 1 1 220px; }
.fed-identity .mono { overflow-wrap: anywhere; }
.view, .admin-body, .settings { min-width: 0; }
.card { min-width: 0; }
@media (max-width: 639px) {
  .add-peer .btn { flex: 1 1 100%; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 28px; line-height: 34px; }
  .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-inline: -8px; padding-inline: 8px; }
  .chips .chip { flex: none; }
}

/* Explore trends: tighter rows */
.trend { min-height: 64px; padding-block: 10px; }

/* Notifications: stacked avatars for grouped rows */
.notif-avatars { display: flex; }
.notif-avatars .avatar + .avatar { margin-inline-start: -8px; box-shadow: 0 0 0 2px var(--app-card); }
.notif-avatars .avatar { --size: 32px; }

/* Post detail: stat counts open lists */
.stat-link { padding: 4px 8px; margin: -4px -8px; border: 0; border-radius: 10px; background: transparent; color: var(--md-on-surface-variant);
  font: 400 14px/20px var(--md-font); cursor: pointer; transition: var(--t-shape), var(--t-color); }
.stat-link:hover { background: color-mix(in oklab, var(--md-on-surface) 8%, transparent); text-decoration: underline; }
.stat-link:active { border-radius: 16px; }
.post-list-dialog .pld-body { padding: 8px 16px 16px; --app-card: var(--md-surface-container-highest); --app-card-hover: color-mix(in oklab, var(--md-surface-container-highest), var(--md-on-surface) 5%); }

/* Profile: followed by people you follow */
.followed-by { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--md-on-surface-variant); font: 400 13px/18px var(--md-font); text-decoration: none; }
.followed-by:hover span:last-child { text-decoration: underline; }
.followed-by b { color: var(--md-on-surface); font-weight: 600; }
.fb-avatars { display: flex; flex: none; }
.fb-avatars .avatar { --size: 22px; }
.fb-avatars .avatar + .avatar { margin-inline-start: -6px; }

/* Profile media wall */
.media-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: var(--md-shape-xl); overflow: hidden; }
.media-tile { position: relative; aspect-ratio: 1; display: block; overflow: hidden; background: var(--md-surface-container-high); }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial); }
.media-tile:hover img { transform: scale(1.06); }
.media-tile.hidden-media img { filter: blur(18px); transform: scale(1.15); }
.mt-count { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; height: 22px; border-radius: 11px;
  background: oklch(0 0 0 / 0.6); color: #fff; font: 600 11px/22px var(--md-font); }
.mt-hidden { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }

/* Messages: delete own message (shows on hover / focus; always on touch) */
.bubble-line { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.bubble-row.mine .bubble-line { justify-content: flex-end; }
.bubble-line .bubble { max-width: min(78%, 460px); }
.bubble-del { opacity: 0; transition: opacity 150ms; }
.bubble-row:hover .bubble-del, .bubble-del:focus-visible { opacity: 1; }
@media (pointer: coarse) { .bubble-del { opacity: 0.6; } }

/* Explore: recent searches */
.recent-searches { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px 4px; }
.rs-head { display: flex; align-items: center; justify-content: space-between; }
.recent-searches .chip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Removable chips (muted words) */
.input-chip { gap: 6px; padding-inline: 12px 8px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.input-chip .icon { font-size: 18px; }
.muted-add { display: flex; gap: 8px; flex-wrap: wrap; }
.muted-add .search-bar { flex: 1 1 220px; min-width: 0; }
.muted-words { margin-top: 4px; }

/* Passkeys */
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--md-on-surface-variant); font: 500 13px/18px var(--md-font); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--md-outline-variant); }
.passkey-btn .icon { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.passkey-item .li-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* =====================================================================
   v5: views, threads, scheduling, lists, announcements
   ===================================================================== */

.act-views { cursor: default; }
.act-views:hover { background: transparent !important; color: var(--md-on-surface-variant); }
.act-views:active { border-radius: 18px; }
.stat-views { color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); }
.stat-views b { color: var(--md-on-surface); }
@media (max-width: 400px) { .act-views { display: none; } }

/* Composer: extras row, thread items, schedule */
.composer-extras { display: flex; flex-wrap: wrap; gap: 4px; }
.composer:not(.active) .composer-extras { display: none; }
.thread-extra:empty { display: none; }
.thread-extra { display: flex; flex-direction: column; gap: 8px; }
.thread-item { position: relative; display: flex; align-items: flex-start; gap: 6px; padding-inline-start: 18px; animation: dialog-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
.thread-line { position: absolute; left: 4px; top: -6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--md-outline-variant); }
.thread-input { flex: 1; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 16px; outline: none; resize: none;
  background: var(--md-surface-container-high); color: var(--md-on-surface); font: 400 16px/24px var(--md-font); }
.thread-input:focus { box-shadow: inset 0 0 0 2px var(--md-primary); }
.schedule-chip { display: flex; align-items: center; gap: 8px; align-self: flex-start; padding: 4px 4px 4px 12px; border-radius: 18px;
  background: var(--md-primary-container); color: var(--md-on-primary-container); font: 600 13px/18px var(--md-font); }
.schedule-pop { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 260px; }
.schedule-pop input, input.datetime { height: 44px; padding: 0 12px; border: 1px solid var(--md-outline); border-radius: 12px; background: transparent;
  color: var(--md-on-surface); font: 500 15px/20px var(--md-font); color-scheme: inherit; }
input.datetime { width: 100%; }
.danger-text { color: var(--md-error) !important; }

/* Lists */
.list-card { align-items: center; }
.list-art { display: grid; place-items: center; flex: none; width: 48px; height: 48px; background: oklch(0.86 0.09 var(--uh, 285)); color: oklch(0.33 0.12 var(--uh, 285)); }
[data-theme="dark"] .list-art { background: oklch(0.45 0.12 var(--uh, 285)); color: oklch(0.94 0.04 var(--uh, 285)); }
.list-art.big { width: 72px; height: 72px; }
.list-art.big .icon { font-size: 32px; }
.list-card .li-head { display: flex; align-items: center; gap: 8px; }
.list-card .tag { display: inline-flex; align-items: center; gap: 2px; }
.list-card > .li-sub { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.list-hero { display: flex; align-items: center; gap: 16px; }
.list-hero h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-owner { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; text-decoration: none; font: 500 14px/20px var(--md-font); }
.list-member { display: flex; align-items: center; background: var(--app-card); }
.list-member .user-row { flex: 1; background: transparent; }
.list-member > .btn { margin-inline-end: 12px; }
.list-picker .picker-rows { margin-bottom: 12px; --app-card: var(--md-surface-container-highest); }
.list-picker label.list-item { cursor: pointer; }

/* Scheduled posts */
.sched { display: flex; flex-direction: column; gap: 10px; }
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--md-on-surface-variant); font: 500 14px/20px var(--md-font); }
.sched-head .tag { display: inline-flex; align-items: center; gap: 4px; }
.sched-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sched-media { display: flex; gap: 6px; }
.sched-media img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.sched.published { opacity: 0.8; }

/* Post detail: hidden replies */
.hidden-replies { margin-top: 8px; }
.hidden-replies summary { list-style: none; cursor: pointer; margin-bottom: 8px; }
.hidden-replies summary::-webkit-details-marker { display: none; }
.hidden-replies[open] summary { margin-bottom: 4px; }
.hidden-replies > p { padding: 0 8px 8px; }

/* Messages: seen */
.seen { display: inline-flex; align-items: center; gap: 2px; color: var(--md-primary); font-weight: 600; }

/* Search tips */
.search-tips { padding: 12px; max-width: 340px; }
.search-tips dl { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.search-tips dl > div { display: flex; align-items: baseline; gap: 10px; }
.search-tips dt { flex: none; }
.search-tips dd { margin: 0; color: var(--md-on-surface-variant); font: 400 13px/18px var(--md-font); }
.op { padding: 2px 8px; border: 0; border-radius: 8px; background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font: 600 12px/18px ui-monospace, Menlo, monospace; cursor: pointer; transition: var(--t-shape); }
.op:active { border-radius: 4px; }
.menu:has(.search-tips), .menu:has(.schedule-pop) { max-width: 360px; }

/* Announcements banner */
.announcements { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.announcement { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; border-radius: 20px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 500 14px/20px var(--md-font);
  animation: dialog-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
.announcement.warning { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.announcement.success { background: color-mix(in oklab, var(--repost) 28%, var(--app-card)); color: var(--md-on-surface); }
.ann-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.announcement .link { color: inherit; text-decoration: underline; }
@media (max-width: 639px) { .announcements { margin: 8px 8px 0; } }

/* Admin: invites */
.invite-code { font: 700 15px/20px ui-monospace, Menlo, monospace; letter-spacing: 1px; color: var(--md-primary); }
.list-item.dead { opacity: 0.55; }
.inv-form, .ann-form .pb-row { align-items: center; }
/* DM bubbles: the line spans the row so the bubble's max-width is relative to the thread, not to itself */
.bubble-row .bubble-line { width: 100%; justify-content: flex-start; }
.bubble-row.mine .bubble-line { justify-content: flex-end; }

/* Admin: content filter */
.content-filter select { height: 40px; max-width: 55%; padding: 0 10px; border: 1px solid var(--md-outline); border-radius: 12px;
  background: transparent; color: var(--md-on-surface); font: 500 14px/20px var(--md-font); }
.content-filter .setting { cursor: default; }
.scan-results:empty { display: none; }
.scan-results { display: flex; flex-direction: column; gap: 8px; }
.scan-hit .li-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* =====================================================================
   v6: landing page, account switcher, mobile drawer, gestures
   ===================================================================== */

/* Landing */
.landing { max-width: 1200px; margin: 0 auto; padding: 0 32px 48px; display: flex; flex-direction: column; gap: 48px; }
.land-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -32px; padding: 12px 32px; background: color-mix(in oklab, var(--app-bg) 88%, transparent); backdrop-filter: blur(12px); }
.land-top .brand { padding: 0; height: auto; }
.land-top-actions { display: flex; align-items: center; gap: 8px; }
.instance-chip { gap: 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.land-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; min-height: calc(100dvh - 160px); }
.land-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.landing.adding .land-hero { min-height: calc(100dvh - 120px); }
.land-section { display: flex; flex-direction: column; gap: 16px; }
.land-trends .chip { cursor: default; }
.chip-count { margin-inline-start: 6px; color: var(--md-on-surface-variant); font-weight: 400; }
.land-posts .seg { --seg-r: 28px; }
.landing-post { cursor: default; }
.landing-post .post-actions, .landing-post .post-more { display: none; }
.landing-post a, .landing-post button { pointer-events: none; }
.land-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.land-feature { display: flex; flex-direction: column; gap: 10px; padding: 24px; transition: var(--t-shape); }
.land-feature:hover { border-radius: 40px; }
.land-feature p { color: var(--md-on-surface-variant); font: 400 15px/22px var(--md-font); }
.lf-art { display: grid; place-items: center; width: 52px; height: 52px; background: var(--md-primary-container); color: var(--md-on-primary-container);
  transition: transform var(--md-spring-slow-spatial-dur) var(--md-spring-slow-spatial); }
.land-feature:hover .lf-art { transform: rotate(30deg) scale(1.08); }
.land-final { flex-direction: row; align-items: center; gap: 20px; padding: 28px; }
.land-final > div { flex: 1; }
.land-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; color: var(--md-on-surface-variant); font: 400 13px/18px var(--md-font); }
.land-foot a { color: inherit; }
@media (max-width: 899px) {
  .landing { padding: 0 16px 32px; gap: 32px; }
  .land-top { margin: 0 -16px; padding: 10px 16px; }
  .land-hero { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding-top: 8px; }
  .land-hero .auth-hero h1 { font-size: 40px; }
  .land-features { grid-template-columns: 1fr 1fr; }
  .land-final { flex-direction: column; text-align: center; }
}
@media (max-width: 559px) {
  .land-features { grid-template-columns: 1fr; }
  .land-cta .btn { flex: 1; }
  .auth-card { padding: 22px; }
  .land-top .brand-name { font-size: 24px; }
}

/* Account switcher popover */
.account-menu { display: flex; flex-direction: column; min-width: 280px; }
.am-accounts { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.am-account { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 14px; background: transparent;
  color: var(--md-on-surface); text-align: start; cursor: pointer; transition: var(--t-shape), var(--t-color); }
.am-account:hover { background: color-mix(in oklab, var(--md-on-surface) 8%, transparent); }
.am-account.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); cursor: default; }
.am-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-name { font: 700 14px/20px var(--md-font); }
.am-handle { font: 400 13px/18px var(--md-font); color: var(--md-on-surface-variant); }
.am-check { color: var(--md-primary); }

/* Mobile navigation drawer (M3 modal drawer) */
.drawer-wrap { position: fixed; inset: 0; z-index: 900; }
.drawer-scrim { position: absolute; inset: 0; background: oklch(0 0 0 / 0.4); animation: fade-in 200ms; }
.drawer { position: absolute; inset: 0 auto 0 0; width: min(320px, 86vw); display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); border-radius: 0 28px 28px 0;
  background: var(--md-surface-container-low); box-shadow: var(--md-elev-2);
  animation: drawer-in var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); transition: transform 120ms linear; }
.drawer-wrap.closing .drawer { animation: drawer-out 200ms var(--md-spring-fast-effects) forwards; }
.drawer-wrap.closing .drawer-scrim { opacity: 0; transition: opacity 200ms; }
@keyframes drawer-in { from { transform: translateX(-100%); } }
@keyframes drawer-out { to { transform: translateX(-100%); } }
.drawer-me { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 12px; }
.drawer-me .avatar { margin-bottom: 8px; }
.drawer-counts { display: flex; gap: 16px; margin-top: 8px; font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); }
.drawer-counts a { text-decoration: none; }
.drawer-counts b { color: var(--md-on-surface); }
.drawer-accounts { display: flex; gap: 8px; padding: 0 12px 8px; overflow-x: auto; }
.drawer-acct { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border: 0; border-radius: 20px;
  background: var(--md-surface-container-high); color: var(--md-on-surface); font: 500 13px/18px var(--md-font); white-space: nowrap; cursor: pointer; }
.drawer-items { display: flex; flex-direction: column; gap: 2px; }
.drawer .rail-item { width: 100%; border: 0; background: transparent; font: 500 16px/24px var(--md-font); cursor: pointer; text-align: start; }
.drawer .rail-item.danger { color: var(--md-error); }
body.drawer-open { overflow: hidden; }

/* Hide the bottom bar and FAB while scrolling down (mobile) */
@media (max-width: 639px) {
  .navbar, .mobile-fab, .mobile-fab-msg { transition: transform var(--md-spring-default-spatial-dur) var(--md-spring-default-spatial); }
  body.bars-hidden .navbar { transform: translateY(100%); }
  body.bars-hidden .mobile-fab, body.bars-hidden .mobile-fab-msg { transform: translateY(calc(100% + 96px)); }
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
  .post { padding-inline: 12px; }
  .post-grid { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .post-side .avatar { --size: 44px; }
}
/* Bigger touch targets on touch screens */
@media (pointer: coarse) {
  .act { height: 42px; min-width: 42px; }
  .icon-btn.sm { --s: 40px; }
  .menu-item { height: 52px; }
  .tab { height: 52px; }
}

/* Pull to refresh */
.ptr { position: fixed; top: 12px; left: 50%; z-index: 950; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--md-primary-container); box-shadow: var(--md-elev-2); transform: translate(-50%, 0); opacity: 0; pointer-events: none; }
.ptr .loader-shape { width: 26px; height: 26px; background: var(--md-on-primary-container); animation: none; clip-path: inherit; }
.ptr.ready .loader-shape, .ptr.spinning .loader-shape { animation: m3-shape-morph 4.9s infinite; }
.ptr.spinning { transition: opacity 400ms 300ms; opacity: 0 !important; }

/* Admin: user details */
.admin-user { cursor: pointer; }
.user-details .ud-body { display: flex; flex-direction: column; gap: 14px; color: var(--md-on-surface); }
.ud-head { display: flex; align-items: center; gap: 14px; }
.ud-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ud-bio { white-space: pre-wrap; overflow-wrap: anywhere; }
.ud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ud-stats > div { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 16px; background: var(--md-surface-container-highest); }
.ud-stats b { font: 800 20px/26px var(--md-font); font-stretch: 112%; }
.ud-stats span { font: 400 12px/16px var(--md-font); color: var(--md-on-surface-variant); }
.ud-posts { --app-card: var(--md-surface-container-highest); }
.ud-posts .post-actions { display: none; }
.scan-hit { cursor: pointer; }
/* Landing & drawer: undo the tablet "collapsed rail" rules that would otherwise apply */
.landing .brand-name { display: inline !important; }
.rail-collapsed-mode .drawer .rail-item {
  flex-direction: row; gap: 16px; width: 100%; height: 56px; padding: 0 20px 0 16px; border-radius: 28px;
  font: 500 16px/24px var(--md-font); letter-spacing: 0.1px;
}
.rail-collapsed-mode .drawer .rail-item::before { display: block; }
.rail-collapsed-mode .drawer .rail-item .ri-icon { width: auto; height: auto; border-radius: 0; background: none !important; }
.rail-collapsed-mode .drawer .rail-item .ri-icon::before { display: none; }
.drawer .rail-item[aria-current="page"] { color: var(--md-on-secondary-container); font-weight: 700; }
@media (max-width: 899px) { .landing .auth-art { margin-bottom: -10px; } }
@media (max-width: 480px) { .land-top:has(.instance-chip) .brand-name { display: none !important; } .instance-chip { max-width: 180px; } }