/* ==========================================================================
   theme-zhihu — design tokens & primitives
   Zhihu light: #f6f6f6 page, white cards, #121212 text, #8590a6 secondary.
   Dark mode swaps surfaces only; the accent is injected by theme-init.html.
   ========================================================================== */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --accent: #056de8;
  --accent-rgb: 5, 109, 232;
  --accent-hover: #0459bd;
  --accent-pressed: #034391;
  --accent-on: #ffffff;

  --bg: #f6f6f6;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-2: #f6f6f6;
  --surface-3: #eff1f3;
  --surface-3-rgb: 239, 241, 243;
  --text: #121212;
  --text-2: #444444;
  --muted: #8590a6;
  --muted-strong: #646464;
  --border: #ebebeb;
  --divider: #f0f0f0;
  --border-strong: #d3d3d3;

  --shadow-card: 0 1px 3px rgba(18, 18, 18, 0.1);
  --shadow-pop: 0 8px 24px rgba(18, 18, 18, 0.12);

  /* 右缘那两颗浮盘（目录、返回顶部）：它们压在正文上，又没有边框，阴影是唯一的
     分隔。近处一层接触影把盘子钉在页面上，远处一层环境影给它高度——比卡片浓一档、
     比浮层紧一圈，因为盘子小，散得太开就只剩一团灰雾。 */
  --shadow-fab: 0 1px 3px rgba(18, 18, 18, 0.12), 0 6px 16px rgba(18, 18, 18, 0.14);

  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Five-star strip used by the douban and bangumi rating chips. */
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");

  /* Frosted bar veil. It has to be thick enough that a vivid photo scrolling
     underneath reads as a soft glow instead of a coloured band, and thin enough
     that the blur still shows. */
  --nav-veil: 0.72;

  /* Radius of the bar/drawer frost. Wide enough that shapes underneath turn
     into colour, not silhouettes. */
  --nav-blur: 48px;

  /* The mobile drawer is a large surface, so it carries a little more of the
     page through than the thin bars do. */
  --nav-veil-panel: 0.64;

  /* Frost thickness for popovers that park on top of the card's own text. The
     bars can stay thinner because what moves under them never stays legible. */
  --pop-veil: 0.9;

  /* Ink / paper tints layered over the frosted bars: low alpha keeps the same
     average tone as a solid plate while the blur below still shows through. */
  --nav-tint: rgba(18, 18, 18, 0.06);
  --nav-tint-hover: rgba(18, 18, 18, 0.1);

  /* Tiles sitting inside an already frosted panel: they must not get their own
     backdrop-filter (re-blurring a blurred layer flattens it to grey), so the
     glass read comes from a slightly deeper ink plate than --nav-tint. */
  --glass-tile: rgba(18, 18, 18, 0.09);
  --glass-tile-hover: rgba(18, 18, 18, 0.14);

  /* --surface-3 plus MD3's 8% ink state layer: the pressed look for controls
     whose rest colour is already --surface-3, so hover stays a tone step and
     never borrows the accent. */
  --surface-3-hover: #ddddde;

  /* Header height, shared by phones and desktop: the bar holds 30px branding and
     34px controls, so below this the bar reads cramped. */
  --topbar-h: 56px;
  --tabbar-h: 52px;
  --container: 1000px;
  --gutter: 12px;

  color-scheme: light;
}

:root.dark {
  --bg: #121212;
  --surface: #1e1e1e;
  --surface-rgb: 30, 30, 30;
  --surface-2: #252525;
  --surface-3: #2b2b2b;
  --surface-3-rgb: 43, 43, 43;
  --text: #e8e8e8;
  --text-2: #c4c4c4;
  --muted: #8590a6;
  --muted-strong: #a6a6a6;
  --border: #2e2e2e;
  --divider: #272727;
  --border-strong: #3d3d3d;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.6);
  /* 深色下 #1e1e1e 的盘子只比 #121212 的页面亮一点，浅色那档的浓度会整个看不见，
     所以两层都压到半档以上：这里要的是盘沿一圈更黑的底，而不是一层灰。 */
  --shadow-fab: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.55);

  --nav-tint: rgba(255, 255, 255, 0.07);
  --nav-tint-hover: rgba(255, 255, 255, 0.11);
  --glass-tile: rgba(0, 0, 0, 0.42);
  --glass-tile-hover: rgba(0, 0, 0, 0.56);
  --surface-3-hover: #3c3c3c;
  --nav-veil: 0.76;
  --nav-veil-panel: 0.68;
  --pop-veil: 0.92;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
  /* Reserve the scrollbar track up front: without it the centred shell jumps
     sideways the moment a page grows past the viewport, which reads as a
     jitter on every refresh. */
  scrollbar-gutter: stable;
}

/* Fancybox hides the page scrollbar by reserving its width again as a body
   margin. The gutter above already does that, so the margin only shoves the
   centred shell sideways and leaves a bare strip beside the backdrop. Keep
   the gutter, drop the margin and paint the gutter with the backdrop. */
html.with-fancybox {
  overflow-y: hidden;
  background: rgb(24, 24, 27);
}

/* The lock lives on html, not on the body: hiding the body's overflow turns the
   body into its own scroll container, and the sticky top bar then anchors to an
   unscrolled body and slides out of the viewport while the gallery is open.
   html already clips the viewport and keeps the scroll offset, and the body
   keeps Fancybox's touch-action: none, so the page stays still either way. */
html.with-fancybox body.hide-scrollbar {
  margin-right: 0 !important;
  overflow: visible !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll lock for the mobile drawer. It sits on html for the same reason as the
   lightbox lock above: hiding the body's overflow would make the body a scroll
   container and send the sticky top bar out of the viewport. */
html.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

img, video, svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
}

time {
  font-variant-numeric: tabular-nums;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  color: var(--text);
  font-size: 14px;
  line-height: 34px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

select:hover {
  background-color: var(--surface-3);
}

select:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.6);
  outline: none;
}

select option {
  background: var(--surface);
  color: var(--text);
}

html:not(.dark) select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23706f73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input {
  border: 0;
  background: none;
  outline: none;
}

[hidden] {
  display: none !important;
}

::selection {
  background: rgba(var(--accent-rgb), 0.18);
}

:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- icons ---------- */

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  overflow: visible;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- accessibility ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  transform: translateY(-200%);
  transition: transform 0.18s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- typography helpers ---------- */

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
}

.section-description {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.text-link .icon {
  font-size: 13px;
}

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

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn .icon {
  font-size: 15px;
}

.btn--primary,
.btn--filled {
  background: var(--accent);
  color: var(--accent-on);
}

.btn--primary:hover,
.btn--filled:hover {
  background: var(--accent-hover);
}

.btn--primary:active,
.btn--filled:active {
  background: var(--accent-pressed);
}

.btn--tonal {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.btn--tonal:hover {
  background: rgba(var(--accent-rgb), 0.16);
}

.btn--ghost {
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--muted-strong);
  font-size: 18px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.badge--primary {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

/* ---------- chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.chips--scroll::-webkit-scrollbar {
  display: none;
}

/* Filter rows sit between the page head and the content. The horizontal
   padding matches the page-head's own padding so the chips line up with the
   title text instead of hanging off the card edge. */
.chips--filter {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 0 12px;
  padding: 0 20px;
}

.chips--filter::-webkit-scrollbar {
  display: none;
}

/* The tag and group filters sit in their own surface card, the way the bangumi
   page keeps its filter row inside the content card instead of letting the
   pills float on the page background. */
.filter-card {
  margin: 0 0 10px;
  padding: 10px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.filter-card .chips--filter {
  margin: 0;
  padding: 0;
}

/* 独立卡片档的首页：文章/瞬间与标签同一行。不要胶囊外壳，两个 tab
   做成和标签同款的小胶囊（同高同字号），默认灰底与白卡区分；
   文章视图下瞬间标签整组隐藏。 */
.filter-card--home {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-card--home .feed-head--inline {
  display: contents;
}

.filter-card--home .feed-tabs {
  flex: none;
  gap: 8px;
  padding: 0;
  background: none;
}

html[data-glass] .filter-card--home .feed-tabs {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
}

.filter-card--home .feed-tabs::before {
  content: none;
}

.filter-card--home .feed-tab {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--muted-strong);
  font-size: 13px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-card--home .feed-tab:hover {
  background: var(--surface-3-hover);
  color: var(--text);
}

html[data-home-view="posts"] .filter-card--home .feed-tab[data-home-tab="posts"],
html[data-home-view="moments"] .filter-card--home .feed-tab[data-home-tab="moments"] {
  background: var(--accent);
  color: var(--accent-on);
}

/* 标签与 tab 同高（32px）：行高在两种视图下恒定、切换不上下跳，
   也和其它页的 tag 卡片完全同高。 */
.filter-card.filter-card--home .chips--filter {
  flex: 1;
  min-width: 0;
  padding: 0;
  overflow-y: hidden;
}

html[data-home-view="posts"] .filter-card--home .chips--filter {
  display: none;
}

.chips--filter .chip {
  flex: 0 0 auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--muted-strong);
  font-size: 13px;
  /* No line-height on purpose: Chrome cannot shrink a line box below the font's
     own ascent+descent (~15.6px at 13px), so line-height: 1 stops centring the
     glyphs and drops them about 1.4px under the middle of the pill. Inheriting
     the body's 1.6 keeps the line box tall enough; the fixed height caps it. */
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  background: var(--surface-3-hover);
  color: var(--text);
}

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

.chip.is-active:hover {
  background: var(--accent-hover);
  color: var(--accent-on);
}

.chip__count {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --accent-on is white or near-black depending on the accent's luminance, so
   dimming with opacity keeps the count legible for either. */
.chip.is-active .chip__count {
  color: var(--accent-on);
  opacity: 0.78;
}

.chip--small {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
}

/* ---------- segmented view switch ---------- */

.view-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.view-switch button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 15px;
  transition: color 0.15s ease;
}

.view-switch button[aria-pressed="true"] {
  color: var(--text);
}

.view-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.15);
  transform: translateX(calc(var(--view-index, 0) * 30px));
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- avatars ---------- */

.avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
}

.avatar--xs {
  width: 20px;
  height: 20px;
}

/* ---------- empty state ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.empty-state__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  color: var(--muted);
  opacity: 0.6;
}

.empty-state h2 {
  font-size: 16px;
  font-weight: 500;
}

.empty-state p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 120;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(18, 18, 18, 0.86);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dark .toast {
  background: rgba(240, 240, 240, 0.92);
  color: #121212;
}

/* ---------- spinner ---------- */

@keyframes zhihu-spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--accent-rgb), 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: zhihu-spin 0.7s linear infinite;
}