@layer legacy {
/* Responsive workspace layer -------------------------------------------------
 *
 * This file is loaded after the legacy stylesheet.  Layout decisions are made
 * from the available workspace width (container queries), not from the whole
 * Electron window: the left rail, a larger header and Windows DPI otherwise
 * make viewport breakpoints fire too late.
 */

.pane-resizer {
  touch-action: none;
  outline: none;
}
.notics-col > .pane-resizer,
.project-col > .pane-resizer {
  position: absolute;
  top: 0;
  right: calc(var(--ui-resizer-hit-half) * -1);
  bottom: 0;
  z-index: 12; /* audit-keep: thứ tự chồng lớp cục bộ phải giữ đúng số so với hàng xóm cùng ngữ cảnh xếp chồng, thang layer không có bậc tương ứng */
}
/* Thanh chia nằm TRONG cột nhưng chồm nửa vùng nắm sang cột bên cạnh. Cột cắt tràn
   (overflow: hidden) nên nửa đó từng bị cắt: vùng nắm chỉ còn ~12px lệch trái vạch
   chia, nắm đúng vạch thì trúng cột → kéo "không ăn", giật (BA 2026-10-07: Notebook kéo
   đổi cỡ không mượt bằng AntiNote). clip + overflow-clip-margin vẫn cắt nội dung cột
   nhưng chừa đúng nửa vùng nắm (--ui-resizer-hit-half — thuộc tính này không nhận
   calc()), để thanh chia đủ --ui-resizer-hit, căn giữa vạch. Cột
   không tạo lớp xếp chồng riêng nên z-index của thanh nổi trên cột kế bên. */
.notics-col:has(> .pane-resizer),
.project-col:has(> .pane-resizer) {
  overflow: clip;
  overflow-clip-margin: var(--ui-resizer-hit-half);
}
.pane-resizer:focus-visible::after {
  background: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-focus-ring); /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
}

/* ZERO HORIZONTAL OVERFLOW GUARD (ISO 9241-210 & WCAG 2.2 Reflow 1.4.10)
 * Khóa chặt cuộn ngang ngoài ý muốn ở cấp shell cửa sổ. Mọi container
 * làm việc chính (.app, .grid, .notics-page, .project-page)
 * phải luôn nằm gọn trong 100% bề ngang khung nhìn có thể sử dụng. */
html, body {
  overflow-x: hidden;
}

.app {
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}

.app > :is(.notics-page, .project-page, .dashboard-page, .settings-page) {
  max-width: 100%;
  box-sizing: border-box;
}

/* TODAY / TASK: khối responsive của dạng Hôm nay chuyển sang styles/calendar.css
   (ngay sau MỤC 0, 2026-09-27) để vẫn đứng SAU luật nền của nó như trước. */

/* LIST / DETAIL WORKSPACES -------------------------------------------------- */
:is(.notics-page, .antiscreenshot-page, .project-page) {
  container-type: inline-size;
  container-name: workspace-layout;
}

/* 2 cột: editor (cột 3 cũ) giờ là popup riêng, không còn trong lưới này. */
.notics-page .notics-body {
  grid-template-columns:
    clamp(180px, var(--notics-projects-width, var(--ui-rail-w-expanded, 200px)), 720px)
    minmax(360px, 1fr);
}

/* Track đầu để `auto`: bề rộng thật do `width` của cột danh sách quyết định
   (styles.css, khối workspaceListPane) để thu gọn/mở ra trượt được mượt. */
.antiscreenshot-page .notics-body {
  grid-template-columns: auto minmax(360px, 1fr);
}

.project-body {
  grid-template-columns: clamp(200px, var(--project-list-width, 250px), 720px) minmax(360px, 1fr);
}

/* Weekly Plan/Report is an editor surface, not a content-sized card list.
 * Give its sole grid row the remaining panel height so both note columns run
 * cleanly to the page bottom instead of leaving a large dead area. */
.project-tab-weekly .project-weekly-grid {
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}
.project-tab-weekly .project-weekly-card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@container workspace-layout (max-width: 1080px) {
  .notics-page:not(.is-projects-collapsed):not(.is-notes-collapsed) .notics-body {
    grid-template-columns: minmax(180px, .8fr) minmax(320px, 1.6fr);
  }
  .antiscreenshot-page .notics-body {
    grid-template-columns: auto minmax(300px, 1fr);
  }
  .project-body { grid-template-columns: clamp(190px, var(--project-list-width, 230px), 720px) minmax(300px, 1fr); }
}

@container workspace-layout (max-width: 820px) {
  /* Trước đây xếp dự án+ghi chú thành dải hẹp phía trên để nhường chỗ cho
     editor (cột 3 cũ) chiếm trọn phần dưới — editor giờ là popup riêng, phủ
     kín màn hình khi mở, không còn ganh chỗ với 2 cột này nữa. 2 cột vẫn
     đứng cạnh nhau bình thường, chỉ hẹp tỉ lệ lại. */
  .notics-page:not(.is-projects-collapsed):not(.is-notes-collapsed) .notics-body {
    grid-template-columns: minmax(170px, 1fr) minmax(210px, 1.25fr);
  }
  .notics-page .notics-resizer,
  .antiscreenshot-page .notics-resizer,
  .project-page .notics-resizer { display: none; }
}

/* Chỉ chuyển list/detail thành hai hàng khi không còn đủ chỗ cho cột nội dung
   tối thiểu. Ngưỡng 820px cũ kích hoạt ngay cả ở laptop/snap còn đủ bề ngang,
   nên panel lọc chỉ hiện được vài dòng và đè gallery bên dưới. */
@container workspace-layout (max-width: 460px) {
  .antiscreenshot-page:not(.is-list-collapsed) .notics-body,
  .project-page:not(.is-sidebar-collapsed) .project-body {
    /* Xếp chồng: panel danh sách nhận ~38% chiều cao, phần nội dung ~62% —
       CẢ HAI đều cuộn đầy đủ trong phần của mình. KHÔNG chốt cứng chiều cao
       panel (bug cũ "list chỉ còn 2 dòng ở 150%"): tỉ lệ fr co giãn theo cửa
       sổ, cửa sổ càng thấp thì cả hai càng ngắn nhưng vẫn cuộn được. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(80px, 2fr) minmax(0, 3fr);
  }
  .project-page:not(.is-sidebar-collapsed) .project-col-list {
    width: auto;
    min-height: 0;
    max-height: none;
    border-bottom: var(--ui-resizer-line) solid var(--ui-divider);}
    .project-page.is-sidebar-collapsed .project-col-list {
    display: none !important;
  }
}

@container workspace-layout (max-width: 620px) {
  /* Rất hẹp: dự án co lại còn một dải hẹp bên trái, lưới thẻ ghi chú lấy hết
     phần còn lại — không xếp chồng theo hàng như trước (đó là để nhường chỗ
     cho editor cột 3 cũ, nay không còn). */
  .notics-page:not(.is-projects-collapsed):not(.is-notes-collapsed) .notics-body {
    /* 120px chỉ đủ chứa icon/badge, không đủ cho nhãn tiếng Việt ở cỡ chữ
       150%. Cột điều hướng phải giữ tối thiểu một bậc control đầy đủ trước
       khi workspace chuyển sang một cột ở 460px. */
    --workspace-compact-pane-min: calc(var(--ui-control-h-standard) * 5);
    --workspace-compact-pane-max: calc(var(--ui-control-h-standard) * 6);
    grid-template-columns: clamp(var(--workspace-compact-pane-min), 40%, var(--workspace-compact-pane-max)) minmax(0, 1fr);
  }
  .antiscreenshot-page .notics-body {
    --workspace-compact-pane-min: calc(var(--ui-control-h-standard) * 5);
    --workspace-compact-pane-max: calc(var(--ui-control-h-standard) * 6);
    grid-template-columns: clamp(var(--workspace-compact-pane-min), 40%, var(--workspace-compact-pane-max)) minmax(0, 1fr);
  }
  .project-body {
    --workspace-compact-pane-min: calc(var(--ui-control-h-standard) * 5);
    --workspace-compact-pane-max: calc(var(--ui-control-h-standard) * 6);
    grid-template-columns: clamp(var(--workspace-compact-pane-min), 40%, var(--workspace-compact-pane-max)) minmax(0, 1fr);
  }
  .project-overview-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .project-overview-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }
  .project-stats { grid-template-columns: minmax(0, 1fr); }
}

/* HEADER -------------------------------------------------------------------
 * The legacy center block was absolutely positioned.  Its dimensions were
 * therefore excluded from layout, so it overlapped the first action (notably
 * AntiScreenshot's "Tất cả") and the Calendar navigation at medium widths.
 * A three-column grid reserves real space for all three clusters. */
.topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  justify-content: normal;}
.topbar-left {
  grid-column: 1;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}
.topbar-center {
  position: static;
  grid-column: 2;
  width: auto;
  max-width: min(46vw, var(--dt-dimension-layout-640));
  transform: none;
}
.topbar-right {
  grid-column: 3;
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
}
/* The header itself remains the Electron drag region.  Every interactive
 * island must explicitly opt out, otherwise a narrow grid/overflow layout
 * can make a visible button behave like title-bar space on Windows. */
.topbar :is(
  .topbar-left,
  .topbar-center,
  .topbar-right,
  .topbar-section,
  .topbar-actions,
  .week-nav-cluster,
  .picker-wrap,
  .view-segment,
  .view-mode-wrap,
  .antiscreenshot-zoom,
  button,
  input,
  select,
  [role="button"]
) {
  -webkit-app-region: no-drag;
}

/* Every header control uses the action tier.  This removes the old mixture
 * of 22px, 26px and 32px buttons while keeping the header itself equal to the
 * navigation rail via --app-header-height. */
.topbar :is(
  .notics-icon-btn,
  .notics-open-project-btn,
  .notics-project-filter-btn,
  .icon-btn,
  .picker-btn,
  .antiscreenshot-capture-btn,
  .antiscreenshot-zoom > button,
  .glass-icon-btn,
  .topbar-search-wrap
) {
  box-sizing: border-box;}
.topbar :is(.notics-icon-btn, .notics-open-project-btn, .icon-btn, .glass-icon-btn) {
  min-width: var(--ui-header-control-size);
  max-width: var(--ui-header-control-size);}
.topbar .topbar-search-wrap {
  min-width: var(--ui-header-search-min);
}
.topbar-search-toggle { display: none; }
html:not([data-view="calendar"]):not([data-view="notics"]):not([data-view="noteSpeed"]) .topbar-search-toggle {
  display: none !important;
}
.topbar .week-nav-cluster,
.topbar .picker-wrap,
.topbar .antiscreenshot-zoom {
  min-height: var(--ui-header-control-size);
  display: flex;
  align-items: center;
}
.topbar .week-nav-cluster {
  max-height: var(--ui-header-control-size);
  box-sizing: border-box;}
.topbar .week-nav-cluster .picker-wrap {
  display: inline-flex !important;}
.topbar .week-nav-cluster :is(.icon-btn, .picker-btn) {
  display: flex !important;}
.topbar .week-nav-cluster .icon-btn {
  min-width: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset));
  max-width: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset));}
.topbar .week-nav-cluster .picker-btn {
  /* Đây MỚI là declaration thật sự quyết định độ rộng nút "Tuần này" — file
     này nạp SAU CÙNG (xem index.html) và selector có 3 lớp (0,3,0), thắng mọi
     bản .week-nav-cluster .picker-btn / bare .picker-btn khai báo ở styles.css
     dù chúng có sửa gì đi nữa. 136px !important đứng yên trong khi
     .picker-label bên trong dùng --fs-xs (có nhân --font-scale) — ở 200% chữ
     "Tuần này" bị cắt cả hai đầu. */
  width: var(--ui-header-week-picker-width);
  min-width: var(--ui-header-week-picker-width);
  max-width: var(--ui-header-week-picker-width);
  display: flex !important;}
/* Chỉ số ô đang chọn cho thanh trượt; hình học ở "SEGMENTED CHUẨN" (@layer components). */
.topbar .view-segment[data-active-view="week"] { --view-segment-index: 1; }
.topbar .view-segment[data-active-view="multiWeek"] { --view-segment-index: 2; }
.topbar .view-segment[data-active-view="agenda"] { --view-segment-index: 3; }
/* Tắt "Xem theo Tháng" (Cài đặt) thì nút Tháng bị ẩn (.hidden), Danh sách lùi
   về ô thứ 3; giữ chỉ số 3 làm thanh trượt chạy ra ngoài cụm (BA 28/09/2026). */
.topbar .view-segment[data-active-view="agenda"]:has(> [data-calendar-view="multiWeek"].hidden) { --view-segment-index: 2; }

/* Compact headers retain every essential action. Search becomes an explicit
 * icon trigger which opens the same input as a local popover; it is never
 * removed from Notics (or any other view). */
@media (max-width: 1040px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;}
  .topbar-center { max-width: none; display: flex; align-items: center; justify-content: center; }
  .topbar-search-toggle {
    width: var(--ui-header-control-size); min-width: var(--ui-header-control-size); height: var(--ui-header-control-size);
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: var(--ui-resizer-line) solid var(--ui-divider); border-radius: var(--ui-radius-control); background: var(--ux-raised); color: var(--ui-text-secondary);
    cursor: pointer; -webkit-app-region: no-drag;
  }
  .topbar-search-toggle:hover { color: var(--ui-text-primary); border-color: var(--ux-border); background: var(--ui-hover); }
  .topbar-search-toggle:focus-visible { outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring); outline-offset: var(--ui-focus-ring-offset); }
  .topbar-search-wrap { display: none; }
  .topbar.is-compact-search-open .topbar-search-wrap {
    position: absolute; top: calc(100% + var(--ui-space-1-5)); right: var(--ui-space-2-5); z-index: var(--layer-popover);
    display: flex; width: min(var(--ui-dialog-max-md), calc(100vw - var(--ui-space-3) * 2));
    background: var(--ux-overlay); box-shadow: var(--ui-shadow-popover);}
  .topbar-right {
    min-width: max-content;
    max-width: calc(100vw - var(--dt-dimension-layout-160));
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* Header compact ưu tiên hành động thao tác. Tiêu đề ngày là thông tin lặp
     lại trong lịch nên ẩn đi; nhờ vậy cụm điều hướng giữ đủ hit target. */
  html[data-view="calendar"] .topbar-left { display: none; }
  html[data-view="calendar"] .topbar {
    grid-template-columns: 0 auto minmax(0, 1fr);
  }
  html[data-view="calendar"] .topbar-right {
    min-width: 0;
    max-width: none;
    overflow: visible;
    justify-self: stretch;
  }
  html[data-view="calendar"] .topbar-actions-calendar {
    width: 100%;
    justify-content: flex-end;
  }
  html:is([data-view="notics"], [data-view="calendar"]) .topbar-right { min-width: 0; max-width: none; overflow: visible; }
  html[data-view="calendar"] .topbar .picker-wrap { position: static; }
  html[data-view="calendar"] #pickerPanel {
    position: fixed;
    top: calc(var(--app-header-height) + var(--shell-gap));
    right: var(--shell-gap);
    left: auto;
    width: min(var(--dt-component-popover-compact-width), calc(100dvw - var(--shell-gap) * 2));
    max-width: calc(100dvw - var(--shell-gap) * 2);
    box-sizing: border-box;
    z-index: calc(var(--layer-popover) + 1);
  }
  .topbar-project-tabs,
  .topbar-dashboard-tabs {
    max-width: 54vw;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  /* Dưới ~50% bề ngang, cột trái (grid minmax(0,1fr), overflow:hidden) không đủ
     chỗ cho: 2 nút ẩn/hiện cột + "NOTEBOOK /" + nút chọn dự án -> phần thừa bị
     CẮT (đúng lỗi "các icon header bị lỗi khi kéo nhỏ"). Bỏ mẩu breadcrumb
     "NOTEBOOK /" ở đây — cùng cách xử lý đã có ở breakpoint 760px, chỉ kích hoạt
     sớm hơn — nhường lại ~90px cho các control bấm được. Nút chọn dự án cũng thu
     gọn tối đa để 2 icon ẩn/hiện cột luôn hiện đủ. */
  .topbar-section-notics .notics-eyebrow,
  .topbar-section-notics .notics-heading-separator { display: none; }
  .topbar-section-notics .notics-project-filter-btn { min-width: 0; max-width: 40vw; }
  .topbar-section-notics .notics-header-toggles { flex: 0 0 auto; }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding-inline: var(--ui-space-2);
  }
  .topbar-center {
    grid-column: 2;
    grid-row: 1;
    display: flex;
  }
  .topbar-right {
    grid-column: 3;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html:is([data-view="notics"], [data-view="calendar"]) .topbar-right { overflow: visible; }
  .topbar-right .topbar-actions { gap: var(--ui-space-1); }
  .topbar-section-notics .notics-eyebrow,
  .topbar-section-notics .notics-heading-separator { display: none; }
  .topbar-actions-notics .notics-btn-lock { width: var(--ui-header-control-size); min-width: var(--ui-header-control-size);}
  .topbar-actions-notics .notics-lock-btn-text { display: none; }

  /* Bộ lọc lịch không được neo vào một control đã bị co/hết chỗ. Ở cửa sổ hẹp
     nó trở thành một sheet có biên rõ, nền L4 đục và vùng cuộn riêng; nhờ đó
     không còn tràn qua lịch hoặc lộ chữ lịch xuyên qua popup. */
  html[data-view="calendar"] #tagFilterPanel {
    position: fixed;
    top: calc(var(--app-header-height) + var(--shell-gap));
    right: var(--shell-gap);
    bottom: auto;
    left: calc(var(--rail-w) + var(--shell-gap));
    width: auto;
    max-height: calc(100dvh - var(--app-header-height) - var(--shell-gap) * 2);
    box-sizing: border-box;
    background: var(--ux-overlay);
    overflow-y: auto;
    z-index: calc(var(--layer-popover) + 1);
  }

  /* topbar-right cuộn ngang ở màn hình hẹp. Một popup absolute bên trong nó
     sẽ bị clip theo trục dọc và khiến người dùng tưởng nút đổi dạng xem không
     hoạt động. Popover chọn Ngày/Tuần/Tháng là lớp L4 độc lập với vùng cuộn. */
  html[data-view="calendar"] .view-mode-wrap { position: static; }
  html[data-view="calendar"] .widget-menu-panel.view-mode-panel {
    position: fixed;
    top: calc(var(--app-header-height) + var(--shell-gap));
    right: var(--shell-gap);
    width: min(calc(var(--ui-control-h-standard) * 7), calc(100dvw - var(--shell-gap) * 2));
    max-width: calc(100dvw - var(--shell-gap) * 2);
    box-sizing: border-box;
    background: var(--ux-overlay);
    z-index: calc(var(--layer-popover) + 1);
  }
}

.notics-project-filter-panel.is-portaled {
  position: fixed;
  z-index: calc(var(--layer-popover) + 1);
  -webkit-app-region: no-drag;
}
/* Bộ chọn dự án dùng chung mở từ trong hộp thoại (Thêm việc, Chi tiết việc): phải nổi
   TRÊN lớp phủ modal, nếu không lớp phủ nuốt mọi cú bấm vào hàng (projectPicker.js). */
.notics-project-filter-panel.ui-picker.is-over-modal {
  z-index: calc(var(--layer-modal) + 1);
}

/* Bảng "Chuyển tới…" (mục 2, BA 2026-09-13) hẹp hơn bộ lọc phạm vi ở topbar
   (360px) — chỉ cần vừa đủ tên dự án/hạng mục, không cần rộng bằng panel
   lọc gốc (BA báo "quá rộng", yêu cầu khoảng một nửa). Hẹp hơn còn giúp né
   bớt trường hợp không đủ chỗ canh phải ở openMoveNotePopover(). */
.notics-project-filter-panel.notics-move-popover {
  width: min(var(--dt-component-popover-command-width), calc(100vw - var(--ui-space-6)));
}

/* A collapsed rail is icon-only. Ô mục 44 + khe --ui-navigation-item-gap (bước 46, BA 10/10/2026). */
html[data-rail="collapsed"] {
  --rail-item: var(--ui-navigation-item-h-collapsed);
  --rail-tile: calc(var(--ui-icon-navigation) + var(--ui-space-4));
  --rail-icon: var(--ui-icon-navigation);
  --rail-group-gap: var(--ui-navigation-item-gap);
}
html[data-rail="collapsed"] .nav-rail-item,
html[data-rail="collapsed"] .nav-rail-item:hover {
  justify-content: center;
  gap: 0;
  padding: 0 var(--ui-space-px);
}
html[data-rail="collapsed"] .nav-rail-label { display: none; }

/* Rail 66px chỉ đủ cho icon + nhãn nhỏ ở wide 100%. Khi vùng dùng thực đã
   compact/tight hoặc Dynamic Type = 125%, nhãn hai dòng bị cắt thành mảnh chữ
   và không còn đạt mức đọc tối thiểu. Chuyển về Navigation Rail icon-only;
   `title` + `aria-label` của navRail.js vẫn giữ tên đầy đủ cho hover/AT. */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) {
  --rail-item: var(--ui-navigation-item-h-collapsed);
  --rail-tile: calc(var(--ui-icon-navigation) + var(--ui-space-4));
  --rail-icon: var(--ui-icon-navigation);
  --rail-group-gap: var(--ui-navigation-item-gap);
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])
  .nav-rail-item,
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])
  .nav-rail-item:hover {
  justify-content: center;
  gap: 0;
  padding: 0 var(--ui-space-px);
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])
  .nav-rail-label {
  display: none;
}

/* RESPONSIVE SHELL CONTRACT -------------------------------------------------
 * `data-layout-mode` is computed from the usable app canvas, not from
 * `window.innerWidth`: rail width, shell gaps and Dynamic Type have already
 * consumed that space. These selectors mirror the existing viewport fallbacks
 * for the cases where a 125% text scale makes a visually narrow app inside a
 * physically wide window. Keep view-specific rules in their owning modules.
 */
.grid:not(.multi-week) {
  grid-template-columns: var(--calendar-grid-columns, minmax(0, 1fr));
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--ui-space-1);
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-center {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-search-toggle {
  width: var(--ui-header-control-size);
  min-width: var(--ui-header-control-size);
  height: var(--ui-header-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Cùng lớp trình bày với nhánh @media (max-width:1040px). Thiếu nhóm này thì
     ở các bề rộng mà data-layout-mode đã compact nhưng cửa sổ vật lý vẫn
     > 1040px (điển hình khi cỡ chữ 125%) nút hiện ra dạng <button> mặc định
     của Chromium — hộp xám, không rõ là nút bấm được. */
  border: var(--ui-resizer-line) solid var(--ui-divider);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  color: var(--ui-text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-search-toggle:hover {
  color: var(--ui-text-primary);
  border-color: var(--ux-border);
  background: var(--ui-hover);
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-search-toggle:focus-visible {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
  outline-offset: var(--ui-focus-ring-offset);
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-search-wrap { display: none; }
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar.is-compact-search-open .topbar-search-wrap {
  /* display:flex PHẢI có ở đây — quy tắc `.topbar-search-wrap { display:none }`
     ngay trên có cùng gốc data-layout-mode nên không tự nhường. Trước đây thiếu
     dòng này, bấm nút tìm kiếm ở compact mà ô nhập vẫn ẩn → "bấm không được". */
  display: flex;
  position: fixed;
  top: calc(var(--app-header-height) + var(--shell-gap));
  right: var(--layout-content-inline-end);
  width: min(calc(var(--ui-control-h-standard) * 12), calc(100dvw - var(--layout-content-inline-start) - var(--layout-content-inline-end)));
  min-width: 0;
  z-index: var(--layer-popover);
  /* Nền đục + viền sẵn có của .topbar-search-wrap là đủ để tách khỏi nội dung
     khi ô bung ra dạng popover. KHÔNG thêm box-shadow ở đây: quy tắc gốc trong
     styles.css đã khoá box-shadow của ô này ở mức ưu tiên ép, muốn có bóng phải
     đè lại cùng mức — chấp nhận không bóng để giữ trần ratchet. */
  background: var(--ux-overlay);
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-right {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
:is(html[data-layout-mode="medium"][data-view="calendar"], html[data-layout-mode="compact"][data-view="calendar"], html[data-layout-mode="tight"][data-view="calendar"]) .topbar-left { display: none; }
:is(html[data-layout-mode="medium"][data-view="calendar"], html[data-layout-mode="compact"][data-view="calendar"], html[data-layout-mode="tight"][data-view="calendar"]) .topbar {
  grid-template-columns: 0 auto minmax(0, 1fr);
}
:is(html[data-layout-mode="medium"][data-view="calendar"], html[data-layout-mode="compact"][data-view="calendar"], html[data-layout-mode="tight"][data-view="calendar"]) .topbar-right {
  justify-self: stretch;
  overflow: visible;
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) :is(.topbar-project-tabs, .topbar-dashboard-tabs) {
  max-width: 54vw;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-section-notics :is(.notics-eyebrow, .notics-heading-separator) { display: none; }
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-section-notics .notics-project-filter-btn { min-width: 0; max-width: 40vw; }

/* Six Project areas do not belong in a compressed segmented control. Wide
 * layouts retain the direct tabs; compact layouts expose one named control
 * and a full-width menu so every area stays discoverable and tappable. */
.project-tab-compact { display: none; }
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .topbar-project-tabs { display: none; }
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .project-tab-compact {
  position: static;
  display: inline-flex;
  min-width: 0;
}
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .project-tab-compact-toggle {
  min-width: 0;
  max-width: 42vw;
  height: var(--ui-header-control-size);
  padding-inline: var(--ui-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  border: var(--ui-resizer-line) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  font: inherit;
  cursor: pointer;
}
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .project-tab-compact-toggle > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .project-tab-compact-panel {
  position: fixed;
  top: calc(var(--app-header-height) + var(--shell-gap));
  right: var(--layout-content-inline-end);
  left: var(--layout-content-inline-start);
  width: auto;
  max-height: calc(100dvh - var(--app-header-height) - var(--shell-gap) * 2);
  padding: var(--ui-space-1);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-1);
  box-sizing: border-box;
  overflow-y: auto;
  background: var(--ux-overlay);
  z-index: calc(var(--layer-popover) + 1);
}
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .project-tab-compact-panel.hidden { display: none; }
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .project-tab-compact-panel [data-project-tab] {
  min-height: var(--ui-control-h-standard);
  padding-inline: var(--ui-space-2);
  border: var(--ui-resizer-line) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
:is(html[data-view="project"][data-layout-mode="compact"], html[data-view="project"][data-layout-mode="tight"]) .project-tab-compact-panel [data-project-tab].is-active {
  border-color: var(--ui-accent);
  background: var(--ui-selected);
  color: var(--ui-accent);
}

:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])[data-view="calendar"] #tagFilterPanel {
  position: fixed;
  top: calc(var(--app-header-height) + var(--shell-gap));
  right: var(--layout-content-inline-end);
  bottom: auto;
  left: var(--layout-content-inline-start);
  width: auto;
  max-height: calc(100dvh - var(--app-header-height) - var(--shell-gap) * 2);
  box-sizing: border-box;
  background: var(--ux-overlay);
  overflow-y: auto;
  z-index: calc(var(--layer-popover) + 1);
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])[data-view="calendar"] .view-mode-wrap { position: static; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])[data-view="calendar"] .widget-menu-panel.view-mode-panel {
  position: fixed;
  top: calc(var(--app-header-height) + var(--shell-gap));
  right: var(--layout-content-inline-end);
  left: auto;
  width: min(calc(var(--ui-control-h-standard) * 7), calc(100dvw - var(--layout-content-inline-start) - var(--layout-content-inline-end)));
  max-width: calc(100dvw - var(--layout-content-inline-start) - var(--layout-content-inline-end));
  box-sizing: border-box;
  background: var(--ux-overlay);
  z-index: calc(var(--layer-popover) + 1);
}

/* Week remains a Week because it is the user's selected view. On a constrained
 * canvas it stops compressing seven calendar cards below readable min-content:
 * the established desktop/browser pattern is an intentional horizontal
 * timeline, with native wheel/trackpad/touch scrolling and stable card text. */
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .grid[data-view-mode="week"] {
  grid-template-columns: repeat(var(--day-count, 7), minmax(var(--dt-layout-calendar-compact-day-min-width), 1fr));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-gutter: stable both-edges;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .grid[data-view-mode="week"] > .day-col {
  scroll-snap-align: start;
}

/* Month uses the same data and preserves the seven-day matrix. Its smaller
 * card density gets a smaller minimum than Week, while preventing event chips
 * and task text from collapsing into vertical fragments at 125–150%. */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .grid.multi-week {
  grid-template-columns: var(--rail-w) repeat(var(--day-count, 7), minmax(var(--dt-layout-calendar-compact-month-day-min-width), 1fr));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-gutter: stable both-edges;
}

/* Chữ lớn chỉ thay typography. Quyết định hai cột/hai hàng thuộc hoàn toàn về
   container query của bề ngang thật; không được ép mọi workspace thành list
   phía trên + content phía dưới, vì đó là nguyên nhân QuickNote/Notics chỉ còn
   thấy hai dòng bộ lọc ở 150%. */

:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .project-weekly-head {
  height: auto;
  min-height: var(--ui-size-touch);
  flex-wrap: wrap;
  padding-block: var(--ui-space-1-5);
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .project-weekly-nav {
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 0;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .project-weekly-nav-btn.is-today { min-width: 0; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .project-weekly-card-head {
  align-items: center;
  flex-wrap: nowrap;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .project-weekly-card-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .project-weekly-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* QuickNote, Painting, AntiScreenshot: ở 60% màn hình (~850px container),
 * chuyển panel lọc lên hàng trên và đẩy danh sách ghi chú / bản vẽ xuống dưới
 * để phần gallery chiếm trọn bề ngang, không để lộ khoảng trống. */
@container workspace-layout (max-width: 900px) {
  .antiscreenshot-page:not(.is-list-collapsed) .notics-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(80px, 1.8fr) minmax(0, 3.2fr);
  }
  .antiscreenshot-page .notics-resizer { display: none; }
}

/* ---- Cài đặt: thanh nav trái chỉ thu về icon khi cửa sổ THỰC SỰ hẹp -------
   Chỉ `data-layout-mode` compact/tight (đo bề rộng dùng được thật, đã chia
   hệ số mức Lớn) mới thu — xem khối bên dưới. */
@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: var(--ui-rail-w) minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .ux-pane .settings-nav-item { grid-template-columns: 1fr; justify-items: center; padding-inline: var(--ui-space-1); }
  :is(.settings-nav-copy, .settings-sidebar-label,
      .settings-account-shortcut .profile-copy, .settings-account-shortcut .menu-action-arrow) { display: none; }
  .settings-account-shortcut { justify-content: center; }
}

/* Popup soạn thảo (Notebook / QuickNote / AntiPaint): ở cửa sổ hẹp / chữ lớn
   phủ toàn khung thay vì chừa 4% viền scrim khó bấm — người dùng thoát bằng
   nút × trong header (title="Đóng (Esc)") hoặc phím Esc. */
@media (max-width: 820px) {
  :is(.notespeed-modal .notespeed-modal-panel, #projectNotePopup .pnp-card) {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }
  :is(#noticsEditorExpandBtn, #pnpExpandBtn) { display: none; }
}

/* Cùng quyết định bố cục theo usable width: compact/tight phải hoạt động dù
   viewport vật lý rộng nhưng 125% đã làm giảm sức chứa chữ. */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-layout {
  grid-template-columns: var(--ui-rail-w) minmax(0, 1fr);
}

:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) :is(
  .settings-nav-copy, .settings-sidebar-label,
  .settings-account-shortcut .profile-copy,
  .settings-account-shortcut .menu-action-arrow
) { display: none; }
/* Chỉ còn avatar: nút tài khoản về đúng cỡ control md (đo 01/10: 37,6px lệch thang). */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-account-shortcut {
  box-sizing: border-box;
  height: var(--ui-size-md);
  min-height: var(--ui-size-md);
  padding-block: 0;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-nav-item {
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--ui-space-1);
}
/* Cột thu icon = --ui-rail-w (48). Đệm ngang 8×2 + lề mục 4×2 chỉ chừa 23px cho
   mục — dưới vùng bấm 24 (WCAG 2.5.8). Đệm 4 → mục 32 = size.md (AT-UI 2026). */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-sidebar {
  padding-inline: var(--ui-space-1);
}

/* Lưới 2 cột của thẻ Cài đặt sập về 1 cột khi cửa sổ hẹp (không phải chỉ vì
   125%) — cửa sổ rộng ở 125% vẫn giữ 2 cột. */

/* Thẻ "Lịch làm việc": hàng nhãn-bên-trái / điều khiển-bên-phải chỉ đứng được
   khi còn đủ bề ngang. Ở compact/tight — và ở chữ 125% khi cửa sổ không rộng —
   cụm 7 chip thứ trong tuần hoặc cặp ô "Từ → Đến" sẽ đẩy nhãn co lại tới mức
   không đọc được, nên xếp dọc: nhãn một dòng, điều khiển dòng dưới. */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-field-row:has(.weekdays-chips, .time-range-field) {
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-space-1);
  padding-top: var(--ui-space-1);
  padding-bottom: var(--ui-space-1);
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-field-row .weekdays-chips {
  flex-wrap: wrap;
}

html[data-layout-mode="compact"] :is(.overlay)[data-overlay-kind="modal"] {
  padding: var(--ui-space-2);
}
html[data-layout-mode="tight"] :is(.overlay)[data-overlay-kind="modal"] {
  padding: 0;
}
html[data-layout-mode="tight"] :is(.overlay)[data-overlay-kind="modal"] > :is(
  .overlay-panel) {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  border-radius: 0;
}

:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) :is(.notespeed-modal .notespeed-modal-panel, #projectNotePopup .pnp-card) {
  width: 100%;
  height: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) :is(#noticsEditorExpandBtn, #pnpExpandBtn) { display: none; }
/* ---- AntiScreenshot / AntiPaint: thanh công cụ editor ở hẹp / chữ lớn ----
   flex-wrap: wrap làm thanh công cụ nở thành 4–5 hàng, ăn hết chỗ canvas.
   Cuộn NGANG một hàng thay vì gói: mọi công cụ vẫn tới được, canvas giữ chiều
   cao. Đây là cách Figma / Photopea xử lý ở màn hình hẹp. */
@media (max-width: 900px) {
  .antiscreenshot-toolbar,
  .antiscreenshot-toolbar-leading,
  .antiscreenshot-toolbar-trailing {
    flex-wrap: nowrap;
  }
  .antiscreenshot-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .antiscreenshot-toolbar::-webkit-scrollbar { height: 0; }
  .antiscreenshot-toolbar-leading,
  .antiscreenshot-toolbar-trailing { flex: 0 0 auto; }
}

/* ---- Kế hoạch tuần (Project): 2 cột note cạnh nhau vỡ chữ ở hẹp/125% ----
   .project-weekly-grid mặc định `1fr 1fr` không có min-width → mỗi cột ~200px
   ở 125%, "DỰ ÁN GENCO3" xuống dòng mỗi 2 chữ. Xếp chồng 1 cột + cho grid
   cuộn dọc khi container hẹp; card tự cao theo nội dung. */
@container workspace-layout (max-width: 700px) {
  .project-weekly-grid:not(.is-single-column) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(240px, 1fr));
    grid-auto-rows: minmax(220px, auto);
    gap: var(--ui-space-3);
    overflow-y: auto;
  }
  .project-weekly-grid:not(.is-single-column) .project-weekly-card {
    height: auto;
    min-height: var(--dt-component-workspace-weekly-card-min-height);
  }
}

/* Breadcrumb topbar Project ("PROJECT / <tên>"): ở chữ lớn nó xuống dòng lộn
   xộn trong header cao cố định. Ẩn eyebrow + dấu phân cách như đã làm cho
   Notebook — icon rail bên trái đã cho biết đang ở module nào. */

@media (max-width: 760px) {
  .topbar-section-project :is(.notics-eyebrow, .notics-heading-separator) { display: none; }
}

/* =====================================================================
   WAVE 2–4 · vòng 4 — lỗi UAT cụ thể ở cửa sổ hẹp (ảnh BA gửi 30/08)
   Bốn bề mặt editor/board vẫn tư duy một-hàng-desktop khi bề ngang thật
   xuống compact/tight. Contract: xếp lại theo hàng, cụm nút cuộn NGANG
   thay vì space-between kéo giãn, header list phải ĐỤC.
   ===================================================================== */

/* ---- 1. QuickNote editor: tiêu đề bị "thẻ dự án" + 8 nút icon ép còn vài
   ký tự. Xuống 2 hàng: tiêu đề + chip dự án ở hàng 1, cụm nút hàng 2. ---- */

/* ---- 3. AntiScreenshot: nút chụp trên .topbar ("Tạo mới / Toàn màn hình /
   Chụp vùng") có nhãn chữ nên tràn khỏi header ở cửa sổ hẹp. Bỏ nhãn, còn
   icon (padding 0 9px của khối header giữ nút gần vuông); tooltip giữ nguyên. */
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-actions .antiscreenshot-capture-btn .antiscreenshot-capture-main span {
  display: none;
}
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .topbar-actions .antiscreenshot-capture-btn .antiscreenshot-capture-main {
  gap: 0;
}
@media (max-width: 900px) {
  .topbar-actions .antiscreenshot-capture-btn .antiscreenshot-capture-main span { display: none; }
  .topbar-actions .antiscreenshot-capture-btn .antiscreenshot-capture-main { gap: 0; }
}

/* ---- 4. Project · Gantt/Milestone: `.gantt-label-rows` được JS gán
   `transform: translateY(-scrollTop)` để bám cuộn canvas. Cột `.gantt-labels`
   `overflow:hidden` clip ở MÉP CỘT (tính cả vùng head), không phải ở mép vùng
   hàng — nên khi cuộn, hàng trôi lên đè "MILESTONE / CÔNG VIỆC". Ba lớp khoá:
   (a) vùng hàng tự clip trong phần của nó; (b) head đục + nằm trên;
   (c) head không xuống dòng khi cột hẹp. Không phụ thuộc kích thước. ---- */
.gantt-labels {
  background: var(--ux-sunken);
}
.gantt-label-rows {
  overflow: hidden;
}
.gantt-label-head {
  position: relative;
  z-index: var(--ui-layer-sticky);
  background: var(--ux-sunken);
  white-space: nowrap;
  overflow: hidden;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .gantt {
  --gantt-label-w: 208px;
}

/* ---- 5. QuickNote/AntiPaint/AntiScreenshot màn hình chính: lưới thẻ đè cột
   danh sách/dự án.

   GỐC: `.notics-body` là grid 2 track. Track 1 để `auto` (bám `width` của cột
   để animate mượt). Khi cột THU GỌN (`.is-ws-collapsed`) hoặc PEEK, style giữ
   `min-width: 210px` trên `.ws-list` / `.notics-col-head-tabs` chống dồn dòng.
   Track `auto` bám max-content → bị 210px đó thổi rộng ra ~210–280px, trong
   khi cột chỉ hiện rail 44px (absolute) — phần còn lại trong suốt, lưới thẻ
   (track 2) bị đẩy đè lên nội dung cột trái.

   SỬA: ép track 1 thành bề rộng RÕ RÀNG theo trạng thái, không để `auto` bám
   min-width bên trong; và bỏ min-width đó (cột đã `overflow:hidden`). ---- */
.antiscreenshot-page.is-list-collapsed .notics-body {
  grid-template-columns: minmax(0, 1fr);
}
/* Lưới thẻ + cụm masonry bị khoá trong track 2, không tràn sang track 1.
   `.notics-body` overflow:hidden: grid 2 track, item không đè nhau — chốt cứng
   để KHÔNG gì trong trang vẽ ra ngoài mép trang, kể cả khi keepMasonry tính
   sai số cột. */
.antiscreenshot-page .notics-body {
  overflow: hidden;
}
:is(.notespeed-gallery-col, .notespeed-all-grid) {
  min-width: 0;
  overflow-x: hidden;
}
.notespeed-gallery-col {
  contain: layout;
}

/* Shell compact/tight đã tính theo bề rộng nội dung hiệu dụng (viewport trừ
   rail/chrome và có xét UI scale). Dùng contract này làm nguồn quyết định cuối
   cùng để list/gallery không còn giữ hai cột ở Snap hoặc 125%, kể cả khi
   container riêng vẫn lớn hơn breakpoint 460px cũ. Trạng thái collapsed/peek
   giữ layout rail riêng ở trên và không đi qua nhánh xếp dọc này. */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])
  .antiscreenshot-page:not(.is-list-collapsed)
  .notics-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(calc(var(--ui-control-h-standard) * 2), 2fr) minmax(0, 3fr);
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])
  .antiscreenshot-page
  .notics-resizer {
  display: none;
}
/* Cụm thẻ canh GIỮA khung (cả Notics/NoteBook lẫn QuickNote/Painting). `safe`
   để khi khung hẹp hơn cụm thì lùi về canh đầu thay vì đẩy tràn 2 phía đè
   cột danh sách — nhưng `.km-col max-width:100%` bên dưới đã chặn tràn nên
   thực tế luôn canh giữa. */
.notespeed-all-masonry {
  justify-content: safe center;
  max-width: 100%;
}
/* keepMasonry đặt inline `style.width` trên .km-col; `max-width` THẮNG cả
   inline width, nên cột hẹp không để một thẻ 232px thò ra ngoài khung. */
.notespeed-all-grid .km-col {
  max-width: 100%;
}

/* Dạng xem chi tiết (bảng): ẩn cột theo bề ngang khả dụng (data-layout-mode,
   contract ở responsiveMode.js) thay vì bóp mọi cột hay cuộn ngang. Tiêu đề +
   Nội dung luôn giữ (ưu tiên đọc). Thứ tự rụng (2026-09-13, đổi so với bản cũ
   — cũ rụng Cập nhật/Dự án trước rồi mới tới Ngày tạo, ngược với chủ đích cột
   "Ngày tạo" đứng cuối vì ít dùng nhất — xem NOTICS_NOTE_COLUMNS): Ngày tạo →
   Dự án → (Hạng mục + Cập nhật lần cuối), giữ Hạng mục/Cập nhật lâu hơn vì đó
   là 2 trục quét mắt nhiều nhất khi duyệt danh sách gộp nhiều nguồn. */
html[data-layout-mode="medium"] .notespeed-table {
  --note-table-pin-width: 4%;
  --note-table-title-width: 25%;
  --note-table-preview-width: 30%;
  --note-table-project-width: 12%;
  --note-table-section-width: 15%;
  --note-table-updated-width: 14%;
}
html[data-layout-mode="medium"] :is(.notespeed-th, .notespeed-row-cell).col-created {
  display: none;
}
html[data-layout-mode="compact"] .notespeed-table {
  --note-table-pin-width: 5%;
  --note-table-title-width: 30%;
  --note-table-preview-width: 33%;
  --note-table-section-width: 18%;
  --note-table-updated-width: 14%;
}
html[data-layout-mode="compact"] :is(.notespeed-th, .notespeed-row-cell):is(.col-created, .col-project) {
  display: none;
}
html[data-layout-mode="tight"] .notespeed-table {
  --note-table-pin-width: 6%;
  --note-table-title-width: 40%;
  --note-table-preview-width: 54%;
}
html[data-layout-mode="tight"] :is(.notespeed-th, .notespeed-row-cell):is(.col-created, .col-project, .col-section, .col-updated) {
  display: none;
}

/* ---- 7. Header ở khung rộng: cụm giữa (ô tìm / tab Project / filter
   Dashboard) canh GIỮA CỬA SỔ, không lệch phải theo bề rộng cụm trái. Grid
   3 track `1fr auto 1fr` đã đối xứng; ép thêm justify-self để chắc, và cho
   tab Project/Dashboard tự canh giữa track. ---- */
html[data-layout-mode="wide"] .topbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
html[data-layout-mode="wide"] .topbar-center {
  justify-self: center;
  margin-inline: auto;
  /* Slide the search cluster right so it centres over the content area — where
     its results render — instead of the whole window. translateX keeps the
     side grid tracks at natural width (a long breadcrumb is never clipped);
     topbarSearchAnchor.js keeps --topbar-center-shift in sync with the list
     menu show/hide/resize and clamps it clear of the right-hand buttons. */
  transform: translateX(var(--topbar-center-shift, 0px));
}
html[data-layout-mode="wide"] :is(.topbar-project-tabs, .topbar-dashboard-tabs) {
  margin-inline: auto;
}
/* Nút "Đồng bộ ngay" ở cuối nav rail — chỉ hiện với tài khoản Thường (đồng bộ
   thủ công). Dùng chung khuôn .nav-rail-item; chỉ thêm quay khi đang chạy. */
.nav-rail-sync.is-busy .nav-rail-icon svg {
  animation: sync-spin var(--ui-duration-spin) linear infinite;
}
.nav-rail-sync.is-error {
  color: var(--ui-danger);
}

/* QuickNote / Painting — thẻ lọc & tên dự án: số đếm thành badge canh PHẢI
   TRÊN CÙNG DÒNG với tên (trước đây xuống dòng dưới). Chỉ `.ws-list--navcards`
   (QuickNote/AntiPaint); `.ws-list--cards` của AntiScreenshot giữ nguyên. */
.ws-list--navcards .ws-item {
  align-items: center;   /* chấm màu + nội dung canh giữa theo chiều dọc */
}
.ws-list--navcards .ws-item-dot {
  margin-top: 0;
}
.ws-list--navcards .ws-item-body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
}
.ws-list--navcards .ws-item-title {
  flex: 1 1 auto;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-list--navcards .ws-item-meta {
  flex: 0 0 auto;
  overflow: visible;
}
.ws-list--navcards .ws-list-group-count {
  /* Danh sách phẳng: số đếm là chữ số mờ trần (kiểu Todoist/Notion), không
     bọc pill — pill trên mỗi hàng lại thành một chấm nhiễu nữa. Cả 2 cùng
     inline-flex + justify-content: flex-end để glyph số căn thẳng lề phải. */
  min-width: 1.25em;
  color: var(--ui-text-muted);
  font-size: var(--list-sub-fs);
  font-weight: var(--fw-normal);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Notebook (Notics): thẻ "Dự án / Hạng mục" — trên thẻ ghi chú (.notics-note-path)
   và trên header editor (#noticsEditorPath). Cả hai là chip nhỏ dễ nhìn. */
.notics-note-path,
.notics-editor-path {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: var(--ui-resizer-line) var(--ui-space-2);
  border-radius: var(--dt-dimension-radius-full);
  background: var(--ux-active);
  color: var(--ui-accent);
  font-size: var(--list-sub-fs, var(--fs-caption));
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notics-editor-path.hidden { display: none; }

/* #noticsEditorPath giờ là <button> (2026-09-13) — bấm mở thẳng bảng chọn
   dự án/hạng mục, đúng nút "moveNoteTo" đã có, không xây picker riêng.
   Reset dáng button mặc định để vẫn giữ hình chip như cũ, chỉ thêm gợi ý
   bấm được (con trỏ + nhấn accent khi hover/focus). */
button.notics-editor-path {
  border: none;
  cursor: pointer;
  transition: background-color var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
button.notics-editor-path:hover,
button.notics-editor-path:focus-visible {
  background: var(--ux-hover);
  color: var(--ui-accent);
  outline: none;
}

/* ---- 8. Cài đặt → thanh nav trái: glyph icon lệch trong hộp nền. Text glyph
   ("Aa") có baseline đẩy lệch; SVG cần display:block. Ở chế độ chỉ-icon
   (nav thu gọn) căn giữa cả ô. ---- */
.settings-nav-icon {
  line-height: 1;
}
.settings-nav-icon svg {
  display: block;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-nav-item {
  justify-items: center;
  place-content: center;
}

/* ---- 6. Project · tab Milestone/Kế hoạch: header "TÊN DỰ ÁN · Ngày/Tuần/
   Tháng · + Milestone" là `.notics-col-head` (height CỨNG 44px, flex nowrap).
   Ở cột hẹp (layout compact stack dọc) toolbar tràn ngang, và chuỗi chiều cao
   xuống `.gantt` bị mảnh — gantt bò lên đè header.
   Sửa: header cao theo nội dung + cho xuống dòng; `.notics-plan-body` thành
   flex column thật để `.gantt` nhận chiều cao từ flex, không phụ thuộc
   `height:100%` của cha `auto`. ---- */
.notics-plan-body {
  display: flex;
  flex-direction: column;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .notics-plan-head,
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .project-tab-panel .notics-col-head.notics-plan-head {
  height: auto;
  min-height: var(--ui-header-h);
  flex-wrap: wrap;
  row-gap: var(--ui-space-1);
  padding-block: var(--ui-space-1);
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .notics-plan-toolbar {
  flex-wrap: wrap;
}
@media (max-width: 620px) {
  .notics-plan-head {
    height: auto;
    min-height: var(--ui-header-h);
    flex-wrap: wrap;
    row-gap: var(--ui-space-1);
    padding-block: var(--ui-space-1);
  }
  .notics-plan-toolbar { flex-wrap: wrap; }
}

/* LAPTOP 14" & SCALE 125%/150% REFLOW OPTIMIZATION (WCAG 2.2 Reflow 1.4.10)
 * Tối ưu hiển thị thích ứng cho Laptop 14" ở mức scale 125% (1536x864) và 150% (1280x720).
 * Bảo đảm popup soạn thảo và thanh điều khiển co giãn vừa vặn, không che khuất nội dung. */
@media (max-width: 1280px) {
  .topbar-actions {
    gap: var(--ui-space-1);
  }
  .topbar-right {
    overflow-x: hidden;
  }
  /* overflow-x: hidden kéo overflow-y thành auto: header sinh thanh cuộn dọc
     và cắt mất dropdown chọn tuần/dự án. Hai trang này đã tự co cụm nút ở
     các breakpoint nhỏ hơn, nên giữ tràn hiển thị như ở đó. */
  html:is([data-view="notics"], [data-view="calendar"]) .topbar-right { overflow: visible; }
  .grid {
    padding: var(--ui-space-2);
    gap: var(--ui-space-2);
  }
}

/* Topbar Lịch kiểu Google Calendar (BA 10/10/2026): tiêu đề trái nhường chỗ cho
   "Hôm nay ‹ › Tháng 10, 2026 ▾"; ô tìm thu về kính lúp ở MỌI khổ. Khổ rộng: bấm kính
   lúp (hoặc đang có chữ / đang lọc dự án) thì ô hiện tại chỗ; khổ hẹp: ô nổi như cũ.
   Bố cục lưới nằm ở @layer modules của styles.css. Đặt cuối legacy + độ ưu tiên
   (0,3,1) trở lên để thắng các luật ẩn/hiện theo khổ ở trên. */
html[data-view="calendar"] .topbar .topbar-left { display: none; }
/* Notebook (BA 10/10/2026): ô tìm cũng thu về kính lúp như Lịch; đang có chữ thì ô giữ hiện. */
html:is([data-view="calendar"], [data-view="notics"]) .topbar .topbar-search-toggle { display: inline-flex; }
html:is([data-view="calendar"], [data-view="notics"]) .topbar .topbar-search-wrap { display: none; }
html:is([data-view="calendar"], [data-view="notics"]) .topbar.is-compact-search-open .topbar-search-wrap,
html[data-view="notics"][data-layout-mode="wide"] .topbar:has(.topbar-search-input:not(:placeholder-shown)) .topbar-search-wrap,
html[data-view="calendar"][data-layout-mode="wide"] .topbar:is(:has(.topbar-search-input:not(:placeholder-shown)), :has(#calendarProjectFilterBtn.is-active)) .topbar-search-wrap {
  display: flex;
}
html[data-view="calendar"][data-layout-mode="wide"] .topbar:is(.is-compact-search-open, :has(.topbar-search-input:not(:placeholder-shown)), :has(#calendarProjectFilterBtn.is-active)) .topbar-search-toggle,
html[data-view="notics"][data-layout-mode="wide"] .topbar:is(.is-compact-search-open, :has(.topbar-search-input:not(:placeholder-shown))) .topbar-search-toggle {
  display: none;
}
} /* @layer legacy */

/* Khai báo từng là !important trong @layer legacy — chuyển sang layer cuối `overrides`
   (thắng mọi khai báo thường ở mọi layer, đúng như cờ important cũ), cùng selector, cùng
   thứ tự, cùng ngữ cảnh @media. Sinh tự động 01/10/2026 (KE-HOACH-DAT-CHUAN-QUOC-TE-UI GĐ B–E);
   thuộc tính ẩn/hiện/định vị giữ cờ important vì JS gắn nội tuyến. */
@layer overrides {
  body.is-pane-resizing, body.is-pane-resizing * { cursor: col-resize; user-select: none; }
  .notics-col > .pane-resizer, .project-col > .pane-resizer { width: var(--ui-resizer-hit); }
  @container workspace-layout (max-width: 460px) {
    .project-page:not(.is-sidebar-collapsed) .project-col-list { border-right: 0; }
  }
  @container workspace-layout (max-width: 460px) {
    .antiscreenshot-page.is-list-collapsed .notics-body, .project-page.is-sidebar-collapsed .project-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  }
  .topbar { gap: var(--ui-space-2); }
  .topbar :is( .notics-icon-btn, .notics-open-project-btn, .notics-project-filter-btn, .icon-btn, .picker-btn, .antiscreenshot-capture-btn, .antiscreenshot-zoom > button, .glass-icon-btn, .topbar-search-wrap ) { min-height: var(--ui-header-control-size); height: var(--ui-header-control-size); max-height: var(--ui-header-control-size); }
  .topbar :is(.notics-icon-btn, .notics-open-project-btn, .icon-btn, .glass-icon-btn) { width: var(--ui-header-control-size); padding: 0; }
  .topbar :is(.icon-btn, .notics-icon-btn, .notics-open-project-btn, .glass-icon-btn) svg { width: var(--ui-header-icon-size); height: var(--ui-header-icon-size); }
  .topbar .week-nav-cluster { height: var(--ui-header-control-size); min-height: var(--ui-header-control-size); padding: var(--ui-header-cluster-padding); border-radius: var(--dt-dimension-radius-full); }
  .topbar .week-nav-cluster .picker-wrap { align-items: center; height: 100%; min-height: 0; }
  .topbar .week-nav-cluster :is(.icon-btn, .picker-btn) { height: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); min-height: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); max-height: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); border-radius: var(--dt-dimension-radius-full); align-items: center; }
  .topbar .week-nav-cluster .icon-btn { width: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); border-radius: var(--ui-radius-circle); }
  .topbar .week-nav-cluster .picker-btn { border-radius: var(--dt-dimension-radius-full); align-items: center; }
  @media (max-width: 1040px) {
    .topbar { gap: var(--ui-space-1-5); }
  }
  @media (max-width: 1040px) {
    .topbar.is-compact-search-open .topbar-search-wrap { min-width: 0; }
  }
  @media (max-width: 760px) {
    .topbar-actions-notics .notics-btn-lock { padding: 0; }
  }
  
}