/* structure.css — web-console 结构层（手写策展，非生成）
 *
 * 与 themes.css 正交：themes 管颜色/圆角/阴影/字体（--bg/--radius/--shadow/--font），
 * structure 管尺寸/密度/布局拓扑（--nav-w/--content-pad/--detail-w + data-layout）。
 * 命名空间不相交 → 两层可叠加，互不影响（Constitution C-05）。
 *
 * 契约（每个消费方只引用这些名字，不引用裸数字）：
 *   连续 token（12）：--space-unit --content-pad --content-max --nav-w --nav-w-collapsed
 *                     --header-h --row-h --control-h --detail-w --form-w --border-weight --elevation
 *   离散 token（6）：data-layout / data-density / --list-render / --detail-surface
 *                     / --filter-placement / --table-style
 *
 * 零回归（C-01）：默认 = data-layout:sidebar-classic + data-density:cozy
 *   → --nav-w:220 --nav-w-collapsed:64 --header-h:56 --content-pad:24 --detail-w:480 --form-w:420
 *   → 与历史魔数像素级一致。
 */

/* ── 默认 token（= legacy，cozy 基线）─────────────────────────── */
:root {
  --space-unit: 4px;
  --content-pad: 24px;      /* legacy content padding */
  --content-max: none;      /* 流式；某些原型覆盖为具体宽 */
  --nav-w: 220px;           /* legacy sidebar expanded */
  --nav-w-collapsed: 64px;  /* legacy sidebar collapsed */
  --header-h: 56px;         /* legacy header */
  --row-h: 44px;            /* table row (cozy) */
  --control-h: 40px;        /* input/button height (cozy) */
  --detail-w: 480px;        /* legacy detail drawer / split column */
  --form-w: 420px;          /* legacy modal form */
  --border-weight: 1px;     /* hairline personality */
  --elevation: 1;           /* 阴影强度乘子：0=flat/outlined, 1=elevated */

  /* 离散模式默认（= legacy 表现） */
  --list-render: table;
  --detail-surface: drawer;
  --filter-placement: bar;
  --table-style: borderless;
}

/* ── 密度三档：只缩放节奏/行高/控件高/内边距，不动 shell 尺寸 ── */
[data-density="compact"] {
  --space-unit: 4px;
  --content-pad: 16px;
  --row-h: 34px;            /* a11y 地板 ≥32 */
  --control-h: 36px;        /* a11y 地板 ≥36 */
}
[data-density="cozy"] {     /* = :root 默认，显式写出便于覆盖回退 */
  --space-unit: 4px;
  --content-pad: 24px;
  --row-h: 44px;
  --control-h: 40px;
}
[data-density="comfortable"] {
  --space-unit: 5px;
  --content-pad: 32px;
  --row-h: 52px;
  --control-h: 44px;
}

/* ── Region Contract：固定命名区域 ──────────────────────────────
 * 每个 console 只渲染这套区域；原型 = 这些区域的排布方式。
 * 组件永远渲染进命名区域（如同消费方只认 token 名不认皮肤）。            */
#app-shell {
  display: grid;
  min-height: 100vh;
}
#nav-primary   { grid-area: nav; }
#header-bar    { grid-area: header; }
#content-main  { grid-area: content; padding: var(--content-pad); overflow: auto; }
/* detail-surface 默认是覆盖层（drawer）；仅 split 原型把它接回 grid */
#detail-surface {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--detail-w); max-width: 100%;
  transform: translateX(100%); transition: transform .2s ease;
}
#detail-surface[data-open="true"] { transform: translateX(0); }
#overlay-root  { position: fixed; inset: 0; pointer-events: none; }

/* ── 布局原型（6 个 data-layout，各定义 grid-template-areas）────── */

/* 1) sidebar-classic —— 默认 = 今；nav 左 + header 顶 + content；detail=drawer 覆盖 */
[data-layout="sidebar-classic"] #app-shell {
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "nav header"
    "nav content";
}

/* 2) top-nav —— 顶部横导航（nav 在 header 内）；content 有 max-width；detail=page */
[data-layout="top-nav"] {
  --content-max: 1200px;
  --detail-surface: page;
}
[data-layout="top-nav"] #app-shell {
  grid-template-columns: 1fr;
  grid-template-rows: var(--header-h) auto 1fr;
  grid-template-areas:
    "header"
    "nav"
    "content";
}
[data-layout="top-nav"] #nav-primary {  /* 主导航为顶部横条（独立行，不与 header 重叠） */
  grid-area: nav; display: flex; flex-direction: row; align-items: center;
  gap: calc(var(--space-unit) * 2);
}
[data-layout="top-nav"] #content-main { max-width: var(--content-max); margin: 0 auto; width: 100%; }

/* 3) stacked-sections —— 顶栏 + 长滚动分节（粘性节内导航在 content 内）；detail=page */
[data-layout="stacked-sections"] {
  --content-max: 960px;
  --detail-surface: page;
}
[data-layout="stacked-sections"] #app-shell {
  grid-template-columns: 1fr;
  grid-template-rows: var(--header-h) auto 1fr;
  grid-template-areas:
    "header"
    "nav"
    "content";
}
[data-layout="stacked-sections"] #nav-primary {
  grid-area: nav; display: flex; flex-direction: row; align-items: center;
  gap: calc(var(--space-unit) * 2);
}
[data-layout="stacked-sections"] #content-main { max-width: var(--content-max); margin: 0 auto; width: 100%; }

/* 4) split-master-detail —— rail + 主列表列 + 常驻右详情栏（三栏）；detail 接回 grid */
[data-layout="split-master-detail"] {
  --detail-surface: split;
}
[data-layout="split-master-detail"] #app-shell {
  grid-template-columns: var(--nav-w-collapsed) minmax(280px, 360px) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "nav header header"
    "nav content detail";
}
[data-layout="split-master-detail"] #detail-surface {
  position: relative; transform: none; width: auto;   /* 常驻，非覆盖 */
  grid-area: detail; border-left: var(--border-weight) solid var(--border, currentColor);
  overflow: auto;
}

/* 5) workbench-dense —— rail + 高密度数据网格 + 行内展开详情；建议 compact */
[data-layout="workbench-dense"] {
  --content-pad: 12px;
  --list-render: dense-grid;
  --detail-surface: inline;
  --table-style: ruled;
}
[data-layout="workbench-dense"] #app-shell {
  grid-template-columns: var(--nav-w-collapsed) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "nav header"
    "nav content";
}

/* 6) command-rail —— 窄 rail + ⌘K（overlay-root）+ 聚焦单列；detail=page/split */
[data-layout="command-rail"] {
  --content-max: 720px;
  --detail-surface: page;
}
[data-layout="command-rail"] #app-shell {
  grid-template-columns: var(--nav-w-collapsed) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "nav header"
    "nav content";
}
[data-layout="command-rail"] #content-main { max-width: var(--content-max); margin: 0 auto; width: 100%; }
[data-layout="command-rail"] #overlay-root { pointer-events: auto; }  /* ⌘K 面板挂载点 */