/* ════════════════════════════════════════════════════════════
   LAYOUT — top nav, sidebar, bottom nav, drawers, misc panels
   ════════════════════════════════════════════════════════════ */

/* ── Top / desktop nav ─────────────────────────────────────── */

.top-nav {
  display: none;
  border-bottom: var(--line);
  background: var(--color-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 45;
}

.top-nav__inner {
  width: min(100%, calc(var(--max-width) + (var(--space-4) * 2)));
  margin: 0 auto;
  min-height: var(--top-nav-height);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  min-width: 148px;
}

.brand__mark {
  width: 72px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Desktop sidebar nav links ─────────────────────────────── */

.desktop-nav {
  margin-left: 0;
  flex: 1 1 auto;
}

.desktop-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.desktop-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-2);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.desktop-nav__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 9px;
  opacity: 0.92;
  position: relative;
}

.desktop-nav__icon .app-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* ── Navigation unread marker (typical social media style) ─── */

.nav-unread-dot {
  position: absolute;
  border-radius: 999px;
  background-color: var(--color-text);
  box-sizing: content-box;
  pointer-events: none;
  z-index: 4;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}

.desktop-nav__icon .nav-unread-dot {
  top: -2px;
  right: -2px;
  width: 6.5px;
  height: 6.5px;
  border: 1.5px solid var(--color-surface);
}

.bottom-nav__icon .nav-unread-dot {
  top: -1px;
  right: -1px;
  width: 7.5px;
  height: 7.5px;
  border: 2px solid var(--color-surface);
}

.nav-unread-dot.is-visible {
  transform: scale(1);
  opacity: 1;
}

:root[data-theme="dark"] .desktop-nav__icon .nav-unread-dot {
  background-color: #ffffff;
  border-color: var(--color-surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .bottom-nav__icon .nav-unread-dot {
  background-color: #ffffff;
  border-color: #121316;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] .desktop-nav__icon .nav-unread-dot {
  background-color: #0a0a0b;
  border-color: var(--color-surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

:root[data-theme="light"] .bottom-nav__icon .nav-unread-dot {
  background-color: #0a0a0b;
  border-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.desktop-nav__link:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

.desktop-nav__link.is-active {
  color: var(--color-text);
  font-weight: 700;
  background: var(--color-active);
  border-color: var(--color-border-strong);
}

.desktop-nav__link.is-active .desktop-nav__icon {
  opacity: 1;
}

/* ── Nav logout / account button ───────────────────────────── */

.nav-logout-btn {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: var(--line);
  border-radius: var(--radius-2);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logout-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

:root[data-theme="dark"] .nav-logout-btn {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
}

:root[data-theme="dark"] .nav-logout-btn:hover {
  background: var(--color-surface-soft);
}

/* ── Main layout ───────────────────────────────────────────── */

.app-main {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 calc(88px + env(safe-area-inset-bottom));
}

.app-main--narrow,
.app-main--take {
  max-width: 100%;
}

.app-main--search {
  max-width: 1180px;
}

.app-main--profile {
  max-width: 940px;
}

.feed-column,
.take-detail,
.profile-column,
.composer {
  min-width: 0;
}

.feed-column,
.profile-column {
  background: var(--color-surface);
  border-top: var(--line);
  border-bottom: var(--line);
  border-left: 0;
  border-right: 0;
}

body[data-page="home"] .feed-column {
  background: transparent;
  border: 0;
}

body[data-page="settings"] .feed-column {
  background: transparent;
  border: 0;
}

body[data-page="category"] .feed-column {
  background: transparent;
  border: 0;
}

/* ── Sticky feed head ──────────────────────────────────────── */

.feed-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--line);
}

body[data-page="home"] .feed-head {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-page="settings"] .feed-head {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-page="category"] .feed-head {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.feed-head__inner {
  padding: 14px var(--space-4) 12px;
}

.feed-head__inner .page-title {
  padding: 0;
}

.feed-head .page-title {
  padding: 14px var(--space-4) 12px;
}

/* ── Profile / view tabs ───────────────────────────────────── */

.profile-tabs,
.view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-tab,
.view-toggle__btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-1);
  border: var(--line);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.profile-tab:hover,
.view-toggle__btn:hover {
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.profile-tab--active,
.view-toggle__btn--active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-brand-contrast);
}

/* ── Side column ───────────────────────────────────────────── */

.side-column {
  display: none;
}

.side-block {
  border: var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-4);
  background: var(--color-surface);
}

.side-block + .side-block {
  margin-top: var(--space-4);
}

.side-block__title {
  margin: 0 0 var(--space-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.side-block__text {
  margin: 0 0 var(--space-3);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

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

.topic-list li + li {
  margin-top: 10px;
}

.topic-list a {
  font-weight: 700;
  font-size: 0.92rem;
}

.topic-list a:hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

/* ── Notifications drawer ──────────────────────────────────── */

.notifications-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.notifications-drawer[hidden] {
  display: none;
}

.notifications-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--color-overlay);
  cursor: pointer;
}

.notifications-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: min(400px, calc(100vw - 24px));
  height: 100%;
  background: var(--color-surface);
  border-right: var(--line);
  overflow: auto;
  transform: translateX(-102%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--shadow-panel);
}

.notifications-drawer.is-open .notifications-drawer__panel {
  transform: translateX(0);
}

.notifications-drawer__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 18px var(--space-4) 16px;
  border-bottom: var(--line);
  background: var(--color-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.notifications-drawer__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.notifications-drawer__close {
  /* 40×40 minimum touch target (was 32px) */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.notifications-drawer__close:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

.notifications-drawer .feed-state {
  margin: 0;
  border-bottom: var(--line);
}

.notifications-drawer__list {
  display: block;
}

body.has-notifications-drawer-open {
  overflow: hidden;
}

body.has-more-drawer-open {
  overflow: hidden;
}

body.has-onboarding-open {
  overflow: hidden;
}

.notification-empty {
  padding: 48px var(--space-5) 56px;
  border-bottom: var(--line);
}

.notification-empty__eyebrow {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.notification-empty__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1rem + 0.7vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.notification-empty__text {
  max-width: 44ch;
  margin: 14px 0 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ── Notification items ────────────────────────────────────── */

.notification-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px var(--space-4);
  border-bottom: var(--line);
  transition: background 120ms ease;
  cursor: pointer;
}

.notification-item:hover {
  background: var(--color-hover);
}

.notification-item.is-unread {
  background: color-mix(in srgb, var(--color-surface-soft) 60%, transparent);
}

.notification-item__avatar {
  width: 46px;
  height: 46px;
  border: var(--line);
  border-radius: 50%;
  background: var(--color-surface-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.notification-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notification-item__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notification-item__message {
  font-size: 0.9rem;
  line-height: 1.5;
}

.notification-item__snippet {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.notification-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 0.74rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.notification-item__actor {
  font-weight: 700;
  color: var(--color-text);
}

.notification-item__state {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

.notification-item.is-unread .notification-item__state {
  background: var(--color-text);
}

/* -- Onboarding modal -------------------------------------------------- */

.onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 96;
  padding: 20px;
  display: grid;
  place-items: center;
}

.onboarding-modal[hidden] {
  display: none;
}

.onboarding-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.onboarding-modal__panel {
  position: relative;
  width: min(600px, calc(100vw - 24px));
  max-height: min(90dvh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border-strong);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.onboarding-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.onboarding-modal__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.onboarding-modal__brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--color-brand-contrast);
  background: var(--color-brand);
}

.onboarding-modal__kicker {
  margin: 0;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.onboarding-modal__title {
  margin: 8px 0 0;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.05em;
}

.onboarding-modal__title:focus {
  outline: none;
}

.onboarding-modal__close {
  width: 36px;
  height: 36px;
  border: var(--line);
  border-radius: 50%;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.onboarding-modal__close:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.onboarding-modal__copy {
  margin: 10px 0 0;
  max-width: 49ch;
  font-size: 0.91rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.onboarding-modal__visual {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 22px 32px;
  background: radial-gradient(circle at 80% 10%, var(--color-surface-strong), transparent 45%), var(--color-surface-muted);
  border-top: var(--line);
  border-bottom: var(--line);
}

.onboarding-modal__content {
  min-height: 138px;
  padding: 22px 28px 8px;
}

.onboarding-modal__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px 20px;
}

.onboarding-modal__step-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.onboarding-modal__dots {
  display: flex;
  gap: 6px;
}

.onboarding-modal__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: width var(--transition-smooth), background var(--transition-smooth);
}

.onboarding-modal__dots span.is-active {
  width: 20px;
  border-radius: 999px;
  background: var(--color-brand);
}

.onboarding-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px 24px;
  border-top: var(--line);
}

.onboarding-modal__skip {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.onboarding-modal__nav-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.onboarding-modal__actions .btn {
  min-height: 40px;
  border-radius: 10px;
}

.onboarding-modal__actions [hidden] {
  display: none;
}

@media (max-width: 640px) {
  .onboarding-modal {
    padding: 0;
    align-items: end;
  }

  .onboarding-modal__panel {
    width: 100%;
    max-height: 96dvh;
    border-radius: 20px 20px 0 0;
  }

  .onboarding-modal__visual {
    min-height: 205px;
    padding: 16px 22px;
  }

  .onboarding-modal__content {
    padding: 20px 22px 6px;
  }

  .onboarding-modal__progress {
    padding: 10px 22px 18px;
  }

  .onboarding-modal__actions {
    align-items: stretch;
    flex-direction: column-reverse;
    padding: 16px 22px max(20px, env(safe-area-inset-bottom));
  }

  .onboarding-modal__nav-actions {
    width: 100%;
  }

  .onboarding-modal__nav-actions .btn {
    flex: 1;
  }

  .onboarding-modal__skip {
    align-self: center;
    min-height: 34px;
  }
}

/* ── More drawer ───────────────────────────────────────────── */

.onboarding-demo {
  width: min(100%, 400px);
  min-height: 174px;
  padding: 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
}

.onboarding-demo__tabs,
.onboarding-demo__votes { display: flex; gap: 8px; }
.onboarding-demo__tabs { padding-bottom: 13px; border-bottom: var(--line); }
.onboarding-demo__tabs span { padding: 6px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); }
.onboarding-demo__tabs .is-active { color: var(--color-brand-contrast); background: var(--color-brand); }

.onboarding-demo__take,
.onboarding-demo__comment,
.onboarding-demo__person { display: flex; align-items: flex-start; gap: 11px; }
.onboarding-demo__take { padding-top: 15px; }
.onboarding-demo__avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: var(--line); border-radius: 50%; background: var(--color-surface-soft); font-size: 0.76rem; font-weight: 800; }
.onboarding-demo__take strong,
.onboarding-demo__person strong { font-size: 0.77rem; }
.onboarding-demo__take p,
.onboarding-demo__question { margin: 6px 0; font-size: 0.88rem; font-weight: 700; line-height: 1.4; }
.onboarding-demo__take small,
.onboarding-demo__person small { display: block; color: var(--color-text-muted); font-size: 0.68rem; line-height: 1.35; }

.onboarding-demo--vote { display: grid; align-content: center; gap: 14px; }
.onboarding-demo__question { margin: 0; font-size: 0.94rem; }
.onboarding-demo__votes span { flex: 1; display: flex; justify-content: space-between; gap: 5px; padding: 10px; border-radius: 10px; background: var(--color-agree-bg); color: var(--color-agree); font-size: 0.7rem; font-weight: 700; }
.onboarding-demo__votes span + span { background: var(--color-disagree-bg); color: var(--color-disagree); }
.onboarding-demo__comment { align-items: center; padding-top: 10px; border-top: var(--line); color: var(--color-text-muted); font-size: 0.7rem; }

.onboarding-demo--people { display: grid; align-content: center; gap: 16px; }
.onboarding-demo__person { align-items: center; }
.onboarding-demo__person > span:nth-child(2) { flex: 1; min-width: 0; }
.onboarding-demo__person em { padding: 7px 10px; border: var(--line); border-radius: 999px; font-size: 0.68rem; font-style: normal; font-weight: 700; }

.onboarding-demo--create { display: grid; align-content: center; gap: 15px; }
.onboarding-demo__draft-label { color: var(--color-text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.onboarding-demo--create p { margin: 0; padding: 12px 0; border-top: var(--line); border-bottom: var(--line); font-size: 0.88rem; font-weight: 700; line-height: 1.4; }
.onboarding-demo__draft-action { justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; color: var(--color-brand-contrast); background: var(--color-brand); font-size: 0.7rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .onboarding-modal__dots span { transition: none; }
}

.more-drawer {
  position: fixed;
  inset: 0;
  z-index: 72;
}

.more-drawer[hidden] {
  display: none;
}

.more-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.more-drawer__panel {
  position: absolute;
  top: auto;
  bottom: 24px;
  left: 0;
  width: min(300px, calc(100vw - 36px));
  background: var(--color-surface);
  border: var(--line);
  border-top-right-radius: var(--radius-3);
  border-bottom-right-radius: var(--radius-3);
  max-height: min(360px, calc(100vh - 48px));
  overflow: auto;
  transform: translateX(-104%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--shadow-panel);
}

.more-drawer.is-open .more-drawer__panel {
  transform: translateX(0);
}

.more-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px var(--space-4) 14px;
  border-bottom: var(--line);
}

.more-drawer__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.more-drawer__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.more-drawer__close:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

.more-drawer__actions {
  display: grid;
  gap: 8px;
  padding: var(--space-4);
}

.more-drawer__action {
  min-height: 42px;
  border: var(--line);
  border-radius: var(--radius-2);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  padding: 0 14px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.more-drawer__action:hover {
  background: var(--color-hover);
  border-color: var(--color-border-strong);
}

.more-drawer__action--danger {
  color: var(--color-disagree);
}

/* ── Appearance card ───────────────────────────────────────── */

.appearance-card {
  border: var(--line);
  border-radius: var(--radius-2);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.appearance-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 12px 14px;
  border-bottom: var(--line);
}

.appearance-card__title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.appearance-card__icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.appearance-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 12px 14px;
}

.appearance-card__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.appearance-switch {
  width: 38px;
  height: 22px;
  border: var(--line);
  border-radius: var(--radius-pill);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-strong);
  transition: background 180ms ease, border-color 180ms ease;
  cursor: pointer;
  flex-shrink: 0;
}

.appearance-switch__thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 180ms ease, background 180ms ease;
}

.appearance-switch[data-theme-state="dark"] {
  background: var(--color-text);
  border-color: var(--color-text);
}

.appearance-switch[data-theme-state="dark"] .appearance-switch__thumb {
  transform: translateX(16px);
  background: var(--color-surface);
}

/* ── Bottom nav (mobile) ───────────────────────────────────── */
/* iOS-style floating glass tab bar: translucent frosted pill that
   floats above the content with real see-through blur.

   This app is a real multi-page app (each nav tap is a genuine browser
   navigation to a different .html file, not an in-app view swap), so a
   continuous slide animation across taps isn't possible without a much
   bigger SPA rewrite. What IS achievable on today's platform without that
   rewrite: the native Cross-Document View Transitions API. `@view-transition`
   below opts every same-origin navigation into a browser-native animated
   handoff, and naming .bottom-nav__inner as a persistent
   view-transition-name means the browser treats the nav bar itself as one
   continuous element morphing across the page change, instead of the whole
   screen (nav included) hard-cutting. Supported in Chrome/Edge 126+ and
   Safari 18.2+ (so effectively current Chrome Android + iOS Safari); it
   silently falls back to a normal instant page change everywhere else —
   no JS, no risk, nothing to break on unsupported browsers. */

@view-transition {
  navigation: auto;
}

@supports (view-transition-name: none) {
  .bottom-nav__inner {
    view-transition-name: bottom-nav-shell;
  }

  .bottom-nav__link--create {
    view-transition-name: bottom-nav-create;
  }

  /* The default cross-fade the browser applies to a persistently-named
     element can look like a flash/pop on something that isn't actually
     changing shape between pages. Since the nav bar's own appearance is
     identical page to page, skip the fade/scale on its group specifically
     and let it just sit still while the page content around it
     transitions — this is what makes it read as "the nav stayed put"
     rather than "the nav also flickered". */
  ::view-transition-old(bottom-nav-shell),
  ::view-transition-new(bottom-nav-shell),
  ::view-transition-old(bottom-nav-create),
  ::view-transition-new(bottom-nav-create) {
    animation: none;
    mix-blend-mode: normal;
  }
}

/* Installed-app notification opt-in, placed above the mobile dock. */
.clashe-push-prompt {
  position: fixed;
  z-index: 80;
  left: 12px;
  right: 12px;
  bottom: calc(var(--mobile-nav-clearance, 96px) + env(safe-area-inset-bottom, 0px) + 8px);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  width: min(420px, calc(100vw - 24px));
  margin-inline: auto;
  padding: 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 22px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .clashe-push-prompt {
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
  }
}

.clashe-push-prompt__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface));
  color: var(--color-brand);
  font-size: 18px;
}

.clashe-push-prompt__copy { display: grid; gap: 4px; min-width: 0; }
.clashe-push-prompt__copy strong { font-size: 0.88rem; }
.clashe-push-prompt__copy span { color: var(--color-text-muted); font-size: 0.77rem; line-height: 1.4; }
.clashe-push-prompt__actions { grid-column: 2; display: flex; gap: 8px; }
.clashe-push-prompt__actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.clashe-push-prompt__actions [data-push-enable] { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
.clashe-push-prompt__actions button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

@media (min-width: 1025px) {
  .clashe-push-prompt { left: auto; right: 24px; bottom: 24px; margin: 0; }
}

@media (prefers-reduced-transparency: reduce) {
  .clashe-push-prompt { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Lightweight in-app alert, kept clear of the floating mobile dock. */
.notification-banner {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 60;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  width: min(380px, calc(100vw - 24px));
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
  animation: notification-banner-enter 200ms ease-out both;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .notification-banner {
    background: color-mix(in srgb, var(--color-surface) 97%, transparent);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }
}

.notification-banner__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface));
  color: var(--color-brand);
  font-size: 18px;
}

.notification-banner__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.notification-banner__heading {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.notification-banner__message {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.82rem;
  line-height: 1.35;
}

.notification-banner__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.notification-banner__close:hover { background: var(--color-surface-soft); color: var(--color-text); }
.notification-banner :is(a, button):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

@keyframes notification-banner-enter {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .notification-banner { left: 12px; right: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .notification-banner { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .notification-banner { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.bottom-nav {
  --dock-surface: rgba(239, 245, 252, 0.27);
  --dock-border: rgba(255, 255, 255, 0.72);
  --dock-highlight: rgba(255, 255, 255, 0.96);
  --dock-lens: rgba(255, 255, 255, 0.36);
  --dock-accent: #111827;
  --dock-sheen: rgba(255, 255, 255, 0.45);
  --dock-rim: rgba(255, 255, 255, 0.98);
  --dock-ink: #111827;
  --dock-muted: #354153;
  --dock-shadow: 0 18px 38px rgba(24, 34, 57, 0.2), 0 4px 12px rgba(24, 34, 57, 0.13);
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: transparent;
  border: 0;
  pointer-events: none;
}

.bottom-nav__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  pointer-events: none;
}

.bottom-nav__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 5px 7px;
  margin: 0;
  border: 1px solid var(--dock-border);
  border-radius: 34px;
  background: var(--color-surface);
  box-shadow: var(--dock-shadow), inset 0 1.5px 1px var(--dock-highlight), inset 0 -2px 4px rgba(66, 81, 112, 0.2), inset 1px 0 1px rgba(255, 255, 255, 0.55);
  pointer-events: auto;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav__inner,
  .bottom-nav__link--create {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.25), transparent 46%, rgba(119, 143, 181, 0.08)), var(--dock-surface);
    backdrop-filter: blur(28px) saturate(190%) contrast(1.08);
    -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(1.08);
  }
}

.bottom-nav__inner::before,
.bottom-nav__link--create::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(170deg, var(--dock-sheen) 0%, rgba(255, 255, 255, 0.08) 27%, transparent 49%, rgba(255, 255, 255, 0.1) 76%, var(--dock-sheen) 100%);
  opacity: 0.75;
}

/* A directional rim adds depth without clouding the center of the glass. */
.bottom-nav__inner::after,
.bottom-nav__link--create::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from 215deg at 50% 50%, transparent 0deg, var(--dock-rim) 32deg, rgba(255, 255, 255, 0.22) 85deg, var(--dock-rim) 142deg, transparent 190deg, rgba(255, 255, 255, 0.22) 260deg, var(--dock-rim) 316deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.bottom-nav__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 5px 0;
  gap: 4px;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: var(--dock-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
}

.bottom-nav__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 1;
}

.bottom-nav__icon .app-icon {
  width: 24px;
  height: 24px;
  font-size: 22px;
}

.bottom-nav__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: inherit;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.bottom-nav__label-short { display: none; }

@media (max-width: 360px) {
  .bottom-nav__label-long { display: none; }
  .bottom-nav__label-short { display: inline; }
}

.bottom-nav__link:hover { color: var(--dock-ink); }
.bottom-nav__link.is-active {
  color: var(--dock-accent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.bottom-nav__link.is-active .bottom-nav__label { font-weight: 700; }

.bottom-nav__link:active,
.bottom-nav__link.is-pressed { transform: scale(0.95); }

.bottom-nav__link:focus-visible {
  outline: 2px solid var(--dock-ink);
  outline-offset: 2px;
}

.bottom-nav__active-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.45), transparent 45%, rgba(255, 255, 255, 0.13)), var(--dock-lens);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 1px var(--dock-highlight), inset 0 -2px 3px rgba(74, 96, 127, 0.17), 0 4px 10px rgba(20, 28, 45, 0.12), 0 0 0 0.5px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), width 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.bottom-nav__link.is-active::after { display: none; }

.bottom-nav__link--create {
  isolation: isolate;
  align-self: center;
  justify-self: center;
  width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  border: 1px solid var(--dock-border);
  border-radius: 50%;
  color: var(--dock-ink);
  background: var(--color-surface);
  box-shadow: 0 14px 28px rgba(24, 34, 57, 0.2), 0 3px 7px rgba(24, 34, 57, 0.12), inset 0 2px 2px var(--dock-rim), inset 0 -3px 4px rgba(80, 100, 125, 0.22);
  pointer-events: auto;
}

.bottom-nav__link--create .bottom-nav__label { display: none; }
.bottom-nav__link--create .app-icon {
  position: relative;
  z-index: 1;
  font-size: 25px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.48));
}
.bottom-nav__link--create:hover,
.bottom-nav__link--create.is-active { color: var(--dock-accent); }
.bottom-nav__link--create:active,
.bottom-nav__link--create.is-pressed { transform: scale(0.94); }

:root[data-theme="dark"] .bottom-nav {
  --dock-surface: rgba(19, 25, 36, 0.41);
  --dock-border: rgba(255, 255, 255, 0.33);
  --dock-highlight: rgba(255, 255, 255, 0.53);
  --dock-lens: rgba(116, 140, 181, 0.18);
  --dock-ink: #fff;
  --dock-muted: #e8ecf4;
  --dock-accent: #fff;
  --dock-sheen: rgba(255, 255, 255, 0.16);
  --dock-rim: rgba(255, 255, 255, 0.7);
  --dock-shadow: 0 18px 38px rgba(0, 0, 0, 0.43), 0 4px 12px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .bottom-nav__inner,
:root[data-theme="dark"] .bottom-nav__link--create {
  box-shadow: var(--dock-shadow), inset 0 1.5px 1px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.37);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="dark"] .bottom-nav__inner,
  :root[data-theme="dark"] .bottom-nav__link--create {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.13), transparent 46%, rgba(0, 0, 0, 0.08)), var(--dock-surface);
  }
}

:root[data-theme="dark"] .bottom-nav__active-pill {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.23), transparent 44%, rgba(255, 255, 255, 0.07)), var(--dock-lens);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.24), 0 4px 10px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .feed-head {
  background: color-mix(in srgb, var(--color-surface) 96%, white 4%);
}

@media (prefers-reduced-transparency: reduce) {
  .bottom-nav__inner,
  .bottom-nav__link--create {
    background: var(--color-surface) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .bottom-nav__active-pill {
    background: var(--color-hover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav__link,
  .bottom-nav__active-pill { transition: none; }
  .bottom-nav__link:active,
  .bottom-nav__link.is-pressed { transform: none; }
  .bottom-nav__link--create { transform: none; }
  ::view-transition-group(bottom-nav-shell),
  ::view-transition-group(bottom-nav-create) { animation: none; }
}

@media (forced-colors: active) {
  .bottom-nav__inner { background: Canvas !important; }
  .bottom-nav__link { color: LinkText; }
  .bottom-nav__link.is-active { outline: 2px solid Highlight; }
  .bottom-nav__active-pill { background: Highlight !important; opacity: 0.18; }
  .bottom-nav__link--create { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace !important; }
}

@media (min-width: 1025px) {
  .app-legal-footer {
    width: min(100%, calc(var(--max-width) + var(--desktop-nav-width) + var(--desktop-nav-gap)));
    padding-left: calc(var(--desktop-nav-width) + var(--desktop-nav-gap));
    padding-right: var(--space-5);
    padding-bottom: var(--space-6);
    justify-content: flex-start;
  }
}