/* 晨间信号网页版：版式与本站组件。
   颜色、字体、圆角、间距一律引用 /assets/cz/tokens.css 的 var(--cz-*)（czapple UI 规范 v1.0），不写死。
   通用组件（页头、页脚、按钮、卡片、标签）用 /assets/cz/components.css 的 cz- 类。 */
* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
.hidden, [hidden] { display: none !important; }

.skip { position: absolute; left: -999px; top: 0; z-index: 40; padding: var(--cz-space-2) var(--cz-space-4); background: var(--cz-surface); }
.skip:focus { left: var(--cz-space-4); top: var(--cz-space-2); }

/* 正文宽度和小程序阅读宽度一致；底部给迷你播放条留位置 */
.page { max-width: var(--cz-reading-max); padding-bottom: var(--cz-space-7); outline: none; }
body.has-mini { padding-bottom: calc(var(--mini-h) + env(safe-area-inset-bottom, 0px)); }
:root { --mini-h: 64px; }

/* 标题区 */
.hero { padding: var(--cz-space-6) 0 var(--cz-space-4); }
.hero .cz-h1 { margin-top: var(--cz-space-1); }
.lede { color: var(--cz-text-2); margin: var(--cz-space-2) 0 0; }
.kicker { font-size: var(--cz-fs-xs); letter-spacing: var(--cz-ls-label); color: var(--cz-muted); }
.section-t { margin: var(--cz-space-6) 0 var(--cz-space-3); }

/* 卡片（cz-card 之上的本站细节） */
.cz-card + .cz-card { margin-top: var(--cz-space-3); }
.card-t { font-family: var(--cz-font-heading); font-weight: var(--cz-heading-weight); font-size: var(--cz-fs-lg); line-height: var(--cz-lh-tight); margin: var(--cz-space-1) 0 0; }
.card-s { color: var(--cz-text-2); font-size: var(--cz-fs-sm); margin: var(--cz-space-2) 0 0; }
.card-row { display: flex; align-items: center; gap: var(--cz-space-3); margin-top: var(--cz-space-4); flex-wrap: wrap; }
.feature { border-color: var(--cz-border-strong); }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 列表 */
.list { list-style: none; margin: 0; padding: 0; }
.item { padding: var(--cz-space-3) 0; border-bottom: var(--cz-border-width) solid var(--cz-border); }
.item:first-child { padding-top: 0; }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item-t { font-family: var(--cz-font-heading); line-height: 1.45; }
.item-s { color: var(--cz-muted); font-size: var(--cz-fs-sm); margin-top: var(--cz-space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--cz-space-2); }
.item-lead { color: var(--cz-text-2); font-size: var(--cz-fs-sm); margin-top: var(--cz-space-2); }

/* 引导去小程序 */
.cta { display: flex; gap: var(--cz-space-4); align-items: center; }
.cta img { width: 96px; height: 96px; border-radius: var(--cz-radius-sm); flex: none; background: var(--cz-surface); }
.cta-t { font-family: var(--cz-font-heading); font-size: var(--cz-fs-md); }
.cta-s { color: var(--cz-muted); font-size: var(--cz-fs-sm); margin-top: var(--cz-space-1); }

.platforms { display: flex; flex-wrap: wrap; gap: var(--cz-space-2); }
.rss { font-size: var(--cz-fs-sm); color: var(--cz-text-2); word-break: break-all; margin-top: var(--cz-space-4); display: grid; gap: var(--cz-space-1); }
.rss code { font-family: var(--cz-font-mono); font-size: var(--cz-fs-xs); background: var(--cz-surface-2); padding: 2px var(--cz-space-1); border-radius: var(--cz-radius-sm); }

.state { padding: var(--cz-space-7) 0; text-align: center; color: var(--cz-muted); }

/* 圆形图标按钮 */
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: var(--cz-border-width) solid var(--cz-border-strong); background: var(--cz-surface); color: var(--cz-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.icon-btn:hover { border-color: var(--cz-text-2); }
.icon-btn:focus-visible { outline: 2px solid var(--cz-focus); outline-offset: 2px; }
.icon-btn.big { width: 60px; height: 60px; background: var(--cz-accent-fill); border-color: var(--cz-accent-fill); color: var(--cz-on-accent); }
.icon-btn.big:hover { background: var(--cz-accent-fill-hover); }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* 迷你播放条：换页不断 */
.mini { position: fixed; left: 0; right: 0; bottom: 0; background: var(--cz-surface); border-top: var(--cz-border-width) solid var(--cz-border); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 25; }
.mini .cz-container { display: flex; align-items: center; gap: var(--cz-space-3); height: var(--mini-h); max-width: var(--cz-reading-max); }
.mini .icon-btn { background: var(--cz-accent-fill); border-color: var(--cz-accent-fill); color: var(--cz-on-accent); }
.mini-info { flex: 1; min-width: 0; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.mini-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--cz-fs-sm); }
.mini-bar { height: 3px; background: var(--cz-sunken); border-radius: 2px; margin-top: var(--cz-space-1); overflow: hidden; }
.mini-fill { height: 100%; width: 0; background: var(--cz-accent); }
.mini-time { font-size: var(--cz-fs-xs); color: var(--cz-muted); }

/* 播放面板 */
.sheet-mask { position: fixed; inset: 0; background: var(--cz-overlay); z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: var(--cz-bg); border-top-left-radius: var(--cz-radius-lg); border-top-right-radius: var(--cz-radius-lg); box-shadow: var(--cz-shadow-2); z-index: 31; padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet .cz-container { max-width: var(--cz-reading-max); padding-top: var(--cz-space-4); padding-bottom: var(--cz-space-6); }
.sheet-top { display: flex; justify-content: flex-end; }
.cover { width: 160px; height: 160px; border-radius: var(--cz-radius-md); border: var(--cz-border-width) solid var(--cz-border); margin: var(--cz-space-2) auto var(--cz-space-4); object-fit: cover; }
.p-title { text-align: center; font-family: var(--cz-font-heading); font-weight: var(--cz-heading-weight); font-size: var(--cz-fs-lg); line-height: var(--cz-lh-tight); }
.p-sub { text-align: center; color: var(--cz-muted); font-size: var(--cz-fs-sm); margin-top: var(--cz-space-1); }
.seek { width: 100%; margin: var(--cz-space-5) 0 var(--cz-space-1); accent-color: var(--cz-accent); }
.times { display: flex; justify-content: space-between; font-size: var(--cz-fs-xs); color: var(--cz-muted); font-variant-numeric: tabular-nums; }
.controls { display: flex; align-items: center; justify-content: center; gap: var(--cz-space-4); margin-top: var(--cz-space-3); }
.rate { min-width: 64px; }
.sheet .cz-notice { margin-top: var(--cz-space-4); }
.sheet .cta { margin-top: var(--cz-space-3); }

/* 字幕：阅读区用衬线 18px、行高 1.7（规范 §7.3） */
.captions { margin-top: var(--cz-space-5); max-height: 40vh; overflow: auto; border-top: var(--cz-border-width) solid var(--cz-border); padding-top: var(--cz-space-3); font-family: var(--cz-font-serif); font-size: var(--cz-fs-lg); line-height: 1.7; }
.cap { display: block; width: 100%; text-align: left; padding: var(--cz-space-2) 0; color: var(--cz-muted); cursor: pointer; background: none; border: 0; font: inherit; }
.cap.on { color: var(--cz-text); }
.cap:focus-visible { outline: 2px solid var(--cz-focus); outline-offset: 2px; }

.prose p { margin: 0 0 var(--cz-space-3); color: var(--cz-text-2); font-family: var(--cz-font-serif); font-size: var(--cz-fs-lg); line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-family: var(--cz-font-heading); font-weight: var(--cz-heading-weight); font-size: var(--cz-fs-lg); margin: var(--cz-space-5) 0 var(--cz-space-2); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}