.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.byline__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.byline__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.byline__context {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.byline__time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.byline__line { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.byline__place {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  min-width: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
}
.byline__place .material-symbols-rounded {
  flex-shrink: 0;
  margin-inline-start: calc(-1 * var(--space-0-5));
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.byline__place-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.byline--inline { align-items: center; }
.byline--inline .byline__who {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2);
}

.boost-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
  position: relative;
}
.boost-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-base);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  text-decoration: none;
}
.boost-chip:hover { border-color: var(--border-strong); }
.boost-chip__emoji { font-size: var(--text-sm); line-height: 1; }
.boost-chip__count {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.boost-chip--mine {
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  background: var(--accent-subtle);
  color: var(--accent-primary);
}
.boost-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.boost-add:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.boost-add .material-symbols-rounded { font-size: 18px; }

.boost-picker {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-2);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}
.boost-picker--open { display: inline-flex; }
.boost-picker__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.boost-picker__opt:hover { background: var(--surface-hover); transform: scale(1.18); }

.boost-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  min-width: 0;
}
.boost-summary__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boost-summary__text strong { font-weight: var(--weight-semibold); color: var(--text-primary); }

.post-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.post-action:hover { color: var(--accent-primary); background: var(--accent-subtle); }
.post-action .material-symbols-rounded { font-size: 20px; }
.post-action__count { font-variant-numeric: tabular-nums; }

.post-action--pinned { color: var(--accent-primary); background: var(--accent-subtle); }
.post-action--pinned .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

.pin-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--accent-primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.pin-flag .material-symbols-rounded { font-size: var(--text-sm); }

.unread-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  flex-shrink: 0;
}
.unread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.post--hidden-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
}
.post--hidden-note .material-symbols-rounded { font-size: var(--text-base); }

.thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.thread__comment { position: relative; display: flex; gap: var(--space-3); }

.thread__comment:not(.thread__replies .thread__comment) {
  border-top: 1px solid var(--thread-rule, var(--border-subtle));
  padding-top: var(--space-5);
}
.thread > .thread__comment:first-child,
.thread > .chain-page:first-child > .thread__comment:first-child,
.chain-page:has(> .thread-earlier) + .thread__comment { border-top: none; padding-top: 0; }
.thread__main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.thread__who { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
.thread__author { font-weight: var(--weight-semibold); color: var(--text-primary); }
.thread__time { font-size: var(--text-xs); color: var(--text-tertiary); }
.thread__body { font-size: var(--text-base); color: var(--text-primary); line-height: var(--leading-relaxed); overflow-wrap: anywhere; }
.thread__body > .trix-content,
.thread__body > .trix-content > p:first-child { display: inline; }
.thread__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-0-5);
}

.thread__replies {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--thread-rule, var(--border-subtle));
}

.mention {
  color: var(--accent-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
a.mention:hover { text-decoration: underline; }
a.mention:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.mention .avatar {
  width: 1em;
  height: 1em;
  margin-inline-end: var(--space-1);
  vertical-align: middle;
  user-select: none;
}
/* The field's sanitizer drops a drawn mark's SVG, so a person without a photo shows a disc there. */
lexxy-editor .mention .avatar:empty { background: var(--accent-muted); }
:is(.message--me, .message--pending) .message__presentation .mention { color: inherit; }
/* The editor's root is pre-wrap, so any whitespace inside the attachment would print as a line break. */
lexxy-editor action-text-attachment[content-type="application/vnd.actiontext.mention"] { white-space: normal; }
lexxy-editor action-text-attachment.node--selected > .mention {
  border-radius: var(--radius-sm);
  background: var(--accent-muted);
}
:is(.stream-post, .board-article, .thread__comment)[data-mentioned] {
  border-radius: var(--radius-lg);
  box-shadow: inset var(--space-0-5) 0 0 var(--accent-primary);
  padding-inline-start: var(--space-2);
}

.thread__comment--landed,
.board-article__foot--landed {
  border-radius: var(--radius-lg);
  animation: thread-landed 2.4s var(--ease-out);
}
.stream-post,
.thread__comment,
.board-article__foot { scroll-margin-top: calc(var(--chrome-top, 0px) + var(--space-4)); }
@keyframes thread-landed {
  from { background: var(--accent-subtle); }
  to   { background: transparent; }
}

.thread-earlier {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  border: none;
  background: none;
  padding: var(--space-2) 0;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  text-decoration: none;
  cursor: pointer;
}
.thread-earlier::before,
.thread-earlier::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.thread-earlier:hover { color: var(--accent-primary); }
.thread-earlier .material-symbols-rounded { font-size: var(--text-base); }

.thread__edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.thread__comment--hidden .thread__body,
.thread__comment--hidden .thread__row,
.thread__comment--hidden .attach-gallery,
.thread__comment--hidden .chain-page > .embed,
.thread__comment--hidden .attach-file { opacity: 0.55; }

.thread-composer { display: flex; gap: var(--space-3); align-items: flex-start; }
.thread-composer__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.thread-composer__field { font-size: var(--text-base); line-height: var(--leading-normal); }
.thread-composer__field .lexxy-editor__content {
  max-block-size: calc(12lh + 2 * var(--space-2));
  overflow-y: auto;
}
.thread-composer__field--roomy .lexxy-editor__content { min-block-size: calc(3lh + 2 * var(--space-2)); }
.thread-composer--unfold:not(:focus-within):not(:has(.media-tile)):has(.thread-composer__field:is(.lexxy-editor--empty, :not(:defined))) .thread-composer__bar { display: none; }
.thread-composer__bar { display: flex; align-items: center; gap: var(--space-2); }

.space-composer {
  container: space-composer / inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: start;
}
.space-composer > .avatar { grid-column: 1; grid-row: 1; }

.space-composer__form {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.space-composer__form > .form-group { margin-bottom: 0; }

.space-composer__destination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.space-composer__destination > .material-symbols-rounded { font-size: var(--text-base); }
.space-composer__destination strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.space-composer__audience { color: var(--text-tertiary); }

.space-composer__field { font-size: var(--text-base); }
.space-composer__field .lexxy-editor__content {
  min-block-size: calc(3lh + 2 * var(--space-2));
  max-block-size: calc(12lh + 2 * var(--space-2));
  overflow-y: auto;
}

.space-composer__bar {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.space-composer__bar > * { flex-shrink: 0; }
@container space-composer (max-width: 28rem) {
  .space-composer__bar { gap: var(--space-1); }
  .space-composer__bar > .btn[value="Post Later"] { padding-inline: var(--space-2); }
}
.thread-composer__bar .file-field { flex: 1; min-width: 0; }
.space-composer__bar .file-field__btn { align-self: center; }

:is(.space-composer__bar, .thread-composer__bar) .btn { min-height: var(--tap-target); }
:is(.space-composer__bar, .thread-composer__bar) .file-field__btn {
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding-inline: var(--space-2);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}
:is(.space-composer__bar, .thread-composer__bar) .file-field__btn .material-symbols-rounded { font-size: 20px; }
.space-composer__bar .form-hint,
.thread-composer__bar .form-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.media-stack:not(:has(> :not(:empty))) { display: none; }

.media-tray {
  display: grid;
  gap: var(--space-2);
}
.media-tray:not(:has(*)) { display: none; }
.media-tray > .media-tile { aspect-ratio: 1; }
.media-tray--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-tray--row {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--space-2)) / 4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.media-tray--row:has(> :nth-child(5)) { grid-auto-columns: calc((100% - 4 * var(--space-2)) / 4.4); }
.media-tray--row::-webkit-scrollbar { display: none; }
.media-tray--row > .media-tile { scroll-snap-align: start; border-radius: var(--radius-lg); }

.attach-gallery,
.media-tile {
  --media-dim: color-mix(in srgb, var(--text-primary) 45%, transparent);
  --media-ink-plate: color-mix(in srgb, var(--text-primary) 70%, transparent);
}
.media-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
  isolation: isolate;
  container: media-tile / inline-size;
}
button.media-tile {
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: zoom-in;
}
button.media-tile:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.media-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--media-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.media-tile:has(.media-tile__thumb)[data-state="uploading"]::after,
.media-tile[data-state="error"]::after { opacity: 1; }
.media-tile[data-state="error"] { outline: 2px solid var(--status-error); outline-offset: -2px; }

.media-tile__thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-tile__file {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}
.media-tile__file .material-symbols-rounded { font-size: 32px; }
.media-tile[data-state="uploading"] .media-tile__file .material-symbols-rounded { visibility: hidden; }
.media-tile__ext {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.media-tile__name {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.media-tile__badge {
  position: absolute;
  left: var(--space-1-5);
  bottom: var(--space-1-5);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--media-ink-plate);
  color: var(--ink-on-media);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.media-tile__badge .material-symbols-rounded { font-size: 14px; }

.media-tile__progress {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: var(--space-12);
  height: var(--space-12);
  margin: auto;
  display: grid;
  place-items: center;
  color: var(--ink-on-media);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.media-tile__progress::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: conic-gradient(var(--ring, var(--ink-on-media)) calc(var(--progress, 0) * 1%), var(--ring-track, var(--ink-on-media-faint)) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--space-1)), black calc(100% - var(--space-1)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--space-1)), black calc(100% - var(--space-1)));
}
.media-tile[data-state="uploading"] .media-tile__progress { opacity: 1; }
.media-tile:not(:has(.media-tile__thumb)) .media-tile__progress {
  --ring: var(--accent-primary);
  --ring-track: var(--accent-muted);
  color: var(--text-primary);
}

.media-tile__remove {
  position: absolute;
  top: var(--space-1-5);
  right: var(--space-1-5);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--media-ink-plate);
  color: var(--ink-on-media);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.media-tile__remove::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-2));
}
.media-tile__remove:active { transform: scale(0.92); }
.media-tile__remove .material-symbols-rounded { font-size: 18px; }

.media-tile__status {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  padding: var(--space-2);
  text-align: center;
  color: var(--ink-on-media);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.media-tile[data-state="error"] .media-tile__status { display: flex; }
.media-tile[data-state="preparing"]::after { opacity: 1; }
.media-tile[data-state="preparing"] .media-tile__status { display: flex; }
.media-tile:not(:has(.media-tile__thumb))[data-state="preparing"] .media-tile__status { color: var(--text-secondary); }
.media-tile__status > .material-symbols-rounded { font-size: 24px; }
.media-tile__retry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-base);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.media-tile__retry .material-symbols-rounded { font-size: 16px; }

@container media-tile (max-width: 120px) {
  .media-tile__ext { top: var(--space-1-5); left: var(--space-1-5); }
  .media-tile[data-state="uploading"] .media-tile__ext { visibility: hidden; }
  .media-tile__file .material-symbols-rounded { font-size: 24px; }
  .media-tile__progress { width: var(--space-10); height: var(--space-10); }
  .media-tile__remove { top: var(--space-1); right: var(--space-1); width: var(--space-6); height: var(--space-6); }
  .media-tile__remove .material-symbols-rounded { font-size: 16px; }
  .media-tile__retry { padding: 0 var(--space-2); }
  :is(.media-tile__name, .media-tile__status-text, .media-tile__retry-label) { display: none; }
}

.media-tile__remove:focus-visible,
.media-tile__retry:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.attach-gallery {
  display: grid;
  gap: var(--space-0-5);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.attach-gallery > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.attach-gallery:not(:has(> :nth-child(2))) > * { max-height: 560px; }
.attach-gallery:not(:has(> :nth-child(2))) > .media-tile { aspect-ratio: var(--tile-ratio, 4 / 3); }
.attach-gallery:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
.attach-gallery:has(> :nth-child(2)):not(:has(> :nth-child(3))) > * { aspect-ratio: 3 / 4; }
.attach-gallery:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.attach-gallery:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.attach-gallery:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :not(:first-child) { aspect-ratio: 4 / 3; }
.attach-gallery:has(> :nth-child(4)) > * { aspect-ratio: 16 / 10; }

.attach-gallery:not(:has(> *)) { display: none; }

.attach-gallery:has(> :nth-child(5)) { position: relative; counter-reset: gallery-more; }
.attach-gallery:has(> :nth-child(5)) > :nth-child(4) :is(.media-tile__progress, .media-tile__remove, .media-tile__status) { visibility: hidden; }
.attach-gallery > :nth-child(n+5) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  visibility: hidden;
  counter-increment: gallery-more;
}
.attach-gallery:has(> :nth-child(5))::after {
  content: "+" counter(gallery-more);
  grid-row: 2;
  grid-column: 2;
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--media-dim);
  color: var(--ink-on-media);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.attach-gallery:has(> :nth-child(5)):has(> :nth-child(n+4)[data-state="uploading"])::after {
  align-items: end;
  padding-bottom: var(--space-2);
  font-size: var(--text-lg);
}
.attach-gallery:has(> :nth-child(5)):has(> :nth-child(n+4)[data-state="uploading"])::before {
  content: "";
  grid-row: 2;
  grid-column: 2;
  z-index: 2;
  place-self: center;
  width: var(--space-12);
  height: var(--space-12);
  border: var(--space-1) solid var(--ink-on-media-faint);
  border-top-color: var(--ink-on-media);
  border-radius: var(--radius-full);
  animation: spin 0.9s linear infinite;
  pointer-events: none;
}

.attach-gallery:is([data-expanded], :has(> :nth-child(5)):has(> :nth-child(n+4)[data-state="error"])) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  gap: var(--space-2);
  border-radius: 0;
  overflow: visible;
}
.attach-gallery:is([data-expanded], :has(> :nth-child(5)):has(> :nth-child(n+4)[data-state="error"])) > * {
  position: relative;
  width: 100%;
  height: auto;
  clip-path: none;
  visibility: visible;
  grid-row: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
}
.attach-gallery:is([data-expanded], :has(> :nth-child(5)):has(> :nth-child(n+4)[data-state="error"])) > :nth-child(4) :is(.media-tile__progress, .media-tile__remove, .media-tile__status) { visibility: visible; }
.attach-gallery:is([data-expanded], :has(> :nth-child(5)):has(> :nth-child(n+4)[data-state="error"]))::before,
.attach-gallery:is([data-expanded], :has(> :nth-child(5)):has(> :nth-child(n+4)[data-state="error"]))::after { content: none; }

:is(.space-composer, .thread-composer):not(:has(lexxy-editor:defined:not(.lexxy-editor--empty), .media-tile, .post-doc)) [type="submit"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes submit-busy {
  from { background-position: var(--space-4) 0; }
  to { background-position: 0 0; }
}
:is(.space-composer, .thread-composer, .mb-form):has([data-state="uploading"], figure.attachment progress) [type="submit"] {
  pointer-events: none;
  cursor: progress;
  background-image: linear-gradient(45deg,
    var(--submit-stripe) 25%, transparent 25%, transparent 50%,
    var(--submit-stripe) 50%, var(--submit-stripe) 75%, transparent 75%, transparent);
  background-size: var(--space-4) var(--space-4);
  animation: submit-busy 0.8s linear infinite;
}
:is(.space-composer, .thread-composer, .mb-form):has([data-state="error"], figure.attachment--error) [type="submit"] {
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(to top right,
    transparent calc(50% - var(--space-px)), currentColor calc(50% - var(--space-px)),
    currentColor calc(50% + var(--space-px)), transparent calc(50% + var(--space-px)));
  background-size: auto;
  animation: none;
}
:is(.space-composer, .thread-composer, .mb-form) { --submit-stripe: color-mix(in srgb, var(--text-on-accent) 22%, transparent); }

.attach-file.media-tile {
  overflow: visible;
  background: var(--surface-base);
  isolation: auto;
}
.attach-file.media-tile::after { display: none; }
.attach-file .media-tile__progress {
  position: relative;
  inset: auto;
  display: none;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  margin: 0;
  font-size: 0;
  opacity: 1;
}
.attach-file[data-state="uploading"] .media-tile__progress { display: grid; }
.attach-file[data-state="uploading"] .attach-file__icon { display: none; }
.attach-file .media-tile__remove {
  position: static;
  flex-shrink: 0;
  background: none;
  color: var(--text-tertiary);
}
.attach-file .media-tile__remove:hover { color: var(--text-primary); background: var(--surface-hover); }
.attach-file .media-tile__status {
  position: static;
  flex-direction: row;
  flex-shrink: 0;
  padding: 0;
  gap: var(--space-2);
  color: var(--status-error-text);
}
.attach-file .media-tile__status > .material-symbols-rounded { font-size: 18px; color: var(--status-error); }
.attach-file .media-tile__retry { min-height: var(--space-6); padding: 0 var(--space-2); background: var(--surface-sunken); }
.attach-file[data-state="error"] .attach-file__meta { display: none; }

.attach-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: var(--feed-max-width);
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
}

.attach-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.attach-file:hover { border-color: var(--border-default); background: var(--surface-hover); }
.attach-file__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--accent-muted);
  color: var(--accent-primary);
  flex-shrink: 0;
}
.attach-file__icon .material-symbols-rounded { font-size: var(--text-lg); }
.attach-file__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-file__meta { font-size: var(--text-xs); color: var(--text-tertiary); flex-shrink: 0; }

.clamped { position: relative; }

.clamped--6 .clamped__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.clamped--6 .clamped__text:has(.embed) {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
.clamped__more {
  border: none;
  background: none;
  padding: 0;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  color: var(--text-tertiary);
  cursor: pointer;
}
.clamped__more:hover { color: var(--accent-primary); }

.caught-up {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4) var(--space-6);
  color: var(--text-tertiary);
  text-align: center;
}
.caught-up > .material-symbols-rounded {
  font-size: 28px;
  color: var(--accent-primary);
}
.caught-up__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.caught-up__hint { font-size: var(--text-xs); }

.post-doc {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-base);
  text-decoration: none; color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.post-doc:hover { border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.post-doc__cover, .post-doc__tile { width: 72px; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.post-doc__cover { object-fit: cover; display: block; }
.post-doc__tile { display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-secondary); }
.post-doc__tile .material-symbols-rounded { font-size: 22px; }

.post-doc__body { min-width: 0; }
.post-doc__title { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-doc__meta {
  margin-top: var(--space-1);
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden;
}
.post-doc__open { display: grid; place-items: center; color: var(--text-tertiary); transition: color var(--duration-fast) var(--ease-out); }
.post-doc:hover .post-doc__open { color: var(--accent-primary); }
.post-doc__open .material-symbols-rounded { font-size: 20px; }

.post-doc--attached .post-doc__open { color: var(--text-tertiary); }

.space-banner {
  display: block;
  margin-bottom: var(--space-5);
}

.space-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
}

.space-announcement {
  margin-bottom: var(--space-4);
}
.space-announcement .callout__icon { color: var(--accent-primary); }

.survey {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-width: var(--feed-max-width);
}

.survey form { margin: 0; }

.survey__option,
.survey__result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--thread-rule, var(--border-default));
  border-radius: var(--radius-full);
  background-color: var(--surface-base);
  font-size: var(--text-sm);
}

.survey__option {
  justify-content: center;
  color: var(--accent-primary);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.survey__option:hover {
  background-color: var(--surface-hover);
  border-color: var(--accent-primary);
}

.survey__result {
  color: var(--text-primary);
  background-image: linear-gradient(to right,
              var(--accent-subtle) var(--survey-fill),
              transparent var(--survey-fill));
}

.survey__result--mine {
  font-weight: var(--weight-semibold);
  background-image: linear-gradient(to right,
              var(--accent-muted) var(--survey-fill),
              transparent var(--survey-fill));
}

.survey__label { flex: 1; min-width: 0; }

.survey__percent {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.survey__check {
  font-size: var(--text-sm);
  color: var(--accent-primary);
}

.survey__total {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.survey-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.survey-fields__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.survey-fields__row .form-input { flex: 1; min-width: 0; }

.survey-fields__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}