/* Quiet community UI: hierarchy first, motion only on interaction. */
:root {
  --ui-ink: #202a3b;
  --ui-secondary: #647084;
  --ui-hover: #f3f5f8;
  --ui-ease: cubic-bezier(.2,.7,.2,1);
}
.desktop-sidebar .directory-nav-link,
.drawer .directory-nav-link {
  margin: 3px 0;
  min-height: 44px;
  padding: 11px 16px;
  background: transparent;
  color: #4e5a6d;
  font-weight: 500;
  border-radius: 9px;
}
.directory-nav-link > span { color: #748095; font-size: 13px; }
.desktop-sidebar .sidebar-home { margin-bottom: 7px; min-height: 44px; }
.sidebar-home.active,
.sidebar-group button.active { background: #eaf0ff; color: var(--accent); }
.sidebar-group { margin-top: 22px; }
.sidebar-group h2 { color: #707b8e; letter-spacing: 0; }
.sidebar-group button { min-height: 42px; }
.sidebar-footer { line-height: 1.7; }

#latestList .post { padding: 18px 20px; }
#latestList .post-labels { gap: 7px; margin-bottom: 6px; }
#latestList .post-title {
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -.3px;
}
#latestList .post-meta { font-size: 12px; line-height: 1.6; margin-top: 9px; gap: 10px; }
#latestList :is(.post-meta,.post-author,.meta-right,.post-subcategory) { color: var(--ui-secondary); }
#latestList .post-subcategory { font-size: 12px; }
#latestList .tag { font-size: 12px; font-weight: 500; }
#latestList .post-comment-count { font-size: 12px; font-weight: 600; }
#popularSection .post-title { font-size: 14px; color: var(--ui-ink); }
#popularSection .post-meta,
#popularSection .popularity-criteria { font-size: 12px; }
#homePopularTabs button { min-height: 36px; }
.feed-read-notice { font-size: 12px; line-height: 1.65; }
.feed-read-notice button { font-size: 12px; }
.home-feed-tabs { position: relative; }
.home-feed-tabs button { color: #657084; font-weight: 600; }
.home-feed-tabs button[aria-pressed="true"] { color: var(--ui-ink); }
.home-feed-tabs.motion-ready button { border-bottom-color: transparent; }
.home-feed-tabs.motion-ready::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--tab-width);
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(var(--tab-left));
  pointer-events: none;
  transition: transform 180ms var(--ui-ease), width 180ms var(--ui-ease);
}

/* Explicit properties avoid animating layout or delaying navigation. */
:is(.top-actions button,.desktop-compose,.compose-button,.primary-button,
    .home-quick,.quick-menu,.drawer-link,.directory-nav-link,.sidebar-home,
    .sidebar-group button,.home-feed-tabs button,.popular-period-tabs button,
    .nav-item,.header-account,.unified-search-button,.modal-head .icon-button) {
  transition: transform 120ms var(--ui-ease), background-color 160ms ease, color 160ms ease;
}
:is(.top-actions button,.desktop-compose,.compose-button,.primary-button,
    .home-quick,.quick-menu,.drawer-link,.directory-nav-link,.sidebar-home,
    .sidebar-group button,.popular-period-tabs button,.nav-item,
    .unified-search-button,.modal-head .icon-button):not(:disabled):active {
  transform: scale(.98);
}
.drawer-link:active,.quick-menu:active { opacity: 1; background: var(--ui-hover); }
.drawer {
  visibility: hidden;
  transition: transform 220ms var(--ui-ease), visibility 0s linear 220ms;
}
.drawer.open { visibility: visible; transition-delay: 0s; }
.drawer-backdrop:not(.hidden) { animation: quiet-backdrop-in 180ms ease-out; }
.modal-backdrop:not(.hidden) > .modal-sheet { animation: quiet-sheet-in 180ms var(--ui-ease); }
@keyframes quiet-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes quiet-sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (hover:hover) and (pointer:fine) {
  .desktop-sidebar .directory-nav-link:hover,
  .drawer .directory-nav-link:hover,
  .drawer-link:hover { background: var(--ui-hover); color: var(--ui-ink); }
  #latestList .post:hover { background: #fafbfd; }
}
@media (max-width:900px) {
  #latestList .post { padding: 17px 18px; }
  #latestList .post-meta { margin-top: 8px; }
  .feed-read-notice { flex-wrap: wrap; row-gap: 0; }
  .feed-read-notice > span { flex: 1; min-width: 180px; }
  .bottom-nav .nav-item { color: #657084; }
  .bottom-nav .nav-item.active { color: var(--accent); }
  .bottom-nav .nav-item small { font-size: 11px; }
  .bottom-nav .compose-button { box-shadow: none; }
  .home-quick b { font-size: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  html.community-app { scroll-behavior: auto; }
  .community-app *, .community-app *::before, .community-app *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(.top-actions button,.desktop-compose,.compose-button,.primary-button,
      .home-quick,.quick-menu,.drawer-link,.directory-nav-link,.sidebar-home,
      .sidebar-group button,.popular-period-tabs button,.nav-item,
      .unified-search-button,.modal-head .icon-button):active { transform: none; }
}