/* ══════════════════════════════════════════════════════════════
   suwen-edu.cn · 手机端补丁 v3
   ──────────────────────────────────────────────────────────────
   本版基于真实源码重写，替换掉之前所有版本。

   核心诊断：页面大量使用 padding-block / padding-inline / inset /
   border-block 这几个较新的 CSS 逻辑属性。部分安卓浏览器内核
   （华为等）不识别它们，整条声明被直接丢弃 —— 结果就是区块的
   内边距、抽屉的定位全部消失。本文件把手机端用到的这些属性
   逐条改写成通用长写法。

   不改任何 HTML 内容，不影响桌面端（规则全在窄屏媒体查询内）。

   配套文件：js/mobile.js —— 修复手机菜单，必须一起用。
   ══════════════════════════════════════════════════════════════ */


/* ═══ 0. 全局安全项（桌面端无视觉变化）══════════════════════ */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}  /* 禁掉安卓字体乱放大 */

p,li,td,th,h1,h2,h3,h4,summary,figcaption,.lede,.prose,.fbot{overflow-wrap:break-word}


/* ══════════════════════════════════════════════════════════════
   1. 兼容层：逻辑属性 → 通用长写法
   这一节是本次修复的主体，请勿删除。
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1080px){

  /* ── 页面主容器：左右留白（含刘海屏安全区）── */
  .wrap{
    padding-left:20px;
    padding-right:20px;
    padding-left:calc(20px + env(safe-area-inset-left));
    padding-right:calc(20px + env(safe-area-inset-right));
  }

  /* ── 通用区块上下留白 ── */
  .sec{padding-top:52px;padding-bottom:52px}
  .hero{padding-top:44px;padding-bottom:36px}
  .hero--page{padding-top:38px;padding-bottom:8px}
  .post-hd{padding-top:36px;padding-bottom:8px}
  .body{padding-top:32px;padding-bottom:8px}
  .qrstrip{padding-top:40px;padding-bottom:36px}
  .foot{padding-top:48px;padding-bottom:32px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}

  /* ── 星座 / 问题清单区：左右顶边就是这里丢的 ── */
  .constel{padding-top:0;padding-bottom:0;padding-left:0;padding-right:0}
  .cpanel{
    padding-top:44px;padding-bottom:44px;
    padding-left:20px;padding-right:20px;
    padding-left:calc(20px + env(safe-area-inset-left));
    padding-right:calc(20px + env(safe-area-inset-right));
    border-radius:0;
  }
  .cstage{padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0}

  /* ── 上下边框（原用 border-block）── */
  .docmeta,.post-meta,.libstat{
    border-top:1px solid var(--line2);
    border-bottom:1px solid var(--line2);
  }

  /* ── 手机抽屉定位：原用 inset，不认就等于没定位 ── */
  .sheet{
    top:64px;right:0;bottom:0;left:0;
    padding:8px 20px 60px;
    padding-bottom:calc(60px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }

  /* ── 灯箱 ── */
  .lb{top:0;right:0;bottom:0;left:0;padding:14px}
  .lb img,.lb .ph{max-height:70vh}

  /* ── flex 的 gap 兜底 ──────────────────────────────────
     部分内核不支持 flex 布局的 gap（汉堡按钮塌成一条杠就是这么来的）。
     做法：先把 gap 归零，再统一用 margin 撑开 —— 这样新旧内核
     算出来的间距完全一致，不会在新浏览器上翻倍。 */

  .btnrow{gap:0;margin-top:26px}
  .btnrow>*{margin-right:10px;margin-bottom:10px}

  .chips{gap:0;margin-top:12px}
  .chips li{margin-right:8px;margin-bottom:8px}

  .filters{gap:0}
  .filters button{margin-right:8px;margin-bottom:8px}

  .dots{gap:0}
  .dots button{margin-left:4px;margin-right:4px}

  .rel .meta{gap:0}
  .rel .meta>*{margin-right:22px;margin-bottom:4px}

  .docmeta,.post-meta,.libstat{gap:0}
  .docmeta>*,.post-meta>*,.libstat>*{margin-right:22px;margin-bottom:4px}

  .fmast{gap:0}
  .fmast>*{margin-bottom:18px}

  .fqr-hd{gap:0}
  .fqr-hd>span:first-child{margin-right:12px}

  /* 二维码与说明文字：不支持 gap 时会贴在一起 */
  .fqr-grid figure{gap:0}
  .fqr-grid figure>img{margin-right:13px}

  /* 问题清单的小图标与标题：同上 */
  .cmobile>div{gap:0}
  .cmobile>div>i{margin-right:14px}

  .lect summary{gap:0}
  .lect summary>*{margin-right:11px}
}


/* ══════════════════════════════════════════════════════════════
   2. 汉堡按钮：改用绝对定位画三条线
   原写法靠 flex 的 gap 分开三条线，gap 不生效就叠成一条粗杠 ——
   就是你看到的那个"横杠符号"。绝对定位不依赖任何新特性。
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1080px){
  .nav .burger{
    display:block;
    position:relative;
    width:44px;height:44px;
    padding:0;
    border:1px solid var(--line2);
    border-radius:10px;
    background:none;
    margin-left:8px;
    flex-shrink:0;
  }
  .nav .burger i{
    position:absolute;
    left:13px;
    width:18px;height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:top .2s,transform .2s,opacity .2s;
  }
  .nav .burger i:nth-child(1){top:14px}
  .nav .burger i:nth-child(2){top:21px}
  .nav .burger i:nth-child(3){top:28px}

  .nav .burger[aria-expanded="true"] i:nth-child(1){top:21px;transform:rotate(45deg)}
  .nav .burger[aria-expanded="true"] i:nth-child(2){opacity:0}
  .nav .burger[aria-expanded="true"] i:nth-child(3){top:21px;transform:rotate(-45deg)}

  /* 触屏点完不留橙色焦点框（键盘操作时仍保留） */
  .nav .burger:focus:not(:focus-visible){outline:none}

  /* 导航栏防挤压：品牌名可收缩，按钮和汉堡不许被压 */
  .nav .brand{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navcta{flex:0 0 auto;margin-left:10px}
  /* 桌面端按钮右侧接着下拉箭头段，手机上箭头隐藏了，直角会裸露 */
  .navcta>.nbtn{border-radius:10px;padding:11px 16px;font-size:14px}
}

/* 原样式的断点 bug：≤1080px 显示汉堡，但抽屉在 ≥961px 就 display:none，
   961~1080px 这一段点汉堡什么都弹不出来 */
@media (min-width:961px) and (max-width:1080px){
  .sheet{display:block}
}


/* ══════════════════════════════════════════════════════════════
   3. 字号层级：全部用固定 px，不经过 clamp / 变量
   首屏标题只比正文大一点点，就是层级没建立起来。
   ══════════════════════════════════════════════════════════════ */

@media (max-width:900px){
  :root{
    --b1:16.5px; --b1lh:1.78;
    --b2:15px;   --b2lh:1.70;
    --t1:18px;
    --t2:16.4px; --t2lh:1.76;
    --lbl:12px;
  }

  /* 首屏大标题：约为正文的 2 倍，层级才立得住 */
  .hero h1{font-size:32px;line-height:1.30;max-width:none;letter-spacing:-.01em}
  .hero--page h1{font-size:29px;line-height:1.32;max-width:none}
  .hero .sub{font-size:16.4px;line-height:1.78;max-width:none;margin-top:20px}

  /* 章节标题 */
  h2.h{font-size:25px;line-height:1.36;max-width:none}
  h3.h{font-size:20px;line-height:1.46}
  .lede{font-size:16.4px;line-height:1.78;max-width:none;margin-top:14px}
  .prose{font-size:16.4px;line-height:1.82;max-width:none}

  .ccenter h2{font-size:25px;line-height:1.34}
  .ccenter p{font-size:15.4px;line-height:1.76;margin-top:14px}

  /* 长文 / 文章页 */
  .post-hd h1{font-size:28px;line-height:1.34}
  .post-hd .dek{font-size:16.6px;line-height:1.8;margin-top:16px}
  .art h2{font-size:23px;line-height:1.42;margin:44px 0 16px;scroll-margin-top:78px}
  .art h3{font-size:17.5px}
  .art p{font-size:16.8px;line-height:1.86;margin-bottom:18px}
  .art ol,.art ul{font-size:16.4px;line-height:1.86;margin-left:19px}
  .art .big{font-size:19px;line-height:1.62;padding-left:16px;margin:26px 0}
  .body h2{font-size:22px;line-height:1.45;margin:44px 0 16px}
  .body h3{font-size:18px}
  .body p{font-size:17px;line-height:1.86;margin-bottom:20px}
  .body ul,.body ol{font-size:16.6px;line-height:1.86;margin-left:19px}
  .body blockquote{font-size:18px;line-height:1.68;padding-left:16px;margin:26px 0}

  [id]{scroll-margin-top:78px}
}


/* ══════════════════════════════════════════════════════════════
   4. 触屏：清掉点完不复位的 hover 残留
   ══════════════════════════════════════════════════════════════ */

@media (hover:none){
  .icard:hover,.rel:hover,.rcard:hover,.qrcard:hover{transform:none}
  .icard:hover .vis--img img,.rel:hover .art{transform:none}
  .res:hover,.pitem:hover,.nextup a:hover,.lect summary:hover{padding-left:0}
  .res:hover::before,.pitem:hover::before{transform:scaleY(0)}
  .res:active,.pitem:active,.nextup a:active{background:rgba(20,20,19,.035)}
  a,button,summary{-webkit-tap-highlight-color:rgba(217,119,87,.14)}
}


/* ══════════════════════════════════════════════════════════════
   5. 组件适配
   ══════════════════════════════════════════════════════════════ */

@media (max-width:760px){

  .panel{padding:24px 20px;border-radius:16px;margin-top:32px}

  /* 数字条 */
  .stats{grid-template-columns:repeat(2,1fr);margin-top:32px}
  .stat{padding:18px 14px}
  .stat b{font-size:24px}
  .stat span{font-size:11.8px;margin-top:5px}

  /* 资源清单：标题与分类标签互相挤压，改成上下两行 */
  .res{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:5px 14px;
    align-items:center;
    padding:18px 0;
  }
  .res h3{grid-column:1;grid-row:1;font-size:16.6px}
  .res .cat{grid-column:1;grid-row:2;font-size:10.6px}
  .res .ar{grid-column:2;grid-row:1 / span 2}

  /* 条款块：原样式没做窄屏处理，56px 编号列白占宽度 */
  .rule{grid-template-columns:1fr;gap:7px;padding:22px 0}
  .rule .no{padding-top:0}
  .rule p{font-size:15px}
  .rule .why{font-size:13.6px}

  /* 卡片 */
  .rcards,.rels,.infra,.conseq,.grid3{margin-top:30px}
  .rcard{padding:24px 20px 22px;border-radius:16px}
  .rcard h3{font-size:20px}
  .rcard>p{font-size:14.8px}
  .rcard .rmeta div{font-size:12.8px;padding:10px 0}
  .rcard .rbtn{padding:12px 18px;font-size:14px}
  .icard .txt{padding:22px 20px 24px}
  .icard h3{font-size:19.5px}
  .rel .art{height:132px}
  .rel .in{padding:20px 20px 22px}
  .rel h3{font-size:18.5px}
  .g3{padding:26px 20px 28px}
  .cq h3{font-size:19px}
  .cq p{font-size:14.8px}
  .lvl{padding:22px 20px 24px}

  /* 问题清单（手机版星座区）*/
  .cmobile{margin-top:30px}
  .cmobile>div{padding:15px 0}
  .cmobile b{font-size:16px}
  .cmobile small{font-size:13.4px}

  /* FAQ / 筛选 / 目录 */
  .faq summary{padding:17px 0;font-size:16px}
  .faq .a{font-size:15.4px;line-height:1.82}
  .filters button{padding:10px 16px;font-size:14px;min-height:40px}
  .lect summary{padding:15px 0;flex-wrap:wrap}
  .lect .lt{font-size:15.8px;min-width:0}
  .lnodes li{font-size:14.2px}

  /* 价格 / 文中卡片 / 列表 */
  .pricebox{padding:26px 22px;border-radius:16px}
  .pricebox .amt{font-size:46px}
  .buybar{padding:26px 22px;border-radius:16px}
  .buybar .amt{font-size:34px}
  .inline-cta{padding:20px 18px;margin:32px 0}
  .magnet{padding:24px 20px}
  .notice{padding:16px 18px;font-size:14px;line-height:1.75}
  .author{padding:22px 20px}
  .pitem{padding:24px 0}
  .pitem h3{font-size:19px}
  .pitem p{font-size:14.8px}

  /* 星球入口 */
  .planetcta{margin-top:32px;border-radius:16px}
  .planetcta .pc-txt{padding:26px 20px 28px}
  .planetcta .pc-vis{min-height:180px}

  /* 表格：加"还能往右滑"的提示，否则右边几列等于不存在 */
  .tbl{
    background:
      radial-gradient(farthest-side at 0    50%, rgba(20,20,19,.11), transparent) left  / 13px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(20,20,19,.11), transparent) right / 13px 100% no-repeat;
    -webkit-overflow-scrolling:touch;
  }
  .tbl table{min-width:540px;font-size:13.6px}
  .tbl th,.tbl td{padding:11px 12px}

  /* 轮播圆点只有 7px，按不准 —— 伪元素扩大热区，外观不变 */
  .dots button{position:relative}
  .dots button::before{content:"";position:absolute;top:-14px;right:-8px;bottom:-14px;left:-8px}
  .cnav{width:38px;height:38px;font-size:18px}
  .cnav.prev{left:9px}
  .cnav.next{right:9px}

  /* 页脚 */
  .fmast{padding-bottom:32px;margin-bottom:32px}
  .fmast .fb{font-size:22px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .fcol a,.fcol span{font-size:14px;padding:5px 0}
  .fbot{margin-top:36px;padding-top:22px;font-size:12.6px;line-height:1.9}
  .fqr-tip{font-size:12.2px}
}


/* ═══ 6. 超窄屏（iPhone SE / mini 一档）══════════════════════ */

@media (max-width:400px){
  .nav .brand{font-size:18px;margin-right:4px}
  .navcta>.nbtn{padding:11px 13px;font-size:13.5px}
  .hero h1{font-size:29px}
  .stats{grid-template-columns:1fr}
  .wrap{padding-left:17px;padding-right:17px}
  .cpanel{padding-left:17px;padding-right:17px}
}