/* ==========================================================
   Page Kit · 页面骨架样式（views/kit.tsx 对应）
   只使用 base.css 的令牌；新页面不要再写行内 style。
   ========================================================== */

/* 页首 */
.pk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: end; margin-bottom: clamp(28px, 3vw, 48px); }
.pk-head .kicker { margin-bottom: 14px; }
.pk-title { margin: 0; font-size: clamp(32px, 1.6vw + 22px, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.pk-title .soft { display: block; color: var(--muted); }
.pk-head.md .pk-title { font-size: clamp(26px, 1vw + 20px, 40px); }
.pk-sub { margin: 14px 0 0; max-width: 44em; color: var(--muted); font-size: clamp(15px, .3vw + 13px, 18px); line-height: 1.65; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pk-head-aside { min-width: 0; }

/* 指标条（与模板广场 idx-stats 同语言） */
.pk-metrics { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-radius: 12px; background: rgba(13,17,23,.6); box-shadow: inset 0 0 0 1px var(--border-muted); overflow: hidden; }
.pk-metrics > div { padding: 14px 20px; min-width: 0; }
.pk-metrics > div + div { border-left: 1px solid var(--border-muted); }
.pk-metrics small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-metrics b { display: block; margin-top: 4px; font-family: var(--mono); font-size: clamp(20px, .6vw + 16px, 28px); font-weight: 600; color: var(--fg); font-feature-settings: "tnum"; }
.pk-hint { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--subtle); }
.pk-hint.up { color: #7ee787; } .pk-hint.down { color: #ff7b72; } .pk-hint.warn { color: #e3b341; }

/* 分节 */
.pk-sec { margin-top: clamp(40px, 4vw, 72px); }
.pk-sec:first-child { margin-top: 0; }
.pk-sec-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.pk-sec-n { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--subtle); padding-top: .72em; }
.pk-sec-n::after { content: ""; display: inline-block; width: 20px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--border-strong); }
.pk-sec-t { flex: 1; min-width: 0; }
.pk-sec-t h2 { margin: 0; font-size: clamp(19px, .4vw + 16px, 24px); font-weight: 650; letter-spacing: -0.015em; }
.pk-sec-t p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; max-width: 46em; }
.pk-sec-actions { flex: 0 0 auto; display: flex; gap: 8px; align-self: flex-end; }
.pk-side-body > .pk-sec:first-child { margin-top: 0; }

/* 列表行 */
.pk-rows { overflow: hidden; }
.pk-row { gap: 16px; padding: 16px 20px; transition: background .15s; }
.pk-row-ico { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--fg-2); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border-muted); }
.pk-row-ico svg { width: 17px; height: 17px; }
.pk-row-main { flex: 1; min-width: 0; }
.pk-row-main b { display: block; font-weight: 600; color: var(--fg); }
.pk-row-main p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.pk-row-main small { display: block; margin-top: 6px; color: var(--subtle); font-size: 12px; }
.pk-row-go { width: 16px; height: 16px; color: var(--subtle); transition: transform .2s, color .2s; }
a.pk-row:hover .pk-row-go, a.pk-doc:hover .pk-row-go { color: var(--fg); transform: translateX(3px); }

/* 文档入口网格 */
.pk-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.pk-doc { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--border-muted); transition: box-shadow .2s, transform .2s, background .2s; }
.pk-doc:hover { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border), 0 18px 40px -24px rgba(0,0,0,.8); transform: translateY(-2px); }
.pk-doc-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #79c0ff; background: rgba(56,139,253,.1); box-shadow: inset 0 0 0 1px rgba(56,139,253,.3); }
.pk-doc-ico svg { width: 17px; height: 17px; }
.pk-doc b { margin-top: 6px; font-size: 15.5px; color: var(--fg); }
.pk-doc p { margin: 0; flex: 1; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.pk-doc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--subtle); }

/* 筛选条 */
.pk-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.pk-f-search { position: relative; flex: 1 1 260px; min-width: 0; }
.pk-f-search .input { padding-left: 36px; }
.pk-f-ico { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--subtle); pointer-events: none; }
.pk-f-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pk-f-select .select { width: auto; min-width: 120px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 数据表 */
.pk-table th a { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.pk-table th a:hover, .pk-table th a.on { color: var(--fg); }
.pk-sort { font-size: 11px; color: var(--subtle); }
.pk-table th a.on .pk-sort { color: #79c0ff; }
.pk-table .end { text-align: right; }
.pk-table td.mono { font-family: var(--mono); font-size: 12.5px; font-feature-settings: "tnum"; }
.pk-table .pk-empty { padding: 40px 16px; }

/* 条形图 */
.pk-bars { display: flex; align-items: flex-end; gap: 3px; height: var(--h); padding: 12px 16px 26px; }
.pk-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.pk-bar i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #79c0ff, rgba(56,139,253,.35)); transition: filter .15s; }
.pk-bar:hover i { filter: brightness(1.35); }
.pk-bar span { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--subtle); white-space: nowrap; opacity: 0; }
.pk-bar:nth-child(7n+1) span { opacity: 1; }
.pk-bar:hover span { opacity: 1; color: var(--fg); z-index: 1; }
.pk-rank { list-style: none; margin: 0; padding: 6px 0; }
.pk-rank li { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; padding: 9px 18px; font-size: 13.5px; }
.pk-rank li + li { border-top: 1px solid var(--border-muted); }
.pk-rank-n { color: var(--subtle); font-size: 12px; }
.pk-rank-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.pk-rank-bar { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.pk-rank-bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad); }
.pk-rank b { font-size: 12.5px; font-weight: 500; color: var(--fg); min-width: 3ch; text-align: right; }

/* 提示块与空状态 */
.pk-callout { align-items: flex-start; margin: 0 0 18px; }
.pk-empty .blank-ico { width: 40px; height: 40px; }

/* 两列面板网格（看板用） */
.pk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1080px) {
  .pk-head { grid-template-columns: minmax(0, 1fr); }
  .pk-metrics { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); }
  .pk-metrics > div:nth-child(3n+1) { border-left: 0; }
  .pk-metrics > div:nth-child(n+4) { border-top: 1px solid var(--border-muted); }
  .pk-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pk-title { font-size: 30px; }
  .pk-head.md .pk-title { font-size: 25px; }
  .pk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-metrics > div { border-left: 0 !important; border-top: 1px solid var(--border-muted); padding: 12px 14px; }
  .pk-metrics > div:nth-child(-n+2) { border-top: 0; }
  .pk-metrics > div:nth-child(even) { border-left: 1px solid var(--border-muted) !important; }
  .pk-metrics > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pk-sec-head { flex-wrap: wrap; }
  .pk-sec-n { display: none; }
  .pk-row { padding: 14px 16px; gap: 12px; }
  .pk-row-ico { width: 30px; height: 30px; }
  .pk-grid2, .pk-grid3 { grid-template-columns: minmax(0, 1fr); }
  .pk-filter .pk-f-select { flex: 1 1 calc(50% - 10px); }
  .pk-filter .pk-f-select .select { flex: 1; min-width: 0; }
  .pk-rank li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .pk-rank-bar { grid-column: 2 / -1; grid-row: 2; }
  .pk-bars { gap: 2px; padding: 10px 10px 24px; }
  /* 手机：表格变成卡片，每格前面显示列名 */
  .pk-table { overflow: visible; }
  .pk-table table, .pk-table tbody, .pk-table tr, .pk-table td { display: block; width: 100%; min-width: 0 !important; }
  .pk-table thead { display: none; }
  .pk-table tr { padding: 10px 14px; border-bottom: 1px solid var(--border-muted); }
  .pk-table tr:last-child { border-bottom: 0; }
  .pk-table td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; text-align: right; }
  .pk-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--subtle); font-family: var(--sans, inherit); font-size: 12px; text-align: left; }
  .pk-table td:first-child { padding-bottom: 6px; font-weight: 600; }
  .pk-table td[colspan] { display: block; text-align: center; }
  .pk-table td[colspan]::before { content: none; }
}

/* 模板页底部推荐位 */
.repo-more { margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--border-muted); }
.repo-more .pk-sec + .pk-sec { margin-top: clamp(36px, 3vw, 56px); }

/* 盒子标题里的图标与文字同行 */
.box-head h3 { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.box-head h3 svg { flex: 0 0 auto; width: 15px; height: 15px; }