/* 布局层：页壳、导航、栅格、断点 */
@layer layout {

  /* ══ 页壳 ══════════════════════════════════════════════ */
  .shell-width { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

  /* 桌面/平板：吸顶玻璃条。顶部时背景就是纸色，看不出材质；
     内容滚到它下面才结霜 —— 这也是 macOS/iOS 工具栏的真实行为。 */
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    width: 100%;
    max-width: none;
    height: 66px;
    margin: 0;
    padding: 0 max(var(--s5), calc((100vw - 1120px) / 2));
    border-bottom: 1px solid transparent;
    /* 关掉转场快照：view-transition-name 会给元素建 backdrop root，
       自身的 backdrop-filter 就采不到页面内容，玻璃会变成一块死色板。 */
    view-transition-name: none;
    background: color-mix(in srgb, var(--paper) 76%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  }

  body[data-scrolled="true"] .topbar {
    border-bottom-color: var(--line);
    box-shadow: 0 10px 30px rgb(24 34 26 / .06);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: 48px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s var(--ease);
    font-size: var(--t-h3);
    font-weight: 700;
    letter-spacing: 0;
  }

  .brand:active { opacity: .7; }
  .brand:active .brand-symbol { transform: scale(.94); }
  .brand:hover .brand-tagline { color: var(--ink); }

  .brand-symbol {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    transition: transform .18s var(--ease);
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--white);
  }

  .brand-symbol img {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 18%;
  }

  .brand-copy { display: flex; flex-direction: column; gap: 2px; }

  .brand-copy strong {
    font-size: var(--t-h3);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .brand .brand-copy small,
  .brand-copy small {
    margin: 0;
    font-size: var(--t-micro);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: .8px;
    color: var(--muted);
    white-space: nowrap;
  }

  .brand-tagline {
    margin-left: var(--s3);
    padding-left: var(--s3);
    border-left: 1px solid var(--line);
    font-size: var(--t-meta);
    font-weight: 400;
    color: var(--muted);
  }

  .topnav {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s1);
  }

  @media (min-width: 721px) {
  /* 滑动指示胶囊：位置由 GSAP 驱动（motion.js → slideNavIndicator） */
  .nav-pill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: var(--r-sm);
    background: var(--leaf-wash);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leaf) 22%, transparent);
    pointer-events: none;
    opacity: 0;
    will-change: transform, width, height;
  }

  .nav-pill.is-ready { opacity: 1; }

  .topnav .nav-item { position: relative; z-index: 1; }

  /* 桌面上选中态交给胶囊，不再自己填色 */
  .topnav .nav-item.active,
  .topnav .nav-item[aria-current="page"] {
    background: transparent;
    color: var(--leaf);
  }
  }

  .nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    padding: 0 var(--s3);
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: var(--t-meta);
    font-weight: 600;
    transition: background-color .16s var(--ease), color .16s var(--ease);
  }

  .nav-item:hover { background: var(--smoke); color: var(--ink); }

  .nav-item.active,
  .nav-item[aria-current="page"] {
    background: var(--leaf-wash);
    color: var(--leaf);
  }

  .local-badge { display: none; }

  /* ══ 页面容器 ══════════════════════════════════════════ */
  .page,
  .hub-page,
  .curriculum-home,
  .textbook-unit-page,
  .textbook-lesson-page,
  .cards-page,
  .picture-memory-page,
  .learning-home,
  .story-home,
  .scene-experience {
    width: min(1120px, calc(100% - 48px));
    max-width: none;
    margin-inline: auto;
    padding: var(--s6) 0 var(--s7);
  }

  .cards-page,
  .textbook-lesson-page { width: min(760px, calc(100% - 48px)); }

  .scene-experience { width: min(1120px, calc(100% - 48px)); }

  /* ══ 栅格 ══════════════════════════════════════════════ */
  .stack { display: grid; gap: var(--s5); }
  .stack-sm { display: grid; gap: var(--s3); }

  .footer {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    width: min(1120px, calc(100% - 48px));
    margin: var(--s6) auto 0;
    padding: var(--s5) 0 var(--s6);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--t-cap);
    line-height: 1.7;
  }

  /* ══ 断点 ══════════════════════════════════════════════ */
  /* 平板：7–9 英寸竖屏下两列会挤成窄条，改单列；场景图录退一档 */
  @media (max-width: 900px) {
    .textbook-unit-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  }

  @media (max-width: 960px) {
    .shell-width,
    .topbar,
    .page,
    .hub-page,
    .curriculum-home,
    .textbook-unit-page,
    .textbook-lesson-page,
    .cards-page,
    .picture-memory-page,
    .learning-home,
    .story-home,
    .scene-experience,
    .footer { width: calc(100% - 40px); }
  }

  @media (max-width: 720px) {
    body { padding-bottom: 0; }

    .topbar {
      position: relative;
      width: 100%;
      height: 64px;
      padding: 0 var(--s4);
      border-bottom: 1px solid var(--line);
      background: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
    }

    .brand-tagline { display: none; }
    .brand-symbol { width: 36px; height: 36px; }
    .brand-copy strong { font-size: var(--t-h3); }

    /* 关键：motion.css 给 .topbar 设了 view-transition-name: app-navigation，
       它会为 fixed 子元素建一个独立的 backdrop root —— 结果底部导航的
       backdrop-filter 采不到页面内容，玻璃变成一块半透明色板。
       窄屏让导航自己承担材质，所以这里必须把这个名字关掉。 */
    .topbar { view-transition-name: none; }

    /* ── 底部导航：悬浮玻璃胶囊 ─────────────────────────────
       原则（照 Apple HIG）：玻璃属于"控件层"，浮在内容之上；
       内容的颜色才是玻璃的颜色，所以这里只给极轻的纸色底瓷，
       靠 28px 模糊 + 180% 饱和 + 一圈 rim + 一道镜面读作玻璃。 */
    .topnav {
      position: fixed;
      inset: auto var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
      z-index: var(--z-nav);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 2px;
      padding: 6px;
      border-radius: var(--r-bar);
      border: 1px solid rgb(255 255 255 / .55);
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--paper) 66%, transparent) 0%,
        color-mix(in srgb, var(--paper) 58%, transparent) 100%
      );
      -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.04);
      backdrop-filter: blur(30px) saturate(190%) brightness(1.04);
      box-shadow:
        0 10px 34px rgb(24 34 26 / .16),
        0 1px 2px rgb(24 34 26 / .08),
        inset 0 1px 0 rgb(255 255 255 / .92),
        inset 0 -1px 0 rgb(255 255 255 / .34),
        inset 1px 0 0 rgb(255 255 255 / .40),
        inset -1px 0 0 rgb(255 255 255 / .40);
      transform: translateZ(0);
    }

    /* 镜面：左上角一束柔光，和答题透镜同一套反光逻辑 */
    .topnav::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        radial-gradient(120% 70% at 6% -20%, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 60%),
        linear-gradient(100deg, rgb(255 255 255 / .18) 0%, rgb(255 255 255 / 0) 28%);
    }

    .topnav > .nav-item { position: relative; z-index: 1; }

    .nav-item {
      flex-direction: column;
      gap: 3px;
      min-height: 54px;
      padding: 6px 2px;
      border-radius: var(--r-lg);
      font-size: var(--t-micro);
      font-weight: 500;
      color: color-mix(in srgb, var(--ink) 62%, transparent);
      text-shadow: 0 1px 0 rgb(255 255 255 / .55);
      transition: color .18s var(--ease), background-color .2s var(--ease);
    }

    .nav-item:hover { background: rgb(255 255 255 / .28); }

    /* 选中：玻璃里再倒一小块"被染色的玻璃"，是 iOS 26 的选择语义，不是装饰 */
    .nav-item.active,
    .nav-item[aria-current="page"] {
      color: var(--leaf);
      font-weight: 700;
      background: color-mix(in srgb, var(--leaf) 16%, rgb(255 255 255 / .30));
      box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .75),
        inset 0 -1px 0 rgb(255 255 255 / .28),
        0 1px 3px rgb(24 34 26 / .06);
    }

    .nav-item svg { width: 20px; height: 20px; }

    /* ── 液态选择块（手机）────────────────────────────────
       位移 + 横向拉伸 + 纵向压扁全部由 GSAP 补间（motion.js →
       liquidNavSelection）；这里只给材质，并用 border-radius:50%
       让 scaleX 拉伸读起来是"流动"，不是"被拉长的方块"。 */
    .nav-blob {
     position: absolute;
     left: 0;
     top: 0;
     z-index: 0;
     width: 0;
     height: 0;
     border-radius: var(--r-pill);
     /* 无色玻璃：颜色只来自背后的内容，绿只留给图标和文字。
        原来是 color-mix(--leaf 15%, 白 40%)，落在 66% 纸色的导航上
        是一块奶绿实体，还会顺着导航的 saturate(190%) 往下洇成绿雾。 */
     background: color-mix(in srgb, var(--ink) 6%, rgb(255 255 255 / .30));
     box-shadow:
       inset 0 0 0 1px rgb(255 255 255 / .55),
       inset 0 1px 0 rgb(255 255 255 / .85),
       0 1px 4px rgb(24 34 26 / .07);
     pointer-events: none;
     opacity: 0;
     will-change: transform;
     transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
    }

    .nav-blob.is-ready { opacity: 1; }

    /* 有液态块时，选中态不再自己铺底 */
    .topnav.has-blob .nav-item.active,
    .topnav.has-blob .nav-item[aria-current="page"] {
      background: transparent;
      box-shadow: none;
    }

    .topnav .nav-item > svg { will-change: transform; }

    /* 拖动：横向跟手、纵向留给页面；拖的时候不许选中文字/唤起长按菜单 */
    .topnav {
      touch-action: pan-y;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .nav-blob.is-moving { will-change: transform; }

    .topnav.is-dragging .nav-item { pointer-events: none; }

    /* 拖动时：比静止更透明，抬得更高；阴影用中性黑，不再有绿色拖尾 */
    .topnav.is-dragging .nav-blob {
     background: rgb(255 255 255 / .14);
     box-shadow:
       inset 0 0 0 1px rgb(255 255 255 / .75),
       inset 0 2px 6px rgb(255 255 255 / .55),
       0 8px 24px rgb(24 34 26 / .18);
    }

    /* 放大后要能顶出导航边缘。整条链路（nav → topbar → #app → body）都没有
      overflow:hidden / clip-path / contain，这里显式声明一次防止将来被裁掉。 */
    .topnav { overflow: visible; }

    /* tab 必须在滑块之上，否则放大后的滑块会盖住图标和文字 */
    .topnav > .nav-item { position: relative; z-index: 1; }

    /* 滑块盖住哪一格，哪一格实时变绿；其余（含还没换掉的旧选中项）退回普通色。
      这比 .nav-item.active 更具体，所以松手瞬间不会出现两个绿。 */
    .topnav:has(.is-near) .nav-item:not(.is-near) {
     color: color-mix(in srgb, var(--ink) 62%, transparent);
     font-weight: 500;
    }

    .nav-item.is-near {
     color: var(--leaf);
     font-weight: 700;
    }


    /* 沉浸页（场景/答题）不显示底栏 */
    .immersive-shell .topnav { display: none; }

    .page,
    .hub-page,
    .curriculum-home,
    .textbook-unit-page,
    .textbook-lesson-page,
    .cards-page,
    .picture-memory-page,
    .learning-home,
    .story-home,
    .scene-experience,
    .footer {
      width: 100%;
      padding-inline: var(--s4);
      padding-top: var(--s5);
    }

    /* 只有场景页是真正出血的；学词页留 16px，否则标题会被切掉左边 */
    .scene-experience { padding-inline: 0; }

    .footer {
      flex-direction: column;
      gap: var(--s2);
      margin: 0;
      padding-bottom: calc(var(--s6) + 64px + env(safe-area-inset-bottom));
    }

    .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

    /* 悬浮胶囊的高度 + 安全区，避免最后一行被压在玻璃下 */
    body:not(.immersive-shell) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  }

  @media (max-width: 720px) and (prefers-color-scheme: dark) {
    .topnav {
      border-color: rgb(255 255 255 / .20);
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--paper) 86%, transparent) 0%,
        color-mix(in srgb, var(--paper) 78%, transparent) 100%
      );
      box-shadow:
        0 10px 34px rgb(0 0 0 / .5),
        0 1px 2px rgb(0 0 0 / .3),
        inset 0 1px 0 rgb(255 255 255 / .26),
        inset 0 -1px 0 rgb(255 255 255 / .08),
        inset 1px 0 0 rgb(255 255 255 / .10),
        inset -1px 0 0 rgb(255 255 255 / .10);
    }

    .topnav::before {
      background:
        radial-gradient(120% 70% at 6% -20%, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / 0) 60%),
        linear-gradient(100deg, rgb(255 255 255 / .06) 0%, rgb(255 255 255 / 0) 28%);
    }

    .nav-item {
      color: color-mix(in srgb, var(--ink) 78%, transparent);
      text-shadow: 0 1px 2px rgb(0 0 0 / .35);
    }

    .nav-blob {
      background: color-mix(in srgb, var(--leaf) 24%, rgb(255 255 255 / .08));
      box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .20),
        inset 0 -1px 0 rgb(255 255 255 / .06),
        0 1px 4px rgb(0 0 0 / .35);
    }

    .nav-item.active,
    .nav-item[aria-current="page"] {
      background: color-mix(in srgb, var(--leaf) 22%, rgb(255 255 255 / .06));
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
    }
  }

  /* 关掉透明时不假装玻璃：给一块实心纸面 */
  @media (max-width: 720px) and (prefers-reduced-transparency: reduce) {
    .topnav {
      background: var(--paper);
      border-color: var(--line);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: 0 -1px 0 var(--line), 0 8px 24px rgb(24 34 26 / .10);
    }

    .topnav::before { display: none; }
  }

  @media (max-width: 720px) and (forced-colors: active) {
    .topnav {
      background: Canvas;
      border: 1px solid CanvasText;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .topnav::before { display: none; }
    .nav-item.active,
    .nav-item[aria-current="page"] { background: Highlight; color: HighlightText; }
  }

  @media (max-width: 360px) {
    .topbar { padding: 0 var(--s3); }
    .nav-item { font-size: var(--t-micro); }
  }
}