/*!
 * 顶栏 / 右侧悬浮栏 / 移动端交互 补丁
 * 只补齐 MXone 模板在 SPA 化之后失效或缺口的交互样式，不改主题本身的观感。
 * 加载顺序在 style.css / app.css 之后（index.html 的 <link> 在 app.css 下面），
 * 所以这里的规则天然覆盖主题；需要压制主题高特异性规则时才另加选择器权重。
 */

/* ---------------- 右侧悬浮栏：展开态（P0-1） ----------------
 * app.js 点击 .moremeum 时切的是 .mx-lrmenu 上的 .open 类，但模板只认 .mx-lrshow
 * （style.css:6855 .mx-lrshow{height:auto} / :6860 .mx-lrshow .dbicon{opacity:1}）。
 * 全仓库没有任何 .mx-lrmenu.open 规则，于是：
 *   .fixed_right_bar .mx-lrmenu 高度恒为 0（style.css:6850）
 *   .mx-lrmenu .dbicon 的 opacity 恒为 0、transform 恒为下移 100%（style.css:6842）
 * —— 主题切换 / 返回顶部 / 收藏 / 排行四个按钮永久不可见，黑皮肤用户没有任何
 * 入口切回白皮肤。这里补一套与 .mx-lrshow 等价的 .open 规则，保留 JS 的类名不动。
 */
.fixed_right_bar .mx-lrmenu.open {
  height: auto;
  padding-top: 10px;
}
.fixed_right_bar .mx-lrmenu.open .dbicon {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

/* ---------------- 移动端下拉：点开后内容可点（P0-3） ----------------
 * app.js 点击时给 li 加 .open；app.css 只补了 display:block，但：
 *   .drop-content 默认 pointer-events:none（style.css:1168）
 *   .drop-content-box 默认 opacity:0 + translate3d(0,-100%,0)（style.css:1174）
 * 这两个属性只有 .drop:hover 分支才复位（style.css:1213 起），点击路径下内容
 * 依旧透明且点不动。这里补上等价规则，让「点开」与「悬停」表现一致。
 */
.drop.open > .drop-content {
  display: block;
  pointer-events: auto;
  z-index: 20;
}
.drop.open > .drop-content-box {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

/* ---------------- 移动端全屏搜索（P0-4） ----------------
 * app.js 点搜索图标时给 #header 加 .mobile-open（模板那套 position:fixed / 100vh
 * 的遮罩样式在 style.css:5681 起，全项目 JS 从没加过这个类）。但模板还给
 * .mobile-open 配了一条 overflow:hidden;height:100% 的「锁滚动」规则
 * （style.css:1008），那是给 body 准备的 —— 套在 #header 上会把页头撑成整屏高。
 * 这里显式还原，只把 .mobile-open 当选择器钩子用（#search-content 那套本站用不到）。
 */
#header.mobile-open {
  height: auto;
  overflow: visible;
}

/* ---------------- 移动端底栏：当前页高亮 + 安全区（P3-1） ----------------
 * renderMobileFoot 给每项打了 data-nav，markNav 按路由加 .selected。
 * 模板 .mxonefoot .item 没有选中样式（style.css:7106），这里补主色。
 * 用 #ff2a14 与顶栏「选中图标」色（style.css:2020 .nav-menu-item.selected i）保持一致。
 */
.mxonefoot .item.selected i,
.mxonefoot .item.selected .grid-item-name {
  color: var(--mx-primary);
}
/* iPhone 底部小黑条：底栏自身留出安全区高度。 */
.mxonefoot {
  padding-bottom: env(safe-area-inset-bottom);
}
/* 底栏变高后，内容区要多留出这段高度，否则最后一行会被盖住。
 * .pd60 只在 ≤767px 生效（style.css:7135），这里跟着限定同一断点。 */
@media (max-width: 767px) {
  .pd60 {
    padding-bottom: calc(65px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---------------- 顶栏导航配色交回主题（P3-2） ----------------
 * 原 hdp.css:175-181 / 204-206 用 `.header-content .nav-menu-items li i` 把图标常态色
 * 钉成 #fff7f7：与主题的 .nav-menu-item:hover>a>i（style.css:1969）特异性相同、
 * 加载又更晚，于是「悬停变红」整条失效；对 .nav-menu-item.selected i
 * （style.css:2020）更是直接压制。滚动后再强制 #6d6d6d，在黑主题
 * （.homepage .header-bg 背景 #16161a，见 mxhtmlblack.css:475）下成灰字压近黑底。
 * 那三条规则已删除（见报告），常态配色交回主题的 .nav-menu-item-name-white /
 * .nav-menu-item-name（style.css:1881/7233），这里只补主题缺的两处：
 */

/* 1) slogan：主题没给颜色（style.css:1836 只有尺寸），压在深色底上必须提亮。 */
.header-content .slogan {
  color: #fff7f7;
}

/* ---------------- 白皮肤页头：浅底 + 深字（P0） ----------------
 * 主题的页头是「透明底 + 近白字」：导航字 .nav-menu-item-name 与图标上的
 * .nav-menu-item-name-white 常态都是 #f3f5f7（style.css:1881 / 7236）。
 * 这套配色成立的前提是页头下方垫着一张深色图 —— 首页垫顶部轮播、内页垫头图。
 * SPA 化之后 banner 全没了：实测首页轮播在 y=120，而页头只有 70 高，压根没压上；
 * 内页更是没有头图。白皮肤于是成了「近白字 + 纯白页面」：
 *   导航字 #f3f5f7 / 白底 → 对比度 1.09；slogan #fff7f7 / 白底 → 1.06。
 * 整条顶栏看不见（黑皮肤不受影响，深底浅字本来就成立）。
 * 佐证白皮肤本该是浅底深字：logo.png 实测全为暗像素（平均亮度 35.8、零个亮像素），
 * 只压在浅底上才看得见；主题自己也只在 ≤559px 做了浅底深字（white.css:526-541），
 * 560px 以上漏了。这里补到所有宽度，并把滚动后那条深色页头一并改浅 ——
 * style.css 里 .search .header-bg 与 .page .header-content 都是 rgba(7,7,10,.92)，
 * 不改的话深字滚到深底上又反过来看不见。
 * body.view（详情页）例外：它的页头本就压在详情大图上、一直是深底，浅字也一直读得清
 * （实测 15.99），保持原样不动。
 * 选中态交给主题的 var(--mx-primary)（style.css:2029），:not(.selected) 不压它。 */
html.theme-white body:not(.view) .header-content { background: #fff; }
html.theme-white body:not(.view) .header-content.header-bg { background: rgba(234, 237, 241, .96); }
html.theme-white body:not(.view) .nav-menu-item:not(:hover):not(.selected) .nav-menu-item-name,
html.theme-white body:not(.view) .nav-menu-item:not(:hover):not(.selected) .nav-menu-item-name-white { color: rgba(7, 7, 10, .62); }
html.theme-white body:not(.view) .header-content .slogan { color: rgba(7, 7, 10, .62); }

/* 上面那条带 :not(.selected)，把选中项留给了主题。但主题在 ≤559px 另有一条
 *   .nav .nav-menu-item.selected .nav-menu-item-name { color: #fff }   （style.css:5518）
 * 比它桌面端那条 var(--mx-primary)（style.css:2029）更具体，于是窄屏下选中项被
 * 强行压成纯白 —— 那是配「深色页头」写的，而白皮肤页头现在是白的：
 * 实测 390px 白皮肤首页，「首页」两字整片消失，只剩底下那条红杠（区域内暗像素
 * 40 个，正好是 35%×4px 的红杠本身）。这里对齐桌面端，用主色红标当前页。 */
html.theme-white body:not(.view) .nav .nav-menu-item.selected .nav-menu-item-name {
  color: var(--mx-primary);
}

/* ---------------- 顶栏最右一列的下拉：不要顶出视口 ----------------
 * .drop-content 带 margin:-5px -35% 0（style.css:1165），那 -35% 相对所在导航项
 * 宽度。最右一列（用户菜单）的导航项右缘本就与页头右缘齐平，这个右移补偿把下拉
 * 顶出视口（1440px 实测溢出 13px），于是整页多出一条横向滚动条。最右一列不需要
 * 右移补偿，归零即可；其余导航项的下拉不受影响。
 */
.header-content .header-module .nav-menu-items > li:last-child > .drop-content {
  margin-right: 0;
}

/* ---------------- 触摸目标：只有字形高的链接撑到手指够得着 ----------------
 * 移动端实测：若干入口的可点区域就是文字本身那么高（12px 字 → 11–16px），
 * 手指按不准。这些链接所在的父行本来就有高度（下拉行 40px、悬浮格 36px），
 * 只是 <a> 是 inline、没撑满父级。改成块级即可，视觉不变。
 */
@media (max-width: 899px) {
  /* 用户下拉的三行（我观看的 / 我的收藏 / Emby 源站）：
     .text-alink 行高 40px，但里面的 <a> 只有 16px。 */
  .list-item.text-alink > a { display: block; }

  /* 底部站点地图：≤767px 字号降到 10px，四个链接各只有 11px 高。 */
  #footer .sitemap a { display: inline-block; padding: 10px 3px; }

  /* 历史下拉标题行的「查看全部 / 清空」。 */
  .list-item-title .playlist { display: inline-block; padding: 4px 6px; }

  /* ---------------- 触摸目标（第二轮）：把 <32px 的入口抬到 36px ----------------
   * 上一轮补的是「父行有高度、<a> 没撑满」；这一轮 390px 宽全量扫了一遍可点元素，
   * 还漏着一批「<a> 自己的盒子就只有一行那么高」的：
   *   a.shrink                 28×16  详情页简介的「展开」（最矮的一个）
   *   .module-heading .more    95×28  「更多电影 / 更多剧情专题」
   *   .video-info-aux .tag-link 59×28 详情页头部的类型标签
   *   .module-search-item .btn-important 89×29 搜索结果里的「查看详情」主按钮
   *   .video-serial            73×31  搜索结果右上角的「更新至 26 集」
   *   #footer .sitemap a       26×28  页脚站点地图
   * （首页的地区切换胶囊 .mx-region-item 同类问题，规则放在 app.home.css —— 那是
   *  它自己的文件，放这儿会被后加载的 app.home.css 盖掉。）
   * 统一抬到 36px —— 与主题自己的 .btn-base / .library-item（35px）同档，
   * 也远高于 WCAG 2.2「目标尺寸」的 24px 下限。
   *
   * 手法分两种：
   *  - 行内元素（a.shrink）用 vertical padding：行内盒的 padding 只撑命中区、
   *    不参与行盒高度计算，版式一点不动，正好；
   *  - 块级元素改 line-height（tag-link / video-serial / 搜索页主按钮）：
   *    这几个都在可伸缩的横排容器里，长高一点只是把那一行撑高，不顶版式。
   *  .more 是 position:absolute（style.css:2232），改 line-height 会连带它相对
   *  标题行的位置，所以它用透明 ::after 铺一层点击区（inset 向外扩 4px），盒子不动。 */
  a.shrink { padding: 10px 4px; }
  .video-info-aux .tag-link,
  .video-serial,
  .module-search-item .btn-important.btn-base { line-height: 36px; }
  .more::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    bottom: -4px;
  }
}

/* 右侧悬浮栏的「收藏 / 排行」两格：.dbicon 是 36×36 的圆，里面的 <a> 只有 36×16。 */
.fixed_right_bar .dbicon > a { display: block; width: 100%; height: 100%; }