/* riman base.css —— 设计令牌 + 全局基座 + 通用组件（顶栏/页脚/封面卡/网格/分页/空态）
 * 配色决策见 docs/adr/0026：亮色基调 + 明黄 #FFD400，阅读页工具栏深色例外（reader.css）。 */

:root {
  /* 面板与文字 */
  --rm-bg: #F1F1F1;
  --rm-surface: #FFFFFF;
  --rm-surface-2: #FAFAFA;
  --rm-line: #E4E4E4;
  --rm-ink: #1A1A1A;
  --rm-ink-2: #5A5A5A;
  --rm-ink-3: #8A8A8A;
  /* 顶栏 */
  --rm-topbar: #111111;
  --rm-topbar-ink: #FFFFFF;
  /* 强调色（明黄）：主 CTA、排名角标、选中态；黄底必须配深字 */
  --rm-accent: #FFD400;
  --rm-accent-press: #F0C500;
  --rm-accent-ink: #1A1A1A;
  --rm-rank-rest: rgba(0, 0, 0, .55);
  --rm-rank-rest-ink: #FFFFFF;
  /* 阅读页（深色例外，reader.css 使用） */
  --rm-reader-bg: #F1F1F1;
  --rm-reader-bar: #424242;
  --rm-reader-bar-ink: #FFFFFF;
  --rm-reader-bar-dim: #B5B5B5;
  --rm-reader-bar-off: #6E6E6E;
  /* 字号阶梯 11/12/13/14/16/18/22/28 */
  --rm-fs-11: .6875rem;
  --rm-fs-12: .75rem;
  --rm-fs-13: .8125rem;
  --rm-fs-14: .875rem;
  --rm-fs-16: 1rem;
  --rm-fs-18: 1.125rem;
  --rm-fs-22: 1.375rem;
  --rm-fs-28: 1.75rem;
  /* 间距 / 圆角 / 阴影 */
  --rm-sp-1: 4px;
  --rm-sp-2: 8px;
  --rm-sp-3: 12px;
  --rm-sp-4: 16px;
  --rm-sp-5: 24px;
  --rm-sp-6: 32px;
  --rm-r-sm: 4px;
  --rm-r: 8px;
  --rm-r-lg: 12px;
  --rm-shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --rm-shadow-2: 0 4px 12px rgba(0, 0, 0, .10);
  /* 顶栏高度：顶栏 fixed，body 靠它补顶部偏移，sticky 元素靠它定位 */
  --rm-topbar-h: 52px;
  /* 版式 */
  --rm-container: 1200px;
  --rm-cover-ratio: 3 / 4;
  --rm-reader-max: 840px;
  /* 栅格单旋钮：媒体查询只改这两个变量 */
  --rm-cols: 3;
  --rm-toc-cols: 1;
}

@media (min-width: 480px) {
  :root { --rm-toc-cols: 2; }
}

@media (min-width: 768px) {
  :root { --rm-cols: 4; --rm-toc-cols: 3; }
}

@media (min-width: 1024px) {
  :root { --rm-cols: 5; --rm-toc-cols: 4; }
}

@media (min-width: 1280px) {
  :root { --rm-cols: 6; }
}

/* ---- 基座 ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rm-bg);
  color: var(--rm-ink);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--rm-fs-14);
  line-height: 1.6;
  padding-top: var(--rm-topbar-h);
}

body.rm-reader-body {
  padding-top: 0;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

h1, h2, h3, p { margin: 0; }

button, input {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  padding: 0;
}

button { cursor: pointer; }

.rm-icon, .rm-i {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

.rm-container {
  max-width: var(--rm-container);
  margin: 0 auto;
  padding: 0 var(--rm-sp-4);
}

.rm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- 顶栏 ---- */

.rm-topbar {
  background: var(--rm-topbar);
  color: var(--rm-topbar-ink);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.rm-topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--rm-sp-4);
  height: var(--rm-topbar-h);
}

.rm-brand {
  display: flex;
  align-items: center;
  gap: var(--rm-sp-2);
  font-size: var(--rm-fs-18);
  font-weight: 700;
  flex: none;
}

.rm-brand .rm-brand-mark { color: var(--rm-accent); font-size: 1.2em; }

/* 站群 Logo：上传图多为方形头像式且常带白底，限高并加圆角，避免在黑色顶栏上呈现为白方块 */
.rm-brand-logo {
  width: auto;
  height: 32px;
  max-width: 120px;
  object-fit: contain;
  border-radius: var(--rm-r);
  flex: none;
}

/* 移动端搜索切换按钮（桌面端隐藏） */
.rm-search-toggle {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .15);
  border: none;
  border-radius: var(--rm-r);
  color: inherit;
  cursor: pointer;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}

.rm-search-toggle.is-active {
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
}

/* 移动端搜索覆盖层（桌面端不存在此结构） */
.rm-search-overlay {
  display: none;
}

/* 移动端底部导航（桌面端隐藏） */
.rm-bottom-nav {
  display: none;
}

.rm-topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--rm-sp-1);
}

.rm-topbar-link {
  padding: 4px var(--rm-sp-3);
  font-size: var(--rm-fs-13);
  border-radius: var(--rm-r-sm);
  opacity: .7;
  transition: opacity .15s;
}

.rm-topbar-link:hover { opacity: 1; }
.rm-topbar-link.is-active { opacity: 1; background: rgba(255, 255, 255, .12); font-weight: 600; }

.rm-search {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 520px;
  margin-left: auto;
  background: #FFFFFF;
  border-radius: var(--rm-r);
  overflow: hidden;
}

.rm-search-input {
  flex: 1;
  min-width: 0;
  padding: 7px var(--rm-sp-3);
  color: var(--rm-ink);
  font-size: var(--rm-fs-13);
}

.rm-search-input::placeholder { color: var(--rm-ink-3); }

.rm-search-input:focus {
  outline: 2px solid var(--rm-accent);
  outline-offset: -2px;
}

.rm-search-btn {
  flex: none;
  padding: 7px var(--rm-sp-4);
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-weight: 600;
  font-size: var(--rm-fs-13);
}

.rm-search-btn:active { background: var(--rm-accent-press); }

/* ---- 页脚 ---- */

.rm-footer {
  margin-top: var(--rm-sp-6);
  padding: var(--rm-sp-5) 0;
  background: var(--rm-topbar);
  color: var(--rm-topbar-ink);
}

.rm-footer .rm-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-sp-2) var(--rm-sp-4);
  justify-content: center;
  font-size: var(--rm-fs-12);
  color: rgba(255, 255, 255, .6);
}

/* ---- 封面卡与网格 ---- */

.rm-grid {
  display: grid;
  grid-template-columns: repeat(var(--rm-cols), minmax(0, 1fr));
  gap: var(--rm-sp-4) var(--rm-sp-3);
}

.rm-card { display: block; min-width: 0; }

.rm-card-pic {
  position: relative;
  aspect-ratio: var(--rm-cover-ratio);
  border-radius: var(--rm-r);
  overflow: hidden;
  background: var(--rm-line);
  box-shadow: var(--rm-shadow-1);
}

.rm-card-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}

.rm-card-pic img.is-loaded, .rm-card-pic img.no-lazy { opacity: 1; }

.rm-card:hover .rm-card-pic { box-shadow: var(--rm-shadow-2); }

.rm-rank {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--rm-r) 0 var(--rm-r) 0;
  background: var(--rm-rank-rest);
  color: var(--rm-rank-rest-ink);
  font-size: var(--rm-fs-12);
  font-weight: 700;
  text-align: center;
}

.rm-rank.is-top {
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
}

.rm-card-title {
  margin-top: var(--rm-sp-2);
  font-size: var(--rm-fs-13);
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-card-sub {
  margin-top: 2px;
  font-size: var(--rm-fs-12);
  color: var(--rm-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 板块（首页/列表共用外壳） ---- */

.rm-sec { margin-top: var(--rm-sp-5); }

.rm-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--rm-sp-3);
}

.rm-sec-title {
  font-size: var(--rm-fs-18);
  font-weight: 700;
  border-left: 4px solid var(--rm-accent);
  padding-left: var(--rm-sp-2);
  line-height: 1.2;
}

.rm-sec-more {
  font-size: var(--rm-fs-13);
  color: var(--rm-ink-2);
}

.rm-sec-more:hover { color: var(--rm-ink); }

/* ---- 筛选 chip ---- */

.rm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-sp-2);
}

.rm-chip {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--rm-surface);
  color: var(--rm-ink-2);
  font-size: var(--rm-fs-13);
  box-shadow: var(--rm-shadow-1);
}

.rm-chip:hover { color: var(--rm-ink); }

.rm-chip.is-active, .rm-chip.is-on {
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-weight: 600;
}

/* ---- 分页（public/paging.html） ---- */

.rm-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rm-sp-2);
  margin-top: var(--rm-sp-5);
}

.rm-pg, .rm-pg-gap {
  min-width: 34px;
  padding: 5px 10px;
  border-radius: var(--rm-r-sm);
  background: var(--rm-surface);
  color: var(--rm-ink-2);
  font-size: var(--rm-fs-13);
  text-align: center;
  box-shadow: var(--rm-shadow-1);
}

a.rm-pg:hover { color: var(--rm-ink); }

.rm-pg.is-on {
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-weight: 700;
}

.rm-pg.is-off, .rm-pg-gap { color: var(--rm-ink-3); box-shadow: none; background: transparent; }

/* ---- 加载更多（browse.html 的无限流按钮，仅移动端与分页器并存） ---- */

/* hidden 由 RM.loadMore 绑定成功后摘除：无 JS 时不露出一个点了没反应的按钮。
   显示条件收在 767px 以下 —— PC 端即使脚本摘了 hidden 也仍然只有分页器。 */
.rm-more {
  display: none;
  width: 100%;
  margin-top: var(--rm-sp-5);
  padding: 11px var(--rm-sp-4);
  border-radius: var(--rm-r);
  background: var(--rm-surface);
  color: var(--rm-ink-2);
  font-size: var(--rm-fs-14);
  text-align: center;
  box-shadow: var(--rm-shadow-1);
}

@media (max-width: 767px) {
  .rm-more:not([hidden]) { display: block; }
}

.rm-more.is-busy, .rm-more:disabled { color: var(--rm-ink-3); box-shadow: none; }

/* ---- 空态 ---- */

.rm-empty {
  padding: var(--rm-sp-6) var(--rm-sp-4);
  text-align: center;
  color: var(--rm-ink-3);
}

.rm-empty .rm-icon { font-size: 40px; color: var(--rm-line); }

.rm-empty p { margin-top: var(--rm-sp-3); font-size: var(--rm-fs-14); }

.rm-empty-actions {
  display: flex;
  justify-content: center;
  gap: var(--rm-sp-3);
  margin-top: var(--rm-sp-4);
}

.rm-empty-actions a {
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--rm-surface);
  color: var(--rm-ink-2);
  font-size: var(--rm-fs-13);
  box-shadow: var(--rm-shadow-1);
}

/* ---- 通用按钮 ---- */

.rm-btn, .rm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-sp-2);
  padding: 10px 28px;
  border-radius: 999px;
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-size: var(--rm-fs-14);
  font-weight: 700;
}

.rm-btn:active, .rm-btn-primary:active { background: var(--rm-accent-press); }

.rm-btn.is-lg { padding: 12px 36px; font-size: var(--rm-fs-16); }

.rm-btn.is-ghost {
  background: var(--rm-surface);
  color: var(--rm-ink-2);
  box-shadow: inset 0 0 0 1px var(--rm-line);
}

.rm-btn.is-off, .rm-btn-primary.is-disabled {
  background: var(--rm-line);
  color: var(--rm-ink-3);
  pointer-events: none;
}

/* ---- 页头（浏览/搜索页） ---- */

.rm-main { padding-bottom: var(--rm-sp-6); }

.rm-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-sp-3) var(--rm-sp-4);
  margin-top: var(--rm-sp-5);
  margin-bottom: var(--rm-sp-4);
}

.rm-page-title {
  font-size: var(--rm-fs-22);
  font-weight: 700;
  border-left: 4px solid var(--rm-accent);
  padding-left: var(--rm-sp-2);
  line-height: 1.2;
}

/* ---- 通用面包屑（public/crumb.html）----
 * 容器与链接用 ink-2 保证正文级对比度；chevron 是 aria-hidden 的装饰件，
 * 才允许降到 ink-3。末项 aria-current 用最深色 + 加粗表示"当前位置"。 */

.rm-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-sp-2);
  margin-top: var(--rm-sp-1);
  font-size: var(--rm-fs-13);
  color: var(--rm-ink-2);
}

/* 面包屑紧跟 page-head 时由面包屑接管上间距，避免上下双倍留白 */
.rm-crumb + .rm-page-head { margin-top: var(--rm-sp-3); }

.rm-crumb a {
  color: var(--rm-ink-2);
  padding: var(--rm-sp-1) 0;   /* 抬高行内链接的可点高度，不影响行高 */
}

.rm-crumb a:hover { color: var(--rm-ink); }

.rm-crumb a:focus-visible {
  outline: 2px solid var(--rm-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

.rm-crumb [aria-current="page"] { color: var(--rm-ink); font-weight: 600; }

.rm-crumb .rm-icon { font-size: var(--rm-fs-11); color: var(--rm-ink-3); }

.rm-sec-note { font-size: var(--rm-fs-13); color: var(--rm-ink-3); }

/* ---- 线路选项卡 ----
 * 番剧详情选集区与播放页选集区共用（detail.css / player.css 各自只加自己的布局差异）。
 * 选中态用明黄指示条 + 深色加粗字：细黄线在白底对比不足，
 * 故可读性交给文字，黄条只作强调（配色约定见 docs/adr/0026）。 */

.rm-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-sp-5);
  border-bottom: 1px solid var(--rm-line);
  margin-bottom: var(--rm-sp-4);
}

/* 播放页在选项卡前多一个「线路」标签，故那里的 tablist 单独包一层；
   详情页无标签、.rm-tabs 自身即 tablist，两种结构共用同一套卡样式。 */
.rm-tabs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-sp-5);
  min-width: 0;
}

/* 栏首「线路」标签：点明这一栏切的是资源来源，而非剧集。
   沿用站内「明黄左边框 + 深色粗体」的小标题范式（同 .rm-sec-title），
   与右侧可点击的选项卡形成层级差；非交互元素，故不参与 tablist 焦点。 */
.rm-tabs-lead {
  flex: none;
  align-self: center;
  margin-bottom: 4px;
  padding-left: var(--rm-sp-2);
  border-left: 3px solid var(--rm-accent);
  color: var(--rm-ink);
  font-size: var(--rm-fs-13);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.rm-tab {
  position: relative;
  padding: 6px 2px 10px;
  font-size: var(--rm-fs-14);
  color: var(--rm-ink-2);
  white-space: nowrap;
}

.rm-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* 贴容器内沿而非 -1px 压住边框线：播放页的 tablist 是可横滚容器，
     溢出 1px 会被 overflow 计入纵向滚动并裁切指示条。 */
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.rm-tab:hover { color: var(--rm-ink); }

.rm-tab.is-on {
  color: var(--rm-ink);
  font-weight: 600;
}

.rm-tab.is-on::after { background: var(--rm-accent); }

.rm-tab:focus-visible {
  outline: 2px solid var(--rm-ink);
  outline-offset: 2px;
  border-radius: var(--rm-r-sm);
}

/* ---- 选集 / 章节目录 ----
 * 番剧详情、番剧播放、漫画详情三处共用。 */

.rm-toc {
  display: grid;
  grid-template-columns: repeat(var(--rm-toc-cols), minmax(0, 1fr));
  gap: var(--rm-sp-2);
}

.rm-toc-i {
  padding: 9px var(--rm-sp-3);
  border-radius: var(--rm-r-sm);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-1);
  font-size: var(--rm-fs-13);
  color: var(--rm-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-toc-i:hover { color: var(--rm-ink); box-shadow: var(--rm-shadow-2); }

/* 当前正在播放的一集 */
.rm-toc-i.is-on {
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-weight: 600;
}

@media (max-width: 640px) {
  /* 线路多时横向滚动，避免换行把选集区推下去。
     两层都设：详情页 .rm-tabs 自身是卡片容器；播放页真正滚动的是内层
     .rm-tabs-list（min-width:0 让它收缩，外层因此不溢出，「线路」标签留在原处）。
     overflow-y 必须显式 hidden：只写 overflow-x:auto 时 y 会被算成 auto，
     指示条（bottom:0，高 3px）会被计入纵向滚动，产生 1px 竖向滚动并遭裁切。 */
  .rm-tabs, .rm-tabs-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--rm-sp-4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rm-tabs::-webkit-scrollbar,
  .rm-tabs-list::-webkit-scrollbar { display: none; }

  /* ---- 移动端顶栏优化 ---- */
  /* 布局：Logo+标题（左对齐）- 搜索栏（右侧占据剩余空间） */
  .rm-topbar-inner {
    gap: var(--rm-sp-6);
  }

  /* Logo + 标题左对齐 */
  .rm-brand {
    font-size: 16px;
    white-space: nowrap;
  }

  .rm-brand-logo {
    height: 28px;
  }

  /* 隐藏搜索切换按钮（不需要了） */
  .rm-search-toggle {
    display: none;
  }

  /* 桌面端导航链接在移动端隐藏（使用底部导航代替） */
  .rm-topbar-nav {
    display: none;
  }

  /* 搜索栏在移动端保持显示，调整样式 */
  .rm-search {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin-left: 0;
  }

  .rm-search-input {
    font-size: 14px;
    padding: 6px var(--rm-sp-2);
  }

  .rm-search-btn {
    padding: 6px var(--rm-sp-3);
    font-size: 14px;
  }

  /* 隐藏搜索覆盖层（不需要了） */
  .rm-search-overlay {
    display: none;
  }

  /* ---- 移动端底部导航 ---- */
  .rm-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--rm-topbar);
    border-top: 1px solid rgba(255, 255, 255, .1);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .rm-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    text-decoration: none;
    transition: color .2s;
    -webkit-tap-highlight-color: transparent;
  }

  .rm-bottom-nav-item .rm-icon {
    font-size: 24px;
  }

  .rm-bottom-nav-item.is-active {
    color: var(--rm-accent);
  }

  /* 主内容区底部留出底部导航的空间 */
  body {
    padding-bottom: 60px;
  }

  /* 移动端隐藏页脚 */
  .rm-footer {
    display: none;
  }
}