/* 咸鱼电竞设计系统 · 03 Shell —— 侧栏 / 顶栏 / 内容列 / 手机顶栏 / 手机底部导航
   侧栏（2026-10-05 业主通过「一层侧栏」）：
   · 可见的是 #navFlat —— 按分类分组列出全部可访问页面（renderNav 生成）；
   · #navRail + #contextSidebar 仍留在 DOM 里，作为 selectNavCategory / 测试使用的分类 API，
     视觉上不显示（重复的导航地标对读屏不友好，所以用 display:none 而非移出屏幕）。
   网格：品牌 / 菜单（可滚动）/ 底部操作。 */
@layer xy.shell {
  /* 内容列宽度沿用业主 2026-09-21 定下的 1090（顶栏与卡片必须等宽对齐） */
  :root { --sidebar-w: 248px; --content-max: 1090px; --bottom-nav-h: 0px; /* 业主 2026-10-12：手机端底部常用栏取消，不再预留高度 */ }
  @media (max-width: 1180px) { :root { --sidebar-w: 232px; } }

  .app { background: var(--bg-canvas); }
  main { background: transparent; }

  /* ── 侧栏骨架（桌面 + 手机抽屉共用） ── */
  .sidebar {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "brand" "nav" "foot";
    width: var(--sidebar-w); padding: 0;
    border-right: 1px solid var(--hairline);
    background: radial-gradient(240px 160px at 24% 0%, rgba(244, 179, 207, .06), transparent 72%), var(--bg-sidebar);
  }
  .sidebar .primary-rail { display: contents; }
  .sidebar .nav-rail, .sidebar .context-sidebar { display: none; }

  .sidebar .brand {
    grid-area: brand; display: flex; align-items: center; gap: 12px;
    width: auto; min-height: 0; padding: 22px 20px 18px; place-items: initial;
  }
  .sidebar .brand-mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(253, 216, 233, .3), 0 6px 18px -8px rgba(244, 179, 207, .5); background: none; }
  .sidebar .brand-mark img { width: 100%; height: 100%; object-fit: cover; }
  .sidebar .brand-copy { display: grid; line-height: 1.2; min-width: 0; }
  .sidebar .brand-copy h1 { margin: 0; font-family: var(--font-serif); font-size: 16px; font-weight: 700; letter-spacing: .16em; color: var(--text-1); }
  .sidebar .brand-copy .brand-en { order: 2; margin-top: 1px; font-size: 13px; color: var(--accent); }
  .sidebar .brand-copy span { order: 3; margin-top: 3px; font-size: 11px; color: var(--text-4); letter-spacing: .08em; }

  /* 分组菜单 */
  .nav-flat { grid-area: nav; min-height: 0; overflow-y: auto; padding: 4px 12px 16px; overscroll-behavior: contain; }
  .nav-flat-group + .nav-flat-group { margin-top: 14px; }
  .nav-flat-label { margin: 0 0 4px; padding: 0 10px; font-size: 11px; font-weight: 600; color: var(--text-4); letter-spacing: .14em; }
  .nav-flat button {
    position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
    min-height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: 11px;
    background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: .02em; text-align: left;
    cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
  }
  .nav-flat button + button { margin-top: 2px; }
  .nav-flat button span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-flat button svg, .nav-flat button > i { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-4); transition: color var(--t-fast); }
  .nav-flat button:hover { background: var(--bg-hover); color: var(--text-1); }
  .nav-flat button.active { background: var(--accent-tint); color: var(--text-1); font-weight: 600; }
  .nav-flat button.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .nav-flat button.active svg { color: var(--accent); }
  .nav-count {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
    display: inline-grid; place-items: center; background: var(--accent-tint); color: var(--accent);
    font-family: var(--font-num); font-size: 11.5px; font-weight: 700; font-style: normal;
  }

  /* 底部：收起 + 退出 */
  .sidebar .rail-collapse, .sidebar .sidebar-logout {
    grid-area: foot; align-self: center; height: 38px; min-height: 38px; margin: 10px 0 14px;
    border: 0; border-radius: 10px; background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--hairline);
    transition: background var(--t-fast), color var(--t-fast);
  }
  .sidebar .rail-collapse { justify-self: start; width: 38px; min-width: 38px; margin-left: 16px; display: inline-grid; place-items: center; padding: 0; }
  .sidebar .sidebar-logout { justify-self: end; display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 14px; margin-right: 16px; font-size: 13px; }
  .sidebar .sidebar-logout span { display: inline; }
  .sidebar .rail-collapse:hover, .sidebar .sidebar-logout:hover { background: var(--bg-hover); color: var(--text-1); }
  .sidebar::after { content: ""; grid-area: foot; align-self: start; height: 1px; margin: 0 16px; background: var(--hairline); pointer-events: none; }

  /* 收起态：只留图标（文字保留在 aria-label / title 中） */
  @media (min-width: 981px) {
    .sidebar.context-collapsed { width: 76px; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand" "nav" "collapse" "foot"; }
    .sidebar.context-collapsed .brand { justify-content: center; padding: 20px 0 16px; }
    .sidebar.context-collapsed .brand-copy { display: none; }
    .sidebar.context-collapsed .nav-flat { padding: 4px 12px 12px; }
    .sidebar.context-collapsed .nav-flat-label { height: 1px; margin: 0 6px 6px; padding: 0; overflow: hidden; color: transparent; background: var(--hairline); }
    .sidebar.context-collapsed .nav-flat button { justify-content: center; padding: 0; min-height: 44px; }
    .sidebar.context-collapsed .nav-flat button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sidebar.context-collapsed .nav-count { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
    .sidebar.context-collapsed .rail-collapse { grid-area: collapse; justify-self: center; margin: 8px 0 0; }
    .sidebar.context-collapsed .sidebar-logout { justify-self: center; width: 38px; padding: 0; margin: 8px 0 16px; justify-content: center; }
    .sidebar.context-collapsed .sidebar-logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .sidebar.context-collapsed::after { grid-area: collapse; }
  }

  /* ── 内容列：页面自己限宽 1090 并居中（沿用 stage6 的 --p2-content-width），
     顶栏对齐到同一个宽度，所以「大标题条」和它下面的卡片左右两端齐平。 ── */
  @media (min-width: 981px) {
    main { padding: 0 clamp(24px, 3.2vw, 44px) 56px; }
    main > .topbar { width: 100%; max-width: var(--content-max); margin-left: auto; margin-right: auto; }
  }

  /* ── 顶栏：贴顶的半透明条，页面标题用宋体 ── */
  .topbar {
    min-height: 64px; margin-bottom: 8px; padding: 12px 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  @media (min-width: 981px) {
    .topbar::before {
      content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * clamp(24px, 3.2vw, 44px));
      border-bottom: 1px solid var(--hairline);
      background: rgba(13, 10, 15, .78);
      -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    }
    .topbar { isolation: isolate; }
  }
  .topbar .title-logo { display: none; }
  .topbar h2 { margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: .12em; color: var(--text-1); }
  .user-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
    border: 0; border-radius: var(--r-pill); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--text-2); font-size: 12.5px;
  }
  .user-chip svg { width: 16px; height: 16px; color: var(--accent); }

  /* ── 手机顶栏 ── */
  @media (max-width: 980px) {
    .mobile-head {
      min-height: 54px; padding: 8px 12px 8px 8px; padding-top: calc(8px + env(safe-area-inset-top));
      border-bottom: 1px solid var(--hairline);
      background: rgba(13, 10, 15, .84);
      -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    }
    .mobile-head-brand { gap: 9px; }
    .mobile-head-brand img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(253, 216, 233, .28); }
    .mobile-head-brand strong { font-family: var(--font-serif); font-size: 14.5px; letter-spacing: .12em; }
    .mobile-head-brand .brand-en { font-size: 12px; color: var(--accent); white-space: nowrap; }
    .mobile-head > .icon-btn { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--text-2); }
    .mobile-head .user-chip { min-height: 34px; padding: 0 12px; }

    /* 抽屉式侧栏：同一套分组菜单 */
    .sidebar { width: min(300px, 84vw); grid-template-rows: auto minmax(0, 1fr) auto; }
    .sidebar.show { box-shadow: 24px 0 60px rgba(4, 2, 6, .6); }
    .sidebar .brand { padding-top: calc(20px + env(safe-area-inset-top)); }
    .sidebar .rail-collapse { display: none; }
    .sidebar .sidebar-logout { justify-self: stretch; justify-content: center; margin: 10px 16px calc(14px + env(safe-area-inset-bottom)); height: 44px; min-height: 44px; }
    .nav-flat button { min-height: 44px; }

    main { padding-bottom: calc(var(--bottom-nav-h) + 28px + env(safe-area-inset-bottom)); }
  }
  .mobile-head-brand .brand-en { display: none; }
  /* 咸鱼 2026-10-27（22）：手机上别一下占满屏——顶栏和页面内容整体按 88% 排（字、按钮、方框一起缩，比例不乱；业主看过 92 / 88 / 85 选 88） */
  @media (max-width: 760px) { #view { zoom: .88; padding-inline: 4px; } .mobile-head { zoom: .88; } }
  @media (max-width: 980px) and (min-width: 361px) { .mobile-head-brand .brand-en { display: inline; } }
}