/* ==========================================================================
   Page-specific styles
   ========================================================================== */

/* ---------- home: feed tabs ---------- */

.feed-tabs {
  position: sticky;
  top: calc(var(--topbar-h) + var(--safe-top));
  z-index: 20;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column; /* one row, however many tabs (Inicio has three since v0.12) */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: top var(--dur-slow) var(--ease-out);
}

/* v0.8.1: the home feed's tabs hide while scrolling down and come back when scrolling up, like the post button
   (html[data-scroll] is set by app.js). The static ones (reposts / quotes pages) never move. */
.feed-tabs:not(.feed-tabs--static) {
  transition: top var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out), visibility 0s;
}

html[data-scroll="down"] .feed-tabs:not(.feed-tabs--static) {
  top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-100% - var(--space-3)));
  transition: top var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}

.feed-tabs--static {
  position: static;
  margin-bottom: var(--space-3);
}

.feed-tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-1);
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

@media (max-width: 379px) {
  .feed-tabs__tab {
    font-size: var(--fs-sm);
  }
}

.feed-tabs__tab:hover {
  background: var(--accent-softer);
}

.feed-tabs__tab.is-active {
  color: var(--text);
}

.feed-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 56px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform: translateX(-50%);
  animation: tab-in var(--dur-slow) var(--ease-spring);
}

.feed-tabs__tab[aria-disabled="true"] {
  color: var(--text-3);
  cursor: default;
}

@keyframes tab-in {
  from {
    width: 0;
  }
}

@media (min-width: 768px) {
  .feed-tabs {
    top: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

/* ---------- page header with back button (detail, about) ---------- */

.page-header {
  position: sticky;
  top: calc(var(--topbar-h) + var(--safe-top));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: top var(--dur-slow) var(--ease-out);
}

html[data-scroll="down"] .page-header {
  top: 0;
}

.page-header__title {
  font-size: var(--fs-xl);
}

@media (min-width: 768px) {
  .page-header {
    top: 0;
    padding: 0;
  }
}

.section-title {
  padding: var(--space-5) var(--space-4) 0;
  font-size: var(--fs-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.section-title .muted {
  font-size: var(--fs-sm);
  font-weight: 500;
}

@media (min-width: 768px) {
  .section-title {
    padding-left: var(--space-1);
  }
}

/* ---------- post detail ---------- */

.detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) 0;
}

@media (min-width: 768px) {
  .detail {
    padding: var(--space-2) 0 0;
  }
}

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

.comment {
  padding: var(--space-3) var(--space-4) var(--space-1);
}

.comment .post__body {
  margin-top: var(--space-2);
  padding-left: calc(36px + var(--space-3));
}

.comment .post__actions {
  padding-left: calc(36px + var(--space-3) - var(--space-2));
}

.comment .prose {
  font-size: 0.97rem;
}

/* v0.12: the comment a notification (or a link) points to clears the sticky bars and shines for a moment */
.comment {
  scroll-margin-top: calc(var(--topbar-h) + var(--safe-top) + 64px);
}

.post.is-target,
.comment:target {
  animation: target-glow 2.6s var(--ease-out);
}

@keyframes target-glow {
  0%,
  35% {
    border-color: var(--border-strong);
    background: var(--surface-2);
    box-shadow: 0 0 0 3px var(--accent-softer);
  }
}

/* ---------- v0.15: Guardados ---------- */

.saved-header {
  justify-content: space-between;
}

.saved-header__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--space-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* ---------- v0.14: conversations (posts/threads.py, posts/detail.html) ----------
   A direct reply and what hangs from it share one card (`.branch`): the reply, then its replies indented, each joined
   to a rail under the first avatar by a curved elbow. The author's thread and what came before a reply are cards of
   replies joined avatar to avatar (`.has-up` / `.has-down`). Avatars are 36px with 16px of padding: the lines run
   at x = 33px. */

.comment {
  position: relative;
}

.comment.has-up::before,
.comment.has-down::after {
  content: "";
  position: absolute;
  left: calc(var(--space-4) + 17px);
  width: 2px;
  border-radius: 2px;
  background: var(--border-strong);
  pointer-events: none;
}

.comment.has-up::before {
  top: 0;
  height: calc(var(--space-3) - 4px);
}

.comment.has-down::after {
  top: calc(var(--space-3) + 36px + 4px);
  bottom: 0;
}

.thread-up > .comment,
.author-thread > .comment {
  padding-bottom: var(--space-2);
}

.branch > .comment {
  padding-bottom: var(--space-2);
}

.branch__replies {
  position: relative;
  padding: 0 0 var(--space-2) calc(var(--space-4) + 18px);
}

.branch__replies.is-empty {
  padding-bottom: 0;
}

.branch__item {
  position: relative;
}

/* the elbow from the rail to this reply's avatar, and the rail going on to the next one */
.branch__item::before,
.branch__item:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: -1px;
  pointer-events: none;
}

.branch__item::before {
  top: 0;
  width: 14px;
  height: calc(var(--space-3) + 18px);
  border-left: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  border-bottom-left-radius: 14px;
}

.branch__item:not(:last-of-type)::after {
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--border-strong);
}

.comment--nested {
  padding-left: var(--space-4);
}

.post__replying {
  margin: var(--space-1) 0 0;
  padding-left: calc(36px + var(--space-3));
  color: var(--text-3);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post:not(.comment) > .post__replying {
  margin-top: var(--space-2);
  padding-left: 0;
}

.post__replying .mention {
  font-weight: 600;
}

.branch__more,
.branch__deeper {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.branch__deeper {
  padding-left: calc(var(--space-4) + 36px + var(--space-3));
  margin-top: calc(var(--space-2) * -1);
}

.branch__more:hover,
.branch__deeper:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.branch__more {
  width: 100%;
  text-align: left;
}

.branch.is-new,
.branch__item.is-new {
  animation: post-new 560ms var(--ease-spring);
}

/* "Autor": a reply by the post's author (not `.badge`: the panel has its own) */
.author-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: center;
}

/* a reply nobody here can see, kept so the replies below it stay joined */
.comment--gone {
  padding-bottom: var(--space-3);
}

.comment__gone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-style: italic;
}

.comment__gone-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-3);
}

.comment__gone-text {
  flex: 1;
  min-width: 0;
}

.comment__reveal {
  font-style: normal;
}

.post--gone {
  padding: var(--space-4);
}

.post__thread {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.post__thread:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.conversation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.conversation__head .section-title {
  padding-bottom: 0;
}

.sort-pills {
  display: inline-flex;
  gap: 2px;
  margin: var(--space-5) var(--space-4) 0 auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.sort-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.sort-pill.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

@media (hover: hover) {
  .sort-pill:not(.is-active):hover {
    background: var(--accent-soft);
    color: var(--text);
  }
}

@media (min-width: 768px) {
  .sort-pills {
    margin-right: 0;
  }
}

/* ---------- profile ---------- */

.profile {
  padding: var(--space-3) var(--space-2) 0;
  overflow-x: clip; /* the tab panel slides in from the side (v0.8); clip doesn't break the sticky tabs */
}

.profile .feed {
  padding-left: 0;
  padding-right: 0;
}

/* v0.16: the pinned post, above the list (which keeps its own spacing) */
.profile-pinned {
  padding-top: var(--space-3);
}

.post__context--pinned {
  color: var(--text);
}

@media (min-width: 768px) {
  .profile {
    padding: 0;
  }
}

.profile-card {
  position: relative;
  overflow: hidden;
  padding: 0 var(--space-5) var(--space-5);
  animation: post-in var(--dur-slow) var(--ease-out);
}

/* v0.8: 3:1 like on X (owner's decision), so a banner picture is always seen whole; the decorative background
   takes the same shape. */
.profile-card__banner {
  display: block;
  aspect-ratio: 3 / 1;
  margin: 0 calc(var(--space-5) * -1);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--surface-3) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, var(--surface-2) 0%, transparent 60%),
    var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.profile-card__banner--image {
  overflow: hidden;
}

.profile-card__banner--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--dur-fast);
}

.profile-card__banner--image:hover img {
  filter: brightness(1.06);
}

.profile-card__avatar-link {
  display: inline-flex;
  border-radius: var(--radius-full);
}

.profile-card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: -48px;
}

.profile-card__avatar {
  border: 4px solid var(--surface);
  box-sizing: content-box;
}

.profile-card__name {
  margin-top: var(--space-3);
  font-size: var(--fs-2xl);
  overflow-wrap: anywhere;
}

.profile-card__bio {
  margin-top: var(--space-1);
  color: var(--text-2);
  font-family: var(--font-text);
  overflow-wrap: anywhere;
}

/* the link (v0.9.1; it replaced v0.8's long bio) and, under it, the join date: on every width, like on phones
   (v0.10.1, owner's request: on PC they used to share a row) */
.profile-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.profile-card__meta .profile-card__joined {
  margin-top: 0;
}

.profile-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  --icon-size: 16px;
}

.profile-card__link .icon {
  flex: none;
  color: var(--text-3);
}

.profile-card__link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card__link:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* a bigger touch area than the text (44 px tall) */
.profile-card__link::after {
  content: "";
  position: absolute;
  inset: -12px -4px -8px;
}

.profile-card__joined {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
  --icon-size: 16px;
}

.profile-card__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  margin-top: var(--space-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.profile-card__stats > * {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: var(--tap);
  padding-top: 12px;
}

.profile-card__stats strong {
  display: inline-block; /* so the number can bump when it changes (v0.9.1) */
  color: var(--text);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

/* followers / following open their lists (v0.8) */
.profile-card__stats a:hover {
  color: var(--text);
}

.profile-card__stats a:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.icon-btn--outline {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  color: var(--text);
}

/* 36 px to look like the buttons next to it, but still a 44 px touch target */
.icon-btn--outline::after {
  content: "";
  position: absolute;
  inset: -5px;
}

/* v0.8.1: centered, not stretched: the 44 px "⋯" used to stretch "Mensaje" and "Seguir" to 44 px on other people's
   profiles (they nearly touched the banner on phones). Every button here is 36 px high, like on your own profile. */
.profile-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
}

/* v0.8: on phones three buttons didn't fit next to the avatar ("⋯" got cut off when "Siguiendo" showed): the
   disabled "Mensaje" keeps only its icon, and the avatar is a bit smaller on the narrowest screens. */
@media (max-width: 479px) {
  .profile-card__actions {
    gap: 6px;
  }

  .profile-card__actions .btn--sm {
    padding: 0 var(--space-3);
  }

  .profile-card__actions .btn--icon-phone {
    width: 36px;
    padding: 0;
  }

  .btn--icon-phone .btn__label {
    display: none;
  }
}

@media (max-width: 399px) {
  .profile-card__avatar {
    --avatar: 84px;
  }

  .profile-card__top {
    margin-top: -42px;
  }
}

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

.btn--following .label-hover {
  display: none;
}

/* Only with a real pointer: on touch screens :hover sticks after a tap, and the wider "Dejar de seguir" made the
   row of buttons jump (v0.8). */
@media (hover: hover) {
  .btn--following:hover .label-default {
    display: none;
  }

  .btn--following:hover .label-hover {
    display: inline;
    color: var(--danger);
  }
}

.avatar-edit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.avatar-edit__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- auth (login) ---------- */

.auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(var(--space-6) + var(--safe-top)) var(--space-4) calc(var(--space-6) + var(--safe-bottom));
}

.auth__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  max-width: 380px;
  animation: pop-in 480ms var(--ease-spring) both;
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.auth__brand .brand-wordmark {
  height: 96px; /* same presence as the original login wordmark */
  animation: wordmark-in 640ms var(--ease-spring) both;
}

.auth__tagline {
  color: var(--text-2);
  text-align: center;
  animation: post-in 520ms 200ms var(--ease-out) both;
}

@keyframes wordmark-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
}

/* Login / signup switch: a pill slides under the active tab. */
.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  animation: post-in 520ms 120ms var(--ease-out) both;
}

.auth-tabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-full);
  background: var(--accent);
  transform: translateX(calc(var(--tab, 0) * 100%));
  transition: transform var(--dur-slow) var(--ease-spring);
}

.auth-tabs__tab {
  position: relative; /* above the pill */
  display: grid;
  place-items: center;
  min-height: var(--tap);
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-weight: 600;
  transition: color var(--dur-base);
}

.auth-tabs__tab[aria-selected="true"] {
  color: var(--on-accent);
}

.auth-panel {
  animation: auth-swap 280ms var(--ease-out) both;
}

@keyframes auth-swap {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.auth__switch {
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-align: center;
}

.auth__switch a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Request access" card, under both forms */
.auth__request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}

.auth__request strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-md);
}

.auth__request:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.auth__request .icon {
  flex: none;
  color: var(--text);
}

/* @username field */
.input-prefix {
  position: relative;
}

.input-prefix > span {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-weight: 600;
  pointer-events: none;
}

.input-prefix .input {
  padding-left: calc(var(--space-4) + 18px);
}

/* an icon instead of a character (the profile's link field, v0.9.1) */
.input-prefix--icon > span {
  display: flex;
}

.input-prefix--icon .input {
  padding-left: calc(var(--space-4) + 26px);
}

.field__status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.field__status:empty,
.field__status:not(:has(span:not(:empty))) {
  min-height: 0;
}

.field__status.is-ok {
  color: var(--success);
}

.field__status.is-error {
  color: var(--danger);
}

.field__status .icon {
  flex: none;
}

.input--code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.input--code::placeholder {
  letter-spacing: 0.08em;
}

/* password strength: bars carry the level, the label says it in words */
.strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
  animation: fade-in var(--dur-base) var(--ease-out);
  --level: var(--danger);
}

.strength[data-score="2"] {
  --level: var(--warning);
}

.strength[data-score="3"],
.strength[data-score="4"] {
  --level: var(--success);
}

.strength__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.strength__bars span {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  transition: background-color var(--dur-base);
}

.strength[data-score="1"] .strength__bars span:nth-child(-n + 1),
.strength[data-score="2"] .strength__bars span:nth-child(-n + 2),
.strength[data-score="3"] .strength__bars span:nth-child(-n + 3),
.strength[data-score="4"] .strength__bars span {
  background: var(--level);
}

.strength__label {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.strength__label strong {
  color: var(--text);
}

.rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  color: var(--text-3);
  font-size: var(--fs-xs);
  --icon-size: 14px;
}

.rules li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rules li.is-ok {
  color: var(--text-2);
}

.rules li.is-ok .icon {
  color: var(--success);
}

.auth__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.auth__footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

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

.password-field {
  position: relative;
}

.password-field .input {
  padding-right: 52px;
}

.password-field .icon-btn {
  position: absolute;
  right: 2px;
  top: 2px;
}

/* ---------- about & support ---------- */

.link-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
}

.link-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color var(--dur-fast);
}

.link-list__item:hover {
  background: var(--accent-soft);
}

/* The trailing arrow / chevron of a row. Only a direct child: the icon inside a row's icon box (Configuración) is
   also a last child, and this pushed it to the right of its box (fixed in v0.8.1). */
.link-list__item > .icon:last-child {
  margin-left: auto;
  color: var(--text-3);
  --icon-size: 18px;
}

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4) var(--space-6);
  text-align: center;
}

.about-hero .brand-wordmark {
  height: 64px;
}

.standalone {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--space-4) + var(--safe-top)) var(--space-4) calc(var(--space-10) + var(--safe-bottom));
}

.standalone__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  color: var(--text-2);
  font-weight: 500;
}

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

.support-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.support-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.support-card__title {
  font-size: var(--fs-lg);
}

.support-card p {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.kofi-frame {
  width: 100%;
  height: 560px;
  margin-top: var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background: #fff;
}

/* ==========================================================================
   v0.8: profile tabs, pictures grid, opinions, "Editar perfil", follower lists, Configuración
   ========================================================================== */

/* ---------- profile tabs: sticky, an indicator slides under the active one ---------- */

.profile-tabs {
  position: sticky;
  top: calc(var(--topbar-h) + var(--safe-top));
  z-index: 20;
  margin: var(--space-3) calc(var(--space-2) * -1) 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: top var(--dur-slow) var(--ease-out);
}

html[data-scroll="down"] .profile-tabs {
  top: 0;
}

/* v0.14: five tabs (Respuestas joined): columns as wide as their label at least, the room left shared; on the
   narrowest phones the row slides instead of squeezing a label */
.profile-tabs__list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  overflow-x: auto;
  /* v0.17 (owner's report): only sideways. The indicator used to stick out 1 px below, which made the row scrollable
     vertically too, and on phones a finger dragged the whole row in every direction */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.profile-tabs__list::-webkit-scrollbar {
  display: none;
}

/* v0.16: the lupa at the end of the row (the tabs keep sliding under it) and the search bar that takes the row */
.profile-tabs__row {
  display: flex;
  align-items: center;
}

.profile-tabs__row .profile-tabs__list {
  flex: 1;
  min-width: 0;
}

/* a tab cut by the lupa fades out, so it shows the row slides (profile.js `cut`: only while something is hidden) */
.profile-tabs__row .profile-tabs__list.is-cut {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.profile-tabs__search {
  flex: none;
  margin: 0 var(--space-1);
  color: var(--text-2);
}

.profile-search {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 2px var(--space-3) 2px var(--space-1);
}

@media (min-width: 768px) {
  .profile-search {
    padding-right: var(--space-2);
  }
}

.search-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-3);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-field__input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px; /* no zoom on iOS */
  outline: none;
}

.search-field__input::-webkit-search-cancel-button {
  display: none; /* the bar has its own ✕ */
}

.search-field__clear {
  flex: none;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  margin-right: calc(var(--space-2) * -1);
}

/* Guardados' search bar (v0.16), the same field as the profile's */
.saved-search {
  padding: var(--space-2) var(--space-2) 0;
}

@media (min-width: 768px) {
  .saved-search {
    padding: var(--space-2) 0 0;
  }
}

.search-hint .icon {
  margin: 0 auto var(--space-1);
  color: var(--text-3);
}

/* v0.16: the words a search found, in its results (posts/search.py highlight): black and white like the brand */
mark.hl {
  margin: 0 -1px;
  padding: 0 1px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: inherit;
  font-weight: 700;
}

.profile-tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-2);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.profile-tabs__tab:hover {
  background: var(--accent-softer);
}

.profile-tabs__tab.is-active {
  color: var(--text);
}

.profile-tabs__label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.profile-tabs__count {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* v0.17: inside the row (it was 3 px at bottom -1px, its last pixel always cut by the row's scroll box: the same 2 px
   show now, without giving the row a vertical scroll) */
.profile-tabs__indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-spring), width var(--dur-slow) var(--ease-spring);
}

@media (min-width: 420px) {
  .profile-tabs__tab {
    font-size: var(--fs-sm);
  }
}

@media (min-width: 560px) {
  .profile-tabs__tab {
    font-size: var(--fs-md);
  }
}

@media (min-width: 768px) {
  .profile-tabs {
    top: 0;
    margin: var(--space-3) 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

.profile-panel {
  min-height: 40vh;
  transition: opacity var(--dur-fast);
}

.profile-panel.htmx-request {
  opacity: 0.55;
}

/* no fill-mode: nothing stays transformed (a lasting transform would cover the "⋯" menus) */
.profile-panel.is-entering {
  animation: panel-in-next 260ms var(--ease-out);
}

.profile-panel.is-entering[data-dir="prev"] {
  animation-name: panel-in-prev;
}

@keyframes panel-in-next {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}

@keyframes panel-in-prev {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
}

/* ---------- "Multimedia": a three-column grid of the first picture of each post ---------- */

.media-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.media-wall__empty,
.media-wall__end,
.media-wall > .load-more {
  grid-column: 1 / -1;
}

.media-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-2);
}

.media-tile__link {
  display: block;
  width: 100%;
  height: 100%;
}

.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-fast);
}

.media-tile__link:hover img {
  transform: scale(1.04);
}

.media-tile__badges {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}

.media-tile__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

/* a video's tile (v0.10): its poster frame on black, with the length */
.media-tile--video {
  background: #000;
}

.media-tile--sensitive img,
.media-tile--sensitive .media-tile__link:hover img {
  filter: blur(18px) saturate(1.2);
  transform: scale(1.2);
}

.media-tile__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.load-more--tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

/* ---------- "Opiniones" ---------- */

.opinions,
.opinions__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.opinions {
  padding-top: var(--space-3);
}

.opinions-switch {
  padding: var(--space-2) var(--space-4);
}

.my-opinion__label {
  margin: 0 0 var(--space-2) var(--space-1);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opinion {
  padding: var(--space-4) var(--space-4) var(--space-3);
  animation: post-in var(--dur-slow) var(--ease-out);
}

.opinion__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.opinion__meta {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.opinion__author {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opinion__author:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.opinion__time {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.opinion__text {
  margin-top: var(--space-2);
  padding-left: calc(36px + var(--space-3));
  font-family: var(--font-text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.opinion .opinion-form {
  margin-top: var(--space-3);
}

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

.my-opinion > .opinion-form {
  padding: var(--space-4);
}

.opinion-form__label {
  font-weight: 700;
}

.opinion-form__text,
.input--area {
  min-height: 92px;
  resize: vertical;
  font-family: var(--font-text);
  line-height: 1.45;
}

.opinion-form__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.opinion-form__count {
  margin-right: auto;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.opinion-form__count.is-near {
  color: var(--warning);
}

.opinion-form__count.is-over {
  color: var(--danger);
  font-weight: 700;
}

/* ---------- "Editar perfil": banner and avatar on top, like on X ---------- */

.edit-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 calc(var(--space-4) * -1);
}

.edit-media__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--surface-3) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, var(--surface-2) 0%, transparent 60%),
    var(--surface-2);
}

.edit-media__banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-media__actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(0, 0, 0, 0.22);
}

.edit-media__btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}

.edit-media__btn:hover {
  background: rgba(0, 0, 0, 0.78);
}

.edit-media__btn:active {
  transform: scale(0.92);
}

.edit-media__avatar {
  position: relative;
  margin: -44px 0 0 var(--space-4);
  border: 4px solid var(--surface);
  border-radius: var(--radius-full);
}

.edit-media__btn--avatar {
  position: absolute;
  inset: 0;
  margin: auto;
}

.edit-media__remove {
  position: absolute;
  right: var(--space-4);
  bottom: 0;
}

.field__optional {
  color: var(--text-3);
  font-weight: 400;
}

.field__help--row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- the cropper: full screen on phones, a big window on PC ---------- */

.cropper {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: var(--safe-top) 0 var(--safe-bottom);
  background: #000;
  color: #fff;
  animation: fade-in var(--dur-base) var(--ease-out);
}

.cropper__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.cropper__bar .btn--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.cropper__bar .btn--primary {
  background: #fff;
  color: #000;
}

.cropper__title {
  font-size: var(--fs-md);
  font-weight: 700;
}

.cropper__stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.cropper__stage:active {
  cursor: grabbing;
}

.cropper__stage:focus-visible .cropper__frame {
  border-color: var(--accent);
}

.cropper__img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform-origin: center;
  pointer-events: none;
  will-change: transform;
}

.cropper__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cropper__frame--round {
  border-radius: 50%;
}

.cropper__zoom {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6) var(--space-1);
}

.cropper__zoom input {
  flex: 1;
  min-height: var(--tap);
  accent-color: #fff;
}

.cropper__hint {
  padding: 0 var(--space-4) var(--space-4);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-xs);
  text-align: center;
}

@media (min-width: 768px) {
  .cropper {
    inset: 6vh max(24px, calc(50vw - 380px));
    padding: 0;
    border-radius: var(--radius-xl);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
    overflow: hidden;
  }
}

/* ---------- followers / following ---------- */

.feed-tabs__count {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.user-list--follow {
  padding: var(--space-2);
}

.follow-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-right: var(--space-2);
}

.follow-row__main {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast);
}

.follow-row__main:hover {
  background: var(--accent-soft);
}

.follow-row__badge {
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

.follow-row > .btn {
  flex: none;
}

.load-more--rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

/* ---------- Configuración ---------- */

.settings {
  padding-bottom: var(--space-8);
}

.settings-me {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  transition: border-color var(--dur-fast);
}

.settings-me:hover {
  border-color: var(--border-strong);
}

.settings-me__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.settings-me__text strong {
  overflow: hidden;
  font-size: var(--fs-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-me__text span {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.settings-me > .icon:last-child {
  color: var(--text-3);
}

.settings-list__item {
  width: 100%;
  text-align: left;
}

.settings-list__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
}

.settings-list__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-list__text small {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.settings-list__item.is-danger,
.settings-list__item.is-danger .settings-list__icon {
  color: var(--danger);
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
}

.settings-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
}

.settings-card__hint {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.settings-card__submit {
  align-self: flex-start;
}

.settings-card--danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.settings-card--danger .settings-card__title {
  color: var(--danger);
}

.settings-list-plain {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-5);
  color: var(--text-2);
  list-style: disc;
}

.settings__meta {
  padding: 0 var(--space-2);
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-align: center;
}

/* Apariencia: a small preview of each theme; rows on phones, three cards from 560 px */
.theme-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}

.theme-option .theme-option__preview {
  width: 76px;
  flex: none;
}

@media (min-width: 560px) {
  .theme-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .theme-option {
    flex-direction: column;
    padding: var(--space-2) var(--space-2) var(--space-3);
    text-align: center;
  }

  .theme-option .theme-option__preview {
    width: 100%;
  }
}

.theme-option:hover {
  border-color: var(--border-strong);
}

.theme-option.is-selected {
  border-color: var(--accent);
}

.theme-option:active {
  transform: scale(0.97);
}

.theme-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-option__preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.theme-option__preview--dark {
  background: #000;
  --ink: rgba(255, 255, 255, 0.85);
  --ink-soft: rgba(255, 255, 255, 0.3);
}

.theme-option__preview--light {
  background: #f2f2f3;
  --ink: rgba(0, 0, 0, 0.8);
  --ink-soft: rgba(0, 0, 0, 0.22);
}

.theme-option__preview--auto {
  background: linear-gradient(135deg, #f2f2f3 50%, #000 50%);
  --ink: rgba(128, 128, 128, 0.95);
  --ink-soft: rgba(128, 128, 128, 0.55);
}

.theme-option__bar {
  width: 60%;
  height: 8px;
  border-radius: 4px;
  background: var(--ink);
}

.theme-option__line {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-soft);
}

.theme-option__line--short {
  width: 70%;
}

.theme-option__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.theme-picker__note {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
/* v0.12: Inicio's tabs (Todo el mundo · Siguiendo · Popular) slide their panel in like the profile's */
.home-panel.htmx-request {
  opacity: 0.55;
}

.home-panel.is-entering {
  animation: panel-in-next 260ms var(--ease-out);
}

.home-panel.is-entering[data-dir="prev"] {
  animation-name: panel-in-prev;
}

/* Popular: the previous month's posts, under their heading (first days of a month) */
.feed-heading {
  margin: var(--space-3) var(--space-2) 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}