/*
 * design/themes/material-shell.css —— Material 风格外壳范式
 * inspired by Google Material 3，非官方实现。
 * 范式：navigation rail（88px 图标栏 + 胶囊选中）+ ≤1023 bottom navigation bar；
 * 「更多」桌面开左侧模态 navigation drawer，移动开 bottom sheet。
 * 本文件可脱离表单层单独使用：accent / focus 令牌随 body[data-shell] 提供。
 */
body[data-shell="material"] {
  --accent: #6750a4;
  --accent-ink: #ffffff;
  --focus-ring: rgba(103, 80, 164, .22);
  --sh-top-bg: #ffffff;
  --sh-top-line: #e7e0ec;
  --sh-line: #cac4d0;
  --sh-ink: #1d1b20; --sh-ink-2: #49454f; --sh-muted: #79747e; --sh-weak: #cac4d0;
  --sh-side-bg: #f3edf7;
  --sh-side-muted: #79747e;
  --sh-side-icon: #49454f;
  --sh-sheet-bg: #fef7ff;
  --sh-tabbar-bg: #f3edf7;
  --sh-tab-active: #6750a4;
}

/* ---------- navigation rail（桌面档；≤1023 收起，bottom bar 接管） ---------- */
.sh-rail {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 36;
  width: 88px;
  display: none; /* 仅 material 桌面档显示 */
  flex-direction: column; align-items: stretch; gap: 2px;
  padding: 18px 12px 14px;
  background: var(--sh-side-bg, #f3edf7);
  border-right: 1px solid #e7e0ec;
  overflow-y: auto;
}
body[data-shell="material"] .sh-rail { display: flex; }
body[data-shell="material"] .sh-main { margin-left: 88px; }
.sh-rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 8px; margin: 1px 0;
  border: none; border-radius: 12px;
  background: transparent; color: var(--sh-ink-2, #49454f);
  font: inherit; font-size: 12px; cursor: pointer;
}
.sh-rail-item .sh-ico { padding: 5px 18px; border-radius: 99px; }
.sh-rail-item:hover { background: rgba(103, 80, 164, .08); }
.sh-rail-item.is-active { color: var(--accent); font-weight: 600; }
.sh-rail-item.is-active .sh-ico { background: #e8def8; color: #1d192b; }
.sh-rail-more { margin-top: auto; }

/* ---------- 「更多」面板：桌面＝左侧模态 navigation drawer，移动＝bottom sheet ---------- */
body[data-shell="material"] .sh-sheet { max-height: 76vh; }
@media (min-width: 1024px) {
  body[data-shell="material"] .sh-sheet {
    left: 0; right: auto; top: 0; bottom: 0; width: 380px;
    border-radius: 0 18px 18px 0;
    max-height: none;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
  }
  body[data-shell="material"] .sh-sheet-head { top: 0; }
}

/* ---------- ≤1023：rail 收起，bottom navigation bar 接管 ---------- */
@media (max-width: 1023px) {
  body[data-shell="material"] .sh-rail { display: none; }
  body[data-shell="material"] .sh-main { margin-left: 0; }
  body[data-shell="material"] .sh-top { padding: 0 12px; }
  body[data-shell="material"] .sh-body { padding-bottom: 76px; }
  body[data-shell="material"] .sh-tab.is-active .sh-ico { background: #e8def8; color: #1d192b; }
}