/* web/static/cellsmith.css - cellsmith 工作台视觉层 (交接清单外壳: token + 外壳 + 工作区)
 *
 * INPUT:  home.templ 的 class 与 id (顶栏 / lens bar / 网格区 / 落地态 / 编辑器浮层).
 * OUTPUT: light 主题 token (direction-2 纸面调色板) + 顶栏 / 按钮 / lens bar / 网格挂载 / 落地态 / 编辑器样式.
 *         脊柱与站体在 css/spine.css, 浮层面板在 css/panels.css (plan §10: 800 行上限拆分).
 * POS:    web/static - 纯样式, layout.templ 首个加载 (其余两份只消费这里的 :root token); 网格引擎
 *         自身的内联样式由 grid.js 自带 (pooled cellCss), 此处只经 var(--grid-*) 钩子给它配色.
 * PROTOCOL:
 *   - 调色板来自 direction-2/style.css (docs/design/handoff-checklist-plan.md §2); 映射到既有 token 名,
 *     让未改动的面板与网格钩子继续适用.
 *   - FEEL 地板: dense, quiet, professional, light. 网格零 transition; 微交互 <=80ms;
 *     prefers-reduced-motion 归零.
 *   - 顶栏: 标题列 min-width:0 + 省略, 其余项 flex:none -> 任何宽度下 Save & verify 都不被挤出.
 */

:root {
  /* direction-2 纸面调色板 */
  --paper: #F3F0E8;
  --card: #FFFDF8;
  --ink: #161616;
  --ink-2: #3D3A35;
  --mute: #78736A;
  --faint: #B0A99C;
  --rule: #E0D9CA;
  --rule-2: #CBC2B0;
  --green: #1D6B47;
  --green-bg: #E3EFE6;
  --verm: #CF4A25;
  --verm-bg: #FBE9E2;
  --ochre: #A8770F;
  --ochre-bg: #F7EDD3;

  /* 语义 token (既有名字, 指向新调色板) */
  --surface-app: var(--paper);
  --surface-panel: var(--card);
  --surface-header: #F7F3EA;
  --surface-hover: #F1ECE1;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--mute);
  --border-subtle: var(--rule);
  --border-strong: var(--rule-2);
  --accent: var(--ink);
  --focus-ring: var(--ink);
  --warn: var(--ochre);
  --warn-bg: var(--ochre-bg);
  --danger: var(--verm);

  --font-ui: "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --top-bar-height: 60px;
  --lens-bar-height: 44px;
  --spine-width: 296px;
  --rail-width: 76px;

  /* grid engine theme tokens (engine 内联样式 var() 引用这些). */
  --grid-bg: var(--card);
  --grid-fg: var(--ink);
  --grid-line: #ECE6D9;
  --grid-header-bg: var(--card);
  --grid-header-fg: var(--ink);
  --grid-gutter-fg: var(--faint);
}

/* 等候状态沿用纸面与语义 token，不遮盖本地文件选择器的权威状态。 */
.open-wait:not(:empty) {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(24px, 7vw, 100px);
  background: var(--paper);
  color: var(--ink);
}
.open-wait__brand { position: absolute; top: 32px; left: clamp(24px, 7vw, 100px); font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.open-wait__message { display: grid; gap: 16px; }
.open-wait h1, .open-wait h2 { max-width: 670px; margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; font-weight: 600; }
.open-wait p { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.open-wait .open-wait__position { font-size: clamp(24px, 3vw, 36px); font-weight: 600; line-height: 1.2; color: var(--ink); }
.open-wait .open-wait__note { margin-top: -12px; font-size: 13px; color: var(--mute); }
.open-wait .open-wait__checking { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--mute); }
.open-wait .open-wait__feedback { color: var(--danger); font-weight: 600; }
.open-wait__retry { display: grid; justify-items: start; gap: 16px; }
.open-wait__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: wait-pulse 2s ease-in-out infinite; }
@keyframes wait-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .open-wait__dot { animation: none; } }
.open-wait a { color: var(--ink); text-underline-offset: 4px; }
.open-wait a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.open-wait--page { min-height: 100vh; }

/* ---- reset / base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* 外壳不滚动, 网格 viewport 与脊柱是仅有的滚动容器 */
}

[hidden] { display: none !important; }

/* ---- shell: 顶栏 + (脊柱 | 工作区) ---- */
.shell { height: 100vh; display: grid; grid-template-rows: var(--top-bar-height) minmax(0, 1fr); }
.shell__body { display: grid; grid-template-columns: var(--spine-width) minmax(0, 1fr); min-height: 0; }
.shell__body.is-folded { grid-template-columns: var(--rail-width) minmax(0, 1fr); }

/* ---- top bar (60px, 两行标题) ---- */
.top-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  min-width: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
}

.top-bar__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.top-bar__line { display: flex; align-items: center; gap: 10px; min-width: 0; }

.file-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 方言副行: 省略截断, hover 全文在 title (探测是猜测, ADR-013). */
.fidelity-line {
  min-width: 0;
  font-size: 12px;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

.status-line {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 360px;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 醒目错误态 (open 失败等永久性错误; 由 grid-app setStatus opts.error 挂上). */
.status-line--error { color: var(--verm); font-weight: 600; }

/* dirty / saved 指示: UNSAVED · N 朱红胶囊; Saved 灰胶囊. */
.save-state {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 1px 9px;
  border-radius: 20px;
  border: 1.5px solid transparent;
}

.save-state--unsaved { color: var(--verm); border-color: var(--verm); }
.save-state--saved { color: var(--green); border-color: var(--green); }

/* Save & verify: 墨色主按钮 + 朱红计数徽标. */
.cta {
  flex: none;
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 80ms ease;
}

.cta:hover { background: #2B2A27; }
.cta:disabled { background: #D8D2C5; color: #8B8579; cursor: default; }
.cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.cta__n {
  background: var(--verm);
  border-radius: 10px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ---- buttons ---- */
.btn {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease;
}

.btn--secondary { background: var(--card); border-color: var(--rule-2); color: var(--ink-2); }
.btn--secondary:hover { background: var(--surface-hover); }
.btn--secondary:active { background: var(--surface-header); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn--primary:hover { background: #2B2A27; }
.btn--primary:active { background: #000000; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.btn:disabled { cursor: default; opacity: 0.5; }

/* ---- hidden file input fallback (kept visually hidden) ---- */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- workbench: lens bar + grid area ---- */
.workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--card);
}

.lens-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--lens-bar-height);
  padding: 0 16px;
  min-width: 0;
  background: var(--card);
  border-bottom: 1px solid var(--rule-2);
}

.lens-bar__tools { margin-left: auto; display: flex; gap: 6px; }
.lens-bar__tools .btn { padding: 6px 10px; }

/* name box: Sheets 式活动格显示 + go-to 输入 (deeplink.js; Ctrl+G 聚焦). */
.name-box {
  width: 9ch;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  padding: 4px 9px;
}

.name-box:focus { outline: none; border-color: var(--ink); }
.name-box:disabled { opacity: 0.5; }
.doc-size { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 镜头范围 (#lens-scope, 服务端片): 赭色胶囊说明 "Lens: N rows · whole file M rows" + 清除.
 * 镜头中整文件尺寸由它说明, 客户端填的 #doc-size 让位. */
.lens-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 2px 3px 2px 10px;
  background: var(--ochre-bg);
  border: 1px solid var(--ochre);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lens-scope b { color: var(--ink); }
.lens-scope__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lens-scope__clear { padding: 3px 9px; font-size: 11.5px; }
.doc-size:has(+ .lens-scope:not([hidden])) { display: none; }
.vg-filter-trigger {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 15px;
}
.vg-filter-trigger:hover, .vg-filter-trigger:focus-visible { background: var(--rule-2); outline: 2px solid var(--focus-ring); }
.filter-panel {
  position: absolute;
  top: calc(100% + 5px);
  right: 16px;
  width: min(330px, calc(100vw - 36px));
  padding: 16px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 12px 32px #13192324;
  color: var(--ink);
  font-size: 12px;
}
.filter-panel[hidden] { display: none; }
.filter-panel__title { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; }
.filter-panel__title span, .filter-panel__summary { color: var(--mute); font-weight: 400; }
.filter-panel__close { margin-left: auto; border: 0; background: transparent; color: var(--mute); cursor: pointer; font-size: 19px; line-height: 1; }
.filter-panel__close:focus-visible { outline: 2px solid var(--focus-ring); }
.filter-panel__sort { display: flex; gap: 6px; margin: 12px 0; }
.filter-panel__sort [aria-pressed="true"] { border-color: var(--ink); background: var(--ochre-bg); }
#filter-search-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#filter-search-form label { width: 100%; font-weight: 600; }
#filter-search { min-width: 0; flex: 1; padding: 6px; border: 1px solid var(--rule-2); border-radius: 6px; font-size: 16px; }
.filter-panel__summary { margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
.filter-panel__values { list-style: none; margin: 0 0 12px; padding: 0; max-height: 212px; overflow: auto; }
.filter-value label { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.filter-value__text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-value input { accent-color: var(--ink); }
.grid-area { grid-row: 2; position: relative; min-height: 0; background: var(--paper); }
.grid-mount { position: absolute; inset: 0; overflow: hidden; }
.vg-resize-handle:hover, .vg-resize-handle:focus-visible {
  background: color-mix(in srgb, var(--grid-header-fg) 12%, transparent);
  outline: 2px solid var(--grid-header-fg);
  outline-offset: -2px;
}

/* grid engine 渲染自己的 viewport (内联 height:600px). 让它填满挂载点:
 * grid 的 ResizeObserver 会据此重建池, 故窗口缩放/脊柱折叠后网格随之适配. */
.vg-viewport {
  height: 100% !important;
  border: 0 !important; /* 外壳分割线由 lens bar 承担, 网格不再自画外框 */
}

/* 网格与行号槽采用等宽数字 (FEEL: 紧凑专业, 数字列对齐). */
.vg-cell,
.vg-gcell,
.vg-hcell { font-variant-numeric: tabular-nums; }

/* ---- empty state: 整块拖放区 ---- */
.empty-state { position: absolute; inset: 0; display: flex; padding: 28px; }

.drop-zone {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px;
  overflow: auto;
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--ink);
  border-radius: 18px;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.drop-zone--active { border-style: solid; background: #FBF6E8; box-shadow: inset 0 0 0 6px #F3EAD0; }

.drop-zone__title {
  margin: 0 0 14px;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.drop-zone__hint { max-width: 560px; margin: 0 0 22px; font-size: 15px; color: var(--mute); }
.drop-zone__foot { margin: 28px 0 0; font-size: 12px; color: var(--mute); }

/* ---- selection overlay (编辑器桥接挂载于 grid.viewport 内) ---- */
/* overlay 是 viewport 子节点, 用内容坐标随滚动自然跟随; pointer-events:none 不挡点击. */
#sel-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  background: rgba(22, 22, 22, 0.06);
}

/* ---- cell editor: 常驻 textarea, 两态 (idle 选中 / editing 编辑) ---- */
/* idle 选中态 (默认): 透明、无光标、无边框; 已聚焦但让底层网格单元格真实值透出,
 * 选中框由 #sel-overlay 提供. 绝不 display:none (必须可聚焦, IME 首键即在此合成).
 * 文件打开前无活动格时由 JS 置 display:none. */
#cell-editor {
  position: absolute;
  display: none;
  z-index: 6;
  margin: 0;
  padding: 0 3px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  resize: none;
  outline: none;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  box-shadow: none;
}

/* editing 编辑态: 不透明盖住该格 (浅底 + 可见文字 + 光标 + accent 边框). */
#cell-editor.cell-editor--editing {
  border: 2px solid var(--accent);
  background: var(--surface-panel);
  color: var(--text-primary);
  caret-color: auto;
  box-shadow: 0 1px 4px rgba(21, 26, 34, 0.12);
}