/* web/static/cellsmith.css - cellsmith 工作台视觉层 (交接清单外壳: token + 外壳 + 工作区)
 *
 * INPUT:  home.templ 的 class 与 id (顶栏 / lens bar / 网格区 / 落地态 / 编辑器浮层).
 * OUTPUT: Bean 测量主题 token 与共用按钮/面板基础样式;工作台几何由 css/sheet.css 覆盖。
 *         脊柱与站体在 css/spine.css, 浮层面板在 css/panels.css (plan §10: 800 行上限拆分).
 * POS:    web/static - 纯样式, layout.templ 首个加载 (其余两份只消费这里的 :root token); 网格引擎
 *         自身的内联样式由 grid.js 自带 (pooled cellCss), 此处只经 var(--grid-*) 钩子给它配色.
 * PROTOCOL:
 *   - 调色板与几何遵循 DESIGN.md 的 Bean 复刻合同,既有 token 名与业务 fragment id 保持兼容。
 *   - FEEL 地板: dense, quiet, professional, light. 网格零 transition; 微交互 <=80ms;
 *     prefers-reduced-motion 归零.
 *   - 顶栏: 标题列 min-width:0 + 省略, 其余项 flex:none -> 任何宽度下 Save & verify 都不被挤出.
 */

:root {
  /* Bean 实测纸面, 自有实现与 OFL 字体; 见 DESIGN.md */
  --paper: #FFFEFC;
  --card: #FFFFFF;
  --ink: #111111;
  --ink-2: #595959;
  --mute: #666666;
  --faint: #AAAAAA;
  --rule: #CCCCCC;
  --rule-2: #DDDDDD;
  --green: #386B1A;
  --brand-green: #83CD3A;
  --swatch-gray: #CCCCCC;
  --swatch-green: #B2F2BB;
  --swatch-blue: #A5D8FF;
  --swatch-yellow: #FFEC99;
  --sheet-selector: #888888;
  --sheet-region: #8695BA;
  --sheet-button: #E9E9ED;
  --sheet-margin: #DDDDDD;
  --sheet-ruling: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, var(--rule) 29px, var(--rule) 30px);
  --sheet-scrim: rgba(0, 0, 0, 0.2);
  --sheet-help-shadow: 0 1px 1px rgba(122, 118, 118, 0.75);
  --sheet-dark-paper: #073642;
  --sheet-dark-header: #002B36;
  --sheet-dark-ink: #93A1A1;
  --sheet-dark-margin: #CB4B16;
  --green-bg: #B2F2BB;
  --verm: #B93333;
  --verm-bg: #FBE9E2;
  --ochre: #8B630C;
  --ochre-bg: #FFEC99;

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

  /* 用途 token: 按用途命名, 值与迁移前字面量逐字节一致 (design-tokens.test.mjs 守卫) */
  --on-fill: #FFFFFF;
  --ink-hover: #2B2A27;
  --ink-press: #000000;
  --cta-disabled-bg: #D8D2C5;
  --cta-disabled-fg: #8B8579;
  --drop-active-bg: #FBF6E8;
  --drop-active-ring: #F3EAD0;
  --sel-overlay: rgba(0, 0, 0, 0.025);
  --diff-del-fg: #A64235;
  --diff-del-bg: #FBE8E3;
  --diff-ins-fg: #236B50;
  --diff-ins-bg: #E2F2E9;
  --shadow-float: 0 12px 32px rgba(40, 34, 20, 0.14);
  --shadow-card: 0 6px 24px rgba(40, 34, 20, 0.12);
  --shadow-cell: 0 1px 4px rgba(40, 34, 20, 0.12);

  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sheet: "Space Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --top-bar-height: 60px;
  --status-bar-height: 24px;
  --lens-bar-height: 60px; /* 单行最小高; 窄宽折两行时自然增高 */
  --spine-width: 300px;
  --rail-width: 76px;

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

/* 等候状态沿用纸面与语义 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__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: 14px; color: var(--mute); }
.open-wait .open-wait__checking { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mute); }
.open-wait .open-wait__feedback { color: var(--danger); font-weight: 600; }
.open-wait__retry { display: grid; justify-items: start; gap: 16px; }
.station__check { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; cursor: pointer; }
.open-wait__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.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; }

/* ---- legal page: 视口内自滚动的静态文本页 (隐私等; body 不滚动, 所以页面自己滚) ---- */
.legal-page { position: fixed; inset: 0; overflow-y: auto; padding: clamp(24px, 7vw, 100px); background: var(--paper); color: var(--ink); }
.legal-page__body { display: grid; gap: 16px; max-width: 620px; }
.legal-page h1 { margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; font-weight: 600; }
.legal-page h2 { margin: 8px 0 0; font-size: 16px; font-weight: 600; }
.legal-page p { margin: 0; max-width: 620px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.legal-page a { color: var(--ink); text-underline-offset: 4px; }
.legal-page a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* ---- 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: 14px;
  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); }

@media (max-width: 760px) {
  .shell__body, .shell__body.is-folded {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 180px);
  }
  .workbench { grid-row: 1; }
  .spine { grid-row: 2; border-right: 0; border-top: 1px solid var(--rule-2); }
}

/* ---- 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__close { flex: none; }

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

.file-name {
  min-width: 0;
  font-size: 14px;
  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: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 窄屏顶栏: 文件名与方言副行独占整行, 按钮另起一行 (单行时文件名被挤到 1 个字符, 方言副行只剩 5 个字符). */
@media (max-width: 560px) {
  .shell { grid-template-rows: auto minmax(0, 1fr); }
  .top-bar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; }
  .top-bar__title { flex: 1 1 100%; }
  .status-line { flex: 1 1 0; max-width: none; }
  .fidelity-line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* 醒目错误态 (open 失败等永久性错误; 由 grid-app setStatus opts.error 挂上). */
.status-line--error {
  color: var(--verm);
  font-weight: 600;
  max-width: 560px;
  white-space: normal; /* 真实错误允许折两行, 不靠省略号藏起原因 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* dirty / saved 指示: Unsaved · N 朱红胶囊; Saved 灰胶囊. */
.save-state {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  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: var(--on-fill);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 80ms ease;
}

.cta:hover { background: var(--ink-hover); }
.cta:disabled { background: var(--cta-disabled-bg); color: var(--cta-disabled-fg); 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: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ---- buttons ---- */
.btn {
  font-family: var(--font-ui);
  font-size: 12px;
  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: var(--on-fill); }
.btn--primary:hover { background: var(--ink-hover); }
.btn--primary:active { background: var(--ink-press); }
.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) auto;
  min-width: 0;
  min-height: 0;
  background: var(--card);
}

.lens-bar {
  grid-row: 1; /* 空的 #open-wait 占了自动放置的第 1 行, 不显式指定会把工具栏挤到网格下方 */
  position: relative;
  z-index: 7; /* 高于 #cell-editor (6): 下拉面板 (split/xlsx/filter) 不被网格选中框盖住 */
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* D2(b): 最小支持宽度 1024, 放不下时折成两行, 不溢出 */
  gap: 6px 12px;
  min-height: var(--lens-bar-height);
  padding: 4px 16px;
  min-width: 0;
  background: var(--card);
  border-bottom: 1px solid var(--rule-2);
}

.lens-bar__tools { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 100%; }
.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: 12px;
  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: min(100%, 22rem); /* 至少容下镜头行数与清除按钮; 放不下就整块换行而不是被挤没 */
  max-width: min(100%, 28rem);
  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: 12px; }
.vg-filter-trigger {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
}
.vg-filter-trigger:hover, .vg-filter-trigger:focus-visible { background: var(--rule-2); outline: 2px solid var(--focus-ring); }
.filter-panel {
  position: fixed; /* lib/anchor.js 定位到触发列头正下方; 未定位前的回落位置 */
  top: 120px;
  left: 16px;
  width: min(330px, calc(100vw - 36px));
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: var(--shadow-float);
  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 strong { min-width: 0; overflow-wrap: anywhere; }
.filter-panel__title span, .filter-panel__summary { color: var(--mute); font-weight: 400; }
.filter-panel__close { flex: none; margin-left: auto; border: 0; background: transparent; color: var(--mute); cursor: pointer; font-size: 16px; 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(--brand-green); background: var(--swatch-green); }
#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: 2px; 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-panel__pick { display: flex; gap: 6px; margin: 0 0 6px; }
.filter-value { display: flex; align-items: center; gap: 6px; }
.filter-value label { flex: 1; min-width: 0; }
.filter-value__only { border: 0; background: transparent; color: var(--mute); font: 12px var(--font-ui); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 4px; }
.filter-value__only:hover, .filter-value__only:focus-visible { color: var(--ink); }
.filter-value__text { min-width: 0; flex: 1; overflow-wrap: anywhere; white-space: pre-wrap; }
.filter-value input { accent-color: var(--ink); }
/* 状态栏: 固定高, 不随内容/选区变化; 选区列有最小宽防抖. */
.status-bar {
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--status-bar-height);
  padding: 0 16px;
  background: var(--card);
  border-top: 1px solid var(--rule-2);
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
/* 体检提示 (#doctor-chip, 服务端片): 状态栏里的一颗小胶囊, 有发现才显示; 高度不超过状态栏内框. */
.doctor-chip { flex: none; font-family: inherit; height: 18px; padding: 0 8px; font-size: 12px; line-height: 16px; border-radius: 9px; color: var(--ink); background: var(--surface-header); border: 1px solid var(--rule-2); cursor: pointer; }
.doctor-chip[hidden] { display: none; }
.doctor-chip b { font-weight: 600; }
.doctor-chip u { text-underline-offset: 2px; }
.doc-selection { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.doc-facts { flex: none; }
.grid-area { grid-row: 2; position: relative; min-height: 0; background: var(--paper); }
.grid-mount { position: absolute; inset: 0; overflow: hidden; }

/* 查找条 (find.js): 悬浮在 .grid-area 右上, 定宽, 不占文档流; 高于 #cell-editor (6) 与下拉面板 (7). */
.find-bar {
  position: absolute;
  top: 8px;
  right: 20px;
  z-index: 8;
  box-sizing: border-box;
  width: 340px;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-float);
}
.find-bar[hidden] { display: none; }
.find-bar__input {
  flex: 1;
  min-width: 0;
  padding: 4px 9px;
  border: 1px solid var(--rule-2);
  border-radius: 4px; /* 同心: 外圈 10 - (padding 5 + border 1) */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
}
.find-bar__input:focus { outline: none; border-color: var(--ink); }
.find-bar__count {
  flex: none;
  min-width: 8ch; /* 定宽: 计数文字变化不推动输入框 */
  text-align: right;
  color: var(--mute);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.find-bar__btn {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.find-bar__btn:hover { background: var(--surface-hover); }
.find-bar__btn:focus-visible { outline: 2px solid var(--focus-ring); }
.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: flex-start; /* 首页居中改用首尾 auto margin: 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;
}

body:not([data-tool-destination]) .drop-zone > :first-child { margin-top: auto; }
body:not([data-tool-destination]) .drop-zone > :last-child { margin-bottom: auto; }

.drop-zone--active { border-style: solid; background: var(--drop-active-bg); box-shadow: inset 0 0 0 6px var(--drop-active-ring); }

.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: 14px; 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: var(--sel-overlay);
}

/* ---- 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: var(--shadow-cell);
}