@charset "UTF-8";
/* ==========================================================================
   全站兼容层（ie / 旧内核专用）
   --------------------------------------------------------------------------
   加载顺序：由 gr_page_head() 自动接在页面样式之后（每个页面都会加载），
   home.css 里的「基础声明 + @supports 覆盖」之外，所有只在 IE 下才需要的
   补丁都写在这里。
   这里只放「只对 IE / 360 兼容模式 / QQ 兼容模式 生效」的规则，
   全部锁在 IE10/11 专属媒体查询里 —— 现代浏览器（Chrome / Firefox /
   360 极速模式 / QQ 极速模式）永远不会匹配这条 media query，因此加载本文件
   对现代内核的渲染没有任何影响（可与 home.css 的逐像素对照结果并存）。

   兼容层的另一半在 home.css 里，是「基础声明 + @supports 覆盖」的写法：
     - 基础声明（float 栅格、table 两栏、margin 模拟 gap）：IE 直接吃这一套；
     - @supports 里的现代声明：IE 不认识 @supports 整块忽略，现代内核用它。
   凡是 IE 也认识的属性（display:grid 就是），必须放进 @supports，
   否则会盖掉基础声明 —— 首页主区两栏「变成上下排列」就是这个坑。
   ========================================================================== */

/* IE 没有 aspect-ratio / -webkit-line-clamp / object-fit：
   - 3:4 封面：padding 撑高的写法已经写在 home.css 的「尺寸」一节（所有浏览器通用），IE 直接用那一套；
   - 文字截断退化为单行省略号；
   - 图片用 background 的 cover 行为无法实现，改为拉伸（object-fit 缺失时的默认行为）
     对 3:4 封面无影响，仅头像等非等比图片会被压扁。 */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE11 的 flex 实现是残缺的：flex 子项的 min-height:auto 不生效，flex-basis:0 的
     main 被算成 0 高（真 IE11 实测 flex:1 1 0px → height:0）。首页外壳是
       body > div.min-h-screen.flex.flex-col > [header, main.flex-1, footer.mt-auto]
     main 高度为 0 之后，footer 被排到 main 的「盒子」后面 —— 也就是页头正下方，
     再被后面 position:relative 的区块盖住，表现就是「兼容模式 footer 不显示」。
     所以 IE 下把外壳退回普通块级流：header / main / footer 依次堆叠，main 由内容
     自然撑高，footer 紧随其后，与 Chrome 的视觉顺序完全一致（mt-auto 在块级流里
     等于 0，min-h-screen 仍保证整页背景到底）。 */
  .min-h-screen.flex-col {
    display: block;
  }

  /* 站名「格瑞创新」是渐变文字：inline style 里写了 -webkit-background-clip:text
     + background-clip:text + color:transparent。IE 不认识 background-clip:text（整条丢弃），
     于是文字透明、渐变反而铺满整个盒子 —— 页头左上角那个橙色方块就是这个。
     IE 下还原成纯色字并去掉背景（!important 才能压过 inline style）。
     原站（Next.js）在 IE 里是同样的色块，这条属于「兼容层修 IE 的显示缺陷」。 */
  a[aria-label="格瑞创新"] > span {
    background: none !important;
    filter: none !important;
  }
  a[aria-label="格瑞创新"] > span:first-child { color: #f59e0b !important; }
  a[aria-label="格瑞创新"] > span:last-child { color: #ea580c !important; }

  .line-clamp-1,
  .line-clamp-2,
  .line-clamp-4 {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 头像下拉菜单的条目是「<svg> + 裸文本节点」，两者之间靠 flex 的 gap-2 撑开。
     IE 的 flex 不支持 gap，而 .gap-2 > * + * 只能匹配「元素 + 元素」的兄弟关系，
     匹配不到文本节点，图标和文字会贴在一起 —— 这里按 gap-2 = 8px 补右边距。 */
  #grUserMenu a > svg,
  #grUserMenu button > svg { margin-right: 8px; }

  /* 阅读页的弹幕层是 fixed 的一整块（z-index 9999）。IE10/11 认 pointer-events，
     直接让它不接管鼠标事件；IE8/9 不认这个属性（这里也进不来，本文件锁在
     IE10/11 专属媒体查询里），那边靠 mangadetail.css 里把控件抬到 10000 兜底。 */
  .md-dm-layer {
    pointer-events: none;
  }
}