/* NEXUS — layout：外壳、四端网格、响应式断点（S3-P0）
   ---------------------------------------------------------------------------
   外壳 = 侧栏（rail）+ 舞台（stage）。桌面与横屏用侧栏，竖屏与手机把导航
   换到底部 tabbar；换的是承载方式，不是信息架构 —— 五个席位只写一份数据。

   滚动由文档承担（不用内部滚动容器）：笔记页的长文档、锚点、焦点滚动
   都沿用浏览器原生行为，避免嵌套滚动带来的第二套坐标系。
   --------------------------------------------------------------------------- */

.shell {
  position: relative;
  z-index: var(--z-shell);
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 侧栏：sticky 在自己的网格列里，页面滚动时保持不动 */
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
}

/* 舞台：顶栏 + 内容 + 页脚，纵向排列 */
.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.zones {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--block-gap) var(--content-gap);
  align-content: start;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(18px, 2.2vw, 30px) var(--pad-x) 0;
}

/* 问候 / 继续上次 / 自定义挂载点是通栏，其余成对分列 */
.zone--greet,
.zone--resume,
.zone--custom {
  grid-column: 1 / -1;
}

.zone { min-width: 0; }

/* 预留挂载点为空时不留缝隙 */
.zone--custom:empty { display: none; }

/* 分栏容器：主列（快捷入口 + 最近活动）与副列（备忘 + 自定义模块） */
.zones__col {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
  min-width: 0;
}

/* ============================================================== 面板 */
/* 统一面板：实色一档 + 发丝边界。浮起靠明度差，不靠投影与磨砂。 */
.panel {
  position: relative;
  height: 100%;
  padding: var(--panel-pad);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-surface);
  background: var(--color-panel);
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  color: var(--color-text);
}

.panel__aside {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-faint);
  white-space: nowrap;
}

/* ============================================================== 页脚 */
.shell__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-top: var(--block-gap);
  padding: var(--space-2) var(--pad-x) clamp(20px, 2.6vw, 34px);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-cn);
  color: var(--color-text-faint);
}

.shell__sig b {
  color: var(--color-text-mute);
  font-weight: var(--weight-medium);
}

.shell__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.shell__note { letter-spacing: var(--tracking-ui); }

/* ====================================================== 底部 tabbar */
/* 竖屏与手机的唯一导航承载；桌面与横屏隐藏（导航在侧栏里） */
.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-shell);
  display: none;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
}

/* ========================================================== 响应式 */
/* 平板横屏：侧栏收成图标条，内容收窄留白 */
@media (max-width: 1179px) {
  :root {
    --rail-w: var(--rail-w-compact);
    --content-max: 920px;
    --pad-x: 26px;
    --block-gap: 26px;
    --content-gap: 20px;
  }

  .zones { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

/* 平板竖屏：导航换到底部，单列堆叠，副列两两并排 */
@media (max-width: 1000px) {
  :root {
    --content-max: 720px;
    --pad-x: 28px;
    --block-gap: 28px;
    --content-gap: 20px;
  }

  /* 用 .shell > 提高一级特异性：region-nav.css 在本文件之后加载，
     否则它的 .rail{display:flex} 会把这里的 display:none 覆盖掉 */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell > .rail { display: none; }
  .shell > .tabbar { display: flex; }

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

  .zones__col--side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--block-gap) var(--content-gap);
  }

  /* 给固定 tabbar 让出空间，最后一屏内容不被遮住 */
  .shell__footer { padding-bottom: calc(var(--tabbar-h) + var(--space-5)); }
}

/* 手机：单列、收紧圆角与内边距，搜索框独占一行 */
@media (max-width: 640px) {
  :root {
    --content-max: 100%;
    --pad-x: 16px;
    --block-gap: 22px;
    --content-gap: 16px;
    --panel-blur: 12px;
    --topbar-h: 56px;
    --search-height: 52px;
  }

  .zones { padding-top: 12px; }

  /* 手机：副列也塌成一列，两块面板各自占满宽度 */
  .zones__col--side { grid-template-columns: minmax(0, 1fr); }
  .panel__head { margin-bottom: var(--space-4); }
  .shell__footer { flex-wrap: wrap; gap: var(--space-2); }
  .shell__note { display: none; }
}