/* Khung soạn ghi chú — MỘT bản cho Notebook/QuickNote (index.html) và AntiNote
   (antiNote.html) (BA 2026-10-07: "đưa về chung 1 màu nền, màu sắc các khối …
   sau này chỉ chỉnh sửa cập nhật ở 1 nơi").

   Các khối, từ trên xuống, theo class vai trò dùng chung (cả hai cửa sổ gắn):
     .note-doc            gốc khung soạn, mang data-note-bg (màu nền ghi chú)
     .note-doc-header     thanh đầu: vị trí (dự án/hạng mục) · .note-doc-actions
     .note-doc-actions    nút thông tin/thao tác — DOM do components/noteDocActions.js
     .note-doc-toolbar    thanh công cụ: dải nền "fill" bo tròn
     .note-doc-body       thân: mục lục (nếu có) + trang soạn
     .note-doc-page       trang soạn: thẻ có viền, màu nền ghi chú tô ở đây
     .note-doc-title-*    tiêu đề trong trang (đầu vùng cuộn, ăn theo thu phóng)
     .note-doc-statusbar  thanh dưới: số từ · thu phóng
   Bảng màu nền (.notespeed-bg-… và .notics-bg-…) giữ tên cũ vì popup Ghi chú dự án
   và bảng màu nổi trên thẻ cũng dùng.

   Chỉ dùng token --ui-* / --dt-*: cửa sổ AntiNote không nạp styles.css nên không
   có alias --ux-* / --fs-* (alias nào có giá trị khác theo vật liệu thì dùng với
   giá trị dự phòng --ui-* tương đương). Nằm ở @layer legacy như các khối gốc
   (notics.css/styles.css) để giữ nguyên thứ tự cascade của Notebook; nạp SAU
   notics.css / antinote.css. Test: tests/e2e/noteEditorShellParity.spec.js. */
@layer legacy {

/* ── Thanh đầu ─────────────────────────────────────────────────────────── */
.note-doc-header {
  position: relative;
  z-index: var(--ui-layer-header);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  /* Không kẻ dưới, không nền riêng (BA 11/10/2026 tối thiểu viền, chế độ tối MỘT màu như
     chế độ sáng): thanh đầu trong suốt, ăn đúng bề mặt cột soạn; ranh giới tiêu đề/nội
     dung đã có đường mảnh trong trang. Trước đây --ux-overlay sáng hơn một bậc ở tối. */
  border-bottom: 0;
  background-color: transparent;
}
.note-doc-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ui-space-1);
  margin-left: auto;
  flex-wrap: nowrap;
}
.note-doc-actions > [hidden] { display: none; }

/* Trạng thái lưu: ô cố định 24×24 để icon đổi trạng thái không làm xô hàng nút. */
.note-doc-status:not(.sticky-sync-status) {
  width: var(--ui-control-h-compact);
  height: var(--ui-control-h-compact);
  min-width: var(--ui-control-h-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ui-control-h-compact);
  color: var(--ui-text-muted);
  padding: 0;
}
.note-doc-status svg { display: block; }
.note-doc-status[data-tone="saved"],
.note-doc-status[data-state="saved"] { color: var(--ui-success); }
.note-doc-status[data-tone="error"],
.note-doc-status[data-state="error"] { color: var(--ui-danger); }

/* ── Màu nền ghi chú: nút chấm màu + bảng chọn ───────────────────────────── */
.notespeed-bg-control { position: relative; display: inline-flex; }
.note-doc-actions > .notespeed-bg-control { z-index: var(--ui-layer-popover); }
.notespeed-bg-btn { display: inline-flex; align-items: center; gap: var(--ui-space-1-5); }
.notespeed-bg-btn-dot {
  position: relative;
  width: var(--dt-dimension-icon-header); height: var(--dt-dimension-icon-header); border-radius: var(--ui-radius-circle);
  border: var(--ui-stroke-thin) solid rgba(var(--ink), 0.28);
  background: rgb(var(--ui-surface-raised-rgb));
}
.notespeed-bg-btn-dot[data-bg="default"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ui-space-2-5);
  height: var(--ui-space-0-5);
  background: var(--ui-danger);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: var(--ui-radius-xs);
}
/* Trên thanh đầu, "chưa đặt màu" là chấm trơn — gạch chéo đỏ là ký hiệu của BẢNG chọn,
   để trên nút thường trực thì hút mắt như báo lỗi (BA 2026-10-09 bớt tín hiệu). */
.note-doc-actions .notespeed-bg-btn-dot[data-bg="default"]::after { content: none; }
.notespeed-bg-btn-dot[data-bg="white"]  { background: var(--ux-raised, rgb(var(--ui-surface-raised-rgb))); }
.notespeed-bg-btn-dot[data-bg="black"]  { background: var(--ui-note-swatch-black); }
.notespeed-bg-btn-dot[data-bg="yellow"] { background: var(--ui-note-swatch-yellow); }
.notespeed-bg-btn-dot[data-bg="green"]  { background: var(--ui-note-swatch-green); }
.notespeed-bg-btn-dot[data-bg="blue"]   { background: var(--ui-note-swatch-blue); }
.notespeed-bg-btn-dot[data-bg="pink"]   { background: var(--ui-note-swatch-pink); }
.notespeed-bg-btn-dot[data-bg="purple"] { background: var(--ui-note-swatch-purple); }
.notespeed-bg-btn-dot[data-bg="gray"]   { background: var(--ui-note-swatch-gray); }
.notespeed-bg-pop {
  position: absolute; top: calc(100% + var(--ui-space-1-5)); right: 0; z-index: var(--ui-layer-dropdown);
  display: flex; flex-wrap: wrap; gap: var(--ui-space-2); width: var(--dt-dimension-layout-160);
  padding: var(--ui-space-2-5);
  border: var(--ui-stroke-thin) solid var(--stroke, var(--ui-divider)); border-radius: var(--ui-radius-panel);
  background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--ui-elevation-3);
}
.notespeed-bg-pop.hidden { display: none; }
.notespeed-bg-pop .notics-bg-swatch { width: var(--ui-icon-lg); height: var(--ui-icon-lg); }
.notics-bg-picker { display: flex; align-items: center; gap: var(--ui-space-1); }
.notics-bg-picker.notespeed-bg-pop {
  position: absolute;
  top: calc(100% + var(--ui-space-1-5));
  right: 0;
  z-index: var(--ui-layer-dropdown);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-1-5);
  width: var(--dt-dimension-layout-160);
  padding: var(--ui-space-2-5);
  box-sizing: border-box;
  border: var(--ui-stroke-thin) solid var(--stroke, var(--ui-divider));
  border-radius: var(--ui-radius-panel);
  background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--ui-elevation-3);
}
.notics-bg-picker.notespeed-bg-pop.hidden { display: none; }
.notics-bg-swatch {
  position: relative;
  width: var(--ui-icon-sm);
  height: var(--ui-icon-sm);
  border-radius: var(--ui-radius-circle);
  cursor: pointer;
  padding: 0;
  border: var(--ui-stroke-thick) solid rgba(var(--ink), 0.28);
  background: var(--notics-note-bg, transparent);
  font-family: inherit;
  transition: transform var(--ui-duration-fast) var(--ui-ease),
              border-color var(--ui-duration-fast) var(--ui-ease);
}
.notespeed-bg-pop .notics-bg-swatch,
.notics-bg-picker.notespeed-bg-pop .notics-bg-swatch {
  width: var(--ui-icon-lg);
  height: var(--ui-icon-lg);
  min-width: var(--ui-icon-lg);
  min-height: var(--ui-icon-lg);
  max-width: var(--ui-icon-lg);
  max-height: var(--ui-icon-lg);
}
.notics-bg-swatch:hover {
  transform: scale(1.12);
  border-color: rgba(var(--ink), 0.6);
}
.notics-bg-swatch.is-selected {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 var(--ui-focus-ring-width) color-mix(in srgb, var(--ui-accent) 35%, transparent);
}
.notics-bg-swatch[data-bg="default"] {
  position: relative;
  background: rgb(var(--ui-surface-raised-rgb));
}
.notics-bg-swatch[data-bg="default"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ui-icon-xs);
  height: var(--ui-space-0-5);
  background: var(--ui-danger);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: var(--ui-radius-xs);
}
.notics-bg-swatch[data-bg="white"]   { background: var(--ux-raised, rgb(var(--ui-surface-raised-rgb))); }
.notics-bg-swatch[data-bg="black"]   { background: var(--ui-note-swatch-black); }
.notics-bg-swatch[data-bg="yellow"]  { background: var(--ui-note-swatch-yellow); }
.notics-bg-swatch[data-bg="green"]   { background: var(--ui-note-swatch-green); }
.notics-bg-swatch[data-bg="blue"]    { background: var(--ui-note-swatch-blue); }
.notics-bg-swatch[data-bg="pink"]    { background: var(--ui-note-swatch-pink); }
.notics-bg-swatch[data-bg="purple"]  { background: var(--ui-note-swatch-purple); }
.notics-bg-swatch[data-bg="gray"]    { background: var(--ui-note-swatch-gray); }
/* Tương phản cao: ô màu/chấm màu là DỮ LIỆU (màu của ghi chú) — giữ nguyên màu như .ui-swatch. */
@media (forced-colors: active) {
  .notics-bg-swatch,
  .notespeed-bg-btn-dot { forced-color-adjust: none; }
}

/* ── Thanh công cụ: dải nút phẳng, KHÔNG nền/viền (BA 2026-10-08 bớt khung — trước
   là dải nền "fill" bo tròn kiểu Google Docs, 2026-09-23). Nhóm nút tách bằng vạch. ── */
.note-doc-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  flex-wrap: wrap;
  margin: var(--ui-space-2) var(--ui-space-4);
  padding: var(--ui-space-1) var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: transparent;
}
.note-doc-toolbar.is-collapsed { display: none; }

/* ── Thanh đầu MỘT hàng (BA 10/10/2026): vị trí · thanh công cụ · thao tác ──────
   Thanh công cụ nằm trong .note-doc-header, chiếm phần còn lại giữa vị trí và cụm
   thao tác, KHÔNG xuống dòng. Thiếu chỗ thì components/noteToolbar.js
   fitNoteToolbarRow() ẩn dần nhóm ít cần ([data-tb-fit-hidden]); ẩn hết vẫn chật
   thì thanh mang [data-tb-own-row] và xuống hàng riêng. Bật "Công cụ nâng cao"
   (.is-tools-expanded) cũng xuống hàng riêng, bày đủ và được xuống dòng. */
.note-doc-header { flex-wrap: wrap; row-gap: var(--ui-space-1); }
.note-doc-header > :is(.sticky-editor-location, .notics-doc-location) {
  flex: 0 1 auto;
  max-width: var(--dt-dimension-layout-240);
}
/* Chật: ô vị trí nhường chỗ cho công cụ trước khi gom nhóm (fitNoteToolbarRow). */
.note-doc-header > .is-row-compact:is(.sticky-editor-location, .notics-doc-location) {
  max-width: var(--dt-dimension-layout-120);
}
.note-doc-header > .note-doc-toolbar {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  border: 0;
}
.note-doc-header > .note-doc-toolbar:is(.is-tools-expanded, [data-tb-own-row]) {
  order: 1;
  flex: 1 0 100%;
  flex-wrap: wrap;
}

/* ── Thân + trang soạn ─────────────────────────────────────────────────────
   Trang là vùng bo góc KHÔNG viền (BA 2026-10-08 bớt khung: tách bằng sắc nền
   --ns-note-bg, không thêm đường kẻ), lề trái/phải thẳng hàng thanh công cụ
   (--ui-space-4); cột mục lục (nếu có) nằm ngoài, cách một khe. */
.note-doc-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  gap: var(--ui-space-3);
  /* Không đệm đáy (BA 11/10/2026 footer thấp): thanh dưới đứng sát trang. */
  padding: 0 var(--ui-space-4);
}
/* Lề trong trang: cố định vừa đọc (BA 2026-09-22 — đã gỡ trần reading-measure);
   khung hẹp thu lại ở khối @container cuối file. */
.note-doc-page {
  padding: var(--ui-space-4-5) var(--ui-space-10);
}
.note-doc-body > .note-doc-page {
  min-width: 0;
  border: 0;
  border-radius: var(--ui-radius-panel);
}

/* Bảng màu nền ghi chú — khai qua --ns-note-* rồi áp lên trang (giấy). Trang dùng
   --ui-note-page-* (ui-tokens.css: tối = phủ nhạt, BA 11/10/2026); thẻ ghi chú
   (paint-speed.css) vẫn dùng --ui-note-bg-*. */
.note-doc[data-note-bg="default"] { --ns-note-bg: var(--ux-raised, rgb(var(--ui-surface-raised-rgb))); --ns-note-fg: var(--ui-text-primary); --ns-note-sub: var(--ui-text-secondary); }
.note-doc[data-note-bg="white"]  { --ns-note-bg: var(--ui-note-page-white); --ns-note-fg: var(--ui-text-primary); --ns-note-sub: var(--ui-text-secondary); }
.note-doc[data-note-bg="black"]  { --ns-note-bg: var(--ui-note-page-black); --ns-note-fg: var(--ui-note-on-dark); --ns-note-sub: var(--ui-note-on-dark-muted); }
.note-doc[data-note-bg="yellow"] { --ns-note-bg: var(--ui-note-page-yellow); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
.note-doc[data-note-bg="green"]  { --ns-note-bg: var(--ui-note-page-green); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
.note-doc[data-note-bg="blue"]   { --ns-note-bg: var(--ui-note-page-blue); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
.note-doc[data-note-bg="pink"]   { --ns-note-bg: var(--ui-note-page-pink); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
.note-doc[data-note-bg="purple"] { --ns-note-bg: var(--ui-note-page-purple); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
.note-doc[data-note-bg="gray"]   { --ns-note-bg: var(--ui-note-page-gray); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
.note-doc[data-note-bg] .note-doc-page {
  background: var(--ns-note-bg, var(--ux-raised, rgb(var(--ui-surface-raised-rgb))));
  color: var(--ns-note-fg, var(--ui-text-primary));
}
/* Nội dung thật nằm trong .ql-editor, có màu chữ riêng (không thừa kế từ trang) —
   không ép ở đây thì giấy đen ở chế độ Sáng ra chữ tối trên nền tối. (0,4,0) thắng
   "html[data-mode=dark] .notics-editor .ql-editor". */
.note-doc[data-note-bg] .note-doc-page .ql-editor { color: var(--ns-note-fg, var(--ui-text-primary)); }
.note-doc[data-note-bg] .note-doc-page .ql-editor.ql-blank::before { color: var(--ns-note-sub, var(--ui-text-muted)); }

/* ── Tiêu đề trong trang (kiểu Notion/Google Docs, BA 2026-09-23) ───────────
   Cửa sổ chuyển nhãn này vào đầu container Quill (trên .ql-editor) sau khi dựng
   Quill để nó cuộn cùng nội dung; 2em của vùng soạn nên ăn theo thu phóng. */
/* Ranh giới tiêu đề/nội dung (BA 10/10/2026, kiểu OneNote/Evernote): tiêu đề → hàng
   thông tin nhỏ → đường mảnh → nội dung. Hàng thông tin + gợi ý Tab: noteDocTitle.js. */
.note-doc-title-field {
  display: block;
  margin: 0 0 var(--ui-space-4);
  padding-bottom: var(--ui-space-2);
  border-bottom: var(--ui-stroke-thin) solid var(--ui-divider);
  cursor: text;
}
.note-doc-title-field .note-doc-title-input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-primary);
  font-family: inherit;
  /* Không quá to (BA 10/10/2026): 1.5em vẫn ăn theo thu phóng, đường kẻ lo phần tách. */
  font-size: 1.5em;
  font-weight: var(--dt-typography-weight-semibold);
  line-height: var(--dt-typography-line-height-snug);
  text-overflow: ellipsis;
}
.note-doc-title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-1) var(--ui-space-3);
  margin-top: var(--ui-space-1);
  color: var(--ui-text-muted);
  font-size: var(--dt-typography-font-size-caption);
  line-height: var(--dt-typography-line-height-body);
}
.note-doc-title-meta-text:empty { display: none; }
/* Gợi ý Tab chỉ hiện khi đang ở ô tiêu đề trống và nội dung có dòng đầu để lấy. */
.note-doc-title-hint { display: none; align-items: center; gap: var(--ui-space-1); }
.note-doc-title-field[data-title-suggest]:focus-within .note-doc-title-hint { display: inline-flex; }
.note-doc-title-hint kbd {
  padding: 0 var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--ui-divider);
  border-radius: var(--ui-radius-xs);
  font-family: inherit;
  font-size: inherit;
}
.note-doc[data-note-bg]:not([data-note-bg="default"]) .note-doc-title-meta { color: var(--ns-note-sub, var(--ui-text-muted)); }
.note-doc[data-note-bg]:not([data-note-bg="default"]) :is(.note-doc-title-field, .note-doc-title-hint kbd) { border-color: color-mix(in srgb, var(--ns-note-sub) 35%, transparent); }
.note-doc-title-field .note-doc-title-input:focus { outline: none; }
.note-doc-title-field .note-doc-title-input::placeholder { color: var(--ui-text-muted); }
.note-doc[data-note-bg] .note-doc-title-field .note-doc-title-input { color: var(--ns-note-fg, var(--ui-text-primary)); }
.note-doc[data-note-bg] .note-doc-title-field .note-doc-title-input::placeholder { color: var(--ns-note-sub, var(--ui-text-muted)); }
/* Có tiêu đề ở đầu vùng cuộn: .ql-editor lấp phần còn lại thay vì min-height 100%
   (cộng thêm tiêu đề thành luôn tràn, hiện thanh cuộn thừa). */
.note-doc-page:has(> .note-doc-title-field) { display: flex; flex-direction: column; }
.note-doc-page:has(> .note-doc-title-field) > .ql-editor { flex: 1 0 auto; min-height: 0; }

/* ── Thanh dưới: số từ · thu phóng — chữ phụ trên nền chung, không viền/ô
   (BA 2026-10-08 bớt khung). Cao đúng MỘT nút gọn --ui-control-h-compact, không đệm
   dọc (BA 11/10/2026: footer cũ 42px + 12px đệm thân là quá cao). ─────────── */
.note-doc-statusbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3);
  min-height: var(--ui-control-h-compact);
  padding: 0 var(--ui-space-3-5) 0 var(--ui-space-5);
  border-top: 0;
  background: transparent;
}
.note-doc-stats {
  font-size: var(--dt-typography-font-size-caption);
  color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums;
}
.note-doc-zoom {
  display: flex;
  align-items: center;
  gap: var(--ui-space-0-5);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--dt-dimension-radius-full);
}

/* ── Vùng soạn hẹp (BA 2026-10-07): khung soạn là container — Notebook dạng Danh
   sách khi cây + danh sách kéo rộng, popup hẹp, AntiNote dạng gọn. Thu lề trang và
   thanh công cụ để chữ không bị bóp; thanh công cụ vẫn là MỘT dải xuống hàng gọn. */
.note-doc { container: note-doc / inline-size; }
@container note-doc (max-width: 640px) {
  .note-doc-header { padding-inline: var(--ui-space-2); }
  .note-doc-toolbar { margin-inline: var(--ui-space-2); }
  .note-doc-body { gap: var(--ui-space-2); padding-inline: var(--ui-space-2); }
  .note-doc-page { padding-inline: var(--ui-space-4); }
  .note-doc-statusbar { padding-inline: var(--ui-space-3); }
}

} /* @layer legacy */

/* Thoáng–Gọn (BA 10/10/2026) — thanh đầu ghi chú dùng chung Notebook + AntiNote
   (components/noteDocActions.js): nút khóa chỉ hiện khi ghi chú ĐANG khóa (báo trạng
   thái, bấm để mở); khóa/màu nền mở qua menu ⋯. Nút chấm màu ẩn, bảng màu neo mép
   phải thanh đầu (ngay dưới ⋯). Ở modules vì nút là .ui-btn (components đặt display). */
@layer modules {
  .note-doc-actions { position: relative; }
  .note-doc-actions [data-doc-action="lock"]:not(.is-note-locked) { display: none; }
  .note-doc-actions > .notespeed-bg-control.is-in-menu {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 0;
  }
  .notespeed-bg-control.is-in-menu > .notespeed-bg-btn { display: none; }
  /* Nhóm bị fitNoteToolbarRow() gom khi thanh đầu một hàng thiếu chỗ. */
  .note-doc-toolbar:not(.is-tools-expanded) [data-tb-fit-hidden] { display: none; }
}