/* ==========================================================================
   theme-zhihu — feeds: post cards, moments, archives and inline comments.
   ========================================================================== */

/* ---------- feed head / tabs ---------- */

.feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  margin-bottom: 10px;
}

/* 胶囊分段控件：容器是一枚圆角胶囊，背景跟随全局磨砂玻璃设置；选中态由一枚
   滑动指示胶囊（::before）承载，切换时平滑滑到另一侧而非跳变。 */
.feed-tabs {
  --cap-pad: 3px;
  --cap-gap: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--cap-gap);
  padding: var(--cap-pad);
  border-radius: 999px;
  background: var(--surface-2);
}

.feed-tabs::before {
  content: "";
  position: absolute;
  top: var(--cap-pad);
  bottom: var(--cap-pad);
  left: var(--cap-pad);
  width: calc((100% - 2 * var(--cap-pad) - var(--cap-gap)) / 2);
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.25s ease;
  pointer-events: none;
}

html[data-home-view="moments"] .feed-tabs::before {
  transform: translateX(calc(100% + var(--cap-gap)));
}

@media (prefers-reduced-motion: reduce) {
  .feed-tabs::before {
    transition: none;
  }
}

.feed-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted-strong);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.feed-tab:hover {
  color: var(--accent);
}

/* 选中段文字反白，底色由滑动指示胶囊提供；不加粗避免字宽变化引起抽动。 */
html[data-home-view="posts"] .feed-tab[data-home-tab="posts"],
html[data-home-view="moments"] .feed-tab[data-home-tab="moments"] {
  color: var(--accent-on);
}

/* Both home feeds are rendered; only the chosen one is laid out. */
html[data-home-view="posts"] [data-home-panel="moments"],
html[data-home-view="moments"] [data-home-panel="posts"] {
  display: none;
}

/* One-list mode (设置：首页另一个标签改为切换时再加载) fetches the other feed
   on the click that asks for it, and a click that has to wait says so here. */
.feed-tab.is-busy {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  animation: feed-tab-busy 1s ease-in-out infinite;
}

@keyframes feed-tab-busy {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.7;
  }
}

/* ---------- home page head ---------- */
.feed-head--inline {
  height: auto;
  margin: 6px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.feed-head--inline .feed-tabs {
  height: auto;
}

/* 胶囊背景跟随全局磨砂玻璃设置：开＝与顶栏同材质（同一组 veil/blur token），
   关＝纯色 surface-2。胶囊自带背景，故标签文字不再随页头皮肤变色。 */
html[data-glass="on"] .feed-tabs {
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(115%);
  backdrop-filter: blur(var(--nav-blur)) saturate(115%);
  background: rgba(var(--surface-rgb), var(--nav-veil));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-glass="on"] .feed-tabs {
    background: var(--surface);
  }
}

/* ---------- post list ---------- */

.post-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease;
}

.post-card__main {
  flex: 1;
  min-width: 0;
}

.post-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.post-card__title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.post-card__title a:hover {
  color: var(--accent);
}

.post-card__excerpt {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.67;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.post-card__author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-strong);
  font-size: 13px;
}

.post-card__author:hover {
  color: var(--accent);
}

.post-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.post-card__stat .icon {
  font-size: 14px;
}

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

.post-card__category:hover {
  color: var(--accent);
}

.post-card__cover {
  flex: none;
  width: 190px;
  height: 105px;
  margin-top: 2px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.post-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-card__cover img {
  transform: scale(1.03);
}

@media (hover: hover) {
  .post-card:hover {
    box-shadow: 0 2px 8px rgba(18, 18, 18, 0.12);
  }
}

/* ---------- moment stream ---------- */

.moment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.moment-card {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.moment-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.moment-card__owner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.moment-card__owner-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.moment-card__name {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.moment-card__bio {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.moment-card__time {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.moment-card__time:hover {
  color: var(--accent);
}

.moment-card__body {
  font-size: 15px;
  line-height: 1.75;
}

/* The moment editor writes tag links into the body; the card already renders
   the same tags as chips, so hide them before main.js removes them. */
.moment-card__body a.tag {
  display: none;
}

.moment-detail {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.moment-detail .moment-card__header {
  margin-bottom: 16px;
}

/* ---------- moment media ---------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 12px;
  border-radius: var(--radius);
  overflow: hidden;
}

.media-grid:has(.media-tile:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 单图/单视频给一个只依赖宽度的固定比例盒子：图片到达前后几何不变，
   切换视图时懒加载镜像落地不再撑开卡片（移动端抖动的根源）。
   详情页保持原来的自然宽度整图。 */
.media-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-2);
}

.media-tile img,
.media-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.media-grid:not(.media-grid--detail):has(.media-tile:only-child) {
  display: block;
  width: 100%;
}

.media-grid:not(.media-grid--detail):has(.media-tile:only-child) .media-tile {
  aspect-ratio: 4 / 3;
  max-height: 420px;
  width: 100%;
  border-radius: var(--radius);
}

.media-grid:not(.media-grid--detail):has(.media-tile:only-child) .media-tile img,
.media-grid:not(.media-grid--detail):has(.media-tile:only-child) .media-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-tile:hover img {
  transform: scale(1.02);
}

.media-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.55);
  color: #fff;
  font-size: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.media-tile--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--muted-strong);
  font-size: 18px;
  font-weight: 600;
}

.media-grid--detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.media-grid--detail .media-tile {
  aspect-ratio: auto;
  background: var(--surface-2);
}

.media-grid--detail .media-tile img,
.media-grid--detail .media-tile video {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
}

.audio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* 关掉「自定义音频播放条」时原生控件靠这条撑满内容宽；block 是为了消掉行内
   基线留出的那 6px  descender 空隙。开着时 audio.css 会把 audio 藏起来，这几条
   就不起作用了。 */
.audio-list audio {
  display: block;
  width: 100%;
  height: 40px;
}

.moment-card__tags {
  margin-top: 12px;
  list-style: none;
}

.moment-card__tags .chip {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 400;
}

/* ---------- moment actions ---------- */

.moment-card__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

.moment-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  transition: color 0.15s ease;
}

.moment-action .icon {
  font-size: 17px;
}

.moment-action:hover {
  color: var(--accent);
}

.moment-action.is-active {
  color: var(--accent);
}

.moment-action.is-active .moment-action__label {
  font-weight: 500;
}

.moment-action.is-bump .icon {
  animation: moment-bump 0.32s ease;
}

@keyframes moment-bump {
  40% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

.moment-action__count {
  font-variant-numeric: tabular-nums;
}

/* 评论区与正文同宽。卡片本身已经是 --surface，这里再铺一层同色底板加 14px 内边距，
   只是把评论框往里挤了一圈，右边还比正文短一截。评论框自己带边框，所以也不需要
   再加一条发丝线——两条平行线挨着会脏。 */
.moment-card__comments {
  margin-top: 14px;
}

.moment-card__comments-loading {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.moment-card__comments.is-loading .moment-card__comments-loading {
  display: flex;
}

.moment-card__comments-error {
  display: none;
  color: var(--muted);
  font-size: 13px;
}

.moment-card__comments.is-error .moment-card__comments-error {
  display: block;
}

.moment-spinner {
  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;
}

/* ---------- archives ---------- */

.archive {
  padding: 8px 20px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.archive__year {
  padding-top: 14px;
}

.archive__year + .archive__year {
  border-top: 1px solid var(--divider);
}

.archive__year-title {
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
}

.archive__month {
  padding: 6px 0 4px 0;
}

.archive__month-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.archive__month-title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
}

.archive-list {
  display: flex;
  flex-direction: column;
}

.archive-list__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--divider);
}

.archive-list__item:last-child {
  border-bottom: 0;
}

.archive-list__item time {
  flex: none;
  width: 44px;
  color: var(--muted);
  font-size: 12px;
}

.archive-list__item a {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

.archive-list__item a:hover {
  color: var(--accent);
}

/* ---------- archives: year heatmap ---------- */

.hm {
  --hm-gap: 3px;
  margin: 0 0 10px;
  padding: 14px 20px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.hm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.hm__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.hm__meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* Year picker: the same pill as the pager jump, but a theme menu instead of the
   native list so it can follow the global glass switch. */
.hm__jump {
  position: relative;
  margin-left: auto;
}

.hm__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 112px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Hover and open are tone steps on the control's own material, not the accent
   tint: the pill already sits on --surface-3 inside a white card. */
.hm__trigger:hover,
.hm__jump.is-open .hm__trigger {
  background: var(--surface-3-hover);
}

.hm__caret {
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.hm__jump.is-open .hm__caret {
  transform: rotate(180deg);
}

.hm__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 25;
  width: 132px;
  max-height: 236px;
  padding: 6px;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: var(--surface-3);
}

/* The year list now shares the heatmap cell popover's material: --surface-3 at
   --pop-veil rather than the white --nav-veil-panel the nav and page lists use,
   so the two panels over the heatmap read as one thing. It still rides the
   single global glass switch. */
html[data-glass="on"] .hm__menu {
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(115%);
  backdrop-filter: blur(var(--nav-blur)) saturate(115%);
  background: rgba(var(--surface-3-rgb), var(--pop-veil));
}

/* The cell tooltip stays on the Steam heatmap material (--surface-3) with
   --pop-veil: it parks on top of the card's own text, where a thin veil would
   read as a ghost of that text rather than as frost. */
html[data-glass="on"] .hm__tip {
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(115%);
  backdrop-filter: blur(var(--nav-blur)) saturate(115%);
  background: rgba(var(--surface-3-rgb), var(--pop-veil));
}

.hm__jump.is-above .hm__menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.hm__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* The rows sit on --surface-3 now, so the hover takes the same tonal step the
   trigger pill beside it uses; --surface-2 would read as a lighter row. */
.hm__item:hover {
  background: var(--surface-3-hover);
}

.hm__item.is-current {
  color: var(--accent);
  font-weight: 600;
}

/* Steam's recipe: seven weekday rows filled column by column, so the year is
   53-54 weeks wide and only the month names are labelled underneath. */
.hm__plot {
  margin-top: 12px;
}

.hm__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: var(--hm-gap);
}

.hm__months {
  display: grid;
  gap: var(--hm-gap);
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.hm__month {
  overflow: hidden;
  white-space: nowrap;
}

.hm__cell {
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 2px;
}

.hm__dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.hm__cell.is-l0,
.hm__dot.is-l0 {
  background: var(--surface-3);
}

.hm__cell.is-l1,
.hm__dot.is-l1 {
  background: rgba(var(--accent-rgb), 0.28);
}

.hm__cell.is-l2,
.hm__dot.is-l2 {
  background: rgba(var(--accent-rgb), 0.5);
}

.hm__cell.is-l3,
.hm__dot.is-l3 {
  background: rgba(var(--accent-rgb), 0.72);
}

.hm__cell.is-l4,
.hm__dot.is-l4 {
  background: rgba(var(--accent-rgb), 0.95);
}

/* Weekday slots before Jan 1 and after Dec 31 keep the grid rectangular. */
.hm__cell.is-blank {
  visibility: hidden;
}

@media (hover: hover) {
  .hm__cell[data-date]:hover {
    outline: 1.5px solid var(--text);
    outline-offset: 1px;
  }
}

.hm__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.hm__legend-scale {
  display: flex;
  gap: var(--hm-gap);
}

.hm__tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1300;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-3);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}

.hm__tip.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.hm__tip-date {
  font-size: 12.5px;
  font-weight: 700;
}

.hm__tip-total {
  margin-top: 2px;
  color: var(--muted);
}

.hm__tip-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 148px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--divider);
  overflow-y: auto;
  scrollbar-width: thin;
}

.hm__tip-list a {
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm__tip-list a:hover {
  color: var(--accent);
}

.hm__tip-list span {
  color: var(--muted);
}

@media (max-width: 640px) {
  .hm {
    --hm-gap: 2px;
    padding: 12px 14px 14px;
  }

  .hm__months {
    font-size: 10px;
  }

  .hm__trigger {
    width: 104px;
  }
}

/* ---------- comments wrapper ---------- */

.comments {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}

.comments__title {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 600;
}

.comments-closed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.comments-closed .icon {
  font-size: 15px;
}

/* Halo's comment widget paints its own shadow DOM; expose theme tokens. */
.comments comment-widget,
.comments halo-comment,
.comments .halo-comment {
  display: block;
  --halo-cw-primary-1-color: var(--accent);
  --halo-cw-primary-2-color: var(--accent-hover);
  --halo-cw-primary-3-color: var(--accent-pressed);
  --halo-cw-text-1-color: var(--text);
  --halo-cw-text-2-color: var(--text-2);
  --halo-cw-text-3-color: var(--muted);
  --halo-cw-muted-1-color: var(--muted);
  --halo-cw-muted-2-color: var(--border-strong);
  --halo-cw-muted-3-color: var(--border);
  --halo-cw-emoji-picker-rgb-accent: var(--accent-rgb);
}