/* ==========================================================================
   nphy.top · 全站自适应系统（v1.65.0）
   --------------------------------------------------------------------------
   在此之前，断点散落在 640 / 900 / 1000 / 1080 / 560 / 700 / 520 / 620 / 860 …
   共 19 种宽度上，属于"哪里出问题补哪里"。这一层把它收敛成一套统一体系。

   【五档断点】（与设计稿一致，全站只认这五个数字）
     xs  ≤ 479px    小屏手机（iPhone SE / 老安卓）
     sm  480–767px  大屏手机、手机横屏
     md  768–1023px 平板竖屏
     lg  1024–1279px 平板横屏、小笔记本
     xl  ≥ 1280px   桌面（≥1440 再放宽到 1320px 内容宽）

   【三条原则】
     1. 流式优先：字号/间距优先用 clamp() 连续变化，少做硬跳变
     2. 触摸优先：触屏设备放大点击区、关掉"悬浮才出现"的交互
     3. 兜底防爆：长单词、宽表格、代码块、图片一律不许撑破视口

   加载顺序在 style.css / premium.css 之后。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 全局兜底：这些是移动端最容易"爆版"的地方
   -------------------------------------------------------------------------- */

html {
  /* 长单词 / 长链接（尤其是代码与 URL）不许撑破容器 */
  overflow-wrap: break-word;
  /* clip 不会创建滚动容器，所以 position: sticky 仍然有效（hidden 会失效） */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;   /* 防止 iOS 横屏时自动放大字号 */
  text-size-adjust: 100%;
}

body { overflow-x: clip; }

/* 媒体元素一律不超宽 */
img, video, iframe, svg, canvas, embed, object { max-width: 100%; }
video, iframe { height: auto; }

/* 网格 / 弹性子元素默认允许收缩，否则内部宽内容会把整行顶开 */
.layout > *,
.content > *,
.card-grid > *,
.post-list > *,
.demo-grid > *,
.article-list > *,
.stat-grid > *,
.admin-cards > * { min-width: 0; }

/*
 * 友链两处网格：轨道最小宽度是写死的（250 / 258px），
 * 但网格项默认 min-width:auto —— 站名一长（没有可换行的断点），
 * 内容的最小尺寸就把卡片顶到轨道外面去，整页横向溢出。
 * 手机档实测：375px 视口下友链卡被顶宽 100px。
 */
.link-grid > *,
.ff-grid > * { min-width: 0; }

/* 文章页：.article-wrap 在「有目录」时是 flex 容器，正文卡片是它的 flex 子项。
   默认 min-width:auto 会让正文按"最长不可断内容"撑宽（实测 375px 视口下撑到 393px），
   这里放开收缩，交给内部的 pre / table 各自局部横滑。 */
.article-wrap > * { min-width: 0; }

/*
 * 窄屏文章页还有一个更隐蔽的坑：
 * ≤1080px 时目录被挪到正文上方，.article-wrap 从 grid 变成 column flex，
 * 但它身上留着 grid 时代的 align-items: start —— 在 column 方向上，
 * start 等于「按内容收缩」，于是正文卡片的最小宽度由最长的代码行决定，
 * 一段长代码就能把整页顶宽（实测 375px 视口下卡片被顶到 393px，溢出 42px）。
 * 这里让它恢复拉伸：卡片宽度听容器的，代码块自己横向滚动。
 */
@media (max-width: 1080px) {
  .article-wrap.has-toc { align-items: stretch; }
}

/* 宽内容统一"局部滚动"，不要溢出到整页 */
pre,
.table-wrap,
.toolbar,
.msg-text,
.article-body table { max-width: 100%; }

pre,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
  overscroll-behavior-x: contain;      /* 横滑到头时不要带动整页 */
}

/* 触屏上给横向可滚动区域一点提示 */
.table-wrap::-webkit-scrollbar { height: 8px; }

/* --------------------------------------------------------------------------
   1. 流式尺寸：让字号与间距连续变化，而不是在断点处"跳"
   -------------------------------------------------------------------------- */

:root {
  --pad-page: clamp(14px, 2.2vw, 24px);
  --gap-layout: clamp(16px, 2vw, 28px);
  --sidebar-w: clamp(248px, 22vw, 300px);
  --h1: clamp(21px, 3.4vw, 30px);
  --h2: clamp(18px, 2.4vw, 21px);
  --h3: clamp(16px, 1.8vw, 18px);
  --body-fs: clamp(14.5px, 0.55vw + 13px, 15.5px);
  --tap: 44px;                 /* 触摸最小点击区 */
}

body { font-size: var(--body-fs); }

.container { padding: 0 var(--pad-page); }

.page-head h1,
.article-head h1 { font-size: var(--h1); }

.section-title { font-size: var(--h2); }

.article-body h2 { font-size: var(--h2); }
.article-body h3 { font-size: var(--h3); }

/* --------------------------------------------------------------------------
   2. 布局：四档列宽策略
      xl / lg → 侧栏 + 内容
      md      → 单列，侧栏移到下方并横向铺开（不浪费竖向空间）
      sm / xs → 单列，侧栏卡片堆叠
   -------------------------------------------------------------------------- */

/* lg 档：侧栏收窄，内容区优先 */
@media (max-width: 1279px) {
  .layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    gap: var(--gap-layout);
  }
}

/* md 档：平板竖屏 —— 单列 + 侧栏卡片两列排布 */
@media (max-width: 1023px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-layout);
    padding: calc(var(--pad-page) + 4px) var(--pad-page) 8px;
  }

  .sidebar {
    position: static;
    top: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-layout);
    align-items: start;
  }

  /* 侧栏被摊平时，个人信息卡跨满整行更像"名片" */
  .sidebar .profile-card { grid-column: 1 / -1; }

  .side-order { order: 2; }

  /* 平板上的卡片：两列最舒服 */
  .card-grid,
  .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* sm 档：大屏手机 —— 全部单列 */
@media (max-width: 767px) {
  .sidebar { grid-template-columns: minmax(0, 1fr); }

  .card-grid,
  .demo-grid,
  .stat-grid,
  .admin-cards { grid-template-columns: minmax(0, 1fr); }

  .section { padding: 26px 0; }
  .section-head { margin-bottom: 16px; }
  .article-body { font-size: 16px; line-height: 1.85; }
}

/* xs 档：小屏手机 —— 再紧一档 */
@media (max-width: 479px) {
  :root {
    --pad-page: 14px;
    --gap-layout: 14px;
    --h1: 20px;
  }

  .section { padding: 22px 0; }
  .card, .side-card, .post-card, .demo-card, .tool-card { padding: 16px; border-radius: var(--r-lg); }
  .post-card, .post-card:nth-child(even) { flex-direction: column; }
  .post-cover img { width: 100%; height: auto; }
  .article-meta { gap: 10px; font-size: 12px; }
  .footer-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* --------------------------------------------------------------------------
   3. 顶部导航：窄屏收进 ☰（沿用站点既有的 900 断点），并把抽屉做扎实
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .header-inner { flex-wrap: nowrap; }

  .main-nav {
    box-shadow: var(--shadow-lg);
    max-height: min(72vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-link {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 10px 14px;
    border-radius: var(--r-md);
  }
  .nav-link::after { display: none; }   /* 抽屉里不需要下划线动画 */

  .brand-name { font-size: 15.5px; }
}

/* --------------------------------------------------------------------------
   4. 首页横幅：小屏更紧凑，横屏手机不占满屏
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .hero {
    /* 移动端浏览器地址栏会伸缩，用 svh/dvh 避免"高度跳一下" */
    min-height: min(78vh, 78svh);
    padding: 84px 16px 96px;
  }
  .hero-inner { padding-top: 46px; padding-bottom: 42px; }
  .hero-title, .hero-typed { font-size: clamp(23px, 7.4vw, 32px); }
  .hero-quote { padding: 14px 16px; }
  .hq-text { font-size: 14px; }
  .hero-meta { gap: 8px; margin-top: 20px; }
  .hero-meta .hm-item { padding: 7px 12px; font-size: 11.5px; }
  .hero-meta .hm-item b { font-size: 13.5px; }
  .hero-scroll span { display: none; }   /* 小屏只留箭头 */
}

/* 手机横屏：横幅别把首屏吃光 */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 76px 20px 56px;
  }
  .hero-inner { padding-top: 8px; padding-bottom: 8px; }
  .hero-quote, .hero-meta, .hero-scroll { display: none; }
}

/* --------------------------------------------------------------------------
   5. 触摸设备适配（手机 / 平板）：这一档决定"点得准不准"
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  /* ① 关掉"悬浮才出现"的交互 —— 触屏没有 hover，否则永远看不到 */
  .code-copy {
    opacity: 1;
    position: static;
    display: inline-block;
    margin: 0 0 10px;
  }
  pre { padding-top: 14px; }
  pre::before { display: none; }   /* 触屏下代码块不再显示"窗口工具条"装饰 */

  /* ② 点击区不小于 44px */
  .btn, .btn-sm, .icon-btn, .chip, .topic-chip, .tag-cloud a, .pager-btn, .pager-num {
    min-height: var(--tap);
  }
  .btn-sm, .chip, .pager-btn, .pager-num, .tag-cloud a { padding-top: 10px; padding-bottom: 10px; }
  .icon-btn { width: 40px; height: 40px; }

  /* ③ 去掉"点一下会卡住"的悬浮位移与阴影 */
  .card:hover, .post-card:hover, .demo-card:hover, .topic-card:hover,
  .archive-btn:hover, .list-item:hover, .pn-item:hover, .btn:hover {
    transform: none;
  }

  /* ④ 触屏上不给悬浮改色，避免"点完颜色一直挂着" */
  .card:hover .card-title,
  .post-card:hover .post-title,
  .post-card:hover .post-cover img { color: inherit; transform: none; }
}

/* --------------------------------------------------------------------------
   6. 刘海屏 / 圆角屏安全区（配合 viewport-fit=cover）
   -------------------------------------------------------------------------- */

@supports (padding: env(safe-area-inset-left)) {
  .container {
    padding-left: max(var(--pad-page), env(safe-area-inset-left));
    padding-right: max(var(--pad-page), env(safe-area-inset-right));
  }

  .site-footer {
    padding-bottom: max(36px, calc(env(safe-area-inset-bottom) + 20px));
  }

  .to-top {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  }
}

/* --------------------------------------------------------------------------
   7. 后台管理系统的自适应
      ≥1024 侧栏常驻；≤1023 抽屉 + 遮罩；表格横向滚动；表单单列
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .admin-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(80vw, 300px);
    z-index: 120;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform var(--t-slow) cubic-bezier(.22, .8, .28, 1);
  }
  .admin-side.is-open { transform: none; box-shadow: var(--shadow-lg); }

  .admin-main { padding: 16px 16px 48px; }

  /*
   * 顶栏的吸顶底衬是「往外扩」的一层装饰（inset 负值），
   * 外扩量必须等于 .admin-main 的左右内边距 —— 上面刚把内边距从 28px 收到 16px，
   * 这里不同步的话，901–1023 这段宽度会凭空多出 12px 横向溢出。
   */
  .admin-top::after { inset: -10px -16px -10px; }

  .admin-top { gap: 10px; }
  .admin-top h1 { font-size: 19px; }

  .admin-panel { padding: 16px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }

  /* 表格：容器横向滚动 + 首列吸附，滑动时还能看清是哪一行 */
  .table-wrap { border-radius: var(--r-md); }
  table.data th:first-child,
  table.data td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--border-soft);
  }
}

@media (max-width: 767px) {
  /* 后台小屏：操作按钮整行铺开，别挤成竖条 */
  table.data td.actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .admin-cards { gap: 10px; }
  .admin-card { padding: 13px 14px; }
  .admin-card b { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   8. 打印：去掉一切装饰，只留正文
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .sidebar, .to-top, .hero,
  .article-foot, .prev-next, .toc-card, .code-copy, .read-progress { display: none !important; }
  .layout { display: block; padding: 0; }
  body { background: #fff; color: #000; }
  .article-wrap, .content { max-width: none; }
  pre { border: 1px solid #ccc; box-shadow: none; background: #f7f7f7; }
  pre::before { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11.5px; color: #666; }
}

/* --------------------------------------------------------------------------
   9. 减少动态效果（系统偏好）
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .admin-side { transition: none; }
  html { scroll-behavior: auto; }
}