/* skarn-framework — content / narrative components.
 * ================================================
 * Ported from the reference design system; classes are `skf-` namespaced
 * and consume only the --sh-* theme bridge, so every theme colours them.
 * Only components the chrome/UI layer does NOT already cover live here:
 * tag · avatar · nav · breadcrumb · pagination · table · slider · alert ·
 * close · placeholder(skeleton) · carousel · navbar.
 * Interactions live in js/skf-behavior.js.
 */

/* ================= 章节标题 (Section heading) =================
 * Optional heading for narrative pages: an accent index number, the
 * title, and a muted latin subtitle.
 *   <header class="skf-section-head">
 *     <span class="skf-section-index">02</span>
 *     <h2 class="skf-section-title">…</h2>
 *     <span class="skf-section-en">Buttons &amp; Groups</span>
 *   </header> */
.skf-section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block-end: 1.5rem;
}
.skf-section-index {
  font-family: var(--sh-font-mono, monospace);
  font-size: 0.8rem;
  color: var(--sh-accent);
}
.skf-section-title {
  margin: 0;
  font-family: var(--sh-font-display, 'Inter', system-ui, sans-serif),
               var(--skf-font-stack, 'Noto Sans Mongolian');
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sh-fg);
}
.skf-section-en {
  font-family: var(--sh-font, inherit);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--sh-muted);
}

/* ── Button toolbar (narrative pages) — clusters of linked buttons ─── */
.skf-btn-toolbar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ================= 组件：标签 (Tag) ================= */
.skf-tag {
  display: inline-block;
  /* 行高收紧后补足垂直 padding，恢复饱满高度（≈原 1.6 行高时的观感） */
  padding-block: 0.5rem; padding-inline: 0.75rem;
  font-size: 0.85rem;
  line-height: 1; /* 与按钮同口径：行盒贴紧文字，垂直居中 */
  border: 1px solid var(--sh-hairline);
  border-radius: 0;
  background-color: var(--sh-bg);
  color: var(--sh-muted);
}
.skf-tag--primary { border-color: var(--sh-accent); color: var(--sh-accent); }
.skf-tag--secondary { border-color: var(--sh-secondary); color: var(--sh-secondary); }
.skf-tag--success { border-color: var(--sh-success); color: var(--sh-success); }
.skf-tag--warning { border-color: var(--sh-warning); color: var(--sh-warning); }
.skf-tag--danger { border-color: var(--sh-danger); color: var(--sh-danger); }

/* 实心标签 */
.skf-tag--filled {
  border-color: var(--sh-accent);
  background-color: var(--sh-accent);
  color: var(--sh-on-accent);
}
.skf-tag--filled-secondary {
  border-color: var(--sh-secondary);
  background-color: var(--sh-secondary);
  color: #FFFFFF;
}
.skf-tag--filled-success {
  border-color: var(--sh-success);
  background-color: var(--sh-success);
  color: #FFFFFF;
}
.skf-tag--filled-warning {
  border-color: var(--sh-warning);
  background-color: var(--sh-warning);
  color: #FFFFFF;
}
.skf-tag--filled-danger {
  border-color: var(--sh-danger);
  background-color: var(--sh-danger);
  color: #FFFFFF;
}

/* ================= 组件：头像 (Avatar) ================= */
.skf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1; /* 汉字在方形头像内精确居中 */
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--sh-accent) 30%, transparent);
  background-color: color-mix(in srgb, var(--sh-accent) 12%, var(--sh-surface));
  color: var(--sh-accent);
}
.skf-avatar--sm { width: 32px; height: 32px; font-size: 0.85rem; }
.skf-avatar--lg { width: 56px; height: 56px; font-size: 1.4rem; }
.skf-avatar--secondary {
  border-color: color-mix(in srgb, var(--sh-secondary) 30%, transparent);
  background-color: color-mix(in srgb, var(--sh-secondary) 12%, var(--sh-surface));
  color: var(--sh-secondary);
}

/* ================= 组件：导航 (Nav) ================= */
/* 通用链接导航；--pills 胶囊选中、--fill 等宽、--vertical 竖排 */
.skf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.skf-nav__item { margin: 0; }
.skf-nav__link {
  display: block;
  padding-block: 0.5rem; padding-inline: 0.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1;
  color: var(--sh-muted);
  text-decoration: none;
  border: none;
  border-block-end: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: var(--sh-motion);
}
.skf-nav__link:hover {
  color: var(--sh-accent);
}
.skf-nav__link.is-active {
  color: var(--sh-accent);
  border-block-end-color: var(--sh-accent);
}
.skf-nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--sh-accent);
}
/* 胶囊样式：选中实心主色点染 */
.skf-nav--pills {
  gap: 0.5rem;
}
.skf-nav--pills .skf-nav__link {
  border-block-end: none;
  padding-block: 0.5rem; padding-inline: 1.25rem;
}
.skf-nav--pills .skf-nav__link.is-active {
  background-color: var(--sh-accent);
  color: var(--sh-on-accent);
}
/* 等宽铺满 */
.skf-nav--fill .skf-nav__item {
  flex: 1 1 auto;
  text-align: center;
}
/* 竖排：选中主色左栏 + 淡染 */
.skf-nav--vertical {
  flex-direction: column;
  gap: 0.25rem;
}
.skf-nav--vertical .skf-nav__link {
  border-block-end: none;
  border-inline-start: 3px solid transparent;
  padding-block: 0.5rem; padding-inline: 0.75rem;
}
.skf-nav--vertical .skf-nav__link.is-active {
  border-inline-start-color: var(--sh-accent);
  background-color: color-mix(in srgb, var(--sh-accent) 6%, transparent);
}

/* ================= 组件：面包屑 (Breadcrumb) ================= */
.skf-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
}
.skf-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--sh-muted);
}
.skf-breadcrumb__item + .skf-breadcrumb__item::before {
  content: "/";
  margin-inline-end: 0.5rem;
  color: var(--sh-muted);
  opacity: 0.6;
}
.skf-breadcrumb__link {
  color: var(--sh-secondary);
  text-decoration: none;
  transition: var(--sh-motion);
}
.skf-breadcrumb__link:hover {
  color: var(--sh-accent);
  transform: translateY(-2px); /* 三处保留上浮位移之一 */
}
.skf-breadcrumb__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--sh-accent);
}
.skf-breadcrumb__item--current {
  color: var(--sh-fg);
}

/* ================= 组件：分页 (Pagination) ================= */
.skf-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.skf-pagination__item {
  min-inline-size: 36px;
  block-size: 36px;
  padding-block: 0; padding-inline: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid var(--sh-hairline);
  border-radius: 0;
  background-color: var(--sh-surface);
  color: var(--sh-fg);
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--sh-motion);
}
.skf-pagination__item:hover:not(:disabled) {
  border-color: var(--sh-accent);
  color: var(--sh-accent);
  box-shadow: var(--sh-shadow);
  transform: translateY(-2px); /* 三处保留上浮位移之一 */
}
.skf-pagination__item.is-active,
.skf-pagination__item.is-active:hover:not(:disabled) {
  background-color: var(--sh-accent);
  border-color: var(--sh-accent);
  color: var(--sh-on-accent);
  transform: none;
}
.skf-pagination__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.skf-pagination__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--sh-accent);
}
/* 尺寸：小号 32px / 大号 44px */
.skf-pagination--sm .skf-pagination__item { min-inline-size: 2rem; block-size: 2rem; font-size: 0.85rem; }
.skf-pagination--lg .skf-pagination__item { min-inline-size: 2.75rem; block-size: 2.75rem; font-size: 1rem; }

/* ================= 组件：表格 (Table) ================= */
.skf-table-wrap {
  overflow-inline: auto;
}
.skf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-hairline);
  box-shadow: var(--sh-shadow);
}
.skf-table th {
  text-align: left;
  padding-block: 0.85rem; padding-inline: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--sh-hairline) 35%, var(--sh-surface));
  color: var(--sh-fg);
  border-block-end: 1px solid var(--sh-hairline);
}
.skf-table td {
  padding-block: 0.85rem; padding-inline: 1.25rem;
  color: var(--sh-fg);
  border-block-end: 1px solid var(--sh-hairline);
}
.skf-table tbody tr:last-child td {
  border-block-end: none;
}
.skf-table tbody tr {
  transition: background-color var(--sh-motion);
}
.skf-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--sh-accent) 5%, var(--sh-surface));
}
/* 变体 */
.skf-table--striped tbody tr:nth-of-type(odd) {
  background-color: color-mix(in srgb, var(--sh-hairline) 30%, var(--sh-surface));
}
.skf-table--bordered th,
.skf-table--bordered td {
  border: 1px solid var(--sh-hairline);
}
.skf-table--sm th,
.skf-table--sm td {
  padding-block: 0.5rem; padding-inline: 0.9rem;
  font-size: 0.9rem;
}
.skf-table--align-middle th,
.skf-table--align-middle td {
  vertical-align: middle;
}

/* ================= 组件：滑块 (Slider) ================= */
.skf-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.skf-slider::-webkit-slider-runnable-track {
  height: 4px;
  border: none;
  border-radius: 0;
  /* 已走过的部分用主色填充，比例由内联变量 --skf-fill 控制 */
  background: linear-gradient(to right,
    var(--sh-accent) var(--skf-fill, 40%),
    var(--sh-hairline) var(--skf-fill, 40%));
}
.skf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-block-start: -6px;
  border: 2px solid var(--sh-accent); /* 2px 加粗边框（外层） */
  border-radius: 0; /* 方形滑块 */
  box-sizing: border-box;
  /* 内外两层：主色底（外层）+ 表面色内块（background-size 控制）。
   * transform 放大外框、background-size 放大内块——内外不同比例"呼吸"，
   * 与单选框的双阶放大同语言。内块涨幅：10px → 13px → 16px（+60%），
   * 远大于外框 1 → 1.1 → 1.2（+20%），内部明显"放得更多"，拖动中内块顶满。 */
  background-color: var(--sh-accent);
  background-image: linear-gradient(var(--sh-surface), var(--sh-surface));
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  /* 释放动画的落点：非 hover 时 1，hover 时 1.1——释放瞬间移开/保持鼠标都能正确落定 */
  --skf-thumb-rest: 1;
  box-shadow: var(--sh-shadow);
  transition: var(--sh-motion), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-size 0.2s;
}
.skf-slider::-webkit-slider-thumb:hover {
  border-color: var(--sh-accent-hover);
  background-color: var(--sh-accent-hover);
  background-size: 13px 13px; /* 内块更多放大 */
  --skf-thumb-rest: 1.1;
  transform: scale(1.1);      /* 外框微微放大 */
  box-shadow: var(--sh-shadow-float);
}
.skf-slider:active::-webkit-slider-thumb {
  border-color: var(--sh-accent);
  background-color: var(--sh-accent);
  background-size: 16px 16px; /* 拖动中内块顶满 */
  transform: scale(1.2);
  box-shadow: var(--sh-shadow-float);
}
.skf-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--sh-accent);
}
.skf-slider::-moz-range-track {
  height: 4px;
  border: none;
  border-radius: 0;
  background: linear-gradient(to right,
    var(--sh-accent) var(--skf-fill, 40%),
    var(--sh-hairline) var(--skf-fill, 40%));
}
.skf-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--sh-accent);
  border-radius: 0;
  box-sizing: border-box;
  background-color: var(--sh-accent);
  background-image: linear-gradient(var(--sh-surface), var(--sh-surface));
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  --skf-thumb-rest: 1;
  box-shadow: var(--sh-shadow);
  transition: var(--sh-motion), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-size 0.2s;
}
.skf-slider::-moz-range-thumb:hover {
  border-color: var(--sh-accent-hover);
  background-color: var(--sh-accent-hover);
  background-size: 13px 13px;
  --skf-thumb-rest: 1.1;
  transform: scale(1.1);
  box-shadow: var(--sh-shadow-float);
}
.skf-slider:active::-moz-range-thumb {
  border-color: var(--sh-accent);
  background-color: var(--sh-accent);
  background-size: 16px 16px;
  transform: scale(1.2);
  box-shadow: var(--sh-shadow-float);
}
/* 释放回弹：JS 在 pointerup 挂 is-releasing 触发。
 * 0% 帧省略——从释放瞬间的当前值（active/hover 过渡中的实际值）自然衔接，无跳变；
 * 100% 落点用 var(--skf-thumb-rest)：hover 中落 1.1、已移开落 1，与 hover 动画不冲突。
 * 时长保持 0.45s，利落感由 easeOutCubic 的干脆收尾提供。动画结束移除 class 后无缝回落。 */
@keyframes skf-slider-release {
  50%  { transform: scale(0.95); }
  80%  { transform: scale(1.06); }
  100% { transform: scale(var(--skf-thumb-rest)); }
}
.skf-slider.is-releasing::-webkit-slider-thumb {
  animation: skf-slider-release 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.skf-slider.is-releasing::-moz-range-thumb {
  animation: skf-slider-release 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.skf-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--sh-accent);
}

/* ================= 组件：提示 (Alert) ================= */
.skf-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-block: 1rem; padding-inline: 1.25rem;
  border: 1px solid var(--sh-hairline);
  border-inline-start: 4px solid var(--sh-accent);
  border-radius: 0;
  background-color: color-mix(in srgb, var(--sh-accent) 6%, var(--sh-surface));
  box-shadow: var(--sh-shadow);
}
.skf-alert--secondary {
  border-inline-start-color: var(--sh-secondary);
  background-color: color-mix(in srgb, var(--sh-secondary) 6%, var(--sh-surface));
}
.skf-alert--success {
  border-inline-start-color: var(--sh-success);
  background-color: color-mix(in srgb, var(--sh-success) 6%, var(--sh-surface));
}
.skf-alert--warning {
  border-inline-start-color: var(--sh-warning);
  background-color: color-mix(in srgb, var(--sh-warning) 6%, var(--sh-surface));
}
.skf-alert--danger {
  border-inline-start-color: var(--sh-danger);
  background-color: color-mix(in srgb, var(--sh-danger) 6%, var(--sh-surface));
}
.skf-alert__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--sh-accent);
}
.skf-alert--secondary .skf-alert__icon { color: var(--sh-secondary); }
.skf-alert--success .skf-alert__icon { color: var(--sh-success); }
.skf-alert--warning .skf-alert__icon { color: var(--sh-warning); }
.skf-alert--danger .skf-alert__icon { color: var(--sh-danger); }
.skf-alert__title {
  font-weight: 600;
  color: var(--sh-fg);
  margin-block-end: 0.25rem;
}
.skf-alert__desc {
  font-size: 0.9rem;
  color: var(--sh-muted);
  margin: 0;
}
/* 可关闭：右上角出现关闭按钮，右侧留出空间 */
.skf-alert--dismissible {
  position: relative;
  padding-inline-end: 3rem;
}
.skf-alert--dismissible .skf-close {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-end: 0.75rem;
}

/* ================= 组件：关闭按钮 (Close) ================= */
.skf-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--sh-muted);
  cursor: pointer;
  transition: var(--sh-motion);
}
.skf-close:hover {
  color: var(--sh-accent);
  background-color: color-mix(in srgb, var(--sh-accent) 8%, transparent);
}
.skf-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--sh-accent);
}

/* ================= 组件：占位骨架 (Placeholder) ================= */
/* 加载态骨架，宽度由 w-* 工具类或内联宽度控制 */
.skf-placeholder {
  display: inline-block;
  min-block-size: 1rem;
  width: 100%;
  background-color: color-mix(in srgb, var(--sh-hairline) 55%, transparent);
  opacity: 0.75;
  cursor: wait;
}
.skf-placeholder--sm { min-block-size: 0.5rem; }
.skf-placeholder--lg { min-block-size: 1.5rem; }
.skf-placeholder--glow {
  animation: skf-placeholder-glow 1.6s ease-in-out infinite;
}
@keyframes skf-placeholder-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* ================= 组件：轮播 (Carousel) ================= */
.skf-carousel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sh-hairline);
  border-radius: 0;
  background-color: var(--sh-surface);
  box-shadow: var(--sh-shadow);
  /* 允许纵向页面滚动，横向手势留给轮播滑动切换 */
  touch-action: pan-y;
  user-select: none;
}
.skf-carousel__inner {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.skf-carousel__slide {
  flex: 0 0 100%;
  min-inline-size: 0;
}
/* 淡化变体：淡入淡出替代滑动 */
.skf-carousel--fade .skf-carousel__inner {
  display: block;
}
.skf-carousel--fade .skf-carousel__slide {
  display: none;
}
.skf-carousel--fade .skf-carousel__slide.is-active {
  display: block;
  animation: skf-carousel-fade 0.4s ease;
}
@keyframes skf-carousel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 前后控制：方形按钮 */
.skf-carousel__control {
  position: absolute;
  inset-block: 0;
  margin-block: auto;              /* centre on the block axis */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sh-hairline);
  border-radius: 0;
  background-color: var(--sh-surface);
  color: var(--sh-fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sh-shadow);
  transition: var(--sh-motion);
}
.skf-carousel__control:hover {
  color: var(--sh-accent);
  border-color: var(--sh-accent);
  box-shadow: var(--sh-shadow-float);
}
.skf-carousel__control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--sh-accent);
}
.skf-carousel__control--prev { inset-inline-start: 1rem; }
.skf-carousel__control--next { inset-inline-end: 1rem; }
/* 指示条：短横线，选中染主色 */
.skf-carousel__indicators {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline: 0;
  display: flex;
  justify-content: center;         /* centres along the inline axis (any flow) */
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}
.skf-carousel__indicator {
  inline-size: 1.5rem;
  block-size: 3px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--sh-fg) 28%, transparent);
  cursor: pointer;
  transition: var(--sh-motion);
}
.skf-carousel__indicator:hover {
  background-color: color-mix(in srgb, var(--sh-fg) 55%, transparent);
}
.skf-carousel__indicator.is-active {
  background-color: var(--sh-accent);
}

/* ================= 组件：导航栏 (Navbar) ================= */
/* 默认：表层底 + 下边框；--filled 主色实心；响应式折叠配合 JS */
.skf-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 0.75rem; padding-inline: 1.5rem;
  background-color: var(--sh-surface);
  border-block-end: 1px solid var(--sh-hairline);
}
.skf-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
  color: var(--sh-accent);
  text-decoration: none;
}
.skf-navbar__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.skf-navbar__link {
  display: block;
  padding-block: 0.5rem; padding-inline: 0.75rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--sh-muted);
  text-decoration: none;
  transition: var(--sh-motion);
}
.skf-navbar__link:hover {
  color: var(--sh-accent);
}
.skf-navbar__link.is-active {
  color: var(--sh-accent);
}
.skf-navbar__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--sh-accent);
}
/* 折叠区：默认隐藏，桌面断点展开 */
.skf-navbar__collapse {
  display: none;
  flex-direction: column;
  width: 100%;
}
.skf-navbar__collapse.is-open {
  display: flex;
}
/* 汉堡按钮：纯 CSS 三横线 */
.skf-navbar__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-hairline);
  border-radius: 0;
  cursor: pointer;
  transition: var(--sh-motion);
}
.skf-navbar__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--sh-fg);
  transition: var(--sh-motion);
}
.skf-navbar__toggle:hover {
  border-color: var(--sh-accent);
}
.skf-navbar__toggle:hover span {
  background-color: var(--sh-accent);
}
.skf-navbar__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--sh-accent);
}
/* 主色实心变体 */
.skf-navbar--filled {
  background-color: var(--sh-accent);
  border-block-end-color: var(--sh-accent);
}
.skf-navbar--filled .skf-navbar__brand {
  color: var(--sh-on-accent);
}
.skf-navbar--filled .skf-navbar__link {
  color: color-mix(in srgb, var(--sh-on-accent) 72%, transparent);
}
.skf-navbar--filled .skf-navbar__link:hover,
.skf-navbar--filled .skf-navbar__link.is-active {
  color: var(--sh-on-accent);
}
.skf-navbar--filled .skf-navbar__toggle {
  background-color: color-mix(in srgb, var(--sh-accent-hover) 60%, var(--sh-accent));
  border-color: color-mix(in srgb, var(--sh-on-accent) 30%, transparent);
}
.skf-navbar--filled .skf-navbar__toggle span {
  background-color: var(--sh-on-accent);
}
/* 响应式展开断点：--expand-md / --expand-lg / --expand-xl */
@media (min-width: 768px) {
  .skf-navbar--expand-md .skf-navbar__collapse {
    display: flex;
    flex-direction: row;
    width: auto;
  }
  .skf-navbar--expand-md .skf-navbar__toggle {
    display: none;
  }
}
@media (min-width: 992px) {
  .skf-navbar--expand-lg .skf-navbar__collapse {
    display: flex;
    flex-direction: row;
    width: auto;
  }
  .skf-navbar--expand-lg .skf-navbar__toggle {
    display: none;
  }
}
@media (min-width: 1200px) {
  .skf-navbar--expand-xl .skf-navbar__collapse {
    display: flex;
    flex-direction: row;
    width: auto;
  }
  .skf-navbar--expand-xl .skf-navbar__toggle {
    display: none;
  }
}

/* ================= 排版扩充 (Extended Typography) ================= */
.skf-display-1 { font-size: 4.5rem;  margin-block-end: 1.75rem; }
.skf-display-2 { font-size: 4rem;    margin-block-end: 1.75rem; }
.skf-display-3 { font-size: 3.5rem;  margin-block-end: 1.5rem; }
.skf-display-4 { font-size: 3rem;    margin-block-end: 1.5rem; }
.skf-display-5 { font-size: 2.5rem;  margin-block-end: 1.25rem; }
.skf-display-6 { font-size: 2.25rem; margin-block-end: 1.25rem; }
.skf-display-1, .skf-display-2, .skf-display-3,
.skf-display-4, .skf-display-5, .skf-display-6 {
  font-family: var(--sh-font-display, serif), var(--skf-font-stack, 'Noto Sans Mongolian');
  font-weight: 600; line-height: 1.35; color: var(--sh-fg);
}
.skf-lead {
  font-size: 1.2rem; line-height: 1.8; color: var(--sh-fg); font-weight: 400;
}
.skf-blockquote {
  margin-block: 0 1.5rem; margin-inline: 0;
  padding-block: 0.25rem; padding-inline-start: 1.25rem;
  border-inline-start: 4px solid var(--sh-accent);
  font-family: var(--sh-font-display, serif), var(--skf-font-stack, 'Noto Sans Mongolian');
  font-size: 1.1rem; line-height: 1.8; color: var(--sh-fg);
}
.skf-blockquote__footer {
  margin-block-start: 0.5rem; font-family: var(--sh-font, sans-serif);
  font-size: 0.9rem; color: var(--sh-muted);
}
.skf-blockquote__footer::before { content: "—— "; }
.skf-figure { display: inline-block; margin-block: 0 1.5rem; max-inline-size: 100%; }
.skf-figure__img {
  display: block; max-inline-size: 100%; block-size: auto;
  margin-block-end: 0.75rem; border: 1px solid var(--sh-hairline);
}
.skf-figure__caption { font-size: 0.9rem; color: var(--sh-muted); text-align: center; }
.skf-list-unstyled { list-style: none; padding-inline-start: 0; }
.skf-list-inline {
  display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none;
  padding-inline-start: 0; margin-block-end: 1rem;
}
.skf-list-inline__item { flex: none; }
.skf-small { font-size: 0.85rem; }
.skf-mark {
  padding: 0.05em 0.3em;
  background-color: color-mix(in srgb, var(--sh-accent) 18%, transparent);
  color: var(--sh-fg);
}
.skf-kbd {
  font-family: var(--sh-font-mono, monospace); font-size: 0.88em;
  padding: 0.2em 0.5em;
  border: 1px solid var(--sh-hairline);
  border-block-end-width: 2px;
  background-color: color-mix(in srgb, var(--sh-hairline) 45%, var(--sh-surface));
  color: var(--sh-fg);
}
.skf-sans { font-family: var(--sh-font, sans-serif); }
.skf-mono { font-family: var(--sh-font-mono, monospace); }
.skf-link {
  color: var(--sh-secondary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sh-secondary) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: var(--sh-motion);
}
.skf-link:hover { color: var(--sh-accent); text-decoration-color: var(--sh-accent); }
.skf-divider {
  block-size: 1px; border: none; background-color: var(--sh-hairline);
  margin-block: 2rem; margin-inline: 0;
}

/* ── Slider in vertical flows ──────────────────────────────────────────
 * Range inputs can't inherit writing-mode in WebKitGTK (SPEC §5a); modern
 * Chromium renders a vertical track from `writing-mode: vertical-lr`. */
[data-skf-writing] .skf-slider {
  writing-mode: vertical-lr;
  inline-size: 8rem;
  block-size: 24px;
}
[data-skf-writing] .skf-slider::-webkit-slider-runnable-track {
  width: 4px; height: 100%; margin: 0 auto;
  background: linear-gradient(to bottom,
    var(--sh-accent) var(--skf-fill, 40%),
    var(--sh-hairline) var(--skf-fill, 40%));
}
[data-skf-writing] .skf-slider::-moz-range-track {
  width: 4px; height: 100%; margin: 0 auto;
  background: linear-gradient(to bottom,
    var(--sh-accent) var(--skf-fill, 40%),
    var(--sh-hairline) var(--skf-fill, 40%));
}
[data-skf-writing] .skf-slider::-webkit-slider-thumb,
[data-skf-writing] .skf-slider::-moz-range-thumb { margin-top: 0; margin-left: 0; }