@aiquants/spreadsheet 0.8.0

package/src/styles/spreadsheet.css

@@ -0,0 +1,1029 @@
+/*
+ * @aiquants/spreadsheet — hand-written component classes (.aqsp-*). No Tailwind utilities in JSX.
+ * 手書きコンポーネントクラス (.aqsp-*)。JSX に Tailwind ユーティリティは書かない (§6.10)。
+ */
+
+/*
+ * 機能要件: コンポーネント全域を border-box に固定する。AxisModel の整数 px 幾何 (style の
+ * width / height) が DOM 実寸と 1:1 で一致する前提 — content-box だと padding / border が
+ * 加算されて軸幾何と実寸が乖離し、ヘッダーとセルの ±0px 同期 (§7 Phase 1 ゲート) が壊れる。
+ * standalone ホストは preflight を持たないため、root 配下スコープの全称セレクタで自前確保する。
+ */
+.aqsp-root,
+.aqsp-root *,
+.aqsp-root *::before,
+.aqsp-root *::after {
+  box-sizing: border-box;
+}
+
+.aqsp-root {
+  --aqsp-row-header-width: 64px; /* 7 桁行番号 (1,000,000) が 13px tabular-nums で収まる幅 */
+  --aqsp-col-header-height: 24px;
+  /* v0.8 強調帯の既定パレット (計画 §1.9)。単一書き手は overlay の layout effect (highlightColors prop) —
+     能力なしはこの既定が効く。毎フレームの repaint は変数を書かない */
+  --aqsp-band-row: #0084ff;
+  --aqsp-band-column: #42ff4f;
+  --aqsp-band-intersection: #e1ff00;
+  --aqsp-band-opacity: 0.2;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+  color: #1f2937;
+  font-size: 13px;
+  line-height: 1;
+}
+
+/*
+ * ズームラッパー (v0.3): grid レイアウトの実体。視覚は transform: scale(z)、レイアウトは
+ * 100%/z (インライン上書き — z=1 は無スタイルで v0.2 幾何と同一)。origin 0 0 で左上アンカー。
+ */
+/*
+ * minmax(0, 1fr) は必須 (v0.3.1 [M159]): 素の 1fr は暗黙最小 = min-content で、横バー帯内の
+ * ScrollBar インライン幅 (旧 bodyWidth) が列 2 の下限になり「計測 → −12px → 再計測」の
+ * 12px/フレーム収縮スパイラルを作る (実測 ≈ 2 秒の追随遅れ)。トラック自体の下限を 0 にする
+ * 正準対策で、将来この列 / 行へどんな intrinsic 寸法の項目が入っても帰還ループが構造的に
+ * 再発しない (項目個別の min-width: 0 より SSOT — body-stack の旧宣言は死文として撤去済み)。
+ */
+.aqsp-zoom {
+  display: grid;
+  grid-template-columns: var(--aqsp-row-header-width) minmax(0, 1fr);
+  /* 横バー行は無い — v0.4 から横バーは VirtualGrid 内在 (§7-1。v0.3 の第 3 行 auto は退役) */
+  grid-template-rows: var(--aqsp-col-header-height) minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  transform-origin: 0 0;
+}
+
+.aqsp-corner {
+  grid-column: 1;
+  grid-row: 1;
+  border-right: 1px solid #d1d5db;
+  border-bottom: 1px solid #d1d5db;
+  background: #f3f4f6;
+}
+
+.aqsp-col-header {
+  grid-column: 2;
+  grid-row: 1;
+  position: relative;
+  overflow: hidden;
+  border-bottom: 1px solid #d1d5db;
+  background: #f3f4f6;
+  user-select: none;
+}
+
+/* 列 track の transform は repaintColHeaders (命令パス) の専有物 — React / CSS は書かない
+   (§7-5 — 行 track §6.8-2 の双子。v0.3 の --aqsp-hx CSS 変数駆動は退役) */
+/* 凍結ヘッダー帯のスクロール側クリップ (v0.5 — エンジン §8-b のヘッダー同文)。
+ * left はインライン (W_F — TS 定数導出のため CSS へ複製しない)。 */
+.aqsp-col-header-scroll {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  right: 0;
+  overflow: hidden;
+}
+
+/* 行ヘッダーのスクロールクリップ (v0.6 — col-header-scroll の転置)。top: H_F は JSX インライン。 */
+.aqsp-row-header-scroll {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.aqsp-col-header-track {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+
+.aqsp-col-header-cell {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid #e5e7eb;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #4b5563;
+}
+
+.aqsp-row-header {
+  grid-column: 1;
+  grid-row: 2;
+  position: relative;
+  overflow: hidden;
+  /* 下端の横バー帯ぶんの margin-bottom は RowHeader.tsx が SCROLLBAR_WIDTH からインライン
+     指定する (TS 定数の単一 SSOT — SelectionOverlay の right / bottom と同方式) */
+  border-right: 1px solid #d1d5db;
+  background: #f3f4f6;
+  user-select: none;
+}
+
+/* 行 track の transform は repaintHeaders (命令パス) の専有物 — React / CSS は書かない (§6.8-2) */
+.aqsp-row-header-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  will-change: transform;
+}
+
+.aqsp-row-header-cell {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 6px;
+  border-bottom: 1px solid #e5e7eb;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #4b5563;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * 機能要件: stack 内では absolute 全面が必須 — 通常フローだと高さが auto (= 0) に潰れ、
+ * セルは overflow で描画され続けるのに hit-test だけが死ぬ (ホイール・クリック全滅の事故類型)。
+ * grid 配置 (2/2) は親 .aqsp-body-stack が担う。
+ */
+.aqsp-body {
+  position: absolute;
+  inset: 0;
+}
+
+/*
+ * 配置 (position / 寸法 / 横残差 translateX) は VirtualGrid の .aqvs-grid-row が所有する (§7-1
+ * — v0.3 の .aqsp-cells 中間ラッパーと --aqsp-hx 変数は退役)。ここは描画特性のみ:
+ * cursor: default は非編集セルの既定矢印 (利用者選択: 非編集=矢印 / 編集=キャレット)。既定 auto は
+ * セル本文の上で I ビームになり「編集中でないのにキャレット」に見えるため明示 default で矢印に固定。
+ * 編集中だけ可視シンクが cursor: text (キャレット) を出す — 値変化は編集開始時の 1 回のみ (旧
+ * v0.3.2 の cursor: cell は「十字→矢印→十字」の点滅として実測されたため矢印基調へ差し替え)
+ */
+.aqsp-row {
+  cursor: default;
+}
+
+/* 配置 (absolute / left / width / top / height / overflow) は VirtualGrid の .aqvs-grid-cell が
+   所有 (§7-3) — ここは描画特性のみ */
+.aqsp-cell {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  border-right: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+  white-space: nowrap;
+  background: #ffffff;
+}
+
+/*
+ * v0.8 リッチセルの塗り (計画 §4.2.14)。色 / 字体 / 罫線は getCellProps がインライン style で書く
+ * (罫線は border-right/bottom の**インライン上書き**で .aqsp-cell の罫線を置換 — box-shadow は不使用。
+ * border-box なので 3px までの太さでレイアウト不変)。ここは属性フック経由の描画特性だけ:
+ * 垂直揃え / 折返し / 指標三角 / リンク。遷移 (transition) は一切書かない。
+ */
+.aqsp-cell[data-aqsp-valign="top"] {
+  align-items: flex-start;
+}
+
+.aqsp-cell[data-aqsp-valign="bottom"] {
+  align-items: flex-end;
+}
+
+.aqsp-cell[data-aqsp-wrap] {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * 指標三角 (border 三角形 — 辺 5px、透明 3 辺 + 1 辺色)。セル要素は VirtualGrid の absolute 配置なので
+ * 疑似要素の包含ブロックになる。右上 = ノート (濃灰) / コメント (橙、後置で優先)、左下 = 不正 (赤) は
+ * ::before に分けて同一セルの note + invalid が共存する
+ */
+.aqsp-cell[data-aqsp-note]::after,
+.aqsp-cell[data-aqsp-comment]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: #4b5563;
+  border-right-color: #4b5563;
+  pointer-events: none;
+}
+
+.aqsp-cell[data-aqsp-comment]::after {
+  border-top-color: #f97316;
+  border-right-color: #f97316;
+}
+
+.aqsp-cell[data-aqsp-invalid]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-bottom-color: #dc2626;
+  border-left-color: #dc2626;
+  pointer-events: none;
+}
+
+/* リンクセル — 書式の color インライン指定が優先する (インライン > クラス) */
+.aqsp-cell[data-aqsp-link] {
+  text-decoration: underline;
+  color: #1d4ed8;
+}
+
+/*
+ * body と overlay の重ね置きコンテナ (grid セル 1 枠に両者を積む)。項目側の min-width/height: 0
+ * は置かない — トラック側が minmax(0, 1fr) (.aqsp-zoom) である限り自動最小は適用されず死文で、
+ * 帰還ループの実防壁はトラック定義が単独で担う (v0.3.1 [M159] — 二重防壁は SSOT 違反)。
+ */
+.aqsp-body-stack {
+  grid-column: 2;
+  grid-row: 2;
+  position: relative;
+}
+
+/*
+ * 機能要件 (ADR-4): overlay は pointer-events: none — ホイールとタッチドラッグは ScrollPane
+ * 要素自身にしかリスナーが無いため、auto のままだとグリッド上の縦スクロールが全て死ぬ
+ * (実測済みの既知事故類型)。右オフセット (縦バー幅) は JSX インラインが SSOT (§6.7.2-1)。
+ */
+.aqsp-overlay {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* v0.6 の overlay 象限 (計画 §3-4 — v0.5 の 2 層を両軸へ拡張): 各象限が専用コンテナと自前
+ * クリップを持ち、境界跨ぎ矩形を切り分ける。位置 (left / width / top / height / right / bottom)
+ * は全てインライン (W_F / H_F — TS 導出のため CSS へ複製しない)。クリップ器は 1 クラスに集約。 */
+.aqsp-overlay-quad {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/*
+ * 確定塗り (ADR-4: 選択はセルでなくオーバーレイが描く)。forced-colors では outline へ切替。
+ * 外周 border は Excel / Sheets の「選択範囲の枠」パリティ (v0.7 UX 監査) — アクティブ枠 (2px)
+ * との階層を保つ 1px。box-sizing: border-box (コンポーネント全域規約) で命令的 w / h の内側に
+ * 描かれ幾何は不変。凍結象限では range が象限毎の断片に割れて境界に縫い目が出るが、凍結分割線が
+ * 同位置に描かれるため視覚上は分割線に吸収される (仕様登記 — spec 05)。
+ */
+.aqsp-selection-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgb(59 130 246 / 0.18);
+  border: 1px solid rgb(37 99 235 / 0.85);
+  mix-blend-mode: multiply;
+}
+
+.aqsp-active-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 2px solid #2563eb;
+  box-sizing: border-box;
+}
+
+.aqsp-drag-rect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid #2563eb;
+  background: rgb(59 130 246 / 0.1);
+}
+
+/* 減算ドラッグ (§3.2): writeDragFrame が data-aqsp-drag-mode を set / clear する */
+.aqsp-drag-rect[data-aqsp-drag-mode="subtract"] {
+  border: 1px dashed #dc2626;
+  background: rgb(220 38 38 / 0.08);
+}
+
+/* 参照ドラッグ (v0.8 ポインティング): 数式へ挿入するレンジの矩形 — 緑の破線 */
+.aqsp-drag-rect[data-aqsp-drag-mode="point"] {
+  border: 1px dashed #16a34a;
+  background: rgb(22 163 74 / 0.08);
+}
+
+/*
+ * v0.8 強調帯 (計画 §2.4 / §4.2.14): レンジ毎に行 2 セグメント / 列 2 セグメント / 交点の常設ノード。
+ * 位置 (transform) と寸法は overlay の writer が直書き — ここは色と不透明度だけ。fill の DOM 前置
+ * (= 下層) に挿入され、fill / アクティブ枠 / マーキーの下に沈む
+ */
+.aqsp-band {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: var(--aqsp-band-opacity);
+  pointer-events: none;
+}
+
+.aqsp-band[data-aqsp-band="row"] {
+  background: var(--aqsp-band-row);
+}
+
+.aqsp-band[data-aqsp-band="column"] {
+  background: var(--aqsp-band-column);
+}
+
+.aqsp-band[data-aqsp-band="intersection"] {
+  background: var(--aqsp-band-intersection);
+}
+
+/*
+ * クリップマーキー (v0.3.2 — copy / cut 共通のマーチングアンツ)。選択塗り・アクティブ枠と重なって
+ * も判別できるよう、静的破線でなく 4 辺グラデーションを時計回りに送るアニメーション破線にする
+ * (Excel / Google Sheets 準拠 — kind によらず同一視覚、判別は data-aqsp-clip-kind)。ダッシュは
+ * 周期 8px × 厚 2px。reduced-motion では送りだけ止まり静的破線として残る (視認性は維持)。
+ */
+.aqsp-clip-marquee {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/*
+ * アンツ本体は ::after が担い、選択枠 (アクティブリング 2px = 矩形内縁) の**外側 3px** に描く。
+ * ノード自体の矩形は writer が書く論理レンジ矩形の SSOT のまま。外側オフセットの正準定数は
+ * writer 側の CLIP_MARQUEE_OUTSET = 3 (漸進端別クランプの分子) で、CSS はその出力
+ * (--aqsp-clip-outset-*) を消費する — 下の -3px はマーキー非表示時にだけ効くフォールバック。
+ * ズーム下も .aqsp-zoom の transform が疑似要素ごと拡縮するため論理 3px のまま一貫する。
+ */
+.aqsp-clip-marquee::after {
+  content: "";
+  position: absolute;
+  /* 端別アウトセット (漸進): writer が各辺の余白ぶんだけ外へ出す (-min(3, 余白)px) — overlay の
+     overflow: hidden に切られて行 0 / 列 0 やビューポート端で辺が消える欠陥の根治 (連続クランプ
+     で閾値跳ねなし) */
+  top: var(--aqsp-clip-outset-top, -3px);
+  right: var(--aqsp-clip-outset-right, -3px);
+  bottom: var(--aqsp-clip-outset-bottom, -3px);
+  left: var(--aqsp-clip-outset-left, -3px);
+  /* 二色 (青 / 白 — Excel 同型): 透明コマだと下地が青リング / 青塗りのとき「青一色の実線」に
+     化けてアンツが知覚不能になる (R2(H) 画素実測)。白コマはどの下地でも必ず対比を作る */
+  background-image: linear-gradient(90deg, #2563eb 50%, #ffffff 50%), linear-gradient(90deg, #2563eb 50%, #ffffff 50%), linear-gradient(0deg, #2563eb 50%, #ffffff 50%), linear-gradient(0deg, #2563eb 50%, #ffffff 50%);
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  background-size:
+    8px 2px,
+    8px 2px,
+    2px 8px,
+    2px 8px;
+  background-position:
+    0 0,
+    8px 100%,
+    0 8px,
+    100% 0;
+  animation: aqsp-marching-ants 0.4s linear infinite;
+}
+
+@keyframes aqsp-marching-ants {
+  to {
+    background-position:
+      8px 0,
+      0 100%,
+      0 0,
+      100% 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aqsp-clip-marquee::after {
+    animation: none;
+  }
+}
+
+/* §7.1 リサイズストリップ (視覚とヒット判定のみ — リスナーは帯の wire-once capture) */
+.aqsp-col-resize-strip {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.aqsp-row-resize-strip {
+  position: absolute;
+  left: 0;
+  right: 0;
+  cursor: row-resize;
+}
+
+/* §7.1 unhide マーカー (二重線スタイル — ストリップより DOM 後置 = 上層) */
+.aqsp-col-header .aqsp-unhide-marker {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  cursor: col-resize;
+  background: repeating-linear-gradient(90deg, #2563eb 0 1px, transparent 1px 3px);
+  opacity: 0.7;
+}
+
+.aqsp-row-header .aqsp-unhide-marker {
+  position: absolute;
+  left: 0;
+  right: 0;
+  cursor: row-resize;
+  background: repeating-linear-gradient(180deg, #2563eb 0 1px, transparent 1px 3px);
+  opacity: 0.7;
+}
+
+/* §7.2 リサイズガイドライン (overlay 常設ノード — writer が寸法 / 位置を直書き) */
+.aqsp-resize-guide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #2563eb;
+  pointer-events: none;
+}
+
+/* §8.1 fill ハンドル (pointer-events: auto の例外第 2 号) */
+.aqsp-autofill-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  background: #2563eb;
+  border: 1px solid #fff;
+  box-sizing: content-box;
+  pointer-events: auto;
+  cursor: crosshair;
+}
+
+/* §8.2 fill プレビュー帯 (破線の常設ノード) */
+.aqsp-autofill-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px dashed #16a34a;
+}
+
+/*
+ * 機能要件 (forced-colors — §6.10): 半透明 background + mix-blend-mode は強制配色で剥がされ
+ * 不可視になるため、選択塗りを Highlight outline へ、マーキーは ::after の Highlight 破線
+ * border へ切り替える (outline は端別クランプできず原点で切られる — [M164])。
+ */
+@media (forced-colors: active) {
+  /* 強調帯: 半透明背景は剥がされるため Highlight の outline へ (fill と同型) */
+  .aqsp-band {
+    background: transparent;
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  /* 指標三角: transparent 辺が再着色されると三角が四角に化けるため、最初から 6px の CanvasText 四角にする */
+  .aqsp-cell[data-aqsp-note]::after,
+  .aqsp-cell[data-aqsp-comment]::after,
+  .aqsp-cell[data-aqsp-invalid]::before {
+    width: 6px;
+    height: 6px;
+    border: 1px solid CanvasText;
+  }
+  .aqsp-drag-rect[data-aqsp-drag-mode="point"] {
+    border-color: Highlight;
+    background: transparent;
+  }
+  .aqsp-selection-fill {
+    background: transparent;
+    /* 通常モードの外周罫は退役 (outline-offset -2px の Highlight が同帯を覆うため視覚上は
+       occluded だが、強制色の再着色を避ける衛生リセット) */
+    border: none;
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .aqsp-clip-marquee::after {
+    /* グラデーション背景は強制カラーで塗り潰されるため、端別クランプが効く ::after の
+       border 破線へ切り替える (outline は端別にできず原点で切られる) */
+    background-image: none;
+    animation: none;
+    border: 2px dashed Highlight;
+  }
+}
+
+/* ヘッダー強調 (§6.8-4 — ドラッグ中は凍結 = 既知特性) */
+.aqsp-col-header-cell[data-aqsp-in-selection],
+.aqsp-row-header-cell[data-aqsp-in-selection] {
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-weight: 600;
+}
+
+/* SR 専用 live region (§6.9-9) — 視覚的に不可視、AT には読める */
+.aqsp-live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * 機能要件 (ADR-3/4): シンクは overlay 内の唯一の pointer-events: auto。常駐 1px + opacity 0。
+ * display:none / visibility:hidden はフォーカスと IME が死ぬため禁止。
+ */
+.aqsp-sink {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  resize: none;
+  pointer-events: auto;
+  /* 待機中 (1×1) の UA 既定 text カーソルを殺し、非編集セルと同じ既定矢印にする — キャレットは
+     編集中のみ (利用者選択: 非編集=矢印 / 編集=キャレット) */
+  cursor: default;
+}
+
+/*
+ * 編集セッション中の可視エディタ化 (v0.3 要望改善): 常時 opacity 0 のままだと打鍵は受けても
+ * 本文もキャレットも見えない。セル面積化 (§6.7.2-4) と同じ書込点で立つ data-aqsp-editing で
+ * だけ可視化する。フォント / パディングはセル描画 (.aqsp-cell: 13px / 左右 4px / flex 中央 =
+ * 上下 max(0, (行高 − 下罫 1 − 13) / 2) — 下罫 1px を落とすと 0.5px の縦段差、14px 未満の
+ * 行は 0 床) と視覚連続にし、枠は
+ * アクティブリングと同色。白背景でセルの旧値を覆う
+ * (再スライスは確定時のみのため、透けると旧値と入力が二重に見える)。
+ */
+.aqsp-sink[data-aqsp-editing] {
+  opacity: 1;
+  z-index: 1;
+  box-sizing: border-box;
+  padding: 0 4px; /* 上パディングはオーバーレイが行高から動的直書き — セル flex 中央と一致 */
+  background: #ffffff;
+  color: #1f2937;
+  caret-color: #1f2937;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1;
+  white-space: pre;
+  overflow: hidden;
+  outline: 2px solid #2563eb;
+  outline-offset: -2px;
+  /* 編集中だけキャレット (I ビーム) — 編集セルの文字上でキャレットを出す (利用者要望)。非編集は
+     .aqsp-row / 待機シンクとも既定矢印なので、カーソル値が変わるのは編集開始の 1 回のみ。旧
+     v0.3.2 の「非編集=十字 (cell) → 編集=text」は十字とキャレットの間にブラウザ既定矢印が挟まる
+     「十字→矢印→十字」の点滅を招いた (実測)。矢印基調に統一し、点滅の起点となる十字を撤去した
+     (利用者選択: 非編集=矢印 / 編集=キャレット) */
+  cursor: text;
+}
+
+/*
+ * 参照ポインティング中 (v0.8 計画 §4.2.14): キャレット色を参照矩形と同色にする視覚ヒント。属性は
+ * エディタが input / 処理済みキー / selectionchange で書く (漸進的・非依存)。遷移は書かない
+ */
+.aqsp-sink[data-aqsp-pointing] {
+  caret-color: #16a34a;
+}
+
+/*
+ * v0.8 ポップオーバー層 (ADR-15 / 計画 §4.2.14): .aqsp-body-stack 内で overlay の**後**の兄弟 (DOM 順 =
+ * 描画上位)。層自体は pointer-events: none。アンカーはセル上の位置決めだけで、これも none — アンカーは
+ * セル面積で開いている間もセルに重なるため、auto にすると開いた瞬間にセルのホバー (note tip の
+ * 入退出) とクリックを奪って tip が明滅する。pointer-events: auto の例外 #3 / #4 はアンカーの中身で
+ * あるポップオーバー本体 (.aqsp-popover) が担う (アンカーの pointerenter / leave は子の hit から
+ * 祖先へ届く。層は body の兄弟なので tip への進入は body の pointerleave も起こす — ホバー可能 tip の
+ * 成立はフック usePopovers の tipHoveredRef が担い、CSS の責務ではない)。非表示は visibility: hidden +
+ * inert (display: none は入力フォーカスを壊すため禁止)。
+ * 遷移は書かない
+ */
+.aqsp-popover-layer {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.aqsp-popover-anchor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+/* 閉じたアンカー (PopoverLayer が inert を書く — フレームは未マウント) は寸法を保ったまま不可視 */
+.aqsp-popover-anchor[inert] {
+  visibility: hidden;
+}
+
+/*
+ * フレーム (pointer-events: auto の例外 #3 / #4)。幅 320px は placement.ts の POPOVER_MAX_WIDTH と
+ * 同値の既定値 (見た目の契約): 配置は PopoverLayer.place が popoverWidth(層) = min(320, 使用可能幅 − 8)
+ * をインラインで書いて**から** offsetHeight を測るため、CSS 幅は計測の前提ではない (340px 未満の層では
+ * インライン幅 < 320 が勝ち、その幅で折り返した実高で候補判定する)。max-height もインライン
+ * (placePopover の出力 — 全高で収まらなければアンカー脇の空きへ縮めた高さ) — 収まらない分は kind ルートの
+ * 縦 flex が内側のスクロール領域 (スレッド / 候補一覧 / tip 本文) へ押し込み、overflow: hidden が角丸で
+ * 切る。余白はフレームでなく kind ルートが持つ (list の候補一覧と拒否アクセントを端まで描くため)。
+ * フォントはセル書式と独立なシステム UI 書体 (Excel / Sheets の注釈 UI と同型)。遷移は書かない
+ */
+.aqsp-popover {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  max-width: 320px;
+  overflow: hidden;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #1f2937;
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.08),
+    0 8px 24px rgb(0 0 0 / 0.14);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans JP", sans-serif;
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: start;
+  white-space: normal;
+  cursor: default;
+  pointer-events: auto;
+}
+
+/* 消費者レンダラ (autofocus 対象なし) はフレーム自体が焦点着地点 — 内側リングで所在を示す */
+.aqsp-popover:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: -2px;
+}
+
+/* ホバー tip のフレーム (kind はフレームの data-aqsp-popover-frame、中身の data-aqsp-popover は部品側のフック) */
+.aqsp-popover[data-aqsp-popover-frame="note-tip"] {
+  border-color: #f59e0b;
+  background: #fffbeb;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+}
+
+/*
+ * kind ルート (既定部品 6 種): 余白と縦 flex の所有者。min-height: 0 でフレームの max-height クランプを
+ * 受け、固定高の子 (textarea / 操作列) は flex: none、可変の子 (スレッド / 候補一覧) が縮んでスクロール
+ */
+.aqsp-popover-note,
+.aqsp-popover-comment,
+.aqsp-popover-link,
+.aqsp-popover-message {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 10px 12px;
+}
+
+.aqsp-popover-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 6px;
+}
+
+/* tip 本文: 改行 / 長語を保って折り返し、フレームのクランプ内でスクロール (tip はホバー可) */
+.aqsp-popover-note-tip {
+  min-height: 0;
+  padding: 8px 10px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * 拒否状態 (data-aqsp-popover-rejected — 部品ルートが立てる): 始端 3px の赤アクセント。パディングを
+ * 3px 減らして本文位置を保つ (拒否再提示は同じフレームを保持するため、本文が動くと再試行中の
+ * 下書きが跳ねる)。forced-colors では border が CanvasText へ再着色されて太い縦線として残る
+ */
+[data-aqsp-popover][data-aqsp-popover-rejected] {
+  border-inline-start: 3px solid #dc2626;
+  padding-inline-start: 9px;
+}
+
+.aqsp-popover-title {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin: 0 0 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.aqsp-popover-count {
+  font-weight: 400;
+  color: #6b7280;
+}
+
+/*
+ * 入力欄 (textarea / input): UA 既定 (monospace / 13.33px Arial / 独自 padding) を捨ててポップオーバーの
+ * 書体へ揃える。フォーカスは :focus-visible の内側リング (border に重ねる 2px — 角丸フレームの
+ * overflow: hidden に切られない)。aria-invalid (拒否 / 不正 URL — 部品が書く ARIA 状態) は赤枠
+ */
+.aqsp-popover-textarea,
+.aqsp-popover-input {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 5px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #ffffff;
+  color: inherit;
+  font: inherit;
+  line-height: 1.4;
+}
+
+/*
+ * ノート本文は縦の可変領域 (flex 1 / min-height): 拒否再提示はフレーム (max-height 据置き) の中で
+ * ヒントが 1 行伸びるため、textarea が縮んで操作列を見せる (flex: none だと Save が切られる)
+ */
+.aqsp-popover-textarea {
+  flex: 1 1 auto;
+  height: 104px;
+  min-height: 56px;
+  overflow: auto;
+  resize: none;
+  white-space: pre-wrap;
+}
+
+/* 返信欄は固定高 — スレッドがコメント編集の可変領域 */
+.aqsp-popover-comment .aqsp-popover-textarea {
+  flex: none;
+  height: 64px;
+}
+
+.aqsp-popover-input {
+  flex: none;
+  height: 28px;
+}
+
+.aqsp-popover-textarea:focus-visible,
+.aqsp-popover-input:focus-visible {
+  border-color: #2563eb;
+  outline: 2px solid #2563eb;
+  outline-offset: -1px;
+}
+
+.aqsp-popover-textarea[aria-invalid="true"],
+.aqsp-popover-input[aria-invalid="true"] {
+  border-color: #dc2626;
+}
+
+.aqsp-popover-textarea[aria-invalid="true"]:focus-visible,
+.aqsp-popover-input[aria-invalid="true"]:focus-visible {
+  border-color: #dc2626;
+  outline-color: #dc2626;
+}
+
+/* ヒント (Escape の挙動 / 拒否の再試行案内) — 12px の控えめ色、拒否時は赤 */
+.aqsp-popover-hint {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+[data-aqsp-popover-rejected] .aqsp-popover-hint {
+  color: #b91c1c;
+}
+
+/* リンク編集の欄 (ラベル + 入力) */
+.aqsp-popover-field {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: 3px;
+  margin: 0 0 8px;
+}
+
+.aqsp-popover-field-label {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+/* 操作列: 主操作が先頭、閉じる (×) は margin-inline-start: auto で終端へ */
+.aqsp-popover-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.aqsp-popover-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 56px;
+  height: 26px;
+  margin: 0;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #f9fafb;
+  color: #1f2937;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.aqsp-popover-button:not(:disabled):hover {
+  border-color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.aqsp-popover-button:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 1px;
+}
+
+.aqsp-popover-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 主操作 (保存 / 投稿 — 部品の役割属性で判別) */
+.aqsp-popover-button[data-aqsp-popover-save],
+.aqsp-popover-button[data-aqsp-popover-post] {
+  border-color: #2563eb;
+  background: #2563eb;
+  color: #ffffff;
+}
+
+.aqsp-popover-button[data-aqsp-popover-save]:not(:disabled):hover,
+.aqsp-popover-button[data-aqsp-popover-post]:not(:disabled):hover {
+  border-color: #1d4ed8;
+  background: #1d4ed8;
+}
+
+/* 閉じる (×): 終端のゴースト正方形 */
+.aqsp-popover-button[data-aqsp-popover-close] {
+  min-width: 0;
+  width: 26px;
+  margin-inline-start: auto;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: #6b7280;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.aqsp-popover-button[data-aqsp-popover-close]:not(:disabled):hover {
+  border-color: transparent;
+  background: #f3f4f6;
+  color: #1f2937;
+}
+
+/* コメントスレッド: 可変領域 (縮んでスクロール)。項目は薄い区切り線、先頭は線なし */
+.aqsp-popover-thread {
+  flex: 1 1 auto;
+  min-height: 48px;
+  max-height: 220px;
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.aqsp-popover-comment-item {
+  padding: 6px 0;
+  border-top: 1px solid #f3f4f6;
+}
+
+.aqsp-popover-comment-item:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.aqsp-popover-comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.aqsp-popover-comment-time {
+  margin-inline-start: 6px;
+  font-size: 11px;
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+}
+
+.aqsp-popover-comment-text {
+  margin: 2px 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* 検証リスト: 入力 + 候補一覧 (可変領域)。活性は部品が書く aria-selected、ホバーは薄灰 (活性が後置で優先) */
+.aqsp-popover-list .aqsp-popover-input {
+  margin-bottom: 4px;
+}
+
+.aqsp-popover-options {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 240px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.aqsp-popover-option {
+  padding: 5px 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.aqsp-popover-option:hover {
+  background: #f3f4f6;
+}
+
+.aqsp-popover-option[aria-selected="true"] {
+  background: #dbeafe;
+  color: #1e3a8a;
+}
+
+.aqsp-popover-option:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: -2px;
+}
+
+.aqsp-popover-empty {
+  padding: 6px 8px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+/* 検証メッセージ (受動 — role="status"): 閉じるボタンは右上へ絶対配置、本文はその幅を空ける */
+.aqsp-popover-message {
+  position: relative;
+  padding-inline-end: 40px;
+}
+
+.aqsp-popover-message .aqsp-popover-title {
+  margin-bottom: 2px;
+}
+
+.aqsp-popover-message-text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.aqsp-popover-message .aqsp-popover-button[data-aqsp-popover-close] {
+  position: absolute;
+  inset-block-start: 6px;
+  inset-inline-end: 6px;
+}
+
+/* 拒否メッセージ (strict 検証の拒否再提示): 淡い赤地 + 赤い見出し (アクセント線は共通規則) */
+.aqsp-popover-message[data-aqsp-popover-rejected] {
+  background: #fef2f2;
+}
+
+.aqsp-popover-message[data-aqsp-popover-rejected] .aqsp-popover-title {
+  color: #b91c1c;
+}
+
+/*
+ * forced-colors (ポップオーバー分 — 本体ブロックの後置が必須: 候補の活性規則と同詳細度のため、先に
+ * 置くと通常規則に負ける)。背景色 / 影 / 文字色は強制配色が自動置換するため、消えると区別が
+ * 失われるものだけを線で残す: 候補の活性 / ホバー (背景 → Highlight outline)、不正入力 (赤枠 →
+ * 破線)、ゴーストの閉じるボタン (透明 border → ButtonText)
+ */
+@media (forced-colors: active) {
+  .aqsp-popover-option:hover,
+  .aqsp-popover-option[aria-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .aqsp-popover-textarea[aria-invalid="true"],
+  .aqsp-popover-input[aria-invalid="true"] {
+    border-style: dashed;
+  }
+  .aqsp-popover-button[data-aqsp-popover-close] {
+    border-color: ButtonText;
+  }
+}
+
+[data-aqsp-empty] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}