/* 流星农跨境法税 · 组件层
 * 目录树、法条卡片、图表、矩阵、时间线、媒体、进度、书架卡片、权益矩阵。
 */

/* ── 徽标与状态 ─────────────────────────────────────────── */
.bk-badge {
  display: inline-flex; align-items: center; gap: var(--bk-space-1);
  padding: 2px var(--bk-space-2); border-radius: var(--bk-radius-pill);
  font-size: var(--bk-text-2xs); font-weight: 600; letter-spacing: 0.02em;
  background: var(--bk-surface-sunken); color: var(--bk-ink-muted); white-space: nowrap;
}
.bk-badge-accent { background: var(--bk-accent-soft); color: var(--bk-accent-strong); }
.bk-badge-ok { background: var(--bk-ok-soft); color: var(--bk-ok); }
.bk-badge-warn { background: var(--bk-warn-soft); color: var(--bk-warn); }
.bk-badge-danger { background: var(--bk-danger-soft); color: var(--bk-danger); }
.bk-badge-locked { background: var(--bk-locked-soft); color: var(--bk-locked); }
.bk-badge-outline { background: transparent; border: 1px solid var(--bk-line-strong); color: var(--bk-ink-muted); }

.bk-meta { display: flex; flex-wrap: wrap; gap: var(--bk-space-2) var(--bk-space-4); font-size: var(--bk-text-xs); color: var(--bk-ink-muted); }
.bk-meta span { display: inline-flex; align-items: center; gap: var(--bk-space-1); }

/* ── 卡片 ───────────────────────────────────────────────── */
.bk-card {
  background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg);
  padding: var(--bk-space-5); box-shadow: var(--bk-shadow-1);
}
.bk-card-link { display: block; text-decoration: none; transition: box-shadow var(--bk-duration) var(--bk-ease), border-color var(--bk-duration) var(--bk-ease); }
.bk-card-link:hover { box-shadow: var(--bk-shadow-2); border-color: var(--bk-line-strong); }
.bk-card h3 { margin-bottom: var(--bk-space-2); }
.bk-card-compact { padding: var(--bk-space-4); }

/* 书架卡片 */
.bk-shelf { display: grid; gap: var(--bk-space-5); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.bk-book { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.bk-book-cover { aspect-ratio: 16 / 9; background: var(--bk-surface-sunken); object-fit: cover; width: 100%; display: block; }
.bk-book-cover-fallback {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: var(--bk-surface-tint); color: var(--bk-accent-strong);
  font-family: var(--bk-font-serif); font-size: var(--bk-text-lg); letter-spacing: 0.1em;
}
.bk-book-body { padding: var(--bk-space-5); display: flex; flex-direction: column; gap: var(--bk-space-3); flex: 1; }
.bk-book-title { font-size: var(--bk-text-lg); margin: 0; }
.bk-book-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-3); font-size: var(--bk-text-xs); color: var(--bk-ink-muted); }

/* ── 目录树 ─────────────────────────────────────────────── */
.bk-toc { font-size: var(--bk-text-sm); }
.bk-toc ol { list-style: none; margin: 0; padding: 0; }
.bk-toc ol ol { margin-left: var(--bk-space-3); border-left: 1px solid var(--bk-line); padding-left: var(--bk-space-3); }
.bk-toc li { margin: 0; }
.bk-toc a, .bk-toc .bk-toc-static {
  display: block; padding: var(--bk-space-2) var(--bk-space-2); border-radius: var(--bk-radius-sm);
  text-decoration: none; color: var(--bk-ink-soft); line-height: var(--bk-leading-snug);
}
.bk-toc a:hover { background: var(--bk-surface-sunken); color: var(--bk-ink); }
.bk-toc a[aria-current="page"] { background: var(--bk-accent-soft); color: var(--bk-accent-strong); font-weight: 650; }
.bk-toc .bk-toc-locked { color: var(--bk-ink-faint); }
.bk-toc-num { font-variant-numeric: tabular-nums; color: var(--bk-ink-faint); margin-right: var(--bk-space-2); font-size: var(--bk-text-xs); }
.bk-toc-kind { font-size: var(--bk-text-2xs); color: var(--bk-ink-faint); margin-left: var(--bk-space-2); }
.bk-toc-progress { height: 2px; background: var(--bk-accent); border-radius: 2px; margin-top: var(--bk-space-1); }

/* 折叠控制 */
.bk-toc-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid var(--bk-line-strong); border-radius: var(--bk-radius-sm);
  background: var(--bk-surface); color: var(--bk-ink-muted); font-size: 11px; line-height: 1;
  cursor: pointer; padding: 0; flex: none;
}
.bk-toc-row { display: flex; align-items: flex-start; gap: var(--bk-space-2); }
.bk-toc-row > a, .bk-toc-row > .bk-toc-static { flex: 1; }
.bk-toc-spacer { visibility: hidden; border: 0; }
.bk-toc-branch[hidden] { display: none; }

/* ── 阅读版式 ───────────────────────────────────────────── */
.bk-read { display: grid; gap: var(--bk-space-6); grid-template-columns: var(--bk-toc-width) minmax(0, 1fr); align-items: start; }
.bk-read-full { grid-template-columns: minmax(0, 1fr); }
.bk-read-rail { display: grid; gap: var(--bk-space-6); grid-template-columns: var(--bk-toc-width) minmax(0, 1fr) var(--bk-rail-width); }

.bk-read-nav { position: sticky; top: calc(var(--bk-header-height) + var(--bk-space-4)); max-height: calc(100vh - var(--bk-header-height) - var(--bk-space-6)); overflow-y: auto; padding-right: var(--bk-space-2); }
.bk-read-nav-head { padding: var(--bk-space-2); border-bottom: 1px solid var(--bk-line); margin-bottom: var(--bk-space-3); }
.bk-read-nav-head a { text-decoration: none; font-weight: 600; font-size: var(--bk-text-sm); }

.bk-article { max-width: var(--bk-measure); }
.bk-article-head { padding-bottom: var(--bk-space-5); border-bottom: 1px solid var(--bk-line); margin-bottom: var(--bk-space-6); }
.bk-article h1 { font-size: var(--bk-text-2xl); }
.bk-article h2 { margin-top: var(--bk-space-7); padding-top: var(--bk-space-4); border-top: 1px solid var(--bk-line); font-size: var(--bk-text-xl); }
.bk-article h3 { margin-top: var(--bk-space-6); font-size: var(--bk-text-md); }
.bk-article > p:first-of-type { font-size: var(--bk-text-md); color: var(--bk-ink-soft); }

.bk-article-body { font-size: var(--bk-text-base); line-height: var(--bk-leading-loose); }
.bk-article-body p { margin: 0 0 var(--bk-space-4); }
.bk-article-body blockquote {
  margin: var(--bk-space-5) 0; padding: var(--bk-space-3) var(--bk-space-5);
  border-left: 3px solid var(--bk-accent); background: var(--bk-surface-raised); color: var(--bk-ink-soft);
}
.bk-article-body table { width: 100%; border-collapse: collapse; margin: var(--bk-space-5) 0; font-size: var(--bk-text-sm); }
.bk-article-body th, .bk-article-body td { border: 1px solid var(--bk-line); padding: var(--bk-space-3); text-align: left; vertical-align: top; }
.bk-article-body th { background: var(--bk-surface-sunken); font-weight: 650; }
.bk-article-body figure { margin: var(--bk-space-6) 0; }
.bk-article-body figcaption { margin-top: var(--bk-space-2); font-size: var(--bk-text-xs); color: var(--bk-ink-muted); }

/* 正文内的资源栏 */
.bk-rail { position: sticky; top: calc(var(--bk-header-height) + var(--bk-space-4)); display: grid; gap: var(--bk-space-4); }
.bk-rail-block { border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg); padding: var(--bk-space-4); background: var(--bk-surface-raised); }
.bk-rail-block h2 { font-size: var(--bk-text-sm); letter-spacing: var(--bk-tracking-wide); text-transform: uppercase; color: var(--bk-ink-muted); margin-bottom: var(--bk-space-3); }

.bk-chapter-nav { display: flex; justify-content: space-between; gap: var(--bk-space-4); margin-top: var(--bk-space-8); padding-top: var(--bk-space-5); border-top: 1px solid var(--bk-line); }
.bk-chapter-nav a { text-decoration: none; max-width: 48%; }
.bk-chapter-nav .bk-chapter-nav-next { text-align: right; margin-left: auto; }
.bk-chapter-nav small { display: block; color: var(--bk-ink-faint); font-size: var(--bk-text-2xs); }

/* 阅读工具条 */
.bk-read-tools { display: flex; gap: var(--bk-space-2); flex-wrap: wrap; align-items: center; font-size: var(--bk-text-xs); }
.bk-read-tools button {
  min-height: 32px; padding: 0 var(--bk-space-3); border: 1px solid var(--bk-line-strong);
  border-radius: var(--bk-radius-sm); background: var(--bk-surface); color: var(--bk-ink-muted);
  font: inherit; font-size: var(--bk-text-xs); cursor: pointer;
}
.bk-read-tools button[aria-pressed="true"] { border-color: var(--bk-accent); color: var(--bk-accent-strong); background: var(--bk-accent-soft); }

.bk-progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.bk-progress-bar span { display: block; height: 100%; width: 0; background: var(--bk-accent); transition: width 80ms linear; }

/* ── 法条卡片 ───────────────────────────────────────────── */
.bk-statute {
  margin: var(--bk-space-5) 0; border: 1px solid var(--bk-line-strong); border-left: 4px solid var(--bk-accent);
  border-radius: var(--bk-radius); background: var(--bk-surface-raised); overflow: hidden;
}
.bk-statute-head {
  display: flex; flex-wrap: wrap; gap: var(--bk-space-2) var(--bk-space-3); align-items: baseline;
  padding: var(--bk-space-3) var(--bk-space-4); background: var(--bk-surface-sunken);
  border-bottom: 1px solid var(--bk-line);
}
.bk-statute-law { font-weight: 700; font-size: var(--bk-text-sm); }
.bk-statute-article { font-size: var(--bk-text-sm); color: var(--bk-accent-strong); font-weight: 650; }
.bk-statute-body { padding: var(--bk-space-4); font-family: var(--bk-font-serif); font-size: var(--bk-text-base); line-height: var(--bk-leading-loose); }
.bk-statute-body p { margin: 0 0 var(--bk-space-3); }
.bk-statute-foot { padding: 0 var(--bk-space-4) var(--bk-space-3); font-size: var(--bk-text-2xs); color: var(--bk-ink-faint); }

/* ── 提示块 ─────────────────────────────────────────────── */
.bk-callout { margin: var(--bk-space-5) 0; padding: var(--bk-space-4) var(--bk-space-5); border-radius: var(--bk-radius); border: 1px solid var(--bk-line); background: var(--bk-surface-raised); }
.bk-callout-title { font-weight: 700; font-size: var(--bk-text-sm); margin-bottom: var(--bk-space-2); }
.bk-callout-tip { border-color: var(--bk-ok); background: var(--bk-ok-soft); }
.bk-callout-trap { border-color: var(--bk-danger); background: var(--bk-danger-soft); }
.bk-callout-boundary { border-color: var(--bk-warn); background: var(--bk-warn-soft); }
.bk-callout-editor { border-style: dashed; }
.bk-callout-ok { border-color: var(--bk-ok); background: var(--bk-ok-soft); }
.bk-callout-warn { border-color: var(--bk-warn); background: var(--bk-warn-soft); }

/* ── 图片与灯箱 ─────────────────────────────────────────── */
.bk-figure {
  margin: var(--bk-space-6) 0; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg);
  overflow: hidden; background: var(--bk-surface-raised);
}
.bk-figure img { display: block; width: 100%; height: auto; background: #fff; }
.bk-figure figcaption { padding: var(--bk-space-3) var(--bk-space-4); font-size: var(--bk-text-xs); color: var(--bk-ink-muted); border-top: 1px solid var(--bk-line); }
.bk-figure-locked { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: var(--bk-space-5); text-align: center; color: var(--bk-locked); background: var(--bk-locked-soft); font-size: var(--bk-text-sm); }
.bk-zoom { cursor: zoom-in; }
.bk-lightbox { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: var(--bk-space-5); background: rgba(10, 12, 15, 0.9); }
.bk-lightbox[data-open="true"] { display: flex; }
.bk-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--bk-radius); }

/* ── 媒体 ───────────────────────────────────────────────── */
.bk-media { margin: var(--bk-space-4) 0; }
.bk-media audio, .bk-media video { width: 100%; border-radius: var(--bk-radius); background: #000; }
.bk-media-caption { margin-top: var(--bk-space-2); font-size: var(--bk-text-xs); color: var(--bk-ink-muted); }

/* ── 下载清单 ───────────────────────────────────────────── */
.bk-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bk-space-2); }
.bk-downloads li { margin: 0; }
.bk-download {
  display: flex; align-items: center; gap: var(--bk-space-3); padding: var(--bk-space-3);
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius); text-decoration: none;
  background: var(--bk-surface); font-size: var(--bk-text-sm);
}
.bk-download:hover { border-color: var(--bk-line-strong); background: var(--bk-surface-raised); }
.bk-download-kind { flex: none; font-size: var(--bk-text-2xs); color: var(--bk-ink-faint); min-width: 3.5em; }
.bk-download-size { margin-left: auto; font-size: var(--bk-text-2xs); color: var(--bk-ink-faint); font-variant-numeric: tabular-nums; }
.bk-download-locked { color: var(--bk-locked); background: var(--bk-locked-soft); border-style: dashed; }

/* ── 矩阵与时间线 ───────────────────────────────────────── */
.bk-matrix { width: 100%; border-collapse: collapse; font-size: var(--bk-text-sm); }
.bk-matrix th, .bk-matrix td { border: 1px solid var(--bk-line); padding: var(--bk-space-3); text-align: left; vertical-align: top; }
.bk-matrix thead th { background: var(--bk-surface-sunken); font-weight: 650; }
.bk-matrix tbody th { font-weight: 600; background: var(--bk-surface-raised); }
.bk-matrix .bk-mark-yes { color: var(--bk-ok); font-weight: 700; }
.bk-matrix .bk-mark-no { color: var(--bk-ink-faint); }

.bk-timeline { list-style: none; margin: var(--bk-space-5) 0; padding: 0 0 0 var(--bk-space-5); border-left: 2px solid var(--bk-line-strong); }
.bk-timeline li { position: relative; margin: 0 0 var(--bk-space-5); }
.bk-timeline li::before {
  content: ""; position: absolute; left: calc(-1 * var(--bk-space-5) - 6px); top: 8px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--bk-accent); border: 2px solid var(--bk-surface);
}
.bk-timeline time { display: block; font-size: var(--bk-text-xs); color: var(--bk-ink-muted); font-variant-numeric: tabular-nums; }

.bk-checklist { list-style: none; margin: var(--bk-space-4) 0; padding: 0; }
.bk-checklist li { display: flex; gap: var(--bk-space-3); padding: var(--bk-space-2) 0; border-bottom: 1px dashed var(--bk-line); }
.bk-checklist li::before { content: "□"; color: var(--bk-accent); flex: none; }

/* ── 锁定面板 ───────────────────────────────────────────── */
.bk-locked {
  margin: var(--bk-space-6) 0; padding: var(--bk-space-6); text-align: center;
  border: 1px dashed var(--bk-line-strong); border-radius: var(--bk-radius-lg); background: var(--bk-locked-soft);
}
.bk-locked h2 { font-size: var(--bk-text-lg); margin-bottom: var(--bk-space-2); }
.bk-locked p { color: var(--bk-ink-muted); margin-bottom: var(--bk-space-4); }

/* ── 权益矩阵 ───────────────────────────────────────────── */
.bk-plans { display: grid; gap: var(--bk-space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bk-plan { display: flex; flex-direction: column; gap: var(--bk-space-3); border-radius: var(--bk-radius-lg); border: 1px solid var(--bk-line); padding: var(--bk-space-5); background: var(--bk-surface); }
.bk-plan-featured { border-color: var(--bk-accent); box-shadow: var(--bk-shadow-2); }
.bk-plan-price { font-size: var(--bk-text-2xl); font-weight: 700; letter-spacing: -0.02em; }
.bk-plan-price small { font-size: var(--bk-text-sm); font-weight: 500; color: var(--bk-ink-muted); }
.bk-plan-features { list-style: none; margin: 0; padding: 0; font-size: var(--bk-text-sm); flex: 1; }
.bk-plan-features li { display: flex; gap: var(--bk-space-2); padding: var(--bk-space-2) 0; border-bottom: 1px solid var(--bk-line); }
.bk-plan-features .bk-no { color: var(--bk-ink-faint); }

.bk-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bk-matrix-scroll .bk-matrix { min-width: 640px; }

/* ── 通知条 ─────────────────────────────────────────────── */
.bk-notice { padding: var(--bk-space-3) var(--bk-space-4); border-radius: var(--bk-radius); font-size: var(--bk-text-sm); border: 1px solid var(--bk-line); background: var(--bk-surface-sunken); }
.bk-notice-info { background: var(--bk-surface-sunken); }
.bk-notice-ok { background: var(--bk-ok-soft); border-color: var(--bk-ok); color: var(--bk-ok); }
.bk-notice-warn { background: var(--bk-warn-soft); border-color: var(--bk-warn); color: var(--bk-warn); }
.bk-notice-danger { background: var(--bk-danger-soft); border-color: var(--bk-danger); color: var(--bk-danger); }

.bk-empty { padding: var(--bk-space-6); text-align: center; border: 1px dashed var(--bk-line-strong); border-radius: var(--bk-radius-lg); color: var(--bk-ink-muted); }

@media (max-width: 1080px) {
  .bk-read, .bk-read-rail { grid-template-columns: minmax(0, 1fr); }
  .bk-read-nav, .bk-rail { position: static; max-height: none; }
  .bk-read-nav { border-bottom: 1px solid var(--bk-line); padding-bottom: var(--bk-space-4); }
}