/* 每日精选：列表页和文章页共用这一份。
   配色、字体、圆角、间距全部走 layout.css 里已有的变量，这里不新定义任何一个颜色。
   列表页的长相是 2026-09-07 定的「猫走路 · 相框」：左边一条虚线路，滚到哪条猫就踩一个爪印；
   每条的图像桌上斜放的一张照片，鼠标过去它摆正。 */

.picks-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--space-md) 72px;
}

/* ── 猫：点阵画成的 SVG。身体、三帧尾巴、金眼、闭眼四点全画进去，靠 class 切换 ── */
.cat { display: block; shape-rendering: crispEdges; overflow: visible; color: var(--ink); }
.cat .b, .cat .t, .cat .s { fill: currentColor; }
.cat .t.f0, .cat .t.f1, .cat .t.f2 { display: none; }
.cat[data-tf="0"] .t.f0, .cat[data-tf="1"] .t.f1, .cat[data-tf="2"] .t.f2 { display: block; }
.cat .e { fill: var(--gold); }
.cat.awake .s { display: none; }
.cat:not(.awake) .e { display: none; }
/* 呼吸：睡着的猫隔一会儿整只沉一格再抬起来。
   只挪整数像素、不缩放——点阵猫一缩放边缘就糊成一圈光，09-07 用户当 bug 报过 */
.cat.breathe { animation: picks-breathe 3.6s steps(1, end) infinite; }
/* ── 活着的猫：下面全是整格挪动，不缩放不旋转，点阵才不糊 ── */
.cat.alive { cursor: pointer; }
/* 点一下蹦两下 */
.cat.hop { animation: picks-hop 0.5s steps(1, end); }
@keyframes picks-hop { 0% { transform: translateY(0); } 25% { transform: translateY(-4px); } 50% { transform: translateY(0); } 75% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
/* 打呼噜：整只左右抖 */
.cat.purr { animation: picks-purr 0.5s steps(1, end); }
@keyframes picks-purr { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(1px); } 30% { transform: translateX(-1px); } 45% { transform: translateX(1px); } 60% { transform: translateX(-1px); } 75% { transform: translateX(1px); } 90% { transform: translateX(0); } }
/* 眨单眼：那一边只露闭眼的两个点 */
.cat.wink-l .e.l, .cat.wink-r .e.r { display: none; }
.cat.awake.wink-l .s.l, .cat.awake.wink-r .s.r { display: block; }
/* 歪头：头连耳朵整体挪一格，身子不动 */
.cat.tilt-l .hd { transform: translateX(-1px); }
.cat.tilt-r .hd { transform: translateX(1px); }
/* 耳朵竖起来：两只耳朵各往外张一格 */
.cat.perk .ear.l { transform: translateX(-1px); }
.cat.perk .ear.r { transform: translateX(1px); }
.cat.tilt-l.perk .ear.l { transform: translateX(-2px); }
.cat.tilt-l.perk .ear.r { transform: translateX(0); }
.cat.tilt-r.perk .ear.l { transform: translateX(0); }
.cat.tilt-r.perk .ear.r { transform: translateX(2px); }
/* 抖耳朵：一只耳朵快速晃两下 */
.cat.twitch-l .ear.l { animation: picks-ear-l 0.36s steps(1, end); }
.cat.twitch-r .ear.r { animation: picks-ear-r 0.36s steps(1, end); }
@keyframes picks-ear-l { 0%, 50%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-1px); } }
@keyframes picks-ear-r { 0%, 50%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(1px); } }
/* 点烦了：闭眼，耳朵耷拉下来一格 */
.cat.sulk .ear { transform: translateY(1px); }
/* 头顶冒一颗像素小心，往上飘三格就散 */
.cat .heart { fill: var(--danger); animation: picks-heart 0.9s steps(1, end) forwards; }
@keyframes picks-heart { 0% { transform: translateY(0); opacity: 1; } 30% { transform: translateY(-1px); opacity: 1; } 60% { transform: translateY(-2px); opacity: 0.8; } 85% { transform: translateY(-3px); opacity: 0.45; } 100% { transform: translateY(-4px); opacity: 0; } }
@keyframes picks-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }

/* 猫直接坐在页面上，什么都不垫
   （09-07 用户先报半透明垫子「泛光」、再报实底垫子「还是有框」、最后连金线也不要，三版全撤） */
.picks-mat { display: inline-block; line-height: 0; }
/* 猫的宽度一律取 16 的倍数：点阵是 16 格宽，整数倍才不会有半个像素的毛边 */
.picks-mat .cat { width: 80px; }

/* ── 列表页抬头 ── */
.picks-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0 var(--space-lg);
  padding: var(--space-lg) 0 var(--space-md);
}
.picks-issue { margin: 0 0 6px; color: var(--gold); font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; }
.picks-head h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.016em;
  line-height: 1.1;
  text-wrap: balance;
}
.picks-sub { margin: var(--space-sm) 0 0; color: var(--muted); font-size: 14px; }
.picks-sub b { color: var(--ink); font-weight: 500; }

.picks-divider { height: 1px; background: var(--rule-hi); }

/* ── 路：一条虚线，条目挂在右边 ── */
.picks-walk { position: relative; margin-top: var(--space-lg); padding-left: 64px; display: flex; flex-direction: column; gap: 52px; }
.picks-path {
  position: absolute; left: 20px; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--gold-line) 0 7px, transparent 7px 15px);
  opacity: 0.55;
}

/* ── 一条：左图右字，隔一条左右换边；整条是一个入口 ── */
.picks-row {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-lg); align-items: center;
  text-decoration: none; color: inherit;
}
.picks-row.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.picks-row.flip .picks-frame { order: 2; }
/* 没图也没代码的一条：字铺满一整行 */
.picks-row.solo { grid-template-columns: minmax(0, 1fr); }
/* 鼠标停上去，底下浮出一层纸，不加框 */
.picks-row::before {
  content: ""; position: absolute; inset: -16px -20px; z-index: -1;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.picks-row:hover::before, .picks-row:focus-visible::before { opacity: 1; }
.picks-row:focus-visible { outline: none; }
.picks-row:focus-visible::before { border-color: var(--gold); }

.picks-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 页码：大号衬线金字，压在标题上方，像刊物的页码 */
.picks-folio {
  display: block; font-family: var(--font-title); font-weight: 500; font-size: 44px; line-height: 0.9; letter-spacing: -0.03em;
  color: var(--gold); margin-bottom: 2px; font-variant-numeric: tabular-nums;
  transition: color var(--dur-short) var(--ease-out);
}
.picks-row:hover .picks-folio { color: var(--ink); }
.picks-row h2 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  text-wrap: balance;
  transition: color var(--dur-short) var(--ease-out);
}
.picks-row:hover h2 { color: var(--gold); }
.picks-row .pick-lead { font-size: 15px; line-height: 1.7; }

.pick-meta { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.pick-chip {
  flex: none;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px 3px;
}
.pick-who { font-size: 12.5px; color: var(--neutral); }
.pick-lead { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 60ch; }
.pick-enter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.pick-enter i { font-style: normal; display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
a:hover .pick-enter { border-bottom-color: var(--gold-line); }
a:hover .pick-enter i { transform: translateX(4px); }

/* ── 相框：每条的「图」。放图片就是照片，放命令就是一张小终端，底边一行斜体说明像手写的 ── */
.picks-frame {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px 14px; background: var(--paper-2); border: 1px solid var(--rule-hi); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--rule-hi);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; color: var(--ink); overflow: hidden;
  transform: rotate(-1.6deg);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.picks-row.flip .picks-frame { transform: rotate(1.3deg); }
.picks-row:hover .picks-frame, .picks-row:focus-visible .picks-frame { transform: rotate(0) translateY(-3px); border-color: var(--gold-line); }
.picks-frame .cap {
  order: 2; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule-hi);
  color: var(--neutral); font-family: var(--font-title); font-size: 13px; font-style: italic; line-height: 1.5; white-space: normal;
}
.picks-frame .ln { white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.picks-frame .ln::before { content: "$ "; color: var(--gold); }
.picks-frame .ln.k::before { content: ""; }
.picks-frame .cur { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--gold); opacity: 0; }
.picks-row:hover .picks-frame .cur { animation: picks-cur 0.9s steps(1, end) infinite; }
@keyframes picks-cur { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* 放的是图片 */
.picks-frame.pic { padding: 10px 10px 12px; gap: 0; }
.picks-frame.pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--paper-3); }

/* ── 爪印：一行一个，踩在路上；滚到才踩下去，踩下去弹一下 ── */
.picks-step {
  position: absolute; left: -56px; top: 50%; width: 26px; margin-top: -13px;
  color: var(--gold-line); opacity: 0; transform: scale(0.6) translateY(6px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color var(--dur-short) var(--ease-out);
}
.picks-step svg { display: block; width: 100%; height: auto; }
.picks-row.seen .picks-step { opacity: 1; color: var(--gold); }
.picks-row:not(.flip).seen .picks-step { transform: rotate(-14deg); animation: picks-press-l 0.5s var(--ease-out); }
.picks-row.flip.seen .picks-step { transform: rotate(12deg); animation: picks-press-r 0.5s var(--ease-out); }
@keyframes picks-press-l { 0% { transform: scale(0.6) rotate(-14deg); } 55% { transform: scale(1.18) rotate(-14deg); } 100% { transform: scale(1) rotate(-14deg); } }
@keyframes picks-press-r { 0% { transform: scale(0.6) rotate(12deg); } 55% { transform: scale(1.18) rotate(12deg); } 100% { transform: scale(1) rotate(12deg); } }

/* ── 走到底：一只趴着的小猫 ── */
.picks-end {
  position: relative; margin-top: var(--space-lg); padding-left: 64px; min-height: 44px;
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  color: var(--neutral); font-size: 13.5px;
}
.picks-end .picks-mat { position: absolute; left: 6px; top: 50%; margin-top: -17px; }
.picks-end .picks-mat .cat { width: 32px; }
.picks-end-trail { display: inline-flex; gap: 6px; margin-left: 6px; color: var(--gold-line); }
.picks-end-trail svg { display: block; width: 14px; height: 14px; }
.picks-end-trail svg:nth-child(2) { opacity: 0.6; transform: translateY(-3px); }
.picks-end-trail svg:nth-child(3) { opacity: 0.3; }

/* ── 往期目录：挂在同一条路上，一天一块，爪印直接踩好 ── */
.picks-day { position: relative; }
.picks-day .picks-step { opacity: 1; color: var(--gold); transform: rotate(-14deg); top: 22px; margin-top: 0; }
.picks-day-head {
  display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
  text-decoration: none; color: inherit;
}
.picks-day-head b { font-family: var(--font-title); font-size: 24px; font-weight: 600; color: var(--ink); transition: color var(--dur-short) var(--ease-out); }
.picks-day-head small { color: var(--neutral); font-size: 13px; }
.picks-day-head:hover b { color: var(--gold); }
.picks-day-list { list-style: none; margin: 10px 0 0; padding: 0; }
.picks-day-list li { display: flex; align-items: baseline; gap: var(--space-sm); padding: 7px 0; border-top: 1px solid var(--rule); }
.picks-day-list a { color: var(--ink); text-decoration: none; font-size: 15.5px; line-height: 1.5; border-bottom: 1px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.picks-day-list a:hover { color: var(--gold); border-bottom-color: var(--gold-line); }
.picks-day-list small { color: var(--neutral); font-size: 12.5px; white-space: nowrap; margin-left: auto; }
@media (max-width: 660px) { .picks-day-list small { display: none; } .picks-day-head b { font-size: 21px; } }

/* ── 三种没有内容的样子：加载中、一篇都没有、没能打开 ── */
.picks-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin: 0; padding: 22px 0; color: var(--neutral); font-size: 14px; line-height: 1.7;
}
.picks-state b { font-family: var(--font-title); font-size: 19px; font-weight: 600; color: var(--ink); }
.picks-state.bad b { color: var(--danger); }
.picks-retry {
  margin-top: 6px; height: 34px; padding: 0 16px;
  border: 1px solid var(--rule-hi); border-radius: var(--radius); background: var(--paper-2);
  color: var(--ink); font-family: var(--font-cn); font-size: 13.5px; cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.picks-retry:hover { border-color: var(--gold-line); color: var(--gold); }

/* ── 文章页里的图片和视频 ── */
.pick-shot { margin: var(--space-md) 0 var(--space-lg); }
.pick-shot img, .pick-shot video {
  display: block; width: 100%; height: auto; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--paper-3);
}

/* 入场：整块从下面 8 像素浮上来，一个接一个 */
.rise { opacity: 0; transform: translateY(8px); animation: picks-rise 0.55s var(--ease-out) forwards; }
@keyframes picks-rise { to { opacity: 1; transform: none; } }

/* ── 文章页 ── */
.pick-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-lg);
  color: var(--gold);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.pick-back:hover { border-bottom-color: var(--gold-line); }

.pick-post { max-width: 34em; }
.pick-post .pick-meta { margin: var(--space-lg) 0 var(--space-sm); }
.pick-post h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 33px;
  line-height: 1.24;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.pick-when { margin: var(--space-sm) 0 var(--space-md); color: var(--neutral); font-size: 13px; }
.pick-rule { height: 1px; background: var(--rule); }
.pick-text { margin-top: var(--space-md); }
.pick-text p { margin: 0 0 var(--space-md); font-size: 16px; line-height: 1.85; color: var(--ink); }

/* 正文里的实际例子 */
.pick-example { margin: var(--space-md) 0 var(--space-lg); }
.pick-example .cap { color: var(--neutral); font-size: 12.5px; margin: 0 0 6px; }
.pick-example pre {
  margin: 0;
  padding: var(--space-sm) 14px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink);
  overflow-x: auto;
}

.pick-source {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.pick-source span { color: var(--neutral); font-size: 13px; }
.pick-source a {
  color: var(--gold);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 1px;
}

.pick-tailpiece {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  color: var(--neutral);
  font-size: 13px;
}
.pick-tailpiece .pick-mini { width: 32px; flex: none; color: var(--gold-line); }
.pick-tailpiece .pick-mini .cat { width: 100%; color: inherit; transition: color var(--dur-short) var(--ease-out); }
/* 页尾那只平时是淡金的装饰，鼠标一靠近整只亮起来 */
.pick-tailpiece .pick-mini .cat.awake { color: var(--ink); }

/* 相关推荐：只推别期的，没有别期就整块不出现 */
.pick-also {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-hi);
}
.pick-also h2 {
  margin: 0 0 var(--space-xs);
  color: var(--gold);
  font-family: var(--font-cn);
  font-size: 13.5px;
  font-weight: 500;
}
.pick-also ul { list-style: none; margin: 0; padding: 0; }
.pick-also li { border-bottom: 1px solid var(--rule); }
.pick-also li:last-child { border-bottom: 0; }
.pick-also a {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  text-decoration: none;
  color: inherit;
}
.pick-also small { color: var(--neutral); font-size: 12.5px; flex: none; font-variant-numeric: tabular-nums; }
.pick-also b { font-family: var(--font-title); font-weight: 600; font-size: 15.5px; line-height: 1.4; }
.pick-also a:hover b { color: var(--gold); }

.picks-foot {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  color: var(--neutral);
  font-size: 13.5px;
}
.picks-foot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); padding-bottom: 1px; }
.picks-trail { display: flex; gap: var(--space-xs); align-items: center; color: var(--gold-line); }
.picks-trail svg { display: block; }
.picks-trail svg:nth-child(2) { opacity: 0.6; transform: translateY(-4px); }
.picks-trail svg:nth-child(3) { opacity: 0.3; }

.picks-note {
  margin: var(--space-md) 0 0;
  color: var(--neutral);
  font-size: 13px;
  max-width: 62ch;
  border-left: 1px solid var(--rule-hi);
  padding-left: var(--space-sm);
}

@media (max-width: 720px) {
  .picks-walk { padding-left: 44px; gap: 40px; }
  .picks-path { left: 15px; }
  .picks-row, .picks-row.flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .picks-row.flip .picks-frame { order: 0; }
  .picks-row::before { inset: -12px -12px; }
  .picks-step { left: -40px; width: 18px; margin-top: -9px; }
  .picks-end { padding-left: 44px; }
  .picks-head .picks-mat .cat { width: 64px; }
  .picks-head h1 { font-size: 30px; }
  .picks-row h2 { font-size: 22px; }
  .picks-folio { font-size: 36px; }
}

@media (max-width: 660px) {
  .picks-shell { padding: 0 var(--space-sm) 56px; }
  .picks-head { gap: 0 var(--space-sm); }
  .picks-head .picks-mat { padding: 8px 9px 0; }
  .picks-head .picks-mat .cat { width: 48px; }
  .picks-head h1 { font-size: 26px; }
  .pick-post h1 { font-size: 25px; }
  .pick-text p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  .cat.breathe, .cat.hop, .cat.purr, .cat .heart, .cat.twitch-l .ear.l, .cat.twitch-r .ear.r { animation: none; }
  .picks-frame, .picks-step, .picks-folio, .picks-row h2, .picks-row::before, .pick-enter i { transition: none; }
  .picks-frame, .picks-row.flip .picks-frame { transform: none; }
  .picks-step { opacity: 1; color: var(--gold); }
  .picks-row.seen .picks-step { animation: none; }
  .picks-frame .cur { animation: none !important; }
}