html {
  font-size: 10pt;
}

@font-face {
  font-display: swap;
  font-family: "Berkeley Mono";
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/berkeley-mono-variable.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #151515;
  --text: var(--fg);
  --muted: #67645d;
  --border: #b8b0a0;
  --panel: #fffdf7;
  --link: #003f8c;
  --danger: #8f1d1d;
  --page-max: 1180px;
  --body-max: 1280px;
  /* Extra scroll room below the last note/reply so the feed does not end flush with the viewport. */
  --feed-scroll-pad: max(3rem, 22vh);
  --font-mono-stack: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --mono: var(--font-mono-stack);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010;
    --fg: #efeee8;
    --muted: #aaa69a;
    --border: #47433c;
    --panel: #171717;
    --link: #8ab4ff;
    --danger: #ff8c8c;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: min(var(--body-max), 100vw);
  padding: 0 1rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono-stack);
  font-size: inherit;
  line-height: 1.25;
}

main {
  margin: 0 auto;
  max-width: min(var(--page-max), 100%);
}

/* Only the root outlet uses `display: contents` so `.feed-column` / `.right-rail` stay
   as grid tracks. Nested `main` / `right-rail` outlets are semantic swap targets. */
[data-route-outlet="root"] {
  display: contents;
}

/* SSR route templates wrap outlet markup in a bare `<div>`; flatten it for the shell grid. */
[data-route-outlet="root"] > div:not([class]) {
  display: contents;
}

.route-keepalive-layer--feed {
  display: contents;
  min-width: 0;
  position: relative;
}

.route-keepalive-layer--feed[data-route-keepalive-active="0"] {
  bottom: 0;
  contain: layout style paint;
  display: block;
  grid-column: 2;
  left: 0;
  max-height: 100vh;
  min-width: 0;
  overflow: hidden;
  overflow-x: clip;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
  width: auto;
  z-index: 0;
}

.route-keepalive-layer--thread {
  display: none;
}

.route-keepalive-layer--thread[data-route-keepalive-active="1"] {
  display: contents;
}

.route-keepalive-layer--thread[data-route-keepalive-active="1"] > .feed-column,
.route-keepalive-layer--thread[data-route-keepalive-active="1"] > .right-rail {
  min-height: 100vh;
}

.route-keepalive-layer--thread[data-route-keepalive-active="1"] > .feed-column,
.feed-column[data-relay-native-thread="1"] {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.route-keepalive-layer--thread[data-route-keepalive-active="1"] #thread-focus {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

body.feed-shell {
  max-width: min(1500px, 100vw);
  padding: 0 0.75rem;
}

html.ptxt-note-transition-cleanup .ptxt-note-transition-selected {
  isolation: isolate;
}

html.ptxt-thread-route-transition ::view-transition-old(root),
html.ptxt-thread-route-transition ::view-transition-new(root) {
  animation: none;
  opacity: 0;
}

::view-transition-group(*) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: normal;
}

html.ptxt-thread-route-transition ::view-transition-group(.ptxt-note-avatar),
html.ptxt-thread-route-transition ::view-transition-group(.ptxt-note-author),
html.ptxt-thread-route-transition ::view-transition-group(.ptxt-note-meta) {
  animation-duration: 160ms;
}

html.ptxt-thread-route-transition ::view-transition-group(.ptxt-note-body) {
  animation-duration: 260ms;
}

html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] {
  max-height: 100vh;
  overflow: hidden;
  visibility: visible;
}

html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #feed-heading,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] .feed-status-slot,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] [data-load-more],
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] .right-rail,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #feed > .note,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #feed > .comment,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #user-panel-posts [data-feed] > .note,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #user-panel-posts [data-feed] > .comment,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #user-panel-replies [data-profile-feed] > .note,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #user-panel-replies [data-profile-feed] > .comment,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #user-panel-media [data-profile-feed] > .note,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] #user-panel-media [data-profile-feed] > .comment {
  opacity: 0;
  transition: opacity 160ms ease-out;
}

html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="0"] .ptxt-note-transition-selected {
  opacity: 1 !important;
}

html.ptxt-thread-route-transition #user-panel-posts [data-feed] > .ptxt-carried-profile-note,
html.ptxt-thread-route-transition .route-keepalive-layer--feed[data-route-keepalive-active="1"] #user-panel-posts .ptxt-note-transition-selected {
  opacity: 1 !important;
}

html.ptxt-thread-route-transition #user-panel-posts [data-feed] > .note:not(.ptxt-carried-profile-note):not(.ptxt-note-transition-selected),
html.ptxt-thread-route-transition #user-panel-posts [data-feed] > .comment:not(.ptxt-carried-profile-note) {
  opacity: 0;
  transition: opacity 160ms ease-out;
}

html.ptxt-thread-route-transition [data-profile-shell] #user-header,
html.ptxt-thread-route-transition [data-profile-shell] #user-stats,
html.ptxt-thread-route-transition [data-profile-shell] .profile-tabs,
html.ptxt-thread-route-transition [data-profile-shell] > .right-rail {
  animation: ptxt-thread-context-enter 140ms ease-out 120ms both;
}

html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] #thread-summary,
html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] #thread-ancestors,
html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] .thread-replies,
html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] > .right-rail {
  animation: ptxt-thread-context-enter 140ms ease-out 120ms both;
}

@keyframes ptxt-thread-context-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ptxt-thread-route-transition ::view-transition-group(*),
  html.ptxt-thread-route-transition ::view-transition-old(*),
  html.ptxt-thread-route-transition ::view-transition-new(*) {
    animation: none !important;
  }

  html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] #thread-summary,
  html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] #thread-ancestors,
  html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] .thread-replies,
  html.ptxt-thread-route-transition .route-keepalive-layer--thread[data-route-keepalive-active="1"] > .right-rail {
    animation: none !important;
  }
}

body.feed-shell main {
  max-width: 100%;
}

.mobile-bar {
  display: none;
}

.mobile-bar-center {
  display: none;
}

.thread-view-toggle {
  color: var(--link);
  font-weight: inherit;
  text-decoration: none;
}

.thread-view-toggle-desktop {
  display: none;
  justify-content: center;
  margin: 0.35rem 0 0.75rem;
}

[data-thread-view-toggle][data-loading="1"] {
  cursor: wait;
  pointer-events: none;
  position: relative;
}

.app-shell {
  align-items: start;
  display: grid;
  grid-template-columns: 240px minmax(0, 640px) 340px;
  justify-content: center;
  gap: 0;
  min-height: 100vh;
  position: relative;
}

.left-rail,
.feed-column,
.right-rail {
  min-height: 100vh;
  padding: 0.75rem 1rem;
}

.left-rail {
  border-right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

.rail-brand {
  font-weight: 700;
}

.rail-nav {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rail-nav a {
  align-items: center;
  border: 0;
  display: inline-flex;
  gap: 0.55rem;
  min-height: 2rem;
  padding: 0.2rem 0.4rem;
}

.rail-nav a[aria-current="page"] {
  text-decoration: underline;
}

.rail-icon {
  display: inline-flex;
  justify-content: center;
  width: 1.4rem;
}

.rail-post {
  margin: 0.6rem 0;
  text-align: left;
  width: 100%;
}

.rail-user {
  align-items: center;
  border-top: 0;
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.rail-user[data-logged-in="1"],
.mobile-menu-profile[data-logged-in="1"] {
  cursor: pointer;
}

.rail-user img,
.mobile-menu-header [data-session-avatar],
.mobile-menu-trigger img {
  border: 0;
  border-radius: 50%;
  height: 2rem;
  object-fit: cover;
  width: 2rem;
}

.rail-avatar-fallback,
.mobile-trigger-fallback {
  align-items: center;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.rail-user-copy {
  display: grid;
  gap: 0.1rem;
}

.feed-column {
  border-right: 0;
  margin: 0 auto;
  min-width: 0;
  width: 100%;
  padding-bottom: var(--feed-scroll-pad);
}

.shell-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Center column shell pages that should start at the top (not vertically centered). */
.shell-main-top {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.route-error-column {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(70vh, 28rem);
  text-align: center;
}

.route-error-panel {
  padding: 1rem 0.5rem;
  width: 100%;
}

.route-error-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.route-error-icon {
  height: auto;
  max-width: 72px;
}

.route-error-panel .about-page-logo .about-logo {
  max-width: 72px;
  width: 72px;
}

.route-error-heading {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.route-error-message {
  line-height: 1.45;
  margin: 0;
  max-width: 32rem;
}

.route-error-detail {
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
  word-break: break-word;
}

.read-detail-column.route-error-column .page-heading {
  align-self: stretch;
  text-align: left;
}

.feed-column .page-heading {
  margin-top: 0;
}

#feed-heading .page-heading {
  background: var(--bg) !important;
  isolation: isolate;
  position: relative;
  z-index: 1;
}

.feed-heading-top {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.feed-heading-title-row {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
  width: 100%;
}

.feed-heading-title-row h1 {
  flex: 1 1 auto;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-heading-controls {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.45rem;
  justify-content: flex-end;
  min-width: 0;
}

.feed-heading-summary {
  margin: 0;
  padding-bottom: 0.5rem;
}

.feed-heading-sort-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  width: 100%;
}

.feed-heading-post {
  flex-shrink: 0;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  width: auto;
}

.feed-heading-sort-row .feed-sort-label {
  margin-left: auto;
}

@media (min-width: 701px) {
  .feed-heading-post {
    display: none;
  }
}

.feed-sort-label {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0;
  gap: 0.35rem;
  margin-top: 0;
}

.feed-sort-label select {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--link);
  cursor: pointer;
  font-family: inherit;
  /* Parent uses font-size: 0 to hide the "Sort" copy; keep the control readable. */
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  padding: 0 1.1em 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25L5 4.75L9 1.25' stroke='%2367645d' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.05em center;
  background-repeat: no-repeat;
  background-size: 0.55em auto;
}

.feed-wot-quick {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.feed-wot-quick[hidden] {
  display: none !important;
}

.feed-wot-quick-label {
  color: var(--muted);
  display: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.feed-wot-depth-select {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--link);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  padding: 0 1.1em 0 0;
  width: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25L5 4.75L9 1.25' stroke='%2367645d' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.05em center;
  background-repeat: no-repeat;
  background-size: 0.55em auto;
}

.feed-status-slot {
  margin: 0 0 0.5rem;
  min-height: 1.1rem;
  position: sticky;
  top: 0.25rem;
  z-index: 2;
}

.feed-new-notes {
  margin: 0;
}

.feed-new-notes,
.load-more {
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease-out, filter 0.08s ease-out;
}

.feed-new-notes:not(:disabled):active,
.feed-new-notes.is-pressed,
.load-more:not(:disabled):active,
.load-more.is-pressed {
  filter: brightness(0.95);
  transform: translateY(1px);
}

.feed-new-notes[data-loading="1"],
.load-more[data-loading="1"] {
  opacity: 0.7;
}

.right-rail {
  align-content: start;
  display: grid;
  gap: 0.9rem;
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

@media (min-width: 701px) {
  .app-shell {
    --app-shell-pad-block: 16px;
    padding-block: var(--app-shell-pad-block);
  }

  .left-rail,
  .feed-column,
  .right-rail {
    min-height: calc(100vh - 2 * var(--app-shell-pad-block));
  }

  .left-rail {
    height: calc(100dvh - 2 * var(--app-shell-pad-block));
    min-height: calc(100dvh - 2 * var(--app-shell-pad-block));
  }

  .right-rail {
    height: calc(100dvh - 2 * var(--app-shell-pad-block));
    min-height: calc(100dvh - 2 * var(--app-shell-pad-block));
  }
}

.rail-search {
  display: grid;
  gap: 0.35rem;
}

.rail-search input {
  border: 1px dashed var(--border);
  width: 100%;
  min-width: 0;
}

.search-mode-toggle {
  align-items: baseline;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.search-mode-option {
  color: var(--link);
  cursor: pointer;
  display: inline;
  position: relative;
}

.search-mode-option input {
  inset: 0 auto auto 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.search-mode-option.is-active {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.search-mode-sep {
  color: var(--muted);
}

.search-heading {
  display: grid;
  gap: 0.4rem;
}

.search-scope-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.search-cache-window {
  margin: 0;
}

.search-results {
  padding-top: 0.4rem;
}

.trending-panel {
  border: 0;
  padding: 0.7rem;
}

.trending-panel h2 {
  margin-top: 0;
}

.trending-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  width: 100%;
  min-width: 0;
}

.trending-filter select {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--link);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  margin: 0;
  max-width: 9rem;
  padding: 0 1.1em 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25L5 4.75L9 1.25' stroke='%2367645d' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.05em center;
  background-repeat: no-repeat;
  background-size: 0.55em auto;
}

@media (prefers-color-scheme: dark) {
  .feed-sort-label select,
  .feed-wot-depth-select,
  .trending-filter select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25L5 4.75L9 1.25' stroke='%23aaa69a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.trending-list {
  display: grid;
  gap: 0.55rem;
  list-style: decimal;
  margin: 0;
  padding-left: 1.2rem;
}

.trending-list a {
  display: grid;
  gap: 0.2rem;
}

.trending-list span {
  color: var(--muted);
  display: -webkit-box;
  line-clamp: 2;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.trending-list em {
  color: var(--muted);
  font-style: normal;
}

.thread-people-panel {
  border: 0;
  padding: 0.7rem;
}

.thread-people-panel h2 {
  margin-top: 0;
}

.thread-people {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.thread-person {
  align-items: flex-start;
  display: flex;
  gap: 0.55rem;
}

.thread-person > img,
.thread-person-avatar-fallback {
  border: 0;
  border-radius: 0;
  flex-shrink: 0;
  height: 2.25rem;
  object-fit: cover;
  width: 2.25rem;
}

.thread-person-avatar-fallback {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  box-sizing: border-box;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
}

.thread-person-meta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.thread-person-about {
  display: -webkit-box;
  line-clamp: 2;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.composer-dialog {
  border: 0;
  max-height: 90vh;
  max-width: min(96vw, 46rem);
  padding: 1rem;
  width: min(96vw, 46rem);
}

.composer-dialog::backdrop {
  background: rgb(0 0 0 / 35%);
}

.reactions-dialog {
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  box-sizing: border-box;
  max-height: min(85vh, 32rem);
  max-width: min(96vw, 28rem);
  padding: 0.75rem 1rem 1rem;
  width: min(96vw, 28rem);
}

.reactions-dialog::backdrop {
  background: rgb(0 0 0 / 35%);
}

.reactions-dialog-close-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.35rem;
}

.reactions-dialog-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.reactions-dialog-status {
  margin: 0 0 0.5rem;
  min-height: 1.25rem;
}

.reactions-dialog-list {
  list-style: none;
  margin: 0;
  max-height: min(60vh, 22rem);
  overflow: auto;
  padding: 0;
}

.reactions-dialog-row {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.4rem 0;
}

.reactions-dialog-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.reactions-dialog-vote {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

.reactions-dialog-truncated {
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

.publish-status-dialog {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  max-width: min(92vw, 34rem);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
  opacity: 1;
}

.publish-status-heading {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.publish-status-dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.publish-status-close-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.35rem;
}

.publish-status-shell {
  margin: 0 0 0.75rem;
}

.publish-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
}

.publish-status-row {
  align-items: start;
  border-top: 1px solid var(--border);
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.5rem 0;
}

.publish-status-row-badge {
  color: var(--muted);
}

.publish-status-row--success .publish-status-row-badge {
  color: #17803d;
}

.publish-status-row--failed .publish-status-row-badge {
  color: #b33131;
}

.publish-status-row-body {
  display: grid;
  gap: 0.12rem;
}

.publish-status-row-relay {
  font-size: 0.85rem;
  font-weight: 600;
}

.publish-status-row-detail {
  color: var(--muted);
  font-size: 0.82rem;
}

.thread-focus-parent--skeleton .text-skeleton {
  display: inline-block;
  min-width: 8ch;
}

.thread-parent-skeleton-avatar {
  animation: skeleton-bob 1.45s ease-in-out infinite;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 16%, transparent);
}

.note.ptxt-note-removing,
.comment.ptxt-note-removing,
[data-thread-tree-note].ptxt-note-removing {
  overflow: hidden;
  transition: opacity 0.22s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
  opacity: 0;
  max-height: 0 !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
}

.composer-close-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.5rem;
}

.composer-close-button {
  min-width: 2.1rem;
  padding: 0.25rem 0.45rem;
}

.composer-form {
  display: grid;
  gap: 0.55rem;
}

/* Dismissive/secondary control first in DOM (left of pair); primary submit last (right).
   Use with justify-content: flex-end so the group sits on the trailing edge. */
.toolbar.dialog-actions {
  box-sizing: border-box;
  justify-content: flex-end;
  width: 100%;
}

.composer-label {
  font-size: 0.95rem;
}

.composer-form textarea {
  font: inherit;
  line-height: 1.25;
  min-height: 12rem;
  resize: vertical;
  width: 100%;
}

.composer-input-wrap {
  position: relative;
}

.composer-input-wrap textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  caret-color: var(--text);
  color: var(--text);
  margin: 0;
  padding: 0.55rem 0.6rem;
  position: relative;
  z-index: 2;
  -webkit-text-fill-color: var(--text);
}

.composer-input-wrap textarea:focus,
.composer-input-wrap textarea:focus-visible {
  border-color: var(--muted);
  outline: none;
}

.composer-input-wrap:focus-within .composer-overlay {
  border-color: var(--muted);
}

.composer-overlay {
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  font: inherit;
  inset: 0;
  line-height: 1.25;
  margin: 0;
  overflow: auto;
  padding: 0.55rem 0.6rem;
  pointer-events: none;
  position: absolute;
  white-space: pre-wrap;
  word-break: break-word;
  z-index: 1;
}

.composer-overlay[hidden] {
  display: none;
}

.composer-overlay-mention {
  color: var(--link);
  text-decoration: none;
}

.composer-mention-menu {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
  left: 0;
  max-height: 14rem;
  max-width: min(24rem, calc(100% - 0.35rem));
  min-width: 14rem;
  overflow: auto;
  position: absolute;
  top: 0;
  z-index: 8;
}

.composer-mention-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0.2rem;
}

.composer-mention-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.35rem;
  color: var(--fg);
  cursor: pointer;
  display: grid;
  gap: 0.05rem;
  grid-template-columns: 1fr;
  padding: 0.35rem 0.45rem;
  text-align: left;
  width: 100%;
}

.composer-mention-option.is-active {
  background: rgb(54 113 225 / 15%);
}

.composer-mention-option-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.composer-caret-mirror {
  height: auto;
  left: -9999px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  visibility: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  z-index: -1;
}

.composer-repost-preview {
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  display: grid;
  gap: 0.4rem;
  margin-top: 0.2rem;
  padding: 0.55rem;
}

.composer-repost-preview > p {
  margin: 0;
}

.composer-repost-preview-content {
  margin: 0;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
}

.composer-media-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.composer-attachment-strip {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.composer-attachment-item {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
}

.composer-attachment-label {
  font-size: 0.875rem;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-blossom-radiogroup {
  display: contents;
}

.settings-blossom-custom-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-blossom-custom-input {
  max-width: 36rem;
  width: 100%;
}

.settings-blossom-actions {
  margin: 0.5rem 0 0;
}

@media (min-width: 1100px) {
  .composer-dialog {
    max-width: min(92vw, 58rem);
    width: min(92vw, 58rem);
  }

  .composer-form textarea {
    min-height: 16rem;
  }
}

/* Thread: inline reply composer — same column geometry as `.comment` (rail + avatar + body). */
.thread-inline-reply {
  --avatar-left: -0.4ch;
  --avatar-size: 2.4em;
  --depth: 1;
  font-family: var(--font-mono-stack);
  font-size: inherit;
  line-height: 1.25em;
  margin-left: calc((var(--depth, 1) - 1) * 1ch);
  margin-top: 1.15em;
  max-width: 100%;
  min-width: 0;
  padding-left: 1ch;
  position: relative;
}

/* Connector from parent into this composer: branch uses a short vertical stub; leaf is a single `|` so nothing reads as continuing below the avatar when there are no sibling rails. */
.thread-inline-reply::before {
  color: var(--muted);
  content: "|\A|";
  left: calc(var(--avatar-left) + var(--avatar-size) / 2 - 0.5ch);
  line-height: 1.25em;
  pointer-events: none;
  position: absolute;
  top: -1.35em;
  white-space: pre;
  z-index: 1;
}

.thread-inline-reply[data-inline-rail-mode="leaf"]::before {
  content: "|";
  white-space: normal;
}

/* Vertical thread rail: `.thread-inline-reply__rail-pre` is filled in JS (`syncThreadInlineRailGlyphs`)
   only in `data-inline-rail-mode="branch"` so the column continues through siblings. */

.thread-inline-reply__card {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.thread-inline-reply__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono-stack);
  line-height: 1.25em;
  margin: 0;
  min-height: 1.25em;
  padding-left: calc(1ch + var(--avatar-size));
}

.thread-inline-reply__header-name {
  font-weight: 600;
}

.thread-inline-reply__header-pad {
  flex: 1 1 2ch;
  min-width: 1ch;
}

.thread-inline-reply__header-dots {
  flex-shrink: 0;
  user-select: none;
}

.thread-inline-reply__rail-row {
  align-items: stretch;
  display: flex;
  gap: 0;
  margin-top: 0.05em;
  max-width: 100%;
  min-width: 0;
}

.thread-inline-reply__rail-track {
  align-self: stretch;
  flex-shrink: 0;
  min-height: 1.25em;
  position: relative;
  width: 5ch;
}

.thread-inline-reply__rail-pre {
  background: transparent;
  border: 0;
  bottom: 0;
  box-sizing: border-box;
  color: var(--fg);
  font-family: var(--font-mono-stack);
  font-size: inherit;
  left: 0;
  line-height: 1.25em;
  margin: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  user-select: none;
  white-space: pre;
  width: 1ch;
}

.thread-inline-reply[data-inline-rail-mode="leaf"] .thread-inline-reply__rail-pre {
  display: none;
}

.thread-inline-reply[data-inline-rail-mode="leaf"] .thread-inline-reply__rail-track {
  opacity: 0;
  pointer-events: none;
}

.thread-inline-reply__form-col {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.thread-inline-reply .composer-form--thread-inline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.thread-inline-reply .composer-form--thread-inline .composer-label,
.thread-inline-reply .composer-form--thread-inline > .toolbar.dialog-actions {
  display: none;
}

.thread-inline-reply .composer-form--thread-inline .composer-input-wrap {
  min-height: 5.25rem;
}

.thread-inline-reply .composer-input-wrap textarea {
  border-radius: 0;
  border-style: dashed;
  min-height: 5.25rem;
}

.thread-inline-reply .composer-input-wrap textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.thread-inline-reply .composer-overlay {
  border-radius: 0;
  border-style: dashed;
}

.thread-inline-reply__status {
  margin: 0;
  min-height: 1.1rem;
  white-space: pre-wrap;
}

.thread-inline-reply__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  margin: 0.1rem 0 0;
}

.thread-inline-reply__footer-rule {
  border-bottom: 1px dashed color-mix(in oklab, var(--border) 85%, transparent);
  flex: 1 1 3ch;
  height: 0;
  margin-bottom: 0.2em;
  min-width: 2ch;
}

.thread-inline-reply__footer-actions {
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
}

.thread-inline-reply__bracket-btn {
  font-family: inherit;
}

.settings-profile-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-card {
  border: 0;
  padding: 0.25rem 0;
}

.settings-form {
  display: grid;
  gap: 0.75rem;
  max-width: 42rem;
}

.settings-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.settings-form label {
  display: grid;
  gap: 0.3rem;
}

.settings-form label.settings-blossom-preset-card {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  padding: 0;
}

.settings-blossom-preset-card input[type="radio"] {
  -webkit-appearance: radio;
  appearance: auto;
  accent-color: var(--fg);
  align-self: center;
  background: transparent;
  border: 0;
  block-size: 1rem;
  inline-size: 1rem;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.settings-blossom-preset-meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.settings-blossom-preset-meta strong {
  white-space: nowrap;
}

[data-blossom-settings] .settings-slider-tree.settings-mode-tree-stacked {
  grid-template-columns: auto minmax(0, 1fr);
}

.settings-blossom-preset-row.settings-mode-tree-stacked > .settings-mode-branch {
  align-self: start;
  grid-row: auto;
  height: 2.8rem;
}

.settings-form textarea,
.settings-form input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
}

.settings-preferences h2 {
  font-size: 1rem;
  margin: 0;
}

.settings-mode-tree-group {
  position: relative;
}

.settings-mode-tree-group-main {
  --settings-tree-gap: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--settings-tree-gap);
  min-width: 0;
}

.settings-mode-tree-group-main-stacked {
  --settings-tree-elbow-offset: 1.1rem;
}

.settings-mode-tree {
  align-items: center;
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.settings-slider-tree {
  align-items: start;
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.settings-mode-tree-stacked {
  align-items: start;
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 0.4rem;
}

.settings-mode-tree-stacked > .settings-mode-branch {
  grid-row: 1 / span 2;
  height: 100%;
}

.settings-mode-row-head {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  min-width: 0;
}

.settings-mode-row-head > strong {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-mode-row-body {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.settings-mode-row-body small {
  display: block;
}

.settings-mode-branch {
  height: 2.8rem;
  margin-left: 0.4rem;
  position: relative;
  width: 1.6rem;
}

.settings-mode-branch::before {
  border-left: 1px solid var(--border);
  bottom: calc(-1 * var(--settings-tree-gap));
  content: "";
  left: 0;
  position: absolute;
  top: calc(-1 * var(--settings-tree-gap));
}

.settings-mode-tree-group-main > :first-child .settings-mode-branch::before {
  bottom: 50%;
}

.settings-mode-branch::after {
  border-top: 1px solid var(--border);
  content: "";
  left: 0;
  position: absolute;
  top: 50%;
  width: 1rem;
}

.settings-mode-tree-group-main-stacked > .settings-mode-tree-stacked > .settings-mode-branch::after {
  top: var(--settings-tree-elbow-offset);
}

.settings-mode-copy strong {
  display: block;
}

.settings-mode-copy small {
  display: block;
}

.settings-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 12rem;
}

.settings-mode-switch input[type="checkbox"] {
  display: none;
}

.settings-mode-option {
  background: transparent;
  border: 1px dotted var(--border);
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  min-width: 3.6rem;
  padding: 0.5rem 1.1rem;
  text-align: center;
}

.settings-mode-option:first-of-type {
  border-right: 0;
}

.settings-mode-option.is-active[data-image-mode-set="off"] {
  background: rgb(153 27 27 / 70%);
  color: #fff;
}

.settings-mode-option.is-active[data-image-mode-set="on"] {
  background: rgb(22 101 52 / 70%);
  color: #fff;
}

.settings-mode-option:focus-visible {
  outline: 1px solid var(--link);
  outline-offset: 1px;
}

.settings-mode-switch.is-disabled .settings-mode-option {
  cursor: not-allowed;
  opacity: 0.5;
}

.settings-wot-depth-select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.settings-mode-tree-group-main > :first-child:not(:last-child) .settings-mode-branch::before {
  bottom: calc(-1 * var(--settings-tree-gap));
}

.settings-mode-tree-group-main > :last-child .settings-mode-branch::before {
  bottom: 50%;
}

.settings-mode-tree-group-main:has(> :last-child[hidden]) > :nth-last-child(2):not([hidden]) .settings-mode-branch::before {
  bottom: 50%;
}

/* Hidden seed row remains :last-child in the DOM, so the generic last-child connector targets the wrong row; style the depth row instead. */
.settings-mode-tree-group-main:has(> [data-wot-seed-row][hidden]) > [data-settings-slider-row] .settings-mode-branch::before {
  bottom: 50%;
}

.settings-mode-tree-group-main-stacked > .settings-mode-tree-stacked:first-child .settings-mode-branch::before {
  bottom: calc(-1 * var(--settings-tree-gap));
  top: var(--settings-tree-elbow-offset);
}

.settings-mode-tree-group-main-stacked > .settings-mode-tree-stacked:last-child .settings-mode-branch::before {
  bottom: calc(100% - var(--settings-tree-elbow-offset));
  top: calc(-1 * var(--settings-tree-gap));
}

.settings-mode-tree-group-main-stacked > .settings-mode-tree-stacked:first-child:last-child .settings-mode-branch::before {
  bottom: calc(100% - var(--settings-tree-elbow-offset));
  top: var(--settings-tree-elbow-offset);
}

.settings-depth-control {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  width: 25%;
}

.settings-wot-depth-select {
  width: auto;
}

.settings-seed-control {
  align-items: stretch;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-wot-seed-group {
  border: 0;
  display: grid;
  gap: 0.55rem;
  margin: 0;
  max-width: 34rem;
  padding: 0;
  width: 100%;
}

.settings-wot-seed-card {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto auto minmax(0, 1fr);
  padding: 0.6rem 0.75rem;
}

.settings-wot-seed-card:has(input:checked) {
  border-color: var(--link);
}

.settings-wot-seed-card input[type="radio"] {
  -webkit-appearance: radio;
  appearance: auto;
  accent-color: var(--fg);
  background: transparent;
  border: 0;
  block-size: 1rem;
  inline-size: 1rem;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.settings-wot-seed-avatar-wrap {
  align-items: start;
  display: inline-flex;
  height: 3rem;
  justify-content: start;
  width: 3rem;
}

.settings-wot-seed-avatar {
  display: block;
  height: 3rem;
  object-fit: cover;
  width: 3rem;
}

.settings-wot-seed-meta {
  display: grid;
  gap: 0.15rem;
}

.settings-wot-seed-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.mobile-menu {
  display: none;
  inset: 0;
  position: fixed;
  z-index: 20;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu-backdrop {
  background: rgb(0 0 0 / 35%);
  inset: 0;
  position: absolute;
}

.mobile-menu-panel {
  background: var(--bg);
  border: 0;
  box-sizing: border-box;
  height: 100vh;
  margin: 0;
  max-width: none;
  padding: 1rem;
  position: relative;
  width: min(100vw, 26rem);
}

body.mobile-menu-open {
  overflow: hidden;
}

.mobile-menu-header {
  align-items: center;
  border-bottom: 0;
  column-gap: 1rem;
  display: grid;
  grid-template-columns: minmax(3rem, 2rem) minmax(0, 1fr);
  grid-template-rows: auto auto;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  row-gap: 0.35rem;
}

.mobile-menu-header-logo {
  align-self: center;
  display: flex;
  grid-column: 1;
  grid-row: 1 / -1;
  justify-content: center;
  line-height: 0;
}

.mobile-menu-header-logo .about-page-logo .about-logo {
  height: auto;
  max-width: 100%;
  width: clamp(4rem, 17vw, 6.25rem);
}

.mobile-menu-session {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.mobile-menu-login-cta {
  font-weight: 600;
}

.mobile-menu-current-user {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.mobile-menu-current-user strong {
  font-size: clamp(1.05rem, 3.5vw, 1.2rem);
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-logout {
  padding: 0;
}

.mobile-menu-profile {
  align-items: center;
  color: var(--fg);
  display: inline-flex;
  gap: 0.55rem;
  max-width: 100%;
  text-decoration: none;
}

.mobile-menu-profile:hover {
  text-decoration: none;
}

.mobile-menu-profile strong {
  font-size: clamp(1.05rem, 3.5vw, 1.2rem);
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-login-cta:focus,
.mobile-menu-logout:focus,
.mobile-menu-profile:focus {
  outline: none;
}

.mobile-menu-login-cta:focus-visible,
.mobile-menu-logout:focus-visible,
.mobile-menu-profile:focus-visible {
  outline: 1px dashed var(--border);
  outline-offset: 2px;
}

/* Square avatars aligned with `.thread-tree-avatar` / `.thread-tree-avatar-fallback` (not global circular session chrome). */
.mobile-menu-profile [data-session-avatar],
.mobile-menu-profile [data-session-avatar-fallback] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 2.35rem;
  width: 2.35rem;
}

.mobile-menu-profile [data-session-avatar] {
  display: block;
  object-fit: cover;
}

.mobile-menu-profile [data-session-avatar-fallback] {
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
}

.mobile-menu-intro {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
}

.mobile-menu-intro-copy {
  line-height: 1.3;
  margin: 0;
}

.mobile-menu-search {
  margin-bottom: 0.55rem;
}

.mobile-menu-nav {
  align-items: stretch;
  display: grid;
  gap: 0;
  margin-bottom: 0.9rem;
}

.mobile-menu-close {
  margin-top: 0.6rem;
}

.mobile-menu-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  display: inline-flex;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.mobile-menu-trigger:focus,
.mobile-menu-nav a:focus,
.mobile-menu-close:focus,
.mobile-menu-search input:focus {
  outline: none;
}

.mobile-menu-trigger:focus-visible,
.mobile-menu-nav a:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu-search input:focus-visible {
  outline: 1px dashed var(--border);
  outline-offset: 2px;
}

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

a:hover {
  text-decoration: underline;
}

h1,
h2 {
  font-size: 1rem;
  margin: 1rem 0 0.5rem;
}

button {
  background: transparent;
  border: 0;
  color: var(--link);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
}

button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px dashed var(--border);
  outline-offset: 2px;
}

input {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font: inherit;
  padding: 0.35rem 0.5rem;
  min-width: min(100%, 28rem);
}

/* Drop the UA blue focus ring; fields already use a visible border. */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  box-shadow: none;
  outline: none;
}

pre,
code,
.mono {
  font-family: var(--font-mono-stack);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#ptxt-relay-info-popover.relay-detail-popover {
  box-sizing: border-box;
  max-width: min(22.5rem, 90vw);
  max-height: min(50vh, 22rem);
  overflow: auto;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  line-height: 1.45;
  white-space: pre-wrap;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.22);
}

#ptxt-login-required-popover {
  box-sizing: border-box;
  z-index: 10050;
  max-width: min(22.5rem, 90vw);
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.2rem;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.2);
}

.relay-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.relay-list .relay-card {
  align-items: flex-start;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  padding: 0.55rem 0;
  width: 100%;
}

.relay-list .relay-card:last-child {
  border-bottom: 0;
}

.relay-card-icon {
  align-items: center;
  background: color-mix(in oklab, var(--link) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--link) 20%, var(--border));
  box-sizing: border-box;
  color: var(--link);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
  height: 2.15rem;
  justify-content: center;
  line-height: 1;
  margin-top: 0.1rem;
  overflow: hidden;
  width: 2.15rem;
}

.relay-card-icon img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.relay-card-main {
  display: grid;
  flex: 1 1 auto;
  gap: 0.18rem;
  min-width: 0;
}

.relay-card-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  min-width: 0;
}

.relay-card-title {
  overflow-wrap: anywhere;
}

.relay-card-meta,
.relay-card-url,
.relay-card-description {
  font-size: 0.95rem;
}

.relay-card-url {
  color: var(--muted);
}

.relay-card-description {
  line-height: 1.35;
  max-width: 38rem;
}

.relay-card-nips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-top: 0.15rem;
}

.relay-card-nip {
  background: color-mix(in oklab, var(--muted) 10%, transparent);
  color: var(--fg);
  display: inline-flex;
  font-size: 0.82rem;
  line-height: 1.2;
  padding: 0.08rem 0.35rem;
}

.relay-card-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.45rem;
  padding-top: 0.1rem;
}

code.relay-url-popover {
  cursor: pointer;
}
code.relay-url-popover:hover,
code.relay-url-popover:focus-visible {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  outline: none;
}

.site-header,
.site-footer,
nav,
.note-meta,
.toolbar,
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.site-header,
.site-footer {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 1rem 0;
  margin-left: auto;
  margin-right: auto;
  max-width: min(var(--page-max), 100%);
  padding: 0.5rem 0;
}

.site-header {
  justify-content: space-between;
  width: 100%;
}

.site-header .brand {
  flex-shrink: 0;
}

body.share-page .site-header,
body.share-page main,
body.share-page .share-page-column {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  width: 100%;
}

body.share-page .site-header {
  border-bottom: 0;
  border-top: 0;
}

body.share-page .share-page-heading {
  text-align: center;
}

body.share-page .share-page-heading .feed-heading-title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

body.share-page .share-page-heading .feed-heading-title-row h1 {
  flex: 0 1 auto;
  min-width: max-content;
  overflow: visible;
  white-space: normal;
}

body.share-page .share-heading-separator {
  color: var(--muted);
}

body.share-page .share-live-link {
  flex: 0 1 auto;
  margin: 0;
  white-space: nowrap;
  width: auto;
}

body.share-page .share-page-column:not(.reads-column) .share-page-heading .feed-heading-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

body.share-page .share-page-column:not(.reads-column) .share-page-heading .feed-heading-title-row h1 {
  flex: 0 1 auto;
  grid-column: auto;
  grid-row: auto;
  min-width: max-content;
  overflow: visible;
  white-space: normal;
}

.brand {
  font-weight: 700;
}

[aria-current="page"] {
  font-weight: 700;
}

.session-panel .login-tab-panel-actions {
  margin-top: 0.5rem;
}

.page-heading,
.note,
.profile,
.cards article,
.session-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0.75rem 0;
  outline: 0 !important;
  padding: 0;
}

.note[data-ascii-select-href],
.comment[data-ascii-select-href] {
  cursor: pointer;
  touch-action: manipulation;
}

.note[data-ascii-select-href].ptxt-route-pressed,
.comment[data-ascii-select-href].ptxt-route-pressed {
  opacity: 0.82;
}

.note-raw-content {
  color: transparent;
  display: block;
  font-size: 1px;
  height: 1px;
  left: 0;
  line-height: 1px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  user-select: none;
  white-space: nowrap;
  width: 1px;
}

.feed,
.feed > .note,
article.note {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.feed {
  min-width: 0;
}

#feed.feed:has(> [data-feed-loader]) {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: min(52vh, 30rem);
}

#feed.feed:has(> [data-feed-loader]) > .feed-loader {
  max-width: 100%;
  width: fit-content;
}

.muted {
  color: var(--muted);
}

.about-page-logo {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  position: relative;
}

.about-page-logo .about-logo {
  width: 80px;
}

.about-logo {
  display: block;
  height: auto;
  max-width: 100%;
}

.about-logo-dark-scheme {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .about-logo-light-scheme {
    display: none;
  }

  .about-logo-dark-scheme {
    display: block;
  }
}

.about-page-brand {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}

.about-page-app-name {
  font-size: clamp(1.65rem, 3.2vw, 2.1rem);
  font-weight: 700;
}

.about-page h1 {
  margin: 0 0 0.5rem;
}

.about-page-lead {
  line-height: 1.35;
  margin: 0 0 1rem;
  max-width: 52rem;
}

.about-page-sub {
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.about-page-links {
  margin-top: 0.15rem;
}

.legal-page {
  max-width: 52rem;
}

.legal-page-lead {
  line-height: 1.45;
  margin: 0 0 1.25rem;
}

.legal-page-meta {
  margin: 0 0 0.75rem;
}

.legal-page h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.35rem 0 0.45rem;
}

.legal-page h3 {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 1rem 0 0.35rem;
}

.legal-page p,
.legal-page li {
  line-height: 1.45;
}

.legal-page ul {
  margin: 0.35rem 0 0.85rem;
  padding-left: 1.35rem;
}

.legal-page li + li {
  margin-top: 0.35rem;
}

.legal-page code {
  font-size: 0.92em;
}

.legal-page-links {
  margin-top: 1.5rem;
}

.text-skeleton {
  color: var(--muted);
  display: inline-block;
  opacity: 0.72;
  animation: text-skeleton-live 1.5s ease-in-out infinite;
  white-space: pre;
}

.text-skeleton-block {
  display: block;
  line-height: 1.25;
  margin: 0;
}

.text-skeleton-stack {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.text-skeleton-stack > :nth-child(2) {
  animation-delay: 0.14s;
}

.text-skeleton-stack > :nth-child(3) {
  animation-delay: 0.28s;
}

.text-skeleton-stack > :nth-child(4) {
  animation-delay: 0.42s;
}

.text-skeleton-stack > :nth-child(5) {
  animation-delay: 0.56s;
}

.text-skeleton-stack > :nth-child(6) {
  animation-delay: 0.7s;
}

.text-skeleton-stack > :nth-child(7) {
  animation-delay: 0.84s;
}

.text-skeleton-stack > :nth-child(8) {
  animation-delay: 0.98s;
}

.text-skeleton-note {
  color: var(--muted);
  margin: 0;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
  animation: text-skeleton-live 1.45s ease-in-out infinite;
}

.profile-ident > .text-skeleton-block:nth-child(2) {
  animation-delay: 0.12s;
}

.profile-ident > .text-skeleton-block:nth-child(3) {
  animation-delay: 0.24s;
}

.profile-feed-skeleton .feed-loader-stack > pre:nth-child(2) {
  animation-delay: 0.22s;
}

.page-heading > :nth-child(2).text-skeleton {
  animation-delay: 0.1s;
}

.page-heading > :nth-child(3).text-skeleton {
  animation-delay: 0.2s;
}

#thread-summary .thread-summary .text-skeleton {
  animation-delay: 0.12s;
}

.feed-loader {
  display: grid;
  gap: 0.4rem;
  min-height: 0;
  min-width: 0;
}

.retro-loader-block {
  display: grid;
  gap: 0.35rem;
}

.retro-loader-title {
  display: none;
}

.retro-loader-summary {
  display: none;
}

.retro-loader-progress-block,
.retro-loader-activity-block {
  display: grid;
  gap: 0.15rem;
}

.retro-loader-progress,
.retro-loader-activity {
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  white-space: pre-wrap;
}

.retro-loader-progress {
  animation: text-skeleton-live 2s ease-in-out infinite;
  animation-delay: 0.06s;
  color: var(--text);
  min-height: 0;
}

.retro-loader-activity {
  min-height: 1.35lh;
  max-height: 4.05lh;
}

.retro-loader--compact .retro-loader-activity {
  max-height: 4.05lh;
}

.thread-route-loader,
.thread-telemetry-loader {
  margin-bottom: 0.5rem;
}

.thread-route-loader .retro-loader-block,
.thread-telemetry-loader .retro-loader-block {
  display: grid;
  gap: 0.35rem;
}

.thread-route-loader .retro-loader-block::before,
.thread-telemetry-loader .retro-loader-block::before {
  content: none;
}

.thread-route-loader .retro-loader-title,
.thread-telemetry-loader .retro-loader-title {
  display: none;
}

.thread-route-loader .retro-loader-summary,
.thread-telemetry-loader .retro-loader-summary {
  display: block;
}

.thread-route-loader .retro-loader-progress-block,
.thread-route-loader .retro-loader-activity-block,
.thread-telemetry-loader .retro-loader-progress-block,
.thread-telemetry-loader .retro-loader-activity-block {
  display: grid;
}

@keyframes thread-hydration-pulse {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.88);
  }

  50% {
    opacity: 0.72;
    transform: scale(1);
  }
}

.inline-retro-loader {
  margin: 0;
}

.inline-retro-loader .retro-loader-progress,
.inline-retro-loader .retro-loader-activity {
  font-size: 0.74rem;
}

.inline-retro-loader--progress-only .retro-loader-block,
.feed-status-slot > .inline-retro-loader .retro-loader-block {
  gap: 0;
}

.inline-retro-loader--progress-only .retro-loader-activity-block,
.feed-status-slot > .inline-retro-loader .retro-loader-activity-block {
  display: none;
}

@keyframes text-skeleton-live {
  0%,
  100% {
    opacity: 0.58;
  }
  50% {
    opacity: 0.92;
  }
}

@keyframes skeleton-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-skeleton,
  .text-skeleton-note,
  .retro-loader-progress,
  .profile-skeleton-avatar,
  .thread-person-avatar-skeleton,
  .thread-tree-skeleton-wave,
  .thread-tree-skeleton .hn-tree-avatar-skel {
    animation: none;
  }
}

.profile-skeleton-avatar {
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  color: var(--muted);
  animation: skeleton-bob 1.45s ease-in-out infinite;
}

.profile-modern.profile-skeleton .profile-avatar-wrap {
  display: flex;
  flex-direction: column;
}

.profile-modern.profile-skeleton .profile-avatar-wrap > .profile-skeleton-avatar {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.profile-skeleton-display-name {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-feed-skeleton {
  display: grid;
  gap: 0.75rem;
  min-height: 17rem;
}

.profile-right-panel-skeleton {
  min-height: 10rem;
}

.thread-focus-skeleton {
  display: grid;
  gap: 0.65rem;
  min-height: 14rem;
}

.thread-replies-skeleton {
  min-height: 14rem;
}

.thread-replies-skeleton .thread-reply-skeleton-item,
.thread-replies-page-skeleton .thread-reply-skeleton-item {
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.thread-replies-skeleton .thread-reply-skeleton-item:nth-child(2) .text-skeleton-note,
.thread-replies-skeleton .thread-reply-skeleton-item:nth-child(2) .thread-parent-skeleton-avatar,
.thread-replies-page-skeleton .thread-reply-skeleton-item:nth-child(2) .text-skeleton-note,
.thread-replies-page-skeleton .thread-reply-skeleton-item:nth-child(2) .thread-parent-skeleton-avatar {
  animation-delay: 0.18s;
}

.thread-replies-skeleton .thread-reply-skeleton-item:nth-child(3) .text-skeleton-note,
.thread-replies-skeleton .thread-reply-skeleton-item:nth-child(3) .thread-parent-skeleton-avatar {
  animation-delay: 0.36s;
}

.thread-tree-skeleton {
  min-height: 11rem;
  pointer-events: none;
  user-select: none;
}

.thread-tree-skeleton .thread-tree-root-note,
.thread-tree-skeleton .thread-tree-item,
.thread-tree-skeleton .hn-comtr {
  cursor: default;
}

.thread-tree-skeleton-item:nth-child(2) .thread-tree-skeleton-wave {
  animation-delay: 0.18s;
}

.thread-tree-skeleton-wave {
  margin: 0.35rem 0 0;
  min-height: 3.5lh;
  min-height: 4.5rem;
}

.thread-tree-load-error {
  margin: 0.75rem 0 0;
  padding: 0 0.2rem;
}

.thread-replies-page-skeleton {
  margin-top: 0.65rem;
  min-height: 6rem;
  min-width: 0;
}

.thread-person-avatar-skeleton {
  align-items: center;
  animation: skeleton-bob 1.45s ease-in-out infinite;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  display: inline-flex;
  flex-shrink: 0;
  font-weight: 700;
  height: 2.25rem;
  justify-content: center;
  line-height: 1;
  width: 2.25rem;
}

.thread-people > li:nth-child(2) .thread-person-avatar-skeleton {
  animation-delay: 0.18s;
}

.error,
.danger h2 {
  color: var(--danger);
}

.note-meta {
  color: var(--muted);
  font-size: 8pt;
}

/* X-style feed context above the ascii card (repost banner, reply targets). */
.note-feed-context {
  color: var(--muted);
  font-size: 0.88em;
  line-height: 1.35;
  margin: 0 0 0 0;
  min-width: 0;
}

.note-feed-context a {
  color: var(--link);
  text-decoration: none;
}

.note-feed-context a:hover,
.note-feed-context a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.note-feed-context--repost {
  padding-left: 1.35em;
 
  position: relative;
}

.note-feed-context--repost::before {
  color: var(--muted);
  content: "\21bb";
  font-size: 0.95em;
  left: 0;
  line-height: 1;
  position: absolute;
  top: 0.08em;
}

/* Repost line sits above the card; ↻ at gutter, name aligns with "Replying to" inset below. */
article.note[data-ascii-kind="note"]:has(.note-feed-avatar) .note-feed-context--repost {
  padding-left: var(--feed-repost-text-start);
}

article.note[data-ascii-kind="note"]:has(.note-feed-avatar) .note-feed-context--repost::before {
  left: var(--feed-avatar-gutter);
}

/* Reply context row inside the ascii card (below header, above body).
   Body is inline HTML + trailing spaces in the same <pre> line as other boxed rows. */
.ascii-line-reply-context {
  color: var(--muted);
  /* Keep reply + padding + closing pipe on one monospace row (same as other boxed lines). */
  white-space: nowrap;
}

.ascii-line-reply-context .ascii-note-reply-context-body {
  display: inline;
}

.ascii-line-reply-context .ascii-note-reply-context-body a {
  color: var(--link);
  text-decoration: none;
}

.ascii-line-reply-context .ascii-note-reply-context-body a:hover,
.ascii-line-reply-context .ascii-note-reply-context-body a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.ascii-line-reply-context .note-feed-context-lead,
.ascii-line-reply-context .note-feed-context-tail {
  color: var(--muted);
}

/* Narrow-screen collapsed notes: "view more" sits in-body with the same inset as `.ascii-line-reply-context`. */
.ascii-line-note-view-more .link-button {
  margin: 0;
  vertical-align: baseline;
}

.ascii-line.ascii-ssr-mobile-only {
  display: none;
}

@media (max-width: 700px) {
  .ascii-line.ascii-ssr-mobile-only {
    display: block;
  }

  .ascii-line.ascii-ssr-desktop-only {
    display: none;
  }
}

.thread-toolbar-slot {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

.thread-tree-toggle-dots span {
  animation: thread-tree-toggle-dot 1.2s ease-in-out infinite;
  display: inline-block;
}

.thread-tree-toggle-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.thread-tree-toggle-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes thread-tree-toggle-dot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-0.12em);
  }
}

.thread-filtered-replies-toggle {
  margin: 0.35rem 0 0.75rem;
}

.thread-filtered-replies:not([hidden]) > .comment:first-child,
.thread-other-replies:not([hidden]) > .comment:first-child {
  margin-top: 2.5em;
}

.thread-filtered-replies:not([hidden]) > .comment:first-child::before,
.thread-other-replies:not([hidden]) > .comment:first-child::before {
  color: var(--muted);
  content: "|\A|";
  left: var(--reply-parent-rail-x);
  line-height: 1.25em;
  pointer-events: none;
  position: absolute;
  top: -2.5em;
  white-space: pre;
  z-index: 1;
}

.profile-website-line {
  align-items: baseline;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem 0.55rem;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.profile-website-symbol {
  flex: 0 0 auto;
  font-size: 0.92em;
}

.profile-website-value {
  flex: 1 1 auto;
  font-size: 1rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-website-value a {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-website-value a:hover,
.profile-website-value a:focus-visible {
  text-decoration: underline;
}

.profile-payment-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin: 0;
  min-width: 0;
}

.profile-payment-target {
  align-items: baseline;
  color: inherit;
  display: inline-flex;
  flex: 1 1 auto;
  gap: 0.35rem 0.55rem;
  min-width: 0;
  text-decoration: none;
}

.profile-payment-target:hover,
.profile-payment-target:focus-visible {
  text-decoration: underline;
}

.profile-payment-symbol {
  flex: 0 0 auto;
  font-size: 0.92em;
}

.profile-payment-value {
  flex: 1 1 auto;
  font-size: 1rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-payment-actions {
  align-items: baseline;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.2rem;
  white-space: nowrap;
}

.profile-payment-copy-icon {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.95rem;
  justify-content: center;
  line-height: 1;
  min-height: 1rem;
  min-width: 1rem;
  padding: 0;
}

.profile-payment-copy-icon:hover,
.profile-payment-copy-icon:focus-visible,
.profile-payment-copy-icon[data-copied="1"] {
  color: var(--link);
  text-decoration: none;
}

.profile-metadata-links {
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0.45rem 0 0;
}

@media (min-width: 360px) {
  .profile-metadata-links--paired {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.profile-metadata-link {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.profile-metadata-link-header {
  align-items: baseline;
  display: flex;
  gap: 0.45rem;
  justify-content: flex-start;
  min-width: 0;
}

.profile-metadata-link-label {
  font-size: 0.82em;
  text-transform: lowercase;
}

.profile-metadata-link--website {
  align-content: start;
}

.profile-metadata-link--pay {
  align-content: start;
}

.profile-metadata-link-value,
.profile-payment-value {
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-metadata-link-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}

.profile-payment-open {
  white-space: nowrap;
}

.profile-nip05-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}

.profile-nip05-status {
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.92em;
  line-height: 1;
  padding: 0;
}

.profile-nip05-status.is-ok {
  color: #5cc96b;
}

.profile-nip05-status.is-error {
  color: #d14b4b;
}

.profile-nip05-status:hover,
.profile-nip05-status:focus-visible {
  text-decoration: none;
}

.profile-nip05-status:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#ptxt-nip05-popover.nip05-detail-popover {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
  margin: 0;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.55rem 0.65rem;
  white-space: normal;
}

.thread-summary {
  margin: 0.5rem 0 1rem;
}

.thread-focus {
  margin: 0.5rem 0 1rem;
}

/* Bridge OP footer rail to the first reply avatar (mirrors iOS ThreadRailGapConnector). */
.thread-rail-gap {
  --avatar-left: -0.4ch;
  --avatar-size: 2.4em;
  --reply-rail-x: calc(var(--avatar-left) + var(--avatar-size) / 2 - 0.5ch);
  color: var(--muted);
  font-family: var(--font-mono-stack);
  height: 2.5em;
  line-height: 1.25em;
  margin-left: calc((var(--depth, 1) - 1) * 1ch);
  padding-left: 1ch;
  pointer-events: none;
  position: relative;
  white-space: pre;
}

.thread-rail-gap::before {
  color: var(--muted);
  content: "|\A|";
  left: var(--reply-rail-x);
  line-height: 1.25em;
  pointer-events: none;
  position: absolute;
  top: 0;
  white-space: pre;
}

/* Thread root OP: selected-style card with reply-column avatar geometry. */
#thread-focus > article.note[data-ascii-kind="selected"]:not(.thread-focus-selected) {
  --avatar-left: -0.4ch;
  --avatar-size: 2.4em;
  font-family: var(--font-mono-stack);
  margin: 0.5rem 0 0;
  padding-left: 1ch;
  position: relative;
}

#thread-focus > article.note[data-ascii-kind="selected"]:not(.thread-focus-selected) .note-avatar {
  left: var(--avatar-left);
  top: calc(0.625em - var(--avatar-size) / 2);
}

#thread-focus > article.note[data-ascii-kind="selected"]:not(.thread-focus-selected) .ascii-reply > .ascii-line:first-child {
  padding-left: calc(1ch + var(--avatar-size));
}

#thread-focus > article.note[data-ascii-kind="selected"]:not(.thread-focus-selected) .note-content {
  display: block;
  margin-top: calc(var(--avatar-size) / 2);
}

.thread-replies:has(> .thread-rail-gap) #thread-replies > .comment:first-child {
  margin-top: 0.4em;
}

.thread-replies:has(> .thread-rail-gap) #thread-replies > .comment:first-child::before {
  display: none;
}

.thread-focus-parent {
  margin: 0 0 0.25rem;
}

.thread-focus-selected {
  /* Top margin reserves room for the avatar's top half which overflows
     above the first text line of the selected note. */
  margin: 1.4rem 0 0.5rem 0;
}

/* Focused reply: same rail column as thread root OP (iOS selected @ indent 0). */
#thread-focus > .thread-focus-selected {
  --avatar-left: -0.4ch;
  --avatar-size: 2.4em;
  --depth: 1;
  font-family: var(--font-mono-stack);
  margin-left: 0;
  padding-left: 1ch;
  position: relative;
}

#thread-focus > .thread-focus-selected .note-avatar {
  left: var(--avatar-left);
  top: calc(0.625em - var(--avatar-size) / 2);
}

#thread-focus > .thread-focus-selected .ascii-reply > .ascii-line:first-child {
  padding-left: calc(1ch + var(--avatar-size));
}

#thread-focus > .thread-focus-selected .note-content {
  display: block;
  margin-top: calc(var(--avatar-size) / 2);
}

/* Linear thread replies share the OP rail column. */
.feed-column[data-relay-native-thread="1"] #thread-replies > .comment {
  --avatar-left: -0.4ch;
  margin-left: 0;
}

.thread-hidden-toggle {
  margin: 0.5rem 0;
}

/* Respect thread/tree preference before thread.js applies [hidden] (see thread-view-bootstrap.js). */
html[data-ptxt-thread-view="thread"] #thread-tree-view {
  display: none !important;
}

html[data-ptxt-thread-view="tree"] #thread-ancestors,
html[data-ptxt-thread-view="tree"] #thread-focus,
html[data-ptxt-thread-view="tree"] .thread-replies {
  display: none !important;
}

html[data-ptxt-thread-view="tree"] #thread-tree-view[hidden] {
  display: block !important;
}

/* Pseudo-elements sometimes use negative top; clip so tree chrome cannot paint outside this column. */
#thread-tree-view:not([hidden]) {
  overflow: clip;
}

.thread-tree-mode {
  /* Single source for row geometry — spine + branches use this, not unrelated rem values. */
  --thread-tree-avatar-size: 2.35rem;
  --thread-tree-branch-margin: 0.35rem;
  --thread-tree-column-gap: 0.55rem;
  --thread-tree-gutter-width: 1.8rem;
  /* Where the spine meets the horizontal arm: avatar midline on the header row. */
  --thread-tree-join-y: calc(var(--thread-tree-avatar-size) / 2 - 0.5px);
  /* Upper spine default: one row gap + join (siblings under the same list). */
  --thread-tree-parent-rise: calc(var(--thread-tree-row-gap) + var(--thread-tree-join-y));
  --thread-tree-row-gap: 0.55rem;
  --thread-tree-spine-x: 0.95rem;
  /* Space between OP card and first reply list — must match `.thread-tree-mode > .thread-tree` margin-top. */
  --thread-tree-trunk-gap: 0.85rem;
  /* Inset of the reply list (and OP row) from the mode edge — spines share this x. */
  --thread-tree-trunk-margin: 0.1rem;
  /* Padding avoids margin-collapsing with `#thread-summary` that could confuse layout bleed. */
  margin: 0 0 1rem;
  padding-block-start: 0.65rem;
  position: relative;
  /* HN tree: small avatars in thread mode (must match .hn-tree-avatar rules). */
  --hn-tree-avatar-size: 1.35rem;
  --hn-tree-avatar-margin-top: 0.06rem;
  --hn-tree-rail-join: calc(var(--hn-tree-avatar-margin-top) + var(--hn-tree-avatar-size) / 2 - 0.5px);
  --hn-tree-rail-color: color-mix(in srgb, var(--fg) 26%, var(--bg));
  /* Gutter for branch + rail (::before horizontal spans this minus 1px). */
  --hn-tree-li-pad-left: 0.9375rem;
  /* Nested parent `hn-li-body` trunk: reach first child’s join row under nested ul. */
  --hn-tree-trunk-into-ul: calc(0.28rem + var(--hn-tree-rail-join) + 0.12rem);
}

.thread-tree-root-note {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: var(--thread-tree-column-gap);
  grid-template-columns: var(--thread-tree-gutter-width) minmax(0, 1fr);
  /* Same inset as `.thread-tree-mode > .thread-tree` so the OP gutter spine lines up with the first reply. */
  margin: 0 0 0.35rem var(--thread-tree-trunk-margin);
  min-width: 0;
  position: relative;
}

/* With replies: no empty gutter column beside the root — note sits left like `tree` root text; `|` begins under it via first reply gutter + bridge. */
.thread-tree-mode:has(> .thread-tree:not([hidden])) .thread-tree-root-note {
  background-color: var(--bg);
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  /* First reply gutter ::before is painted after this node in DOM — sit above the reply list so the bridge never draws over the root avatar. */
  z-index: 2;
}

.thread-tree-mode:has(> .thread-tree:not([hidden])) .thread-tree-root-gutter {
  display: none;
}

/* Root gutter is structural only (`tree`-style `.` has no downward trunk beside the label — trunk is bridged via first reply gutter + JS-measured rise). */
.thread-tree-mode:not(:has(> .thread-tree:not([hidden]))) .thread-tree-root-gutter {
  align-self: start;
  min-height: var(--thread-tree-avatar-size);
  position: relative;
}

.thread-tree-root-stack {
  min-width: 0;
}

/*
 * OP → replies spine: first-reply gutter ::before is under this subtree (tree z-index < root).
 * Draw the missing segment on the root stack so it shows from below the OP avatar through the
 * long OP body and the inter-block margin to the first gutter spine (same x as --thread-tree-spine-x).
 */
.thread-tree-mode:has(> .thread-tree:not([hidden])) .thread-tree-root-stack {
  position: relative;
}

.thread-tree-mode:has(> .thread-tree:not([hidden])) .thread-tree-root-stack::after {
  border-left: 1px solid var(--fg);
  bottom: calc(-1 * max(0.35rem, var(--thread-tree-trunk-gap)));
  content: "";
  left: var(--thread-tree-spine-x);
  pointer-events: none;
  position: absolute;
  top: var(--thread-tree-avatar-size);
  width: 0;
  z-index: 3;
}

.thread-tree-root-note.is-selected .thread-tree-meta strong {
  text-decoration: underline;
}

.thread-tree-mode > .thread-tree {
  margin: var(--thread-tree-trunk-gap) 0 0 var(--thread-tree-trunk-margin);
  position: relative;
  z-index: 1;
}

.thread-tree {
  display: grid;
  gap: 0;
}

.thread-tree.thread-tree-branch {
  margin: var(--thread-tree-branch-margin) 0 0;
}

.thread-tree-item {
  cursor: pointer;
  isolation: isolate;
  /* Margin (not padding): keeps tail-rail from eating into the sibling gap. */
  margin-bottom: var(--thread-tree-row-gap);
  min-width: 0;
  position: relative;
}

/* Two-column header row only — prevents full-subtree gutter stretching from breaking join-y math. */
.thread-tree-row-cols {
  align-items: start;
  display: grid;
  gap: var(--thread-tree-column-gap);
  grid-template-columns: var(--thread-tree-gutter-width) minmax(0, 1fr);
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Downward continuation (replaces in-gutter .thread-tree-tail spanning the whole subtree height). */
.thread-tree-tail-rail {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: var(--thread-tree-join-y);
  width: var(--thread-tree-gutter-width);
  z-index: 0;
}

.thread-tree-tail-rail::before {
  border-left: 1px solid var(--fg);
  bottom: 0;
  content: "";
  left: var(--thread-tree-spine-x);
  position: absolute;
  top: 0;
  width: 0;
}

/*
 * Single-loaded-child L (`└`): `--thread-tree-tail-stub-height` reaches only to the child's join row.
 * If this item is not the last sibling (`--continuation-below`), `::after` draws the ancestry column below the subtree.
 */
.thread-tree-tail-rail--stub::before {
  bottom: auto;
  height: var(--thread-tree-tail-stub-height, 0px);
}

.thread-tree-tail-rail--stub.thread-tree-tail-rail--continuation-below::after {
  border-left: 1px solid var(--fg);
  bottom: 0;
  content: "";
  left: var(--thread-tree-spine-x);
  position: absolute;
  top: var(--thread-tree-tail-continuation-top, 0px);
  width: 0;
}

.thread-tree-item:last-child {
  margin-bottom: 0;
}

.thread-tree-item.is-selected .thread-tree-meta strong {
  text-decoration: underline;
}

.thread-tree-gutter {
  align-self: start;
  min-height: var(--thread-tree-avatar-size);
  position: relative;
  width: 100%;
  z-index: 1;
}

/* Nested connectors paint under the parent's header card so upward ::before stubs don't streak over avatars. */
.thread-tree-card-stack > .thread-tree-card:first-child {
  position: relative;
  z-index: 2;
}

/* Upper spine: from (row top − parent-rise) down to the join line at avatar midline. */
.thread-tree-gutter.has-parent::before {
  border-left: 1px solid var(--fg);
  content: "";
  height: calc(var(--thread-tree-parent-rise) + var(--thread-tree-join-y));
  left: var(--thread-tree-spine-x);
  position: absolute;
  top: calc(-1 * var(--thread-tree-parent-rise));
}

/* First reply: upward connector rise is set inline via layout (fallback when JS has not measured yet). */
.thread-tree-mode > .thread-tree > .thread-tree-item:first-child .thread-tree-gutter.has-parent {
  --thread-tree-parent-rise: calc(var(--thread-tree-trunk-gap) + var(--thread-tree-join-y) + 4rem);
}

/* Nested branch first child: same — inline overrides this fallback unless layout has not run. */
.thread-tree-branch > .thread-tree-item:first-child .thread-tree-gutter.has-parent {
  --thread-tree-parent-rise: calc(var(--thread-tree-branch-margin) + var(--thread-tree-join-y));
}

/* Deeper siblings: same geometry as top-level non-first. */
.thread-tree-branch > .thread-tree-item:not(:first-child) .thread-tree-gutter.has-parent {
  --thread-tree-parent-rise: calc(var(--thread-tree-row-gap) + var(--thread-tree-join-y));
}

.thread-tree-mode > .thread-tree > .thread-tree-item:not(:first-child) .thread-tree-gutter.has-parent {
  --thread-tree-parent-rise: calc(var(--thread-tree-row-gap) + var(--thread-tree-join-y));
}

/* Horizontal branch only; vertical through join comes from `::before` + `.thread-tree-tail-rail`. */
.thread-tree-elbow {
  background-color: var(--fg);
  height: 1px;
  left: var(--thread-tree-spine-x);
  position: absolute;
  top: calc(var(--thread-tree-join-y) - 0.5px);
  width: calc(var(--thread-tree-gutter-width) - var(--thread-tree-spine-x));
}

.thread-tree-card-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.thread-tree-card {
  min-width: 0;
  padding-left: 0.35rem;
}

.thread-tree-row {
  align-items: start;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: var(--thread-tree-avatar-size) minmax(0, 1fr);
}

.thread-tree-avatar,
.thread-tree-avatar-fallback {
  background: var(--panel);
  border: 1px solid var(--border);
  flex-shrink: 0;
  height: var(--thread-tree-avatar-size);
  object-fit: cover;
  width: var(--thread-tree-avatar-size);
}

.thread-tree-avatar {
  display: block;
}

.thread-tree-avatar-fallback {
  align-items: center;
  display: flex;
  font-weight: 700;
  justify-content: center;
}

.thread-tree-main {
  min-width: 0;
}

.thread-tree-meta {
  margin: 0;
}

.thread-tree-text {
  display: grid;
  gap: 0.1rem;
  margin-top: 0.18rem;
  min-width: 0;
}

.thread-tree-text-line {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.thread-tree-quote {
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: grid;
  font-family: var(--font-mono-stack);
  font-size: 1rem;
  gap: 0.1rem;
  line-height: 1.45;
  margin-top: 0.25rem;
  min-width: 0;
  padding: 0.35rem 0 0 0.55rem;
}

.thread-tree-quote-attrib {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.thread-tree-quote .thread-tree-text-line {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.thread-tree-quote-media {
  margin-top: 0.25rem;
  width: min(100%, 34rem);
}

.continue-thread-tree {
  margin: 0.25rem 0 0;
}

.thread-tree-media {
  margin: 0.3rem 0 0;
}

.thread-tree-media-toggle {
  padding: 0;
}

.thread-tree-media-preview {
  margin-top: 0.35rem;
}

.thread-tree-media-preview .note-media-grid-wrap {
  width: min(100%, 34rem);
}

.thread-tree-media-preview .note-media-preview {
  margin: 0.35rem 0 0;
  width: min(100%, 34rem);
}

@media (max-width: 700px) {
  .thread-tree-mode {
    --thread-tree-avatar-size: 1.9rem;
    --thread-tree-gutter-width: 1.55rem;
    --thread-tree-spine-x: 0.82rem;
    --thread-tree-trunk-margin: 0;
  }

  .thread-tree-mode > .thread-tree {
    margin-left: 0;
  }

  .thread-tree-row-cols {
    grid-template-columns: var(--thread-tree-gutter-width) minmax(0, 1fr);
  }

  .thread-tree-row {
    gap: 0.5rem;
  }
}

/* HN-style flat thread tree (indent column + comhead / commtext / reply). */
.hn-thread-tree-mode.thread-tree-mode:has(> .thread-tree:not([hidden])) > .thread-tree-root-note.hn-story {
  align-items: flex-start;
  background-color: var(--bg);
  display: flex;
  flex-direction: row;
  gap: 0;
  grid-template-columns: unset;
  margin: 0 0 0.35rem var(--thread-tree-trunk-margin);
  min-width: 0;
  padding: 0 0 0.2rem;
  z-index: auto;
}

.hn-root-stack {
  flex: 1 1 auto;
  min-width: 0;
}

.hn-thread-tree-mode .hn-tree-avatar {
  align-self: start;
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 0.45rem;
  margin-top: var(--hn-tree-avatar-margin-top);
  text-decoration: none;
}

.hn-thread-tree-mode .hn-tree-avatar .thread-tree-avatar,
.hn-thread-tree-mode .hn-tree-avatar .thread-tree-avatar-fallback {
  border-radius: 0.22rem;
  font-size: 0.62rem;
  height: var(--hn-tree-avatar-size);
  width: var(--hn-tree-avatar-size);
}

.thread-tree-skeleton .hn-tree-avatar-skel {
  animation: skeleton-bob 1.45s ease-in-out infinite;
  background: var(--border);
  border-radius: 0.22rem;
  display: block;
  height: 1.35rem;
  width: 1.35rem;
}

.hn-thread-tree-mode > .hn-story.thread-tree-root-note .hn-comhead {
  margin-top: 0;
}

.hn-comment-tree.thread-tree {
  display: block;
}

.hn-comtr {
  font-family: Verdana, Geneva, ui-sans-serif, system-ui, sans-serif;
  margin: 0 0 0.35rem;
  min-width: 0;
}

.hn-comtr-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  position: relative;
}

.hn-ind {
  flex-shrink: 0;
}

/* HN tree: nested ul/li tree lines (CodePen-style ::before / ::after, avatar-aligned join). */
.hn-comment-tree.thread-tree > .hn-tree-ul {
  list-style: none;
  margin: 0;
  padding-left: 0.2rem;
}

.hn-tree-ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0 0.2rem;
}

.hn-thread-tree-mode .hn-tree-ul > li.hn-comtr {
  box-sizing: border-box;
  list-style: none;
  margin: 0rem 0 0rem 0.45rem;
  padding: 0.28rem 0 0.28rem var(--hn-tree-li-pad-left);
  position: relative;
}

.hn-thread-tree-mode .hn-tree-ul > li.hn-comtr::before {
  background-color: var(--hn-tree-rail-color);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: var(--hn-tree-rail-join);
  /* Span gutter to the avatar column (same x as CodePen: branch to icon). */
  width: calc(var(--hn-tree-li-pad-left) - 1px);
}

.hn-thread-tree-mode .hn-tree-ul > li.hn-comtr::after {
  background-color: var(--hn-tree-rail-color);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

.hn-thread-tree-mode .hn-tree-ul > li.hn-comtr:last-child::after {
  bottom: auto;
  height: var(--hn-tree-rail-join);
}

/*
 * Filtered replies are a second top-level list so they can stay hidden behind
 * the disclosure. When revealed, make that list a continuation of the visible
 * tree instead of starting a disconnected trunk.
 */
.hn-thread-tree-mode
  > .hn-comment-tree.has-expanded-filtered-replies
  > .hn-tree-ul
  > li.hn-comtr:last-child::after {
  bottom: 0;
  height: auto;
}

.hn-thread-tree-mode
  > .thread-tree-filtered-replies.continues-thread-tree:not([hidden])::before {
  background-color: var(--hn-tree-rail-color);
  content: "";
  height: calc(var(--thread-tree-trunk-gap) + 0.5rem);
  left: calc(0.2rem + 0.45rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1 * var(--thread-tree-trunk-gap));
  width: 1px;
  z-index: 0;
}

.hn-li-body {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  min-width: 0;
}

/* Vertical trunk from bottom-center of avatar down into nested replies (meets child branch lines). */
.hn-li-body:has(+ .hn-tree-ul) {
  position: relative;
}

.hn-li-body:has(+ .hn-tree-ul)::before {
  background-color: var(--hn-tree-rail-color);
  bottom: calc(-1 * var(--hn-tree-trunk-into-ul));
  content: "";
  left: calc(var(--hn-tree-avatar-size) / 2 - 0.5px);
  pointer-events: none;
  position: absolute;
  top: calc(var(--hn-tree-avatar-margin-top) + var(--hn-tree-avatar-size));
  width: 1px;
  z-index: 0;
}

/*
 * OP → first reply: trunk follows full OP height (any wrap / mobile), then bridges margin + gap
 * into the first reply join (same tail as nested `hn-li-body` uses). Implemented on `.hn-story`
 * so `top` + negative `bottom` stretch with content instead of a fixed `height` on the avatar.
 */
.hn-thread-tree-mode > .hn-story.thread-tree-root-note.hn-story:has(+ .hn-comment-tree:not([hidden])) {
  position: relative;
  z-index: 0;
}

.hn-thread-tree-mode > .hn-story.thread-tree-root-note.hn-story:has(+ .hn-comment-tree:not([hidden])) > .hn-tree-avatar {
  position: relative;
  z-index: 1;
}

.hn-thread-tree-mode > .hn-story.thread-tree-root-note.hn-story:has(+ .hn-comment-tree:not([hidden]))::after {
  background-color: var(--hn-tree-rail-color);
  bottom: calc(-1 * (var(--thread-tree-trunk-gap) + var(--hn-tree-trunk-into-ul)));
  content: "";
  left: calc(var(--hn-tree-avatar-size) / 2 - 0.5px);
  pointer-events: none;
  position: absolute;
  top: calc(var(--hn-tree-avatar-margin-top) + var(--hn-tree-avatar-size));
  width: 1px;
  z-index: 0;
}

.hn-default {
  flex: 1 1 auto;
  min-width: 0;
}

.hn-comhead {
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0 0 0.12rem;
}

.hn-story-comhead {
  font-size: 0.9rem;
}

.hn-comhead a {
  color: var(--fg);
}

.hn-navs,
.hn-navs a,
.hn-age a {
  color: var(--muted);
}

.hn-commtext.thread-tree-text {
  font-family: var(--font-mono-stack);
  font-size: 1rem;
  line-height: 1.45;
  margin-top: 0.08rem;
}

.hn-reply {
  margin: 0.3rem 0 0;
}

.hn-reply-font {
  font-size: 0.85rem;
}

.hn-continue {
  margin: 0.1rem 0 0.2rem;
}

.hn-continue-font {
  font-size: 0.85rem;
}

.hn-comtr-continue .hn-default {
  color: var(--muted);
}

.hn-collapse-nav .link-button {
  font-size: inherit;
  padding: 0;
}

.hn-tree-collapsible[hidden] {
  display: none !important;
}

.hn-comtr.is-selected .hn-comhead > a:first-of-type,
.hn-story.thread-tree-root-note.is-selected .hn-story-comhead > a:first-of-type {
  text-decoration: underline;
}

.thread-tree-summary-chain .hn-comtr {
  margin-bottom: 0.28rem;
}

.note-content p,
.note-body p {
  margin: 0.45rem 0;
  overflow-wrap: anywhere;
}

.note-content,
.reply-content {
  display: inline;
}

.ascii-note-content {
  display: block;
  width: 100%;
}

.ascii-ssr-media-mode {
  display: contents;
}

html[data-ptxt-image-mode="on"] .ascii-ssr-media-off,
html[data-ptxt-image-mode="off"] .ascii-ssr-media-on {
  display: none;
}

.note-content.is-collapsed,
.thread-tree-text.is-collapsed {
  max-height: 8.7rem;
  overflow: hidden;
  position: relative;
}

.note-content.is-collapsed::after,
.thread-tree-text.is-collapsed::after {
  background: linear-gradient(transparent, var(--bg));
  bottom: 0;
  content: "";
  height: 2.6rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.view-more {
  margin: 0.25rem 0 0.45rem;
}

.ascii-border {
  display: none;
}

.ascii-card,
.ascii-reply {
  background: transparent;
  border: 0;
  color: var(--fg);
  font-family: var(--font-mono-stack);
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  /* Allow shrinking inside grid/flex columns so long monospace lines do not force page-wide overflow. */
  min-width: 0;
  max-width: 100%;
  /* clip (not hidden): hidden+x forces overflow-y:auto and clips abspos avatars */
  overflow-x: clip;
  padding: 0;
  white-space: pre;
}

.ascii-source {
  display: none;
}

.ascii-card a,
.ascii-reply a,
.ascii-card button,
.ascii-reply button {
  color: var(--link);
}

.note-chrome {
  color: var(--muted);
}

.ascii-reference-placeholder {
  animation: text-skeleton-live 1.45s ease-in-out infinite;
  color: var(--muted);
  opacity: 0.78;
  text-decoration: none;
}

.ascii-reference-placeholder:hover,
.ascii-reference-placeholder:focus-visible {
  color: var(--link);
  text-decoration: none;
}

.note-image-toggle {
  color: var(--link);
  display: inline-block;
  font-family: var(--font-mono-stack);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
  word-break: break-all;
}

button.note-image-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  max-width: 100%;
  padding: 0;
  text-align: inherit;
}

.note-media-preview,
.note-image-preview {
  margin: 0;
  width: 100%;
}

.note-media-drawer {
  display: grid;
  gap: 0.5rem;
  margin: 0.45rem 0 0;
}

.ascii-card > .note-media-drawer,
.ascii-reply > .note-media-drawer {
  margin: 0.4rem 0 0.35rem;
}

/* When the parent comment displays a thread rail in its pre (it has
   children, or it isn't the last sibling), continue the rail down the
   left side of an expanded media drawer using the same `|` glyphs as
   the surrounding monospace text so the column visually flows into the
   next reply. */
.comment[data-ascii-has-children="true"] .ascii-reply > .note-media-drawer:not([hidden]),
.comment[data-ascii-is-last="false"] .ascii-reply > .note-media-drawer:not([hidden]) {
  padding-left: 1ch;
  position: relative;
}

.comment[data-ascii-has-children="true"] .ascii-reply > .note-media-drawer:not([hidden])::before,
.comment[data-ascii-is-last="false"] .ascii-reply > .note-media-drawer:not([hidden])::before {
  bottom: 0;
  color: var(--muted);
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|";
  font-family: var(--font-mono-stack);
  font-size: inherit;
  left: 0;
  line-height: 1.25em;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  white-space: pre;
  width: 1ch;
}

.ascii-inline-media {
  display: block;
  margin: 0.2rem 0;
  width: 100%;
}

.note-media-grid-row {
  white-space: normal;
}

.reply-media-row.note-media-grid-row {
  align-items: start;
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr);
}

.selected-media-row.note-media-grid-row {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1ch;
}

.reference-media-row.note-media-grid-row {
  align-items: start;
  display: grid;
  grid-template-columns: 6ch minmax(0, 1fr) 5ch;
}

.note-media-grid-wrap {
  background: var(--bg);
  display: inline-grid;
  gap: 0.35rem;
  max-width: 100%;
  vertical-align: top;
  white-space: normal;
}

.note-media-grid-edge,
.note-media-reply-prefix,
.note-media-reference-prefix,
.note-media-reference-suffix {
  --note-media-rail-fill: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|";
  align-self: stretch;
  color: var(--muted);
  display: block;
  font-family: var(--font-mono-stack);
  line-height: 1.25em;
  overflow: hidden;
  position: relative;
  white-space: pre;
}

.note-media-grid-edge {
  width: 1ch;
}

.note-media-reply-prefix {
  width: 5ch;
}

.note-media-reference-prefix {
  --note-media-reference-prefix-fill: "|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |";
  width: 6ch;
}

.note-media-reference-suffix {
  --note-media-reference-suffix-fill: "|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |\A|   |";
  width: 5ch;
}

.note-media-grid-edge::before,
.note-media-reply-prefix.has-rail::before,
.note-media-reference-prefix::before,
.note-media-reference-suffix::before {
  content: var(--note-media-rail-fill);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
}

.note-media-reference-prefix::before {
  content: var(--note-media-reference-prefix-fill);
}

.note-media-reference-suffix::before {
  content: var(--note-media-reference-suffix-fill);
}

.reply-media-row > .note-media-grid-wrap {
  width: 100%;
}

.selected-media-row > .note-media-grid-wrap {
  width: calc(100% - 2ch);
}

.selected-media-row:has(.note-media-grid-edge-left) {
  grid-template-columns: 1ch minmax(0, 1fr) 1ch;
}

.selected-media-row:has(.note-media-grid-edge-left) > .note-media-grid-wrap {
  justify-self: center;
  width: min(100%, calc(100% - 2ch));
}

.note-image-boxed-row > .note-media-grid-wrap {
  box-sizing: border-box;
  padding: 0 0.65rem;
  width: 100%;
}

.note-media-grid-wrap:has(> .note-media-grid-1) {
  justify-items: center;
}

.note-media-grid {
  aspect-ratio: 1 / 1;
  background: var(--bg);
  display: grid;
  gap: 2px;
  grid-auto-rows: minmax(0, 1fr);
  max-height: min(58vh, 24rem);
  overflow: hidden;
  width: 100%;
}

.note-media-grid-1 {
  aspect-ratio: var(--note-media-image-aspect-ratio, 4 / 3);
  grid-template-columns: 1fr;
  justify-items: center;
  max-height: min(64vh, 34rem);
}

.note-media-grid-1.note-media-grid-single-video {
  aspect-ratio: var(--note-media-image-aspect-ratio, 16 / 9);
}

.note-media-grid-2 {
  aspect-ratio: 2 / 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.note-media-grid-3,
.note-media-grid-4 {
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.note-media-grid-5,
.note-media-grid-6 {
  aspect-ratio: 3 / 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.note-media-grid-3 .note-media-tile:first-child,
.note-media-grid-5 .note-media-tile:first-child {
  grid-row: span 2;
}

.note-media-tile {
  align-items: center;
  background: var(--bg);
  color: var(--link);
  cursor: zoom-in;
  display: flex;
  font: inherit;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.note-media-grid-1 .note-media-tile {
  aspect-ratio: inherit;
  max-height: min(64vh, 34rem);
}

.note-media-tile img,
.note-media-tile video {
  background: var(--bg);
  border: 0;
  border-radius: 0;
  display: block;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
  width: 100%;
}

.note-media-video-tile {
  cursor: default;
}

.note-media-video-tile video {
  object-fit: contain;
}

.note-media-grid-1 .note-media-tile img,
.note-media-grid-1 .note-media-tile video {
  height: auto;
  max-height: min(64vh, 34rem);
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  width: auto;
}

.note-media-grid-1 .note-media-video-tile-single {
  overflow: visible;
}

.note-media-grid-1 .note-media-video-tile-single video {
  height: 100%;
  max-height: min(64vh, 34rem);
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  width: 100%;
}

.note-media-more-tile {
  cursor: pointer;
  font-size: clamp(1.5rem, 8vw, 3rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.ascii-line.note-image-boxed-row {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  white-space: normal;
  width: var(--ascii-box-row-width, 100%);
  max-width: 100%;
}

.ascii-line.note-image-boxed-row {
  white-space: pre;
}

.ascii-line.note-image-boxed-row.note-media-grid-row {
  white-space: normal;
}

.ascii-line.note-image-boxed-row > .ascii-inline-media,
.ascii-line.note-image-boxed-row > .note-image-toggle {
  min-width: 0;
}

.ascii-line.note-image-boxed-row > .note-image-toggle {
  display: block;
  padding-right: 0.4rem;
}

.note-footer-media-link {
  padding: 0;
}

.note-media-preview img,
.note-media-preview video,
.note-image-preview img {
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  display: block;
  max-height: min(60vh, 28rem);
  max-width: min(100%, 36rem);
}

.note-media-preview video {
  width: min(100%, 36rem);
}

.note-video-fallback {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.note-image-preview img.is-clickable {
  cursor: zoom-in;
}

.note-image-preview img.is-collapsible {
  cursor: pointer;
}

.image-viewer-dialog {
  background: transparent;
  border: 0;
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 0;
  width: 100vw;
}

.image-viewer-dialog::backdrop {
  background: rgb(0 0 0 / 82%);
}

.image-viewer-close-row {
  display: flex;
  justify-content: flex-end;
  left: 0;
  margin: 0;
  padding: 1rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

.image-viewer-close-button {
  color: #fff;
  min-width: 2.25rem;
  padding: 0.25rem 0.5rem;
  text-shadow: 0 0 2px rgb(0 0 0 / 80%);
}

.image-viewer-body {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overscroll-behavior: contain;
  padding: 3.5rem 1rem 1rem;
  position: relative;
  width: 100vw;
}

.image-viewer-media {
  align-items: center;
  display: flex;
  justify-content: center;
  max-height: calc(100vh - 4.5rem);
  max-width: min(96vw, 96rem);
}

.image-viewer-media img,
.image-viewer-media video {
  background: #000;
  display: block;
  max-height: calc(100vh - 4.5rem);
  max-width: min(96vw, 96rem);
  object-fit: contain;
}

.image-viewer-nav {
  align-items: center;
  background: rgb(0 0 0 / 55%);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.4rem;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  z-index: 2;
}

.image-viewer-nav:hover,
.image-viewer-nav:focus-visible {
  background: rgb(0 0 0 / 75%);
}

.image-viewer-nav-prev {
  left: 1rem;
}

.image-viewer-nav-next {
  right: 1rem;
}

.ascii-line {
  display: inline;
  margin: 0;
}

.ascii-row {
  display: grid;
  gap: 0;
  grid-template-columns: 1ch minmax(0, calc(100% - 2ch)) 1ch;
  margin-left: auto;
  margin-right: auto;
  width: min(var(--page-max), 100%);
}

.ascii-edge {
  color: var(--border);
  user-select: none;
}

.ascii-content {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.login-intro {
  margin: 0;
}

.login-intro p {
  margin: 0;
}

.login-tabs {
  margin-top: 0.35rem;
}

/* Login page only: no horizontal rules around the method tab strip (profile-tabs adds top border globally). */
.login-tabs.profile-tabs {
  border-top: none;
  padding-top: 0;
}

.login-tabs .user-tab-nav {
  border-bottom: none;
  margin-bottom: 0.75rem;
  padding-bottom: 0;
}

.login-split {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
  width: min(var(--page-max), 100%);
}

.login-split-column--signup {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.login-split-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
}

.login-signup-panel.login-tab-panel {
  margin-top: 0.35rem;
}

.login-signup-credentials {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.login-signup-field-label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.login-signup-secret-row {
  display: grid;
  gap: 0.25rem;
}

.login-signup-field-row {
  align-items: stretch;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 1fr auto;
}

.login-signup-field-row input {
  min-width: 0;
  width: 100%;
}

.login-signup-secret-input {
  font-family: var(--font-mono-stack);
  font-size: 0.8rem;
}

.login-signup-continue-wrap {
  margin: 0.35rem 0 0;
}

.login-tab-panel {
  border: 1px solid var(--border);
  padding: 0.75rem;
}

.login-tab-panel h2 {
  margin-top: 0;
}

.login-tab-panel p {
  margin-top: 0;
}

.login-tab-panel form {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  margin-top: 0.5rem;
}

.login-tab-panel form.login-tab-stacked-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: min(100%, 34rem);
}

.login-tab-stacked-form input {
  min-width: 0;
  width: 100%;
}

.login-tab-panel-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.login-tab-panel > .login-tab-panel-actions {
  margin-top: 0.5rem;
  width: min(100%, 34rem);
}

.login-tab-panel input {
  width: min(100%, 34rem);
}

.login-tab-panel-danger {
  border-color: var(--danger);
}

.login-tab-panel-danger h2 {
  color: var(--danger);
}

.login-recent-accounts-panel {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 1rem;
}

.login-recent-accounts-panel h3,
.login-recent-accounts-panel p {
  margin-top: 0;
}

.login-recent-accounts-list {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.login-recent-account {
  align-items: center;
  border: 1px solid var(--border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.65rem 0.75rem;
}

.login-recent-account-meta {
  display: grid;
  gap: 0.15rem;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  min-width: 0;
}

.login-recent-account-avatar {
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  display: inline-flex;
  grid-row: 1 / span 2;
  height: 2.25rem;
  justify-content: center;
  overflow: hidden;
  width: 2.25rem;
}

.login-recent-account-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.login-recent-account-meta strong,
.login-recent-account-meta small {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-recent-account-actions {
  display: flex;
  gap: 0.45rem;
}

.login-recent-account-actions button[data-remove-account] {
  border-color: var(--danger);
  color: var(--danger);
}

.settings-account-list {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}

.settings-account-item {
  align-items: center;
  border: 1px solid var(--border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.65rem 0.75rem;
}

.settings-account-avatar {
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  display: inline-flex;
  height: 2.4rem;
  justify-content: center;
  overflow: hidden;
  width: 2.4rem;
}

.settings-account-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.settings-account-meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

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

.settings-account-actions {
  display: flex;
  gap: 0.45rem;
}

.login-help-panel {
  display: grid;
  gap: 0.5rem;
}

.login-help-panel p {
  margin: 0;
}

.login-help-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.2rem;
}

.login-help-list li {
  line-height: 1.3;
}

.profile-content {
  display: flex;
  gap: 1rem;
}

.user-profile-column {
  max-width: 640px;
  min-width: 0;
}

.user-profile-column .feed {
  min-width: 0;
}

.user-profile-column .profile-tabs,
.user-profile-column .user-tab-panel,
.user-profile-column .feed,
.user-profile-column .note,
.user-profile-column .ascii-card,
.user-profile-column .note-media-drawer {
  max-width: 100%;
  min-width: 0;
}

.user-profile-column .profile-stats-row {
  margin: 0.4rem 0 0.15rem;
}

.user-profile-column .user-tabs {
  margin-top: 0.3rem;
}

.user-profile-column .profile-tabs {
  padding-top: 0.2rem;
}

.profile-modern {
  margin-top: 0;
}

.profile-main {
  margin-top: 0;
  padding: 0 0.75rem;
}

.profile-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0.75rem;
}

.profile-hero-top {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}

.profile-hero-options-menu.ascii-action-menu {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.profile-hero-options-trigger {
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--link);
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  padding: 0;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}

.profile-hero-options-trigger::before {
  content: "[";
}

.profile-hero-options-trigger::after {
  content: "]";
}

.profile-hero-options-trigger:hover {
  text-decoration: underline;
}

.profile-hero-options-trigger:focus-visible {
  border-radius: 0.12rem;
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.profile-hero-options-skeleton {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
}

.profile-hero-nip05-skeleton {
  line-height: 1.15;
  margin: 0;
  max-width: 20rem;
  padding: 0;
}

.profile-hero-meta-skeleton {
  line-height: 1.15;
  margin: 0;
  max-width: 22rem;
  padding: 0;
}

.profile-hero-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.profile-hero-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
}

.profile-hero-media-row {
  align-items: flex-start;
  column-gap: 1.35rem;
  display: flex;
  min-width: 0;
  width: 100%;
}

.profile-avatar-wrap {
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  max-height: min(62vw, 12.5rem);
  max-width: min(40vw, 12.5rem);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.profile-hero-side {
  align-items: flex-start;
  align-self: stretch;
  container-name: profile-hero-side;
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: flex-start;
  min-width: 0;
  padding-top: 0.35rem;
}

.profile-hero-side > :first-child {
  margin-top: auto;
}

.profile-hero-top .profile-display-name {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-hero .profile-display-name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero-nip05 {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.profile-hero-metadata {
  font-size: 0.92em;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  padding-top: 0.45rem;
}

.profile-guest-wot-notice {
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 0.35rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.7rem;
}

.profile-display-name {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.25;
}

.profile-hero-options-menu .profile-follow-mute {
  display: contents;
}

.profile-hero .profile-actions {
  align-items: baseline;
  align-self: flex-start;
  column-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.profile-follow-mute {
  align-items: baseline;
  column-gap: 2ch;
  display: inline-flex;
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

/* Bracketed link actions: label text is e.g. Follow / Mute / Edit profile; brackets from pseudo-elements. */
.profile-follow-mute-link,
.profile-action-link {
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--link);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.125rem;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition:
    color 0.12s ease,
    text-decoration-color 0.12s ease;
  white-space: nowrap;
}

.profile-follow-mute-link::before,
.profile-action-link::before {
  content: "[";
}

.profile-follow-mute-link::after,
.profile-action-link::after {
  content: "]";
}

.profile-follow-mute-link:hover,
.profile-action-link:hover {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}

.profile-follow-mute-link:focus-visible,
.profile-action-link:focus-visible {
  border-radius: 0.12rem;
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.profile-follow-mute-link[disabled],
.profile-follow-mute-link[aria-disabled="true"],
.profile-action-link[disabled],
.profile-action-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  text-decoration: none;
}

.profile-follow-mute--skeleton .profile-follow-mute-skeleton-line {
  display: inline-block;
  font-size: 1.125rem;
  letter-spacing: normal;
  white-space: nowrap;
}

.profile-npub-copy {
  cursor: pointer;
  position: relative;
}

.profile-npub-copy:focus-visible {
  border-radius: 0.2rem;
  outline: 1px dashed var(--border);
  outline-offset: 2px;
}

.profile-npub-copy-toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  bottom: calc(100% + 0.35rem);
  box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.25);
  color: var(--fg);
  font-family: var(--font-ui-stack, system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  left: 50%;
  line-height: 1.2;
  max-width: min(18rem, calc(100vw - 2rem));
  opacity: 0;
  padding: 0.35rem 0.55rem;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transform: translateX(-50%) translateY(0.2rem);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0.12s ease;
  visibility: hidden;
  white-space: normal;
  z-index: 5;
}

.profile-npub-copy--toast .profile-npub-copy-toast {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

.profile-npub-block--header {
  align-self: stretch;
  line-height: 1.35;
  margin-top: 0;
  max-width: 100%;
  min-width: 0;
}

.profile-npub-block--header .profile-npub-grid {
  font-size: 1rem;
  letter-spacing: 0.2em;
  gap: 0.05em;
}

@media (min-width: 701px) {
  .profile-hero-media-row {
    align-items: stretch;
  }

  .profile-avatar-wrap {
    aspect-ratio: 1;
    flex: 0 0 auto;
    height: auto;
    max-height: min(34vw, 9.25rem);
    max-width: min(34vw, 9.25rem);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: min(34vw, 9.25rem);
  }

  .profile-npub-block--header .profile-npub-grid {
    gap: 0.08em;
    letter-spacing: 0.06em;
  }

  .profile-modern .profile-avatar,
  .profile-modern .profile-avatar-fallback {
    height: 100%;
    max-height: none;
    max-width: none;
    width: 100%;
  }
}

.profile-npub-grid {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono-stack);
  font-size: 0.8rem;
  gap: 0.15em;
  letter-spacing: 0.02em;
}

.profile-npub-grid-row {
  column-gap: 1.5em;
  display: flex;
  flex-wrap: nowrap;
}

@media (min-width: 701px) {
  @container profile-hero-side (min-width: 25rem) {
    .profile-npub-block--header .profile-npub-grid {
      column-gap: 1.25em;
      display: grid;
      grid-template-columns: repeat(8, max-content);
      row-gap: 0.08em;
      width: max-content;
    }

    .profile-npub-block--header .profile-npub-grid-row {
      display: contents;
    }

    .profile-npub-block--header .profile-npub-cell {
      font-weight: 400;
    }

    .profile-npub-block--header .profile-npub-grid-row:nth-child(-n + 2) .profile-npub-cell:nth-child(odd),
    .profile-npub-block--header .profile-npub-grid-row:nth-child(n + 3) .profile-npub-cell:nth-child(even) {
      font-weight: 700;
    }
  }
}

.profile-npub-cell {
  flex: 0 0 auto;
  font-weight: 400;
  white-space: nowrap;
}

.profile-npub-cell--emph {
  font-weight: 700;
}

.profile-npub-block--skeleton .profile-npub-grid {
  opacity: 0.78;
}

.profile-npub-skel-cell.text-skeleton {
  animation: text-skeleton-live 1.45s ease-in-out infinite;
  border-radius: 0.2rem;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.profile-npub-block--skeleton .profile-npub-grid-row:nth-child(2) .profile-npub-skel-cell {
  animation-delay: 0.08s;
}

.profile-npub-block--skeleton .profile-npub-grid-row:nth-child(3) .profile-npub-skel-cell {
  animation-delay: 0.16s;
}

.profile-npub-block--skeleton .profile-npub-grid-row:nth-child(4) .profile-npub-skel-cell {
  animation-delay: 0.24s;
}

.profile-avatar {
  background: var(--panel);
  border: 3px solid var(--bg);
  border-radius: 50%;
  height: 96px;
  object-fit: cover;
  width: 96px;
}

.profile-modern .profile-avatar {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  box-sizing: border-box;
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  object-fit: cover;
  width: auto;
}

.profile-modern .profile-avatar-fallback {
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  width: auto;
}

.profile-avatar-fallback {
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
}

.profile-ident {
  margin-top: 1rem;
  min-width: 0;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

.profile-ident p {
  margin: 0.2rem 0;
  max-width: 100%;
}

.profile img,
.profile-content img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.profile-ascii-avatar-fallback {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  font-weight: 700;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.columns {
  columns: 2;
}

.thread-replies {
  min-width: 0;
}

.comments {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Comment layout for threaded replies. The pre itself is full-width with a
   `|` rail at column 0; the avatar is absolutely positioned over the rail
   column so the rail glyphs above and below visually flow into and out of
   it like a single vertical thread. Each depth level adds 1ch of left
   margin so a child's rail column lines up under its parent's rail
   column. */
.comment {
  --avatar-left: -0.4ch;
  --avatar-size: 2.4em;
  --reply-depth-step: 1ch;
  --reply-rail-x: calc(var(--avatar-left) + var(--avatar-size) / 2 - 0.5ch);
  --reply-parent-rail-x: calc(var(--reply-rail-x) - var(--reply-depth-step));
  font-family: var(--font-mono-stack);
  margin-left: calc((var(--depth) - 1) * var(--reply-depth-step));
  /* Top margin keeps the absolutely-positioned avatar (which overflows
     above the first text row by ~half its height) from colliding with
     the parent's last reply line above. */
  margin-top: 0.9em;
  padding-left: 1ch;
  position: relative;
}

.comment[data-depth="1"] {
  --reply-parent-rail-x: var(--reply-rail-x);
}

.comments > .comment:first-child {
  margin-top: 0.4em;
}

/* Linear thread: wrapper span must not create a layout box so reply lines
   align with the monospace grid (see `display: contents` caveats vs hidden). */
.thread-reply-collapse:not([hidden]) {
  display: contents;
}

/* Tree view: collapsing a card hides its nested reply list and connector ul. */
.hn-comtr.thread-tree-item:has(.hn-tree-collapsible[hidden]) > .hn-tree-ul {
  display: none;
}

.comment-avatar {
  /* Sit just to the right of the rail column so the rail `|` glyph at
     pre col 0 (centered at 0.5ch from the padding edge) remains visible
     to the left of the avatar, with the avatar starting at ~1.2ch from
     the padding edge. Centered vertically on the first text line
     (line-height 1.25em → center at 0.625em from pre top). */
  box-sizing: border-box;
  position: absolute;
  left: var(--avatar-left);
  top: calc(0.625em - var(--avatar-size) / 2);
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
  text-decoration: none;
  background: var(--panel);
}

.comment-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.comment-avatar:not(:has(img)) {
  align-items: center;
  border: 1px solid var(--border);
  display: flex;
  font-weight: 700;
  justify-content: center;
}

.comment-avatar:not(:has(img))::before {
  content: "@";
  line-height: 1;
}

/* Header line of the reply pre: indent past the avatar so the username
   text starts to the right of the avatar's right edge with a small gap.
   Avatar left edge is at 1.2ch from the padding edge; right edge is at
   1.2ch + avatar-size. Add 0.6ch gap before the username starts. */
.ascii-reply > .ascii-line:first-child {
  padding-left: calc(1ch + var(--avatar-size));
}

.note.thread-focus-selected {
  --avatar-size: 2.4em;
  font-family: var(--font-mono-stack);
  /* No padding-left: the selected note's content (and reply link) sits
     flush with the comment's outer-left edge so it visually flows in the
     column directly under the avatar. The header line is still pushed
     past the avatar via padding-left on its first :ascii-line. */
  position: relative;
}

.note-avatar {
  /* Sit flush with the left edge of the selected note. The header line
     is pushed past the avatar's right edge via padding-left on the
     first :ascii-line; subsequent content lines wrap under the avatar. */
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: calc(0.625em - var(--avatar-size) / 2);
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
  text-decoration: none;
  background: var(--panel);
}

.note-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.note-avatar:not(:has(img)) {
  align-items: center;
  border: 1px solid var(--border);
  display: flex;
  font-weight: 700;
  justify-content: center;
}

.note-avatar:not(:has(img))::before {
  content: "@";
  line-height: 1;
}

.note.thread-focus-selected .ascii-reply > .ascii-line:first-child {
  /* Push the header (username + age + actions) past the avatar's right
     edge with a small gap. Avatar is at left: 0, width var(--avatar-size). */
  padding-left: calc(var(--avatar-size) + 0.8ch);
}

.note.thread-focus-selected .note-content {
  /* Push the first content line below the avatar's bottom edge. The
     avatar is centered on the header row (line-height 1.25em → center at
     0.625em from pre top), so its bottom edge is at
     0.625em + avatar-size / 2. Subtract the natural top of the next line
     (1.25em) and add a little gap. */
  display: block;
  margin-top: calc(var(--avatar-size) / 2);
}

/* Feed ascii-card notes: avatar on first header row, positioned vs `pre` so `ch` matches glyphs. */
article.note[data-ascii-kind="note"] {
  --avatar-size: 2.4em;
  position: relative;
}

/* Extra top gap so the tile (centered on row, half above pre) clears the prior note's footer.
   Shared horizontal inset for repost banner + "Replying to" row (see feedReplyContextInsetRunes in ascii.js). */
article.note[data-ascii-kind="note"]:has(.note-feed-avatar) {
  --feed-avatar-gutter: calc(3ch + var(--avatar-size) + 3.65ch);
  --feed-repost-text-start: calc(var(--feed-avatar-gutter) + 0.55em);
  margin: calc(0.75rem + var(--avatar-size) * 0.5 - 0.45em) 0 0.75rem;
}

article.note[data-ascii-kind="note"] .ascii-card {
  position: relative;
}

article.note[data-ascii-kind="note"] .ascii-card > .note-feed-avatar {
  align-items: center;
  background: var(--panel);
  border-radius: 0;
  box-shadow:
    0 0 0 1px var(--panel),
    0 0 0 2px color-mix(in oklab, var(--fg) 88%, transparent),
    0 0 0 3px var(--fg);
  display: flex;
  height: var(--avatar-size);
  justify-content: center;
  /* Same column as the `+--` chrome (first three cells of the pre). */
  left: 3ch;
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
  text-decoration: none;
  top: calc(0.625em - var(--avatar-size) / 2);
  width: var(--avatar-size);
  z-index: 2;
}

article.note[data-ascii-kind="note"] .note-feed-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

article.note[data-ascii-kind="note"] .note-feed-avatar:not(:has(img)) {
  border: 1px solid var(--border);
  font-weight: 700;
}

article.note[data-ascii-kind="note"] .note-feed-avatar:not(:has(img))::before {
  content: "@";
  line-height: 1;
}

/* Header is `+--` (chrome) + `.ascii-line-feed-header-tail` (name, age, dashes); reserve tile + ring + gap. */
article.note[data-ascii-kind="note"] .ascii-line-feed-header-tail {
  padding-left: calc(var(--avatar-size) + 0.85ch + 4px);
}

article.note[data-ascii-kind="note"] .ascii-card > .note-content:has(> .ascii-line-reply-context:first-child) {
  /* No spacer box row when reply context exists; drop content so it clears the
     header-centered avatar's lower half (same geometry as focused thread). */
  display: block;
  /* margin-top: calc(var(--avatar-size) / 2 - 0.35em); */
}

/* Reserve a full connector row above the first visible reply and center a
   double `|` connector over that reply's avatar. This gives focused thread
   replies a clearer visual bridge back to the selected parent reply. */
#thread-replies > .comment:first-child:not(:only-child) {
  margin-top: 2.5em;
}

#thread-replies > .comment:first-child:not(:only-child)::before {
  color: var(--muted);
  content: "|\A|";
  left: var(--reply-parent-rail-x);
  line-height: 1.25em;
  pointer-events: none;
  position: absolute;
  top: -2.5em;
  white-space: pre;
  z-index: 1;
}

.thread-back,
.continue-thread {
  margin: 0.5rem 0;
}

.thread-back-secondary {
  color: var(--muted);
}

.continue-thread {
  white-space: pre;
}

.continue-thread {
  display: none;
}

.comment[data-depth="5"] > .continue-thread-desktop {
  display: block;
}

.comment[data-depth="5"] > .comments {
  display: none;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--link);
  padding: 0;
  cursor: pointer;
}

.ascii-reaction-vote {
  font-size: 1.2em;
}

.ascii-action-menu {
  display: inline;
  position: relative;
}

.ascii-action-menu-list {
  background: var(--panel);
  border: 1px solid var(--border);
  display: none;
  left: auto;
  min-width: 24ch;
  padding: 0.35rem 0.5rem;
  position: absolute;
  right: 0;
  top: 1.4em;
  z-index: 10;
}

.ascii-action-menu.is-open .ascii-action-menu-list {
  display: grid;
  gap: 0.2rem;
}

.ascii-action-menu-list a,
.ascii-action-menu-list button {
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ascii-action-menu-list {
    font-size: clamp(1rem, 3.2vw, 1.15rem);
    line-height: 1.35;
    min-width: 26ch;
    padding: 0.5rem 0.6rem;
  }

  .ascii-action-menu.is-open .ascii-action-menu-list {
    gap: 0.35rem;
  }

  .ascii-action-menu-list a,
  .ascii-action-menu-list button {
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    margin: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.5rem;
    width: 100%;
  }
}

.ascii-line[data-ascii-ref-hit="1"] {
  cursor: pointer;
}

.ascii-card .ascii-reference-card > a.ascii-line,
.ascii-card .ascii-reference-card > a.ascii-line:hover,
.ascii-card .ascii-reference-card > a.ascii-line:focus-visible,
.ascii-card .ascii-reference-card .ascii-reference-line-link,
.ascii-card .ascii-reference-card .ascii-reference-line-link:hover,
.ascii-card .ascii-reference-card .ascii-reference-line-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.load-more {
  display: block;
  margin: 1rem auto;
}

@keyframes button-progress-bar {
  0% {
    background-size: 8% 100%;
    opacity: 0.72;
  }

  45% {
    background-size: 68% 100%;
    opacity: 1;
  }

  100% {
    background-size: 100% 100%;
    opacity: 0.88;
  }
}

/* User profile: tab strip + one visible panel (radio inputs use clip-only hiding). */
.user-tabs {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
  width: min(var(--page-max), 100%);
}

.profile-tabs {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

/* Stats dash rule (::after) replaces border-top here; avoid a double rule above Posts/Replies/Media. */
.user-profile-column .profile-tabs {
  border-top: none;
}

.edit-profile-tabs {
  border-top: none;
}

.user-tab-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  margin-bottom: 0.65rem;
}

.user-tab-sep {
  color: var(--muted);
  user-select: none;
}

.user-tab-label {
  color: var(--link);
  cursor: pointer;
}

.user-tab-label:hover {
  text-decoration: underline;
}

.user-tab-state {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.user-tab-panel {
  display: none;
}

.user-tab-state:checked + .user-tab-panel {
  display: block;
}

.user-tab-panel-heading {
  margin-top: 0;
}

.user-tabs:has(#user-tab-posts:checked) .user-tab-nav label[for="user-tab-posts"],
.user-tabs:has(#user-tab-replies:checked) .user-tab-nav label[for="user-tab-replies"],
.user-tabs:has(#user-tab-media:checked) .user-tab-nav label[for="user-tab-media"],
.login-tabs:has(#login-tab-readonly:checked) .user-tab-nav label[for="login-tab-readonly"],
.login-tabs:has(#login-tab-nip07:checked) .user-tab-nav label[for="login-tab-nip07"],
.login-tabs:has(#login-tab-yolo:checked) .user-tab-nav label[for="login-tab-yolo"],
.edit-profile-tabs:has(#edit-profile-tab-metadata:checked) .user-tab-nav label[for="edit-profile-tab-metadata"],
.edit-profile-tabs:has(#edit-profile-tab-relays:checked) .user-tab-nav label[for="edit-profile-tab-relays"] {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.profile-stats-row {
  align-items: center;
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.4rem 0;
  padding-bottom: 0.25rem;
}

.profile-stats-row::after {
  color: var(--border);
  content: "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
  display: block;
  flex: 0 0 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.1;
  margin-top: 0.25rem;
  overflow: hidden;
  white-space: nowrap;
}

.profile-stats-sep {
  flex: 0 0 auto;
  user-select: none;
}

.profile-stat-link {
  color: var(--link);
}

@media (min-width: 1024px) {
  .profile-relays-shortcut,
  .profile-relays-shortcut-sep {
    display: none;
  }
}

.profile-search-form {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0 0.35rem;
}

.profile-search-form input[type="search"] {
  flex: 1;
  max-width: 24rem;
}

.profile-follow-pager {
  margin-top: 0.6rem;
}

.profile-follow-secondary {
  display: inline-block;
  max-width: min(14rem, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.profile-follow-panel {
  display: grid;
  gap: 0.8rem;
}

.profile-follow-summary strong {
  color: var(--text);
}

.profile-follow-search {
  display: grid;
  gap: 0.35rem;
}

.profile-follow-search input[type="search"] {
  max-width: 100%;
}

.profile-follow-results {
  max-height: min(30rem, 60vh);
  overflow: auto;
}

.profile-follow-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-follow-link {
  align-items: center;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.75rem;
  text-decoration: none;
}

.profile-follow-link:hover,
.profile-follow-link:focus-visible {
  background: var(--surface-2);
}

.profile-follow-avatar {
  align-items: center;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  overflow: hidden;
  width: 2.75rem;
}

.profile-follow-avatar-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.profile-follow-avatar-fallback {
  color: var(--muted);
}

.profile-follow-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.profile-follow-display,
.profile-follow-secondary,
.profile-follow-npub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-follow-display {
  color: var(--text);
}

.profile-follow-npub {
  font-size: 0.9rem;
}

.profile-follow-empty-item,
.profile-follow-filter-empty {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0.75rem;
}

.profile-card {
  border: none;
  border-radius: 0;
  padding: 0.75rem;
}

.profile-card .ascii-row {
  width: 100%;
}

.profile-card .ascii-content {
  padding-left: 0;
  padding-right: 0;
}

.profile-card .ascii-edge {
  display: none;
}

.profile-right-rail {
  align-content: start;
  gap: 0.8rem;
}

.profile-right-panel {
  margin-top: 0;
  min-width: 0;
  width: 100%;
}

.profile-right-panel .ascii-row {
  display: block;
  width: 100%;
}

.profile-ident-grids {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

@media (min-width: 701px) {
  .profile-ident-grids {
    align-items: flex-start;
    column-gap: 1.1rem;
    flex-direction: row;
    flex-wrap: nowrap;
    row-gap: 0.5rem;
  }

  .profile-ident-grid-column {
    flex: 1 1 0;
    min-width: 0;
  }
}

.profile-id-heading {
  font-size: 0.82rem;
  margin: 0.5rem 0 0.15rem;
}

.profile-id-heading:first-of-type {
  margin-top: 0.25rem;
}

.profile-ident-grid-wrap {
  margin-bottom: 0.35rem;
}

.profile-ident-grid-wrap.profile-npub-copy {
  align-self: flex-start;
  width: fit-content;
}

.profile-right-panel .profile-npub-grid {
  font-size: 0.75rem;
}

.profile-right-id-skel-grid {
  min-height: 4.5rem;
}

.profile-right-panel .ascii-content {
  max-width: 100%;
  overflow-wrap: break-word;
  padding: 0;
  white-space: normal;
  word-break: normal;
}

.profile-right-panel .ascii-content p,
.profile-right-panel .ascii-content h2,
.profile-right-panel .ascii-content span {
  overflow-wrap: break-word;
  white-space: normal;
}

.profile-right-panel .mono {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-right-panel .ascii-edge,
.profile-right-panel .ascii-border {
  display: none;
}

.profile-mobile-only-tab {
  display: none;
}

.profile-mobile-only-panel {
  display: none;
}

@media (min-width: 701px) {
  .user-tab-state#user-tab-relays:checked + .profile-mobile-only-panel {
    display: none;
  }
}

@media (max-width: 1199px) {
  .app-shell {
    grid-template-columns: 74px minmax(0, 640px) 320px;
  }

  .route-keepalive-layer--thread[data-route-keepalive-active="1"] {
    grid-template-columns: minmax(0, 640px) 320px;
  }

  .left-rail {
    align-items: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .left-rail .rail-brand,
  .left-rail .rail-label,
  .left-rail .rail-user-copy {
    display: none;
  }

  .left-rail .rail-nav a {
    justify-content: center;
    padding: 0.3rem;
  }

  .left-rail .rail-user {
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: 74px minmax(0, 700px);
  }

  .route-keepalive-layer--thread[data-route-keepalive-active="1"] {
    grid-column: 2 / 3;
    grid-template-columns: minmax(0, 700px);
  }

  .route-keepalive-layer--thread[data-route-keepalive-active="1"] > .right-rail {
    display: none;
  }

  .right-rail {
    display: none;
  }

  .feed-column {
    border-right: 0;
  }

}

/* Thread (desktop): five-column shell — feed column centered on viewport. */
@media (min-width: 1024px) and (max-width: 1199px) {
  body.feed-shell.thread-route-layout .app-shell {
    --shell-left-rail: 74px;
    --shell-feed-max: 640px;
    --shell-right-rail: 320px;
    --shell-column-gap: 1.5rem;
    --shell-feed-center-gutter: max(0.75rem, calc(50vw - var(--shell-left-rail) - (2 * var(--shell-column-gap)) - (var(--shell-feed-max) / 2)));
    column-gap: var(--shell-column-gap);
    grid-template-columns:
      var(--shell-feed-center-gutter)
      var(--shell-left-rail)
      minmax(0, var(--shell-feed-max))
      var(--shell-right-rail)
      minmax(0.75rem, 1fr);
  }

  body.feed-shell.thread-route-layout .app-shell .left-rail {
    grid-column: 2;
  }

  body.feed-shell.thread-route-layout .app-shell .feed-column {
    grid-column: 3;
  }

  body.feed-shell.thread-route-layout .route-keepalive-layer--feed[data-route-keepalive-active="0"] {
    grid-column: 3;
  }

  body.feed-shell.thread-route-layout .app-shell .right-rail {
    grid-column: 4;
  }
}

@media (min-width: 1200px) {
  body.feed-shell.thread-route-layout .app-shell {
    --shell-left-rail: 240px;
    --shell-feed-max: 640px;
    --shell-right-rail: 340px;
    --shell-column-gap: 2rem;
    --shell-feed-center-gutter: max(1rem, calc(50vw - var(--shell-left-rail) - (2 * var(--shell-column-gap)) - (var(--shell-feed-max) / 2)));
    column-gap: var(--shell-column-gap);
    grid-template-columns:
      var(--shell-feed-center-gutter)
      var(--shell-left-rail)
      minmax(0, var(--shell-feed-max))
      var(--shell-right-rail)
      minmax(1rem, 1fr);
  }

  body.feed-shell.thread-route-layout .app-shell .left-rail {
    grid-column: 2;
  }

  body.feed-shell.thread-route-layout .app-shell .feed-column {
    grid-column: 3;
  }

  body.feed-shell.thread-route-layout .route-keepalive-layer--feed[data-route-keepalive-active="0"] {
    grid-column: 3;
  }

  body.feed-shell.thread-route-layout .app-shell .right-rail {
    grid-column: 4;
  }
}

/* Desktop shell: feed column centered on viewport, column gaps, section padding. */
@media (min-width: 1024px) {
  body.feed-shell {
    margin: 0;
    max-width: none;
    padding-inline: 0;
  }

  body.feed-shell main {
    margin: 0;
    max-width: 100%;
  }

  .app-shell {
    --shell-left-rail: 74px;
    --shell-feed-max: 640px;
    --shell-right-rail: 320px;
    --shell-column-gap: 1.5rem;
    --shell-feed-center-gutter: max(0.75rem, calc(50vw - var(--shell-left-rail) - (2 * var(--shell-column-gap)) - (var(--shell-feed-max) / 2)));
    column-gap: var(--shell-column-gap);
    grid-template-columns:
      var(--shell-feed-center-gutter)
      var(--shell-left-rail)
      minmax(0, var(--shell-feed-max))
      var(--shell-right-rail)
      minmax(0.75rem, 1fr);
    justify-content: stretch;
  }

  .app-shell .left-rail {
    grid-column: 2;
  }

  .app-shell .feed-column,
  .route-keepalive-layer--thread[data-route-keepalive-active="1"] > .feed-column {
    grid-column: 3;
  }

  .app-shell .right-rail {
    grid-column: 4;
  }

  .route-keepalive-layer--feed[data-route-keepalive-active="0"] {
    grid-column: 3;
  }

  .left-rail,
  .feed-column,
  .right-rail {
    padding-block: 1rem;
    padding-inline: 1.15rem;
  }

  .left-rail {
    padding-inline: 0.55rem;
  }
}

@media (min-width: 1200px) {
  .app-shell {
    --shell-left-rail: 240px;
    --shell-right-rail: 340px;
    --shell-column-gap: 2rem;
    --shell-feed-center-gutter: max(1rem, calc(50vw - var(--shell-left-rail) - (2 * var(--shell-column-gap)) - (var(--shell-feed-max) / 2)));
    grid-template-columns:
      var(--shell-feed-center-gutter)
      var(--shell-left-rail)
      minmax(0, var(--shell-feed-max))
      var(--shell-right-rail)
      minmax(1rem, 1fr);
  }

  .left-rail,
  .feed-column,
  .right-rail {
    padding-inline: 1.35rem;
  }

  .left-rail {
    padding-inline: 1rem;
  }
}

/* Desktop without right rail: center feed between icon rail and trailing slack. */
@media (min-width: 701px) and (max-width: 1023px) {
  body.feed-shell {
    margin: 0;
    max-width: none;
    padding-inline: 0;
  }

  .app-shell {
    --shell-left-rail: 74px;
    --shell-feed-max: 700px;
    --shell-column-gap: 1.5rem;
    --shell-feed-center-gutter: max(0.75rem, calc(50vw - var(--shell-left-rail) - (2 * var(--shell-column-gap)) - (var(--shell-feed-max) / 2)));
    column-gap: var(--shell-column-gap);
    grid-template-columns:
      var(--shell-feed-center-gutter)
      var(--shell-left-rail)
      minmax(0, var(--shell-feed-max))
      minmax(0.75rem, 1fr);
    justify-content: stretch;
  }

  .app-shell .left-rail {
    grid-column: 2;
  }

  .app-shell .feed-column,
  .route-keepalive-layer--thread[data-route-keepalive-active="1"] > .feed-column {
    grid-column: 3;
  }

  .route-keepalive-layer--feed[data-route-keepalive-active="0"] {
    grid-column: 3;
  }
}

/* Thread tree view (desktop): hide participants rail; feed column width matches
   `640px + 340px` (or 640 + 320) whenever the shell has the same centered slack as
   the non-wide layout, so outer `1fr` gutters do not shrink. */
@media (min-width: 1024px) {
  body.thread-tree-wide-layout.feed-shell .app-shell .right-rail[data-thread-fragment="participants"] {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  body.thread-tree-wide-layout.feed-shell.thread-route-layout .app-shell {
    grid-template-columns: 1fr 74px minmax(0, calc(100% - 74px - max(0px, 100% - 1034px))) 0 1fr;
  }
}

@media (min-width: 1200px) {
  body.thread-tree-wide-layout.feed-shell.thread-route-layout .app-shell {
    grid-template-columns: 1fr 240px minmax(0, calc(100% - 240px - max(0px, 100% - 1220px))) 0 1fr;
  }
}

/* Thread tree mode widens the feed column on desktop. */
@media (min-width: 1024px) {
  body.thread-tree-wide-layout.feed-shell #thread-summary > .thread-view-toggle-desktop {
    box-sizing: border-box;
    max-width: 640px;
    width: 100%;
  }
}

@media (min-width: 701px) {
  body.feed-shell:has(.feed-column[data-thread-root-id]) .thread-view-toggle-desktop,
  body.feed-shell:has(.feed-column[data-thread-route-pending]) .thread-view-toggle-desktop {
    display: flex;
  }
}

[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  body.feed-shell {
    padding: 0;
    /* Native document scroll (not the outlet). Fixes iOS status-bar tap-to-top and
       Safari bottom toolbar clipping vs a nested overflow scroller. */
    min-height: 100dvh;
  }

  body.feed-shell main {
    margin: 0;
    max-width: 100%;
    display: block;
    min-height: 0;
  }

  /* Root `[data-route-outlet="root"]` uses `display: contents` — no nested scroll box. */

  .mobile-bar {
    align-items: center;
    background: var(--bg);
    border-bottom: 0;
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
    min-height: 3.4rem;
    padding: 0.75rem 0.8rem;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  body.feed-shell:has(.feed-column[data-thread-root-id]) .mobile-bar-center,
  body.feed-shell:has(.feed-column[data-thread-route-pending]) .mobile-bar-center {
    display: block;
    left: 50%;
    pointer-events: auto;
    position: absolute;
    transform: translateX(-50%);
    z-index: 4;
  }

  body.feed-shell:has(.feed-column[data-thread-root-id]) .thread-view-toggle-desktop,
  body.feed-shell:has(.feed-column[data-thread-route-pending]) .thread-view-toggle-desktop {
    display: none;
  }

  .mobile-bar-center .thread-view-toggle {
    min-height: 2.75rem;
    min-width: 4.5rem;
    padding: 0 0.75rem;
  }

  /* Keep the bar (and the ≡ / × control) above the full-screen menu overlay. */
  body.mobile-menu-open .mobile-bar {
    gap: 0.35rem;
    z-index: 25;
  }

  .mobile-bar .mobile-brand {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    text-align: left;
    z-index: 1;
  }

  .mobile-brand-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
  }

  body.feed-shell:has(.feed-column[data-thread-root-id]) .mobile-brand-text,
  body.feed-shell:has(.feed-column[data-thread-route-pending]) .mobile-brand-text {
    max-width: calc(50vw - 3.25rem);
  }

  body.feed-shell:has(.feed-column[data-thread-root-id]) .mobile-bar .mobile-brand,
  body.feed-shell:has(.feed-column[data-thread-route-pending]) .mobile-bar .mobile-brand {
    flex: 0 1 calc(50vw - 3.25rem);
    max-width: calc(50vw - 3.25rem);
  }

  .mobile-bar-wot {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;
  }

  body.mobile-menu-open .mobile-bar-wot {
    display: inline-flex;
  }

  body.mobile-menu-open .mobile-bar-wot .feed-wot-quick-label {
    display: none;
  }

  body.mobile-menu-open .mobile-bar-wot .feed-wot-depth-select {
    border: 0;
    color: var(--link);
    font-size: 1rem;
    font-weight: 700;
    padding-left: 0;
    padding-right: 0.1rem;
  }

  .mobile-bar .mobile-menu-trigger {
    border-radius: 0.45rem;
    margin-left: auto;
    min-height: 2.75rem;
    position: relative;
    z-index: 3;
  }

  body.mobile-menu-open .mobile-bar .mobile-menu-trigger {
    margin-left: 0;
  }

  body.mobile-menu-open .mobile-bar-wot[hidden] + .mobile-menu-trigger {
    margin-left: auto;
  }

  .mobile-bar .mobile-menu-trigger img,
  .mobile-bar .mobile-trigger-fallback {
    height: 2.15rem;
    width: 2.15rem;
  }

  .mobile-menu-bar-glyph {
    flex-shrink: 0;
  }

  .mobile-menu-bar-icon {
    align-items: center;
    display: inline-flex;
    font-size: 1.45rem;
    font-weight: 500;
    height: 2.15rem;
    justify-content: center;
    line-height: 1;
    width: 2.15rem;
  }

  /* Same tap target as ≡: show × when the overlay is open. */
  body.mobile-menu-open .mobile-menu-bar-glyph .mobile-menu-bar-icon {
    color: transparent;
    font-size: 0;
    line-height: 0;
    position: relative;
  }

  body.mobile-menu-open .mobile-menu-bar-glyph .mobile-menu-bar-icon::after {
    align-items: center;
    color: var(--fg);
    content: "×";
    display: flex;
    font-size: 1.45rem;
    font-weight: 500;
    height: 2rem;
    justify-content: center;
    left: 0;
    line-height: 1;
    position: absolute;
    top: 0;
    width: 2rem;
  }

  .mobile-brand {
    font-weight: 700;
  }

  .app-shell {
    display: block;
    min-height: 0;
  }

  .route-keepalive-layer--thread[data-route-keepalive-active="1"] {
    background: var(--bg);
    display: block;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: var(--mobile-app-nav-height, max(3.4rem, calc(0.75rem + 2.75rem + 0.75rem)));
    z-index: 4;
  }

  .left-rail,
  .right-rail {
    display: none;
  }

  .feed-column {
    border: 0;
    min-height: 0;
    padding: 0.55rem 0.75rem;
    padding-bottom: var(--feed-scroll-pad);
  }

  body.feed-shell #thread-focus {
    padding-top: 1rem;
  }

  /* Use clip (not hidden) so overflow-y stays visible: feed avatars sit half
     above the ascii header row; hidden+x forces y=auto and clips them on /u/. */
  .user-profile-column,
  .user-profile-column .profile-main,
  .user-profile-column .profile-tabs,
  .user-profile-column .user-tab-panel,
  .user-profile-column .feed,
  .user-profile-column .note,
  .user-profile-column .ascii-card,
  .user-profile-column .note-media-drawer {
    overflow-x: clip;
    overflow-y: visible;
  }

  .profile-main {
    margin-top: 0;
    padding: 0 0.3rem;
  }

  .profile-hero {
    padding: 0 0.3rem;
  }

  .profile-hero-media-row {
    align-items: stretch;
    column-gap: 0.65rem;
    flex-direction: row;
    row-gap: 0;
  }

  .profile-modern .profile-hero .profile-avatar-wrap {
    max-width: min(38vw, 10.5rem);
    min-width: min(38vw, 10.5rem);
    width: min(38vw, 10.5rem);
  }

  .profile-display-name {
    font-size: 1.5rem;
  }

  .profile-hero-side {
    align-self: stretch;
    flex: 1 1 0;
    min-width: 0;
    padding-top: 0;
    width: auto;
  }

  .profile-npub-grid-row {
    column-gap: 1.15em;
  }

  .profile-nip05-line,
  .profile-website-line,
  .profile-payment-line,
  .profile-payment-target {
    max-width: 100%;
  }

  .profile-payment-value {
    white-space: normal;
    word-break: break-word;
  }

  .profile-ident {
    margin-top: 0.5rem;
  }

  .profile-mobile-only-tab {
    display: inline-flex;
  }

  .user-tab-state#user-tab-relays:checked + .profile-mobile-only-panel {
    display: block;
  }

  .mobile-menu-panel {
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    margin: 0;
    max-height: 100dvh;
    max-width: 100vw;
    min-height: 100dvh;
    overflow-y: auto;
    padding: max(1rem, env(safe-area-inset-top, 0px))
      max(1.5rem, env(safe-area-inset-right, 0px))
      max(1.35rem, env(safe-area-inset-bottom, 0px))
      max(1.5rem, env(safe-area-inset-left, 0px));
    width: 100vw;
  }

  /* .mobile-bar sits above the panel (z-index 25 vs 20); pad so header/title is not clipped. */
  body.mobile-menu-open .mobile-menu-panel {
    padding-top: calc(
      max(1rem, env(safe-area-inset-top, 0px)) + max(3.4rem, calc(0.75rem + 2.75rem + 0.75rem)) + 0.65rem
    );
  }

  .mobile-menu-header {
    column-gap: 1rem;
    display: grid;
    flex-shrink: 0;
    grid-template-columns: minmax(3rem, 2rem) minmax(0, 1fr);
    margin-bottom: 1.55rem;
    padding-bottom: 0;
    row-gap: 0.6rem;
  }

  .mobile-menu-intro {
    flex-shrink: 0;
  }

  .mobile-menu-profile [data-session-avatar],
  .mobile-menu-profile [data-session-avatar-fallback] {
    height: 1.9rem;
    width: 1.9rem;
  }

  .mobile-menu-intro-copy {
    color: var(--fg);
    font-family: var(--font-mono-stack);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
  }

  .mobile-menu-header-logo {
    align-self: center;
    justify-content: center;
  }

  .mobile-menu-header-logo .about-page-logo .about-logo {
    width: 5.3rem;
  }

  .mobile-menu-login-cta {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .mobile-menu-search {
    flex-shrink: 0;
    margin-bottom: 1.35rem;
  }

  .mobile-menu-search .rail-search {
    display: flex;
    flex-direction: column-reverse;
    gap: 1.35rem;
  }

  .mobile-menu-search .rail-search input {
    background: transparent;
    border: 2px dashed color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 0;
    color: var(--fg);
    font-size: 1.2rem;
    min-height: 2.7rem;
    padding: 0.45rem 0.65rem;
  }

  .mobile-menu-search .rail-search input::placeholder {
    color: color-mix(in srgb, var(--muted) 45%, transparent);
    opacity: 1;
  }

  .mobile-menu-search .search-mode-toggle {
    align-self: flex-end;
    font-size: 1.05rem;
    font-weight: 700;
    padding-right: 1.15rem;
  }

  .mobile-menu-search .search-mode-option.is-active {
    color: var(--fg);
  }

  .mobile-menu-nav {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    margin-bottom: 2.15rem;
    min-height: 0;
    overflow: visible;
  }

  .mobile-menu-nav a {
    align-items: center;
    border: 0;
    border-top: 2px dashed color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.55rem;
    font-weight: 700;
    justify-content: center;
    min-height: 5.1rem;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
  }

  .mobile-menu-nav a:last-child {
    border-bottom: 2px dashed color-mix(in srgb, var(--border) 78%, transparent);
  }

  .mobile-menu-nav a:hover {
    text-decoration: none;
  }

  .mobile-menu-close {
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: var(--link);
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: auto;
    min-height: 0;
    padding: 0.1rem 0.5rem;
    width: auto;
  }

  .mobile-menu-backdrop {
    background: var(--bg);
  }

  body {
    padding: 0 0.65rem;
  }

  .comment {
    --reply-depth-step: 0.25rem;
    margin-left: calc(var(--depth) * var(--reply-depth-step));
    padding-left: 0.95rem;
  }

  .ascii-enhanced .comment {
    --reply-depth-step: 1ch;
    margin-left: calc((var(--depth) - 1) * var(--reply-depth-step));
    padding-left: 1ch;
  }

  .thread-inline-reply {
    margin-left: calc(var(--depth, 1) * 0.25rem);
    padding-left: 0.95rem;
  }

  .ascii-enhanced .thread-inline-reply {
    margin-left: calc((var(--depth, 1) - 1) * 1ch);
    padding-left: 1ch;
  }

  .comment[data-depth="3"] > .continue-thread-mobile {
    display: block;
  }

  .comment[data-depth="3"] > .continue-thread-desktop,
  .comment[data-depth="5"] > .continue-thread-desktop {
    display: none;
  }

  .comment[data-depth="3"] > .comments {
    display: none;
  }

  .columns {
    columns: 1;
  }

  .feed-heading-title-row .feed-sort-label select {
    max-width: min(100%, 12rem);
    min-width: 7.5rem;
    width: auto;
  }

  .feed-column:not(.reads-column) .feed-heading-title-row {
    align-items: center;
    display: grid;
    gap: 0.45rem 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .feed-column:not(.reads-column) .feed-heading-top {
    display: grid;
  }

  .feed-column:not(.reads-column) .feed-heading-summary {
    grid-row: 1;
  }

  .feed-column:not(.reads-column) .feed-heading-title-row {
    grid-row: 2;
  }

  .feed-column:not(.reads-column) .feed-heading-title-row h1 {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
  }

  .feed-column:not(.reads-column) .feed-heading-controls {
    align-items: center;
    display: grid;
    gap: 0.45rem 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    width: 100%;
  }

  .feed-column:not(.reads-column) .feed-heading-controls .feed-sort-label {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    max-width: 100%;
    min-width: 0;
  }

  /* Guest view has no New Note; logged-in view uses the same right edge. */
  .feed-column:not(.reads-column)
    .feed-heading-controls:not(:has(.feed-heading-post))
    .feed-sort-label {
    grid-column: 3;
    justify-self: end;
  }

  .feed-column:not(.reads-column) .feed-heading-controls .feed-heading-post {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    width: auto;
  }

  .feed-column:not(.reads-column) .feed-heading-controls .feed-heading-wot {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
    min-width: 0;
    width: auto;
  }

  .feed-column:not(.reads-column) .feed-heading-wot {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    min-width: 0;
  }

  .feed-column:not(.reads-column) .feed-heading-wot .feed-wot-quick-label {
    align-self: center;
    flex-shrink: 0;
  }

  .feed-column:not(.reads-column) .feed-heading-wot {
    display: none;
  }

  .reads-column .feed-heading-title-row {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .feed-heading-controls {
    justify-content: flex-end;
    width: 100%;
  }

  .feed-column:not(.reads-column) .feed-wot-depth-select {
    flex: 0 0 auto;
  }
}

.reads-column {
  max-width: 640px;
}

.reads-list {
  display: grid;
  gap: 1.25rem;
}

.read-article {
  border: 0;
  border-radius: 0;
  padding: 0.8rem 0;
  background: var(--bg);
  position: relative;
}

.read-article h2 {
  margin: 0 0 0.25rem;
  font-size: 1.8rem;
  line-height: 1.35;
}

.read-meta {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.read-ascii-row {
  align-items: stretch;
}

.read-article .ascii-border {
  color: var(--fg);
  display: block;
  font-family: var(--font-mono-stack);
  margin: 0 auto;
  user-select: none;
  white-space: pre;
  width: min(100%, 80ch);
}

.read-ascii-row .ascii-edge {
  color: transparent;
  display: block;
  position: relative;
  user-select: none;
}

.read-ascii-row .ascii-edge::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    var(--fg) 0 8px,
    transparent 8px 14px
  );
}

.read-ascii-row {
  width: min(100%, 80ch);
  margin-left: auto;
  margin-right: auto;
}

.read-ascii-content {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 0.9rem;
}

.read-meta-copy {
  min-width: 0;
}

.read-meta p {
  margin: 0.1rem 0 0.5rem;
}

.read-summary {
  color: var(--muted);
  margin: 0.2rem 0 0.2rem;
}

.read-thumb {
  display: block;
  width: 220px;
}

.read-thumb img {
  border-radius: 0.45rem;
  display: block;
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.read-body {
  line-height: 1.45;
  margin-top: 0.35rem;
  max-height: 8.5rem;
  overflow: hidden;
  position: relative;
  overflow-wrap: anywhere;
}

.read-body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2.2rem;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.read-body > :first-child {
  margin-top: 0;
}

.read-body > :last-child {
  margin-bottom: 0;
}

.read-body h1,
.read-body h2,
.read-body h3,
.read-body h4 {
  margin: 1rem 0 0.35rem;
  font-size: 1rem;
}

.read-body p,
.read-body ul,
.read-body ol,
.read-body blockquote,
.read-body pre,
.read-body table,
.read-body hr {
  margin: 0.65rem 0;
}

.read-body ul,
.read-body ol {
  padding-left: 1.2rem;
}

.read-body li + li {
  margin-top: 0.2rem;
}

.read-body ul ul,
.read-body ul ol,
.read-body ol ul,
.read-body ol ol {
  margin: 0.3rem 0 0.2rem;
}

.read-body blockquote {
  margin-left: 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
  color: var(--muted);
}

.read-body a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.read-body code,
.read-body pre {
  font-family: var(--font-mono-stack);
  font-size: 0.95em;
}

.read-body p code,
.read-body li code,
.read-body blockquote code,
.read-body td code,
.read-body th code {
  border: 1px solid var(--border);
  border-radius: 0.2rem;
  padding: 0.02rem 0.25rem;
}

.read-body pre {
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  overflow-x: auto;
}

.read-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 0;
  font-size: 0.96em;
}

.read-body table th,
.read-body table td {
  border: 1px solid var(--border);
  padding: 0.32rem 0.45rem;
  vertical-align: top;
  text-align: left;
}

.read-body table th {
  font-weight: 700;
}

.read-body hr {
  border: 0;
  border-top: 1px dashed var(--border);
}

.read-body img {
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  display: block;
  height: auto;
  max-width: 100%;
}

.read-body input[type="checkbox"] {
  accent-color: var(--fg);
}

.read-body img {
  display: none;
}

.read-article.is-full .read-body {
  margin-top: 0.65rem;
  max-height: none;
  overflow: visible;
}

.read-article.is-full .read-meta {
  display: block;
}

.read-article.is-full .read-meta-copy {
  width: 100%;
}

.read-article.is-full .read-body::after {
  display: none;
}

.read-article.is-full .read-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

.read-detail-column .read-title {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0 0 0.4rem;
}

.read-thumb-full {
  width: 100%;
  margin-top: 0.55rem;
}

.read-thumb-full img {
  aspect-ratio: auto;
  max-height: 520px;
  object-fit: contain;
}

.reads-actions {
  margin: 0.55rem 0 0;
}

.reads-more {
  margin: 0.2rem 0 0;
}

@media (max-width: 1023px) {
  .read-article h2 {
    font-size: 1.45rem;
  }

  .read-thumb {
    width: 190px;
  }

  .read-detail-column .read-title {
    font-size: 1.8rem;
  }
}

/* Reads / single read: must follow base .read-* rules or mobile overrides lose. */
@media (max-width: 700px) {
  .reads-column .page-heading .ascii-border,
  .read-article .ascii-border,
  .read-ascii-row .ascii-edge {
    display: none;
  }

  .reads-column .page-heading .ascii-content {
    padding-left: 0;
    padding-right: 0;
  }

  .reads-column .feed-heading-title-row .feed-sort-label {
    flex-shrink: 0;
    margin-left: auto;
    width: auto;
  }

  .reads-column .feed-heading-title-row .feed-sort-label select {
    max-width: min(100%, 12rem);
    min-width: 7.5rem;
    width: auto;
  }

  .reads-column .feed-heading-sort-row {
    align-items: stretch;
  }

  .reads-column .feed-heading-sort-row .feed-sort-label {
    margin-left: 0;
    width: 100%;
  }

  .reads-column .feed-heading-sort-row .feed-sort-label select {
    width: 100%;
  }

  .reads-list .read-article {
    border-bottom: 1px dashed var(--border);
    padding: 0 0 1rem;
  }

  .reads-column .read-ascii-row {
    display: block;
    margin: 0;
    width: 100%;
  }

  .reads-column .read-ascii-content {
    padding: 0;
  }

  .reads-list .read-article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .reads-column .read-meta {
    grid-template-columns: 1fr;
  }

  .reads-column .read-thumb {
    width: 100%;
    max-width: 100%;
  }

  .read-detail-column .read-title {
    font-size: 1.55rem;
  }

  .reads-list .read-body {
    max-height: 10rem;
  }

  .reads-column .read-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.notifications-toolbar {
  align-items: center;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.15rem 0 0.4rem;
  position: sticky;
  top: 0;
  z-index: 12;
}

.notifications-filter-bar {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.notifications-filter-bar::-webkit-scrollbar {
  display: none;
}

.notifications-filter-chip,
.notifications-wot-toggle,
.notifications-new-items {
  appearance: none;
  align-items: center;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  color: var(--fg);
  display: inline-flex;
  font: inherit;
  gap: 0.45rem;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 4.8rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.notifications-filter-chip:hover,
.notifications-wot-toggle:hover,
.notifications-new-items:hover {
  transform: translateY(-1px);
}

.notifications-filter-chip[data-category="reply"] {
  color: var(--fg);
}

.notifications-filter-chip[data-category="like"] {
  color: #ef5a79;
}

.notifications-filter-chip[data-category="repost"] {
  color: #5cc96b;
}

.notifications-filter-chip[data-category="mention"] {
  color: #5a9dff;
}

.notifications-filter-chip[data-active] {
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  border-color: currentColor;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

.notifications-filter-chip-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.notifications-filter-chip-count {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.notifications-wot-toggle,
.notifications-new-items {
  color: var(--link);
  flex: 0 0 auto;
  margin-left: auto;
}

.notifications-wot-toggle[aria-pressed="false"] {
  text-decoration: line-through;
  color: var(--muted);
}

.notification-item {
  margin-bottom: 1rem;
}

.note-feed-context--notification {
  margin: 0 0 0.35rem;
}

.notification-reaction-roll {
  margin: 0 0 1rem;
}

@media (max-width: 700px) {
  .notifications-toolbar {
    margin-bottom: 0.75rem;
    padding-bottom: 0.3rem;
  }

  .notifications-filter-chip,
  .notifications-wot-toggle,
  .notifications-new-items {
    min-height: 2.35rem;
    min-width: 4.2rem;
    padding: 0.35rem 0.75rem;
  }

  .notifications-filter-chip-count {
    font-size: 0.95rem;
  }
}