/* CanvasMark Studio — UI polish pass v3
   This layer intentionally sits after the legacy stylesheet. It keeps existing
   feature contracts intact while giving the product one coherent visual system. */

:root {
  --cm-font-ui: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cm-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --cm-ink: #17211d;
  --cm-ink-soft: #3f4c46;
  --cm-muted: #74817b;
  --cm-faint: #98a39e;
  --cm-line: #e6ebe8;
  --cm-line-strong: #d8e0dc;
  --cm-panel: #ffffff;
  --cm-panel-soft: #fbfcfb;
  --cm-surface: #f6f8f6;
  --cm-surface-strong: #eef3f0;
  --cm-canvas: #f8f8f5;
  --cm-canvas-dot: rgba(62, 82, 73, .12);
  --cm-accent: #0f6f55;
  --cm-accent-hover: #0a5b45;
  --cm-accent-soft: #e8f4ef;
  --cm-accent-softer: #f2f8f5;
  --cm-warning: #c89216;
  --cm-note: #fff3a9;
  --cm-note-head: #ffe98c;
  --cm-radius-xs: 8px;
  --cm-radius-sm: 10px;
  --cm-radius-md: 13px;
  --cm-radius-lg: 18px;
  --cm-shadow-float: 0 18px 48px rgba(27, 43, 36, .12), 0 4px 14px rgba(27, 43, 36, .06);
  --cm-shadow-card: 0 8px 24px rgba(27, 43, 36, .075), 0 1px 3px rgba(27, 43, 36, .045);
  --cm-shadow-card-hover: 0 14px 34px rgba(27, 43, 36, .11), 0 2px 6px rgba(27, 43, 36, .05);
  --sidebar-expanded: 272px;
  --sidebar-rail: 72px;
  --topbar-height: 72px;
  --ink: var(--cm-ink);
  --muted: var(--cm-muted);
  --line: var(--cm-line);
  --panel: var(--cm-panel);
  --accent: var(--cm-accent);
  --accent-hover: var(--cm-accent-hover);
  --accent-2: var(--cm-accent-soft);
  --surface: var(--cm-surface);
  --surface-strong: var(--cm-surface-strong);
  --canvas-bg: var(--cm-canvas);
  --shadow: var(--cm-shadow-float);
  --shadow-soft: var(--cm-shadow-card);
}

html, body, #app { font-family: var(--cm-font-ui); }
body { font-size: 14px; color: var(--cm-ink); letter-spacing: -.008em; }
button, input, textarea, select { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { background: #cfe8dd; color: var(--cm-ink); }

/* Density is real, persisted UI preference. */
html[data-density="comfortable"] { --cm-density-y: 1.12; --cm-card-pad: 18px; }
html[data-density="balanced"] { --cm-density-y: 1; --cm-card-pad: 15px; }
html[data-density="compact"] { --cm-density-y: .9; --cm-card-pad: 12px; }

.primary {
  min-height: 40px;
  border-radius: var(--cm-radius-sm);
  background: var(--cm-accent);
  border-color: var(--cm-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 720;
  letter-spacing: -.01em;
}
.primary:hover { background: var(--cm-accent-hover); border-color: var(--cm-accent-hover); }
.icon-button { border-color: var(--cm-line); border-radius: var(--cm-radius-sm); background: var(--cm-panel); }
.icon-button:hover { background: var(--cm-surface); border-color: var(--cm-line-strong); color: var(--cm-ink); }
.eyebrow { color: var(--cm-accent); font-size: 10px; line-height: 1.2; letter-spacing: .13em; font-weight: 800; text-transform: uppercase; }
.ui-icon { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Workspace shell
   -------------------------------------------------------------------------- */
.workspace-shell { background: var(--cm-canvas); }
.sidebar {
  background: #fcfdfc;
  border-right-color: var(--cm-line);
  box-shadow: 1px 0 0 rgba(22, 42, 34, .01);
}
.brand-lockup.compact {
  height: 70px;
  padding: 0 18px;
  gap: 11px;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -.025em;
}
.brand-lockup.compact .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #0f7256, #0c6149);
  box-shadow: 0 5px 14px rgba(15, 111, 85, .18);
  font-size: 10px;
}
.workspace-button {
  min-height: 48px;
  margin: 0 14px 14px;
  padding: 9px 12px;
  border-color: var(--cm-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(29, 45, 38, .025);
}
.workspace-button:hover { background: var(--cm-panel-soft); border-color: var(--cm-line-strong); }
.workspace-button span { font-size: 12.5px; font-weight: 720; }
.workspace-button small { color: var(--cm-muted); font-size: 9px; letter-spacing: .085em; }
.search-wrap { margin: 0 14px 18px; }
.search-wrap > span { top: 11px; left: 12px; color: var(--cm-faint); }
.search-wrap > input {
  height: 42px;
  padding-left: 36px;
  border: 1px solid var(--cm-line);
  border-radius: 11px;
  background: #f8faf9;
  color: var(--cm-ink);
  font-size: 12.5px;
}
.search-wrap > input:focus { background: #fff; border-color: #b9d2c7; box-shadow: 0 0 0 3px rgba(15, 111, 85, .07); }
.sidebar-primary { padding: 0 10px 11px; margin-bottom: 9px; }
.sidebar-nav { padding-inline: 10px; gap: 3px; }
.sidebar-nav button, .sidebar-footer > button {
  min-height: 42px;
  padding: 0 11px;
  gap: 11px;
  border-radius: 10px;
  color: #53615b;
  font-size: 13px;
  font-weight: 620;
}
.sidebar-nav button:hover, .sidebar-footer > button:hover { background: #f2f6f3; color: var(--cm-ink); }
.sidebar-nav button:focus-visible, .board-list button:focus-visible { outline-offset: -1px; }
.sidebar-nav .nav-icon, .sidebar-footer .nav-icon { width: 19px; height: 19px; color: #7b8882; }
.sidebar-heading, .sidebar-section-title {
  padding: 13px 13px 7px 19px;
  color: #8b9791;
  font-size: 10px;
  letter-spacing: .12em;
}
.sidebar-heading button { width: 30px; height: 30px; border-radius: 8px; }
.board-list { padding: 0 10px; gap: 3px; }
.board-list button {
  min-height: 42px;
  height: auto;
  padding: 7px 10px;
  border-radius: 10px;
  color: #53615b;
}
.board-list button > span { width: 22px; font-size: 15px; }
.board-list em { font-size: 12.5px; font-weight: 570; }
.board-list button.active {
  background: #eaf4ef;
  color: #075f48;
  box-shadow: inset 3px 0 0 #0f7559;
}
.favorites-list:not(:empty)::before {
  content: "Favorites";
  display: block;
  padding: 9px 9px 5px;
  color: #9aa49f;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.sidebar-section { margin-top: 11px; }
.nav-count { min-width: 22px; padding: 3px 7px !important; background: #eff3f1 !important; color: #66736d !important; font-size: 9px !important; }
.sidebar-footer { padding: 10px 10px 13px; background: #fcfdfc; }
.sidebar-footer .user-chip {
  min-height: 54px;
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 11px;
}
.sidebar-footer .user-chip:hover { background: #f2f6f3; }
.user-chip > span, .avatar { width: 32px; height: 32px; background: #dceae4; color: #0a6049; font-size: 11px; }
.user-chip strong { font-size: 12px; }
.user-chip small { margin-top: 2px; font-size: 10px; }

/* Collapsed navigation is an intentional rail, not a clipped sidebar. */
.workspace-shell.sidebar-collapsed .sidebar .brand-lockup { height: 68px; }
.workspace-shell.sidebar-collapsed .sidebar-primary,
.workspace-shell.sidebar-collapsed .board-list,
.workspace-shell.sidebar-collapsed .sidebar-footer { padding-inline: 12px; }
.workspace-shell.sidebar-collapsed .sidebar-primary button,
.workspace-shell.sidebar-collapsed .board-list button,
.workspace-shell.sidebar-collapsed .sidebar-footer > button {
  width: 48px;
  min-width: 48px;
  height: 46px;
  min-height: 46px;
  border-radius: 11px;
}
.workspace-shell.sidebar-collapsed .sidebar-primary button:hover,
.workspace-shell.sidebar-collapsed .board-list button:hover,
.workspace-shell.sidebar-collapsed .sidebar-footer > button:hover { background: #eef4f1; }
.workspace-shell.sidebar-collapsed .board-list button.active { box-shadow: none; background: #e6f2ed; }
.workspace-shell.sidebar-collapsed .sidebar-footer .nav-count { right: 3px; top: 3px; }

/* --------------------------------------------------------------------------
   Board header
   -------------------------------------------------------------------------- */
.board-shell { grid-template-rows: var(--topbar-height) minmax(0, 1fr); }
.topbar {
  height: var(--topbar-height);
  padding: 0 18px;
  gap: 16px;
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--cm-line);
  backdrop-filter: blur(18px) saturate(1.1);
}
.topbar-left, .topbar-actions { flex-basis: 340px; }
#sidebar-toggle { width: 42px; height: 42px; }
.board-title-wrap { min-width: 0; gap: 8px; }
.board-icon {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f3f7f5;
  color: var(--cm-accent);
  font-size: 17px;
}
.board-icon:hover { background: #edf4f0; border-color: #dce6e1; }
.board-identity-copy { display: grid; align-items: center; min-width: 0; }
.board-title-wrap input {
  width: min(390px, 34vw);
  max-width: 100%;
  padding: 2px 5px;
  color: var(--cm-ink);
  font-size: 16px;
  font-weight: 745;
  line-height: 1.22;
  letter-spacing: -.026em;
}
.board-title-wrap input:hover { background: transparent; }
.board-identity-copy > span {
  padding-left: 5px;
  margin-top: 1px;
  color: var(--cm-muted);
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.favorite-button { width: 34px; height: 34px; }
.view-switcher {
  height: 44px;
  padding: 4px;
  gap: 3px;
  border-color: #e0e6e3;
  border-radius: 12px;
  background: #f1f4f2;
}
.view-switcher button {
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  color: #6b7771;
  font-size: 12px;
  font-weight: 650;
}
.view-switcher button.active {
  color: var(--cm-ink);
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 45, 38, .08), 0 0 0 1px rgba(225, 232, 228, .8);
}
.view-switcher button.active .ui-icon { color: var(--cm-accent); }
.view-tools-toggle { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; justify-content: center; }
.topbar-actions { gap: 8px; }
.topbar-actions > #notifications-button, .more-menu-wrap > button { width: 42px; min-width: 42px; height: 42px; }
.add-menu-toggle, .share-action { height: 42px !important; padding-inline: 15px !important; border-radius: 10px !important; font-size: 12.5px !important; }
.share-action { background: #fff !important; }
.topbar-menu { top: 50px; min-width: 244px; padding: 7px; border-radius: 13px; box-shadow: var(--cm-shadow-float); }
.topbar-menu button { min-height: 42px; padding: 8px 10px; border-radius: 9px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Add palette
   -------------------------------------------------------------------------- */
.add-menu-wrap { position: relative; }
.topbar .tool-rail.add-menu {
  top: 50px;
  right: 0;
  width: min(720px, calc(100vw - 110px));
  max-height: min(680px, calc(100vh - 100px));
  display: block;
  padding: 0;
  border: 1px solid var(--cm-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 26px 70px rgba(24, 40, 33, .18), 0 8px 24px rgba(24, 40, 33, .08);
  overflow: auto;
}
.add-menu-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: center;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--cm-line);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
}
.add-menu-head > div { display: grid; gap: 2px; }
.add-menu-head > div > strong { font-size: 18px; font-weight: 735; letter-spacing: -.03em; }
.add-menu-head > div > small { color: var(--cm-muted); font-size: 11px; line-height: 1.45; }
.add-menu-head label {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--cm-line);
  border-radius: 10px;
  background: #f7f9f8;
  color: var(--cm-muted);
}
.add-menu-head input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--cm-ink); font-size: 12px; }
.add-menu-group { margin: 14px 16px 0; padding: 14px; border: 1px solid var(--cm-line); border-radius: 13px; background: #fbfcfb; }
.add-menu-group:last-child { margin-bottom: 16px; }
.add-menu-group.add-menu-primary { background: linear-gradient(180deg, #f8fcfa, #f5faf7); border-color: #dce8e2; }
.add-menu-group h3 { margin: 0 0 10px; padding: 0; color: #819089; font-size: 9px; font-weight: 820; letter-spacing: .13em; }
.add-menu-group > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.add-menu-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.add-menu-secondary-grid .add-menu-advanced { grid-column: 1 / -1; }
.topbar .tool-rail.add-menu .add-menu-primary button {
  min-height: 88px;
  height: auto;
  padding: 12px 10px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  text-align: left;
}
.topbar .tool-rail.add-menu button > span { display: grid; justify-items: start; gap: 2px; max-width: 100%; }
.topbar .tool-rail.add-menu button span strong { color: var(--cm-ink); font-size: 12px; font-weight: 720; }
.topbar .tool-rail.add-menu button span small { color: var(--cm-muted); font-size: 9.5px; font-weight: 520; }
.topbar .tool-rail.add-menu .add-menu-primary button .ui-icon { width: 22px; height: 22px; color: #66766e; }
.topbar .tool-rail.add-menu .add-menu-primary button:hover { background: #fff; border-color: #dbe3df; box-shadow: 0 4px 14px rgba(28, 45, 38, .06); }
.topbar .tool-rail.add-menu .add-menu-primary button:hover .ui-icon { color: var(--cm-accent); }
.add-menu-secondary-grid .add-menu-group > div { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.topbar .tool-rail.add-menu .add-menu-secondary-grid button {
  height: 68px;
  padding: 8px 5px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  text-align: center;
}
.topbar .tool-rail.add-menu .add-menu-secondary-grid button > span { display: block; }
.topbar .tool-rail.add-menu .add-menu-secondary-grid button span strong { font-size: 10.5px; }
.topbar .tool-rail.add-menu button[hidden], .add-menu-group[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Canvas and object language
   -------------------------------------------------------------------------- */
.canvas { background-color: var(--cm-canvas); background-image: radial-gradient(var(--cm-canvas-dot) .75px, transparent .8px); background-size: 24px 24px; }
.canvas-hint {
  bottom: 16px;
  padding: 6px 10px;
  background: rgba(255,255,255,.84);
  color: #8b9691;
  border: 1px solid rgba(224,230,227,.9);
  border-radius: 9px;
  font-size: 10.5px;
  backdrop-filter: blur(10px);
}
.canvas-controls {
  right: 18px;
  bottom: 18px;
  height: 48px;
  padding: 5px;
  border-color: var(--cm-line);
  border-radius: 13px;
  box-shadow: 0 8px 26px rgba(26, 43, 36, .11);
}
.canvas-controls button { width: 36px; min-width: 36px; height: 36px; border-radius: 8px; }
.canvas-controls span#zoom-label { min-width: 52px; font-size: 11px; font-weight: 720; }
.minimap { left: 18px; bottom: 18px; border-radius: 12px; opacity: .94; }
.selection-toolbar { top: calc(var(--topbar-height) + 13px); padding: 6px 7px; border-radius: 12px; box-shadow: 0 12px 34px rgba(27,43,36,.13); }
.selection-toolbar button { min-height: 32px; font-size: 10.5px; }

.canvas-item {
  border-color: #dfe6e2;
  border-radius: 14px;
  box-shadow: var(--cm-shadow-card);
  grid-template-rows: 46px minmax(0, 1fr);
  transition: box-shadow .18s ease, border-color .18s ease, outline-color .18s ease;
}
.canvas-item:hover { border-color: #d5ded9; box-shadow: var(--cm-shadow-card-hover); }
.canvas-item.selected { outline: 2px solid #1b7f63; outline-offset: 3px; box-shadow: 0 16px 36px rgba(15,111,85,.15); }
.item-header {
  height: 46px;
  padding: 0 10px;
  gap: 8px;
  border-bottom-color: #edf1ef;
  background: rgba(251,252,251,.95);
}
.item-kind { width: 30px; height: 30px; border-radius: 9px; background: #f0f4f2; color: #6a7871; }
.item-title { font-size: 12.5px; font-weight: 730; letter-spacing: -.015em; }
.item-actions button { width: 30px; height: 30px; border-radius: 8px; }
.item-body { color: var(--cm-ink-soft); }
.type-note { background: #fff5b8; border-color: #e9db93; }
.type-note .item-header { background: #ffec91; border-bottom-color: #e5d173; }
.type-note .item-kind { background: rgba(255,255,255,.42); color: #655a22; }
.note-wrap { gap: 0; }
.note-wrap textarea, .note-editor {
  padding: 15px 16px 12px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1.52 !important;
  color: #4a411f !important;
  background: transparent !important;
}
.item-date-row { min-height: 32px; padding: 5px 12px 6px; border-top: 1px solid rgba(111,98,43,.14); color: #776c3d; }
.item-date-row input { font-size: 10px; }
.note-color { top: 10px; right: 42px; }

.markdown-file-card {
  height: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  border: 0;
  background: linear-gradient(145deg, #fff 30%, #f7faf8);
  text-align: left;
}
.markdown-file-card:hover { background: linear-gradient(145deg, #fff, #f1f7f4); }
.markdown-file-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 11px;
  background: #173d32;
  color: #fff;
  box-shadow: 0 6px 18px rgba(23,61,50,.14);
}
.markdown-file-icon b { font-size: 13px; line-height: 1; }
.markdown-file-icon small { margin-top: 2px; color: #cce0d7; font-size: 8px; }
.markdown-file-copy { min-width: 0; display: grid; gap: 4px; }
.markdown-file-copy strong { color: var(--cm-ink); font-size: 13px; font-weight: 735; }
.markdown-file-copy > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--cm-muted); font-size: 10.5px; line-height: 1.45; }
.markdown-file-copy small { color: #9aa39f; font-size: 9px; }
.markdown-open-label { align-self: center; color: var(--cm-accent); font-size: 10px; font-weight: 760; }

.checklist { padding: 9px 12px 11px; gap: 3px; }
.checklist label { min-height: 32px; padding: 4px 3px; gap: 9px; border-radius: 7px; }
.checklist label:hover { background: #f6f8f7; }
.checklist input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--cm-accent); }
.task-text { font-size: 11.5px; color: var(--cm-ink-soft); }
.add-task { margin-top: 4px; min-height: 30px; padding: 0 5px; color: var(--cm-muted); font-size: 10px; }
.add-task:hover { color: var(--cm-accent); }

.link-card { height: 100%; padding: 13px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 9px; }
.link-card .link-url, .link-card .link-description { border: 1px solid var(--cm-line); border-radius: 9px; background: #fbfcfb; color: var(--cm-ink-soft); font-size: 10.5px; }
.link-card .link-url { height: 34px; padding: 0 10px; }
.link-card .link-description { padding: 9px 10px; resize: none; }
.link-card a { color: var(--cm-accent); font-size: 10px; font-weight: 730; }
.image-frame { margin: 0; height: 100%; background: #f3f6f4; }
.image-frame.standard-image img { width: 100%; height: 100%; object-fit: cover; }

.structured-card { padding: 13px 15px; }
.struct-field { margin: 0 0 10px; display: grid; gap: 3px; }
.struct-field strong { color: #8a958f; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.struct-field span { color: var(--cm-ink-soft); font-size: 11px; line-height: 1.42; }
.status-pill { width: max-content; padding: 3px 7px; border-radius: 999px; font-size: 9px !important; font-weight: 740; }
.source-quote { margin: 8px 0 12px; padding: 10px 12px; border-left: 3px solid #b8d9ca; background: #f5faf7; border-radius: 0 8px 8px 0; color: var(--cm-ink-soft); font-size: 11px; }

.type-column, .container-item { background: rgba(249,251,250,.92); border-color: #d6dfda; box-shadow: 0 5px 18px rgba(27,43,36,.045); }
.type-column .item-header, .container-item .item-header { background: #f2f6f4; }
.container-content { padding: 11px 12px; }
.container-badge { color: var(--cm-accent); font-size: 8.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.container-placeholder { margin-top: 10px; min-height: 58px; padding: 12px; border: 1px dashed #cfd9d4; border-radius: 9px; background: rgba(255,255,255,.5); }
.container-placeholder strong { color: var(--cm-ink); font-size: 11px; }
.container-placeholder span { color: var(--cm-muted); font-size: 9.5px; }
.column-quick-add { gap: 6px; margin-top: 9px; }
.column-quick-add button { min-height: 28px; padding: 0 8px; border-color: #dbe3df; border-radius: 7px; background: #fff; color: #63706a; font-size: 9px; }
.column-quick-add button:hover { border-color: #bdd6ca; color: var(--cm-accent); }

/* --------------------------------------------------------------------------
   Home dashboard
   -------------------------------------------------------------------------- */
.home-overlay { padding: 0; background: #f8faf8 !important; }
.home-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 26px clamp(28px, 4vw, 58px) 22px !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--cm-line) !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px) !important;
}
.home-header > div:first-child { display: grid; gap: 4px; }
.home-header h2 { margin: 0; color: var(--cm-ink); font-size: clamp(27px, 2.2vw, 34px); font-weight: 735; letter-spacing: -.045em; }
.home-header p:not(.eyebrow) { margin: 1px 0 0; color: var(--cm-muted); font-size: 12.5px; }
.home-header-actions { display: flex; align-items: center; gap: 8px; }
.home-header-actions button {
  min-height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--cm-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cm-ink-soft);
  font-size: 11.5px;
  font-weight: 680;
  cursor: pointer;
}
.home-header-actions button:hover { background: var(--cm-surface); border-color: var(--cm-line-strong); }
.home-header-actions .primary { color: #fff; border-color: var(--cm-accent); background: var(--cm-accent); }
.home-header-actions #home-close { width: 40px; padding: 0; justify-content: center; margin-left: 4px; }
.home-dashboard { max-width: 1320px; margin: 0 auto; padding: 28px clamp(28px, 4vw, 58px) 54px; }
.home-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.home-stat-grid article {
  min-height: 128px;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--cm-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(27,43,36,.025);
}
.home-stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--cm-accent-soft); color: var(--cm-accent); }
.home-stat-grid article > div { display: grid; gap: 1px; }
.home-stat-grid small { color: var(--cm-muted); font-size: 10.5px; font-weight: 680; }
.home-stat-grid strong { margin-top: 4px; color: var(--cm-ink); font-size: 30px; line-height: 1; font-weight: 720; letter-spacing: -.045em; }
.home-stat-grid em { margin-top: 6px; color: #91a09a; font-size: 9.5px; font-style: normal; }
.home-main-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(290px,.72fr); gap: 18px; margin-top: 18px; align-items: start; }
.home-recent-panel, .home-side-card, .home-activity-panel { border: 1px solid var(--cm-line); border-radius: 15px; background: #fff; }
.home-recent-panel { padding: 19px; }
.home-section-heading { min-height: 42px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.home-section-heading h3 { margin: 1px 0 0; color: var(--cm-ink); font-size: 16px; font-weight: 720; letter-spacing: -.026em; text-transform: none; }
.home-section-heading > button { width: auto; padding: 6px 9px; border: 1px solid var(--cm-line); border-radius: 8px; background: #fff; color: var(--cm-muted); font-size: 10px; }
.home-section-heading > span { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 999px; background: #f0f4f2; color: var(--cm-muted); font-size: 9px; font-weight: 760; }
.home-board-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 13px; }
.home-board-card {
  position: relative;
  min-height: 190px;
  padding: 0;
  display: grid !important;
  grid-template-rows: 124px auto;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--cm-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-board-card:hover { transform: translateY(-2px); border-color: #d2ded8 !important; box-shadow: 0 10px 24px rgba(27,43,36,.08); }
.home-board-cover {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--home-board-color) 72%, white), #eef4f1);
}
.home-board-cover::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.75) 1px, transparent 1px); background-size: 18px 18px; opacity: .45; }
.home-board-cover i { position: absolute; z-index: 2; left: 17px; top: 17px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.86); color: #335248; font-style: normal; font-size: 17px; box-shadow: 0 5px 14px rgba(27,43,36,.08); }
.home-board-cover b { position: absolute; z-index: 1; height: 32px; border-radius: 7px; background: rgba(255,255,255,.74); box-shadow: 0 3px 10px rgba(27,43,36,.05); }
.home-board-cover b:nth-of-type(1) { left: 70px; top: 30px; width: 48%; }
.home-board-cover b:nth-of-type(2) { left: 24px; top: 78px; width: 36%; }
.home-board-cover b:nth-of-type(3) { right: 20px; top: 76px; width: 31%; }
.home-board-copy { padding: 13px 14px 14px; display: grid; gap: 3px; }
.home-board-copy strong { color: var(--cm-ink); font-size: 12.5px; font-weight: 720; }
.home-board-copy em { color: var(--cm-muted); font-size: 9.5px; }
.home-board-arrow { position: absolute; right: 12px; bottom: 15px; color: #9aa49f; font-size: 12px; }
.home-side-stack { display: grid; gap: 14px; }
.home-side-card { padding: 17px; }
.home-list { display: grid; gap: 5px; margin-top: 10px; }
.home-list-row { min-height: 52px; display: grid !important; grid-template-columns: 34px minmax(0,1fr) 14px; align-items: center; gap: 9px !important; padding: 7px 6px !important; border-radius: 9px !important; }
.home-list-row:hover { background: #f6f9f7 !important; }
.home-list-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #eff5f2; color: var(--cm-accent); }
.home-list-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.home-list-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cm-ink); font-size: 11px; }
.home-list-row em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cm-muted); font-size: 9px; }
.home-row-arrow { color: #a8b1ad; }
.home-empty { min-height: 150px; grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 5px; border: 1px dashed #d9e2dd; border-radius: 11px; background: #fafcfb; color: var(--cm-muted); text-align: center; }
.home-empty strong { color: var(--cm-ink-soft); font-size: 11px; }
.home-empty span { font-size: 9.5px; }
.home-empty.compact { min-height: 90px; }
.home-activity-panel { margin-top: 18px; padding: 18px 20px; }
.home-activity-panel ul { margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; list-style: none; }
.home-activity-panel li { min-height: 58px; display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 8px; padding: 9px 3px; border-bottom: 1px solid #eef1ef; }
.activity-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #9bcbb9; }
.home-activity-panel li > div { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px 5px; align-content: start; }
.home-activity-panel li strong { color: var(--cm-ink); font-size: 10.5px; }
.home-activity-panel li span:not(.activity-dot) { color: var(--cm-ink-soft); font-size: 10.5px; }
.home-activity-panel time { flex-basis: 100%; color: var(--cm-muted); font-size: 8.5px; }

/* --------------------------------------------------------------------------
   Command palette / Open anything
   -------------------------------------------------------------------------- */
.command-palette {
  position: fixed;
  z-index: 120;
  top: 9vh;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  max-height: min(720px, 80vh);
  transform: translateX(-50%);
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  overflow: hidden;
  border: 1px solid var(--cm-line);
  border-radius: 16px;
  background: rgba(255,255,255,.99);
  box-shadow: 0 32px 90px rgba(20,34,28,.25), 0 10px 28px rgba(20,34,28,.12);
}
.command-palette::before { content: ""; position: fixed; z-index: -1; inset: -20vh -100vw; background: rgba(23,32,28,.23); backdrop-filter: blur(3px); }
.palette-search-row { height: 66px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 0 17px; border-bottom: 1px solid var(--cm-line); }
.palette-search-row > span { color: #77847e; }
.palette-search-row input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--cm-ink); font-size: 15px; letter-spacing: -.015em; }
.palette-search-row kbd, .palette-hint kbd { min-width: 26px; height: 24px; display: inline-grid; place-items: center; padding: 0 6px; border: 1px solid #dfe5e2; border-bottom-color: #d1d9d5; border-radius: 6px; background: #f6f8f7; color: #6e7974; box-shadow: 0 1px 1px rgba(27,43,36,.05); font: 10px var(--cm-font-ui); }
.palette-filters { padding: 10px 14px; display: flex; gap: 6px; border-bottom: 1px solid #eef1ef; }
.palette-filters button { min-height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: #f2f5f3; color: #68756f; font-size: 10px; font-weight: 670; cursor: pointer; }
.palette-filters button:hover { color: var(--cm-ink); }
.palette-filters button.active { background: var(--cm-accent-soft); color: var(--cm-accent); }
.command-results { max-height: none; padding: 8px 10px 10px; overflow: auto; }
.palette-section-label { padding: 9px 9px 5px; color: #929d98; font-size: 9px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.command-results button {
  min-height: 50px;
  width: 100%;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.command-results button:hover, .command-results button.active { background: #eef5f2; }
.palette-row-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f2f5f3; color: #718078; }
.command-results button.active .palette-row-icon { background: #dcece5; color: var(--cm-accent); }
.palette-row-copy { min-width: 0; display: grid; gap: 2px; }
.palette-row-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cm-ink); font-size: 12px; font-weight: 700; }
.palette-row-copy small { color: var(--cm-muted); font-size: 9.5px; }
.palette-row-end { color: #9aa49f; font-size: 9px; }
.palette-hint { min-height: 44px; margin: 0; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--cm-line); color: #808b86; font-size: 9.5px; }
.palette-hint span { display: inline-flex; align-items: center; gap: 4px; }
.palette-empty { min-height: 210px; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--cm-muted); }
.palette-empty strong { color: var(--cm-ink); font-size: 13px; }
.palette-empty span { font-size: 10px; }
#open-palette { grid-template-rows: auto minmax(0,1fr) auto; }
#open-palette > input { height: 62px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--cm-line); outline: 0; font-size: 14px; }

/* --------------------------------------------------------------------------
   Board details panel
   -------------------------------------------------------------------------- */
.side-panel {
  top: var(--topbar-height);
  width: min(430px, 42vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--cm-line);
  box-shadow: -18px 0 46px rgba(27,43,36,.08);
}
.side-panel-header { min-height: 76px; padding: 14px 16px 13px 18px; border-bottom: 1px solid var(--cm-line); }
.side-panel-title { display: flex; align-items: center; gap: 10px; }
.side-panel-board-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--cm-accent-soft); color: var(--cm-accent); }
.side-panel-header strong { font-size: 15px; font-weight: 735; letter-spacing: -.02em; }
.side-panel-header small { margin-top: 2px; font-size: 9.5px; }
.side-panel-header > button { width: 36px; height: 36px; border-radius: 9px; }
.side-panel-overview { display: grid; grid-template-columns: 1.5fr 1fr .55fr; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--cm-line); background: #fbfcfb; }
.side-panel-overview > div { min-width: 0; display: grid; gap: 2px; }
.side-panel-overview small { color: #929d98; font-size: 8.5px; font-weight: 720; text-transform: uppercase; letter-spacing: .07em; }
.side-panel-overview strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cm-ink-soft); font-size: 10.5px; font-weight: 650; }
.panel-tabs {
  flex: 0 0 auto;
  padding: 8px 10px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-right: 0;
  border-bottom: 1px solid var(--cm-line);
  background: #fff;
  scrollbar-width: none;
}
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs button { min-width: max-content; min-height: 34px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; color: #6d7973; font-size: 9.5px; font-weight: 650; }
.panel-tabs button.active { background: var(--cm-accent-soft); color: var(--cm-accent); box-shadow: none; }
.side-panel-body { flex: 1; min-height: 0; display: block; overflow: hidden; }
.panel-content { height: 100%; padding: 15px 16px 24px; overflow: auto; }
.panel-section { min-width: 0; }
.outline-row { min-height: 42px; padding: 6px 7px; border-radius: 8px; }
.outline-row:hover { background: #f4f7f5; }

/* --------------------------------------------------------------------------
   Calendar view
   -------------------------------------------------------------------------- */
.board-view-root { padding: 34px clamp(22px, 3vw, 42px); background: #f7f9f7; }
.board-view-header { max-width: 1280px; margin: 0 auto 22px; }
.board-view-header h2 { margin-top: 2px; color: var(--cm-ink); font-size: 29px; font-weight: 735; letter-spacing: -.04em; }
.board-view-subtitle { color: var(--cm-muted); font-size: 11.5px; }
.calendar-nav { display: flex; gap: 7px; }
.calendar-nav button { min-width: 38px; height: 38px; padding: 0 12px; display: grid; place-items: center; border: 1px solid var(--cm-line); border-radius: 10px; background: #fff; color: var(--cm-ink-soft); font-size: 11px; font-weight: 690; }
.calendar-nav #calendar-prev .ui-icon { transform: rotate(90deg); }
.calendar-nav .calendar-next .ui-icon { transform: rotate(-90deg); }
.calendar-layout { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 265px; gap: 16px; align-items: start; }
.calendar-main { min-width: 0; overflow: hidden; border: 1px solid var(--cm-line); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(27,43,36,.025); }
.calendar-weekdays { position: static; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0; border-bottom: 1px solid var(--cm-line); background: #fbfcfb; }
.calendar-weekdays span { min-height: 42px; padding: 0 13px; display: flex; align-items: center; color: #7c8983; font-size: 9px; letter-spacing: .095em; }
.calendar-view { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0; }
.cal-day { min-height: 130px; padding: 9px; gap: 6px; border: 0; border-right: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; border-radius: 0; background: #fff; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day-empty { background: #fbfcfb; border-style: solid; opacity: 1; }
.cal-day.today { border-color: #edf1ef; box-shadow: inset 0 0 0 2px var(--cm-accent); }
.cal-day > strong { width: 26px; height: 26px; color: #66736d; font-size: 10px; }
.cal-day.today > strong { background: var(--cm-accent); color: #fff; }
.cal-events { display: grid; gap: 4px; }
.cal-day button {
  min-height: 28px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 7px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid #e5ebe8;
  border-radius: 7px;
  background: #f7faf8;
  color: var(--cm-ink-soft);
  font-size: 9.5px;
  font-weight: 610;
}
.cal-day button:hover { border-color: #cfe0d7; background: #f0f8f4; }
.cal-event-dot { width: 6px; height: 6px; border-radius: 2px; background: #80bba5; }
.cal-day button[data-kind="markdown"] .cal-event-dot { background: #6f8fc0; }
.cal-day button[data-kind="checklist"] .cal-event-dot { background: #d7aa4c; }
.cal-day button[data-kind="project"] .cal-event-dot { background: #a88ac4; }
.cal-more { padding-left: 4px; color: var(--cm-muted); font-size: 8.5px; }
.calendar-upcoming { padding: 16px; border: 1px solid var(--cm-line); border-radius: 14px; background: #fff; }
.view-side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.view-side-head h3 { margin: 2px 0 0; color: var(--cm-ink); font-size: 15px; font-weight: 720; }
.view-side-head > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #f0f4f2; color: var(--cm-muted); font-size: 9px; }
.calendar-upcoming-list { display: grid; gap: 4px; margin-top: 10px; }
.calendar-upcoming-list button { min-height: 56px; width: 100%; padding: 7px 5px; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 9px; align-items: center; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.calendar-upcoming-list button:hover { background: #f5f8f6; }
.upcoming-date { min-height: 42px; display: grid; place-content: center; justify-items: center; border: 1px solid var(--cm-line); border-radius: 9px; background: #fbfcfb; }
.upcoming-date strong { color: var(--cm-ink); font-size: 10px; }
.upcoming-date small { color: var(--cm-muted); font-size: 8px; }
.upcoming-copy { min-width: 0; display: grid; gap: 2px; }
.upcoming-copy small { color: var(--cm-accent); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.upcoming-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cm-ink-soft); font-size: 10.5px; }

/* --------------------------------------------------------------------------
   Timeline view — proper roadmap/gantt surface
   -------------------------------------------------------------------------- */
.timeline-header { align-items: center; }
.timeline-summary { display: grid; justify-items: end; }
.timeline-summary strong { color: var(--cm-ink); font-size: 24px; line-height: 1; font-weight: 720; }
.timeline-summary span { margin-top: 3px; color: var(--cm-muted); font-size: 9px; }
.timeline-shell { max-width: 1280px; margin: 0 auto; overflow: hidden; border: 1px solid var(--cm-line); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(27,43,36,.025); }
.timeline-scale { display: grid; grid-template-columns: 235px minmax(700px,1fr); min-width: 980px; border-bottom: 1px solid var(--cm-line); background: #fbfcfb; }
.timeline-scale-label { padding: 14px 16px; color: #7a8781; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; border-right: 1px solid var(--cm-line); }
.timeline-scale-track { position: relative; min-height: 48px; }
.timeline-scale-track > span { position: absolute; top: 0; bottom: 0; transform: translateX(-1px); }
.timeline-scale-track > span strong { position: absolute; top: 15px; left: 6px; white-space: nowrap; color: #7a8781; font-size: 8.5px; font-weight: 650; }
.timeline-scale-track > span i { position: absolute; top: 0; bottom: 0; width: 1px; background: #e9eeeb; }
.timeline-today { position: absolute; z-index: 4; top: 0; bottom: -1000px; width: 1px; background: var(--cm-accent); }
.timeline-today b { position: absolute; top: 6px; left: 0; transform: translate(-50%,-100%); padding: 3px 6px; border-radius: 5px; background: var(--cm-accent); color: #fff; font-size: 8px; font-style: normal; white-space: nowrap; }
.timeline-scroll { max-width: none; margin: 0; padding: 0; overflow-x: auto; }
.timeline-view { min-width: 980px; display: block; padding: 0; }
.timeline-row { width: 100%; min-height: 62px; padding: 0; display: grid; grid-template-columns: 235px minmax(700px,1fr); align-items: stretch; border: 0; border-bottom: 1px solid #edf1ef; background: #fff; text-align: left; cursor: pointer; }
.timeline-row:last-child { border-bottom: 0; }
.timeline-row:hover { background: #fbfdfc; }
.timeline-row-label { padding: 10px 14px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; border-right: 1px solid var(--cm-line); }
.timeline-row-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f0f4f2; color: #6f7c75; }
.timeline-row-label > span { min-width: 0; display: grid; gap: 2px; }
.timeline-row-label small { color: var(--cm-accent); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.timeline-row-label strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cm-ink); font-size: 10.5px; font-weight: 690; }
.timeline-track { position: relative; min-height: 62px; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(14.285% - 1px), #f0f3f1 calc(14.285% - 1px), #f0f3f1 14.285%); }
.timeline-bar { position: absolute; top: 18px; min-width: 24px; height: 27px; border-radius: 7px; background: #6bb79a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.timeline-bar[data-tone="1"] { background: #7399c4; }
.timeline-bar[data-tone="2"] { background: #a58bc4; }
.timeline-bar[data-tone="3"] { background: #d6a456; }
.timeline-bar b { display: block; padding: 6px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,.9); font-size: 8px; font-style: normal; }
.timeline-milestone { position: absolute; top: 23px; width: 17px; height: 17px; transform: translateX(-50%) rotate(45deg); border: 3px solid #5fa98d; border-radius: 3px; background: #fff; }
.timeline-milestone[data-tone="1"] { border-color: #7399c4; }.timeline-milestone[data-tone="2"] { border-color: #9f84c1; }.timeline-milestone[data-tone="3"] { border-color: #d6a456; }
.timeline-footer { max-width: 1280px; margin: 10px auto 0; display: flex; justify-content: space-between; align-items: center; color: var(--cm-muted); font-size: 9px; }
.timeline-footer > div { display: flex; gap: 7px; align-items: center; }
.timeline-legend-dot { width: 8px; height: 8px; border-radius: 2px; background: #6bb79a; }

/* --------------------------------------------------------------------------
   Focused Markdown workspace
   -------------------------------------------------------------------------- */
.document-page, .document-dock { color: var(--cm-ink); }
.document-topbar {
  min-height: 72px;
  height: 72px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: minmax(320px,1fr) auto minmax(260px,1fr);
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--cm-line);
}
.document-title-group { min-width: 0; display: flex; align-items: center; gap: 10px; }
.document-back { min-height: 38px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cm-line); border-radius: 9px; background: #fff; color: var(--cm-ink-soft); font-size: 10px; font-weight: 680; }
.document-back .ui-icon { transform: rotate(90deg); }
.document-badge { width: 38px; height: 38px; border-radius: 10px; background: #173f34; color: #fff; font-size: 11px; box-shadow: 0 5px 14px rgba(23,63,52,.12); }
.document-title-copy { min-width: 0; display: grid; }
.document-title-copy input { min-width: 0; width: min(420px, 34vw); padding: 0; border: 0; background: transparent; color: var(--cm-ink); font-size: 16px; font-weight: 740; letter-spacing: -.025em; }
.document-title-copy small { margin-top: 2px; color: var(--cm-muted); font-size: 9.5px; }
.document-save-state { color: #6e8c80; }
.document-mode-switch { height: 42px; padding: 4px; border: 1px solid var(--cm-line); border-radius: 11px; background: #f0f4f2; }
.document-mode-switch button { height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; color: #6c7872; font-size: 10.5px; font-weight: 660; }
.document-mode-switch button.active { background: #fff; color: var(--cm-ink); box-shadow: 0 2px 7px rgba(27,43,36,.08); }
.document-mode-switch button.active .ui-icon { color: var(--cm-accent); }
.document-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.document-actions > .icon-button { width: 40px; height: 40px; padding: 0; }
.document-export-menu { position: relative; }
.document-export-menu > summary { height: 40px; min-width: 104px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; list-style: none; border: 1px solid var(--cm-line); border-radius: 9px; background: #fff; color: var(--cm-ink-soft); font-size: 10.5px; font-weight: 690; cursor: pointer; }
.document-export-menu > summary::-webkit-details-marker { display: none; }
.document-export-menu[open] > summary { border-color: #bfd7cc; box-shadow: 0 0 0 3px rgba(15,111,85,.06); }
.document-export-menu > div { position: absolute; z-index: 20; top: 46px; right: 0; width: 268px; padding: 8px; border: 1px solid var(--cm-line); border-radius: 12px; background: #fff; box-shadow: var(--cm-shadow-float); }
.document-export-menu p { margin: 7px 8px 4px; color: #939d98; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.document-export-menu button { width: 100%; min-height: 50px; padding: 7px 8px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: center; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.document-export-menu button:hover { background: #f3f7f5; }
.document-export-menu button > .ui-icon { color: var(--cm-accent); }
.document-export-menu button span { display: grid; gap: 2px; }
.document-export-menu button strong { color: var(--cm-ink); font-size: 10.5px; }
.document-export-menu button small { color: var(--cm-muted); font-size: 8.5px; }
.document-workspace { background: #e8ecea; }
.document-editor-pane, .document-preview-pane { background: #fff; }
.document-pane-label { min-height: 40px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: #f8faf9; border-bottom: 1px solid var(--cm-line); color: #7e8a84; }
.document-pane-label > span { font-size: 8.5px; font-weight: 820; text-transform: uppercase; letter-spacing: .11em; }
.document-pane-label small { font-size: 8.5px; }
.document-editor { padding: 34px 40px; font: 13.2px/1.72 var(--cm-font-mono); color: #29342f; caret-color: var(--cm-accent); }
.document-preview { padding: 44px clamp(38px, 6vw, 92px) 72px; }
.document-preview.markdown-body { color: #27312d; font-size: 15px; line-height: 1.66; }
.document-preview.markdown-body h1 { margin: 0 0 30px; font-size: 34px; line-height: 1.12; font-weight: 735; letter-spacing: -.045em; }
.document-preview.markdown-body h2 { margin: 34px 0 15px; padding-bottom: 9px; border-bottom: 1px solid var(--cm-line); font-size: 24px; line-height: 1.2; font-weight: 720; letter-spacing: -.035em; }
.document-preview.markdown-body h3 { margin-top: 26px; font-size: 18px; }
.document-preview.markdown-body p { margin: 0 0 15px; }
.document-preview.markdown-body pre { padding: 16px 18px; border: 1px solid #e0e7e3; border-radius: 11px; background: #f7f9f8; }
.document-preview .mermaid { margin: 18px 0; padding: 18px; border: 1px solid var(--cm-line); border-radius: 12px; background: #fbfcfb; }

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */
.settings-modal form {
  width: min(1040px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border-radius: 17px;
}
.settings-modal .modal-close { top: 14px; right: 14px; z-index: 6; }
.settings-shell { height: 100%; display: grid; grid-template-columns: 210px minmax(0,1fr); }
.settings-nav { padding: 28px 14px 18px; border-right: 1px solid var(--cm-line); background: #f7f9f8; }
.settings-nav > div { padding: 0 12px 18px; }
.settings-nav h2 { margin: 5px 0 0; color: var(--cm-ink); font-size: 25px; font-weight: 735; letter-spacing: -.04em; }
.settings-nav nav { display: grid; gap: 4px; }
.settings-nav nav button { min-height: 42px; padding: 0 11px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 9px; background: transparent; color: #65716b; font-size: 11px; font-weight: 650; text-align: left; cursor: pointer; }
.settings-nav nav button:hover { background: #eef3f0; color: var(--cm-ink); }
.settings-nav nav button.active { background: #e6f2ed; color: var(--cm-accent); }
.settings-content { padding: 32px 36px 60px; overflow: auto; scroll-behavior: smooth; }
.settings-section { scroll-margin-top: 24px; padding-bottom: 34px; }
.settings-section + .settings-section { padding-top: 28px; border-top: 1px solid var(--cm-line); }
.settings-section-heading h3 { margin: 3px 0 4px; color: var(--cm-ink); font-size: 22px; font-weight: 720; letter-spacing: -.035em; }
.settings-section-heading p:not(.eyebrow) { max-width: 610px; margin: 0 0 18px; color: var(--cm-muted); font-size: 11px; line-height: 1.5; }
.theme-choice-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; }
.theme-choice { position: relative; min-height: 112px; padding: 14px; display: grid; align-content: start; justify-items: start; gap: 5px; border: 1px solid var(--cm-line); border-radius: 11px; background: #fff; text-align: left; cursor: pointer; }
.theme-choice:hover { border-color: #cfdad5; background: #fbfcfb; }
.theme-choice.active { border-color: #73ad98; background: #f1f8f5; box-shadow: 0 0 0 2px rgba(15,111,85,.06); }
.theme-choice > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f0f4f2; color: #607069; font-size: 16px; }
.theme-choice strong { margin-top: 3px; color: var(--cm-ink); font-size: 11px; }
.theme-choice small { color: var(--cm-muted); font-size: 8.5px; }
.theme-choice > i { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: none; place-items: center; border-radius: 50%; background: var(--cm-accent); color: #fff; font-style: normal; }
.theme-choice.active > i { display: grid; }
.settings-control-group { margin-top: 18px; padding: 16px; display: grid; gap: 13px; border: 1px solid var(--cm-line); border-radius: 12px; background: #fbfcfb; }
.settings-control-group.inline-control { grid-template-columns: 1fr auto; align-items: center; }
.settings-control-copy { display: grid; gap: 3px; }
.settings-control-copy strong { color: var(--cm-ink); font-size: 11.5px; }
.settings-control-copy span { color: var(--cm-muted); font-size: 9.5px; }
.density-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.density-picker button { min-height: 60px; padding: 10px 11px; display: grid; align-content: center; justify-items: start; gap: 3px; border: 1px solid var(--cm-line); border-radius: 9px; background: #fff; text-align: left; cursor: pointer; }
.density-picker button:hover { border-color: #cfdad5; }
.density-picker button.active { border-color: #78b19c; background: #eff8f4; box-shadow: inset 0 0 0 1px rgba(15,111,85,.08); }
.density-picker span { color: var(--cm-ink); font-size: 10.5px; font-weight: 700; }
.density-picker small { color: var(--cm-muted); font-size: 8.5px; }
.settings-toggle { width: 42px; height: 24px; padding: 2px; border: 0; border-radius: 999px; background: #dbe2de; cursor: pointer; }
.settings-toggle i { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(27,43,36,.18); transition: transform .16s ease; }
.settings-toggle.active { background: var(--cm-accent); }
.settings-toggle.active i { transform: translateX(18px); }
.settings-live-preview { margin-top: 18px; overflow: hidden; border: 1px solid var(--cm-line); border-radius: 13px; background: #fff; }
.settings-live-head { padding: 12px 14px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--cm-line); }
.settings-live-head > span:first-child { display: grid; gap: 2px; }
.settings-live-head strong { color: var(--cm-ink); font-size: 10.5px; }
.settings-live-head small { color: var(--cm-muted); font-size: 8.5px; }
.preview-dot { width: 8px; height: 8px; border-radius: 50%; background: #84bfa9; }
.settings-preview-app { height: 260px; display: grid; grid-template-columns: 76px 1fr; background: #f7f9f7; }
.settings-preview-app > aside { padding: 16px 12px; display: grid; align-content: start; justify-items: center; gap: 12px; border-right: 1px solid var(--cm-line); background: #fbfcfb; }
.preview-brand { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--cm-accent); color: #fff; font-size: 8px; font-weight: 800; }
.settings-preview-app > aside i { width: 34px; height: 8px; border-radius: 4px; background: #dfe6e2; }
.settings-preview-app > aside i.active { background: #b8d9ca; }
.settings-preview-app > main { min-width: 0; display: grid; grid-template-rows: 42px 1fr; }
.settings-preview-app > main > header { padding: 0 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--cm-line); background: #fff; }
.settings-preview-app > main > header span { width: 92px; height: 8px; border-radius: 4px; background: #d8e1dc; margin-right: auto; }
.settings-preview-app > main > header b { width: 42px; height: 20px; border-radius: 6px; background: #edf3f0; }
.settings-preview-canvas { position: relative; overflow: hidden; background-image: radial-gradient(rgba(62,82,73,.11) .65px,transparent .7px); background-size: 16px 16px; }
.settings-preview-canvas article { position: absolute; padding: 10px; border: 1px solid #dfe6e2; border-radius: 8px; background: #fff; box-shadow: 0 5px 12px rgba(27,43,36,.05); }
.settings-preview-canvas article strong { color: var(--cm-ink); font-size: 8px; }
.settings-preview-canvas article p { margin: 5px 0 0; color: var(--cm-muted); font-size: 6.5px; line-height: 1.35; }
.preview-note { left: 34px; top: 34px; width: 120px; height: 86px; background: #fff3a9 !important; border-color: #e9db93 !important; }
.preview-doc { left: 182px; top: 54px; width: 150px; height: 108px; }
.preview-tasks { left: 68px; top: 144px; width: 142px; height: 72px; }
.preview-tasks i { display: block; width: 78%; height: 6px; margin-top: 6px; border-radius: 3px; background: #e6ece9; }
.settings-tool-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.settings-tool-list button { min-height: 72px; padding: 12px 13px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--cm-line); border-radius: 11px; background: #fff; text-align: left; }
.settings-tool-list button:hover { background: #f6faf8; border-color: #cfe0d7; }
.settings-tool-list button > .ui-icon { color: var(--cm-accent); }
.settings-tool-list button > span { display: grid; gap: 3px; }
.settings-tool-list strong { color: var(--cm-ink); font-size: 11px; }
.settings-tool-list small { color: var(--cm-muted); font-size: 8.5px; }
.settings-tool-list button > i { color: #a5afaa; font-style: normal; font-size: 15px; }
.settings-account-row { min-height: 72px; padding: 12px; border: 1px solid var(--cm-line); border-radius: 11px; background: #fbfcfb; }

/* Modals in general feel like one product. */
.modal::backdrop { background: rgba(20,31,26,.32); backdrop-filter: blur(4px); }
.modal form { border-color: var(--cm-line); border-radius: 16px; box-shadow: 0 28px 80px rgba(20,34,28,.24); }
.modal h2 { color: var(--cm-ink); font-weight: 730; letter-spacing: -.04em; }

/* --------------------------------------------------------------------------
   Dark mode parity
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --cm-ink: #e8efeb;
  --cm-ink-soft: #c0cbc5;
  --cm-muted: #95a29b;
  --cm-faint: #77847e;
  --cm-line: #333d38;
  --cm-line-strong: #414d47;
  --cm-panel: #202723;
  --cm-panel-soft: #232b27;
  --cm-surface: #1a201d;
  --cm-surface-strong: #29312d;
  --cm-canvas: #181e1b;
  --cm-canvas-dot: rgba(203,222,213,.13);
  --cm-accent: #66c1a0;
  --cm-accent-hover: #78ceb0;
  --cm-accent-soft: #263d34;
  --cm-accent-softer: #203129;
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .workspace-button,
html[data-theme="dark"] .search-wrap > input,
html[data-theme="dark"] .canvas-controls,
html[data-theme="dark"] .minimap,
html[data-theme="dark"] .selection-toolbar,
html[data-theme="dark"] .topbar .tool-rail.add-menu,
html[data-theme="dark"] .add-menu-head,
html[data-theme="dark"] .command-palette,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .calendar-main,
html[data-theme="dark"] .calendar-upcoming,
html[data-theme="dark"] .timeline-shell,
html[data-theme="dark"] .settings-modal form,
html[data-theme="dark"] .theme-choice,
html[data-theme="dark"] .density-picker button,
html[data-theme="dark"] .settings-live-preview,
html[data-theme="dark"] .settings-tool-list button { background: var(--cm-panel); border-color: var(--cm-line); color: var(--cm-ink); }
html[data-theme="dark"] .home-overlay, html[data-theme="dark"] .board-view-root { background: var(--cm-surface) !important; }
html[data-theme="dark"] .home-header { background: rgba(32,39,35,.96) !important; }
html[data-theme="dark"] .home-stat-grid article,
html[data-theme="dark"] .home-recent-panel,
html[data-theme="dark"] .home-side-card,
html[data-theme="dark"] .home-activity-panel,
html[data-theme="dark"] .home-board-card { background: var(--cm-panel) !important; border-color: var(--cm-line) !important; }
html[data-theme="dark"] .calendar-weekdays, html[data-theme="dark"] .timeline-scale, html[data-theme="dark"] .settings-nav { background: #1c231f; }
html[data-theme="dark"] .cal-day, html[data-theme="dark"] .timeline-row { background: var(--cm-panel); border-color: var(--cm-line); }
html[data-theme="dark"] .cal-day-empty { background: #1b211e; }
html[data-theme="dark"] .document-topbar, html[data-theme="dark"] .document-editor-pane, html[data-theme="dark"] .document-preview-pane, html[data-theme="dark"] .document-editor, html[data-theme="dark"] .document-preview, html[data-theme="dark"] .document-export-menu > div { background: var(--cm-panel); color: var(--cm-ink); border-color: var(--cm-line); }
html[data-theme="dark"] .document-pane-label { background: #1c231f; }
html[data-theme="dark"] .document-workspace { background: #111512; }

/* --------------------------------------------------------------------------
   Responsive behavior
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --sidebar-expanded: 252px; }
  .topbar-left, .topbar-actions { flex-basis: 280px; }
  .board-title-wrap input { max-width: 230px; }
  .home-board-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .theme-choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .topbar { padding-inline: 12px; gap: 8px; }
  .board-identity-copy > span { display: none; }
  .topbar .tool-rail.add-menu { width: min(640px, calc(100vw - 48px)); }
  .home-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-main-grid { grid-template-columns: 1fr; }
  .home-side-stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-upcoming { display: none; }
  .settings-modal form { width: min(900px, calc(100vw - 28px)); }
}
@media (max-width: 900px) {
  .view-switcher button span { display: none; }
  .view-switcher button { width: 34px; padding: 0; justify-content: center; }
  .topbar .tool-rail.add-menu { width: min(520px, calc(100vw - 28px)); }
  .add-menu-head { grid-template-columns: 1fr; }
  .add-menu-secondary-grid { grid-template-columns: 1fr; }
  .add-menu-secondary-grid .add-menu-advanced { grid-column: auto; }
  .home-header { align-items: flex-start; flex-direction: column; }
  .home-board-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-activity-panel ul { grid-template-columns: 1fr; }
  .settings-shell { grid-template-columns: 160px minmax(0,1fr); }
  .settings-content { padding-inline: 24px; }
  .theme-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-tool-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --topbar-height: 64px; }
  .topbar { min-height: 64px; height: 64px; }
  .board-title-wrap input { font-size: 14px; }
  .board-icon { display: none; }
  .home-header { padding-inline: 18px !important; }
  .home-dashboard { padding-inline: 18px; }
  .home-stat-grid { grid-template-columns: 1fr 1fr; }
  .home-header-actions { flex-wrap: wrap; }
  .home-board-grid { grid-template-columns: 1fr; }
  .home-side-stack { grid-template-columns: 1fr; }
  .command-palette { top: 66px; max-height: calc(100vh - 80px); }
  .side-panel { width: 100%; max-width: none; }
  .panel-tabs { padding-inline: 8px; }
  .board-view-root { padding: 22px 12px; }
  .calendar-main { overflow-x: auto; }
  .calendar-weekdays, .calendar-view { min-width: 760px; }
  .settings-modal form { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { padding: 18px 18px 10px; border-right: 0; border-bottom: 1px solid var(--cm-line); }
  .settings-nav > div { padding: 0 0 10px; }
  .settings-nav nav { display: flex; overflow-x: auto; }
  .settings-nav nav button { min-width: max-content; }
  .settings-content { padding: 24px 18px 50px; }
  .document-topbar { grid-template-columns: minmax(0,1fr) auto; }
  .document-mode-switch { order: 3; grid-column: 1 / -1; justify-self: center; margin-top: -5px; }
  .document-title-copy small { display: none; }
}
@media (max-width: 560px) {
  .home-stat-grid { grid-template-columns: 1fr; }
  .home-header-actions button span { display: none; }
  .home-header-actions button { width: 40px; padding: 0; justify-content: center; }
  .palette-filters { overflow-x: auto; }
  .add-menu-group > div, .add-menu-secondary-grid .add-menu-group > div { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .theme-choice-grid, .density-picker { grid-template-columns: 1fr; }
  .settings-preview-app { grid-template-columns: 56px 1fr; }
  .document-actions .document-export-menu > summary span { display: none; }
  .document-export-menu > summary { min-width: 40px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-board-card:hover { transform: none; }
}

/* Clarify that favorite boards and the complete board list are separate collections. */
#board-list:not(:empty)::before {
  content: "All boards";
  display: block;
  padding: 10px 10px 5px;
  color: var(--v3-text-3);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.workspace-shell.sidebar-collapsed #board-list::before { display: none; }

/* ========================================================================== 
   CanvasMark Studio — v4 concept-alignment layer
   Purpose: make the shipped UI match the approved high-fidelity concepts,
   not merely the earlier functional redesign. Keep this layer last.
   ========================================================================== */
:root {
  --cm-ink: #111827;
  --cm-ink-soft: #334155;
  --cm-muted: #6b7280;
  --cm-faint: #94a3b8;
  --cm-line: #e5e7eb;
  --cm-line-strong: #d7dce2;
  --cm-panel: #ffffff;
  --cm-panel-soft: #fbfcfd;
  --cm-surface: #f7f9fb;
  --cm-surface-strong: #eef2f6;
  --cm-canvas: #fbfbfa;
  --cm-canvas-dot: rgba(71,85,105,.12);
  --cm-accent: #2563eb;
  --cm-accent-hover: #1d4ed8;
  --cm-accent-soft: #eaf2ff;
  --cm-accent-softer: #f6f9ff;
  --cm-focus: rgba(37,99,235,.24);
  --cm-shadow-card: 0 10px 30px rgba(15,23,42,.065), 0 2px 7px rgba(15,23,42,.04);
  --cm-shadow-float: 0 28px 70px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
  --sidebar-expanded: 244px;
  --sidebar-rail: 68px;
  --topbar-height: 78px;
}

html[data-theme="dark"] {
  --cm-ink: #f8fafc;
  --cm-ink-soft: #d7dee8;
  --cm-muted: #a6b0bf;
  --cm-faint: #768395;
  --cm-line: #303844;
  --cm-line-strong: #3c4653;
  --cm-panel: #171c22;
  --cm-panel-soft: #1d232b;
  --cm-surface: #11161c;
  --cm-surface-strong: #202833;
  --cm-canvas: #12171c;
  --cm-canvas-dot: rgba(203,213,225,.12);
  --cm-accent: #60a5fa;
  --cm-accent-hover: #93c5fd;
  --cm-accent-soft: #1d3557;
  --cm-accent-softer: #17263c;
  --cm-focus: rgba(96,165,250,.3);
}

body {
  font-size: 14.5px;
  color: var(--cm-ink);
  letter-spacing: -.005em;
}
:focus-visible { outline-color: #3b82f6 !important; box-shadow: 0 0 0 3px var(--cm-focus); }
.primary, button.primary { background: var(--cm-accent) !important; border-color: var(--cm-accent) !important; color: white !important; }
.primary:hover, button.primary:hover { background: var(--cm-accent-hover) !important; border-color: var(--cm-accent-hover) !important; }

/* Shell ------------------------------------------------------------------ */
.workspace-shell { background: #fff; }
.sidebar {
  width: var(--sidebar-expanded);
  background: #fff;
  border-right: 1px solid var(--cm-line);
  box-shadow: none;
}
.brand-lockup.compact {
  min-height: 78px;
  padding: 0 18px;
  gap: 11px;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg, #3578f6, #1d5ed6) !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.2);
  color: white !important;
  font-size: 11px;
}
.brand-lockup.compact strong { font-size: 15px; font-weight: 760; letter-spacing: -.025em; }
.workspace-button {
  min-height: 46px;
  margin: 0 12px 10px;
  width: calc(100% - 24px);
  border-radius: 11px;
  padding: 9px 12px;
  background: #fff;
  border-color: var(--cm-line);
}
.workspace-button span { font-weight: 700; font-size: 13px; }
.workspace-button small { font-size: 9.5px; letter-spacing: .09em; color: var(--cm-muted); }
.search-wrap { margin: 0 12px 13px; }
.search-wrap input {
  min-height: 42px;
  border-radius: 10px;
  background: var(--cm-panel-soft);
  border-color: var(--cm-line);
  font-size: 13px;
  padding-left: 38px;
}
.sidebar-nav button, #board-list button, #favorites-list button {
  min-height: 42px;
  border-radius: 9px;
  margin-inline: 8px;
  width: calc(100% - 16px);
  font-size: 13.5px;
}
.sidebar-nav button.active, #board-list button.active, #favorites-list button.active {
  background: var(--cm-accent-soft) !important;
  color: var(--cm-accent) !important;
  box-shadow: inset 2px 0 0 var(--cm-accent);
}
.sidebar-heading { color: #8792a2; font-size: 10px; letter-spacing: .12em; }
.favorites-list:not(:empty)::before { display: none !important; }
#board-list:not(:empty)::before {
  content: "Other boards" !important;
  color: #8a94a2 !important;
  padding-left: 18px !important;
  letter-spacing: .11em !important;
}
.sidebar-footer { border-top-color: var(--cm-line); }
.sidebar-footer .avatar { background: var(--cm-accent-soft); color: var(--cm-accent); }

.workspace-shell.sidebar-collapsed .sidebar { width: var(--sidebar-rail); }
.workspace-shell.sidebar-collapsed .brand-lockup.compact { padding: 0; justify-content: center; }
.workspace-shell.sidebar-collapsed .brand-mark { width: 34px; height: 34px; }
.workspace-shell.sidebar-collapsed .sidebar-nav button,
.workspace-shell.sidebar-collapsed #board-list button,
.workspace-shell.sidebar-collapsed #favorites-list button { width: 46px; min-width: 46px; height: 46px; margin-inline: auto; border-radius: 11px; box-shadow: none; }
.workspace-shell.sidebar-collapsed .sidebar-nav button.active,
.workspace-shell.sidebar-collapsed #board-list button.active,
.workspace-shell.sidebar-collapsed #favorites-list button.active { box-shadow: none; background: var(--cm-accent-soft) !important; }

.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 0 22px;
  gap: 14px;
  background: rgba(255,255,255,.98);
  border-bottom-color: var(--cm-line);
  box-shadow: none;
}
.topbar-left, .topbar-actions { flex-basis: 340px; }
.sidebar-toggle, .board-icon, .topbar-actions > button, .topbar-more > summary, .view-filter-button {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
}
.sidebar-toggle { width: 44px; }
.board-icon {
  width: 44px;
  background: var(--cm-accent-soft) !important;
  color: var(--cm-accent) !important;
  border: 0 !important;
}
.board-title-wrap input { max-width: 330px; font-size: 17.5px !important; font-weight: 760 !important; letter-spacing: -.025em; color: var(--cm-ink) !important; }
.board-identity-copy > span { font-size: 11.5px; color: var(--cm-muted); margin-top: 1px; }
#board-favorite { color: #c89b17; }
.view-switcher {
  min-height: 48px;
  padding: 4px;
  border-radius: 13px;
  background: #f2f4f6;
  border-color: #e4e8ec;
  box-shadow: none;
}
.view-switcher button { height: 38px; padding: 0 17px; border-radius: 9px; font-size: 13px; color: #67717e; }
.view-switcher button.active { background: white !important; color: var(--cm-accent) !important; box-shadow: 0 2px 8px rgba(15,23,42,.09); border-color: #e5e9ef !important; }
#add-menu-toggle { min-width: 88px; padding-inline: 17px; background: var(--cm-accent) !important; border-color: var(--cm-accent) !important; color: white !important; }
#share-button { min-width: 92px; }
.topbar-actions > button:not(#add-menu-toggle), .topbar-more > summary { background: #fff; border-color: var(--cm-line); }

/* Canvas ----------------------------------------------------------------- */
.canvas {
  background-color: var(--cm-canvas) !important;
  background-image: radial-gradient(circle at 1px 1px, var(--cm-canvas-dot) 1px, transparent 1.2px) !important;
  background-size: 24px 24px !important;
}
.canvas-item {
  border: 1px solid var(--cm-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--cm-shadow-card) !important;
  background: #fff;
  overflow: hidden;
}
.canvas-item:hover { border-color: #cfd6df !important; box-shadow: 0 14px 36px rgba(15,23,42,.09), 0 3px 9px rgba(15,23,42,.05) !important; }
.canvas-item.selected { border-color: #6ca0ff !important; box-shadow: 0 0 0 2px rgba(37,99,235,.16), 0 15px 40px rgba(37,99,235,.12) !important; }
.item-header { min-height: 43px !important; height: 43px !important; padding: 0 13px !important; border-bottom: 1px solid #edf0f3 !important; background: rgba(255,255,255,.96) !important; }
.item-header strong, .item-title { font-size: 12.8px !important; font-weight: 730 !important; letter-spacing: -.015em; }
.item-kind { width: 27px !important; height: 27px !important; border-radius: 8px !important; background: #f3f6f8 !important; color: #738092 !important; }
.canvas-item.type-note { border-color: #ead466 !important; background: #fff5b8 !important; box-shadow: 0 12px 28px rgba(128,102,24,.11) !important; }
.canvas-item.type-note .item-header { background: #ffea82 !important; border-bottom-color: #e7cf58 !important; }
.canvas-item.type-note .note-editor, .canvas-item.type-note [contenteditable="true"] { font-size: 16.5px !important; line-height: 1.55 !important; padding: 15px 16px !important; color: #3e3924 !important; font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif !important; }
.canvas-item.type-note .item-kind { background: rgba(255,255,255,.42) !important; color: #786a2d !important; }
.markdown-file-card { padding: 18px !important; gap: 14px !important; grid-template-columns: 48px minmax(0,1fr) auto !important; }
.markdown-file-card .markdown-badge, .canvas-item.type-markdown .markdown-icon { width: 48px !important; height: 48px !important; border-radius: 10px !important; background: #173f38 !important; color: #fff !important; }
.markdown-file-card strong { font-size: 13.5px !important; }
.markdown-file-card p, .markdown-file-card small { font-size: 11.3px !important; line-height: 1.4 !important; color: #737d89 !important; }
.checklist { padding: 13px 15px 15px !important; gap: 9px !important; }
.checklist label, .checklist-item { min-height: 27px; font-size: 12.2px !important; }
.link-card { padding: 13px !important; gap: 9px; }
.link-card input, .link-card textarea { min-height: 34px !important; font-size: 11.5px !important; border-radius: 7px !important; }
.structured-card { padding: 14px 15px !important; }
.structured-card dt { font-size: 9px !important; letter-spacing: .08em; color: #99a1ab !important; }
.structured-card dd { font-size: 11.5px !important; margin-bottom: 9px !important; }
.canvas-item.type-column { background: #f9fbfc !important; }
.canvas-item.type-column .item-header { background: #f1f5f7 !important; }
.canvas-controls {
  left: 18px !important;
  right: auto !important;
  bottom: 18px !important;
  min-height: 46px;
  border-radius: 12px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.1) !important;
  border-color: var(--cm-line) !important;
}
.minimap {
  left: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  transform: scale(.82);
  transform-origin: right bottom;
  opacity: .86;
  border-radius: 11px !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
}
.canvas-hint { bottom: 19px !important; background: rgba(255,255,255,.92) !important; border-color: var(--cm-line) !important; box-shadow: 0 6px 18px rgba(15,23,42,.07); }

/* Home — full destination, not a translucent dashboard overlay ------------ */
.home-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 60 !important;
  background: #fff !important;
  overflow: auto !important;
  color: var(--cm-ink);
}
.home-header {
  position: sticky !important;
  top: 0;
  z-index: 3;
  min-height: 124px !important;
  padding: 28px 40px 24px !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cm-line) !important;
  align-items: center !important;
}
.home-header h2 { margin: 0 0 5px !important; font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -.04em !important; font-weight: 780 !important; }
.home-header p { margin: 0; font-size: 14px; color: var(--cm-muted); }
.home-header-actions { display: flex; gap: 8px; align-items: center; }
.home-header-actions button { min-height: 42px !important; padding: 0 14px !important; border-radius: 9px !important; font-size: 12.5px; background: #fff; border-color: var(--cm-line); }
.home-header-actions button.primary { min-width: 108px; }
.home-dashboard { max-width: 1320px !important; margin: 0 auto !important; padding: 28px 36px 52px !important; }
.home-stat-grid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 16px !important; margin-bottom: 18px !important; }
.home-stat-grid article {
  min-height: 132px !important;
  padding: 20px !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.home-stat-icon { width: 38px !important; height: 38px !important; border-radius: 10px !important; background: var(--cm-accent-soft) !important; color: var(--cm-accent) !important; }
.home-stat-grid article small { font-size: 12.5px !important; color: var(--cm-ink-soft) !important; font-weight: 700 !important; }
.home-stat-grid article strong { font-size: 28px !important; line-height: 1 !important; margin: 9px 0 7px !important; letter-spacing: -.04em; }
.home-stat-grid article em { font-style: normal; font-size: 11.5px; color: var(--cm-muted); }
.home-main-grid { display: grid !important; grid-template-columns: minmax(0,1fr) 308px !important; gap: 18px !important; align-items: start; }
.home-recent-panel, .home-side-card, .home-assigned-strip {
  background: #fff !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.home-recent-panel { padding: 15px !important; }
.home-section-heading { min-height: 42px; padding: 0 2px 12px !important; }
.home-section-heading h3 { margin: 0; font-size: 14px !important; font-weight: 740 !important; }
.home-section-heading > button { height: 32px !important; border-radius: 7px !important; font-size: 11px !important; }
.home-board-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px !important; }
.home-board-card {
  position: relative;
  min-height: 207px !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-board-card:hover { transform: translateY(-2px); border-color: #cdd5df !important; box-shadow: 0 12px 26px rgba(15,23,42,.08) !important; }
.home-board-cover { display: block !important; height: 140px !important; position: relative; overflow: hidden; background: var(--home-board-color, #eef2f6); border-bottom: 1px solid var(--cm-line); }
.home-preview-chrome { position: absolute; z-index: 2; inset: 12px 12px auto; display: flex; align-items: center; gap: 6px; }
.home-preview-chrome i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.9); color: var(--cm-accent); font-style: normal; font-size: 11px; box-shadow: 0 3px 9px rgba(15,23,42,.06); }
.home-preview-chrome b { width: 44px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.76); }
.home-preview-chrome b:last-child { width: 26px; opacity: .7; }
.home-preview-stage { position: absolute; inset: 48px 12px 12px; display: block; }
.home-preview-stage i { position: absolute; display: block; border-radius: 6px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 3px 10px rgba(15,23,42,.055); }
.home-preview-stage i:nth-child(1) { left: 2%; top: 2%; width: 36%; height: 38%; }
.home-preview-stage i:nth-child(2) { right: 1%; top: 4%; width: 42%; height: 27%; }
.home-preview-stage i:nth-child(3) { left: 19%; bottom: 2%; width: 43%; height: 34%; }
.home-preview-stage i:nth-child(4) { right: 0; bottom: 3%; width: 30%; height: 48%; }
.home-preview-stage i:nth-child(5) { left: 0; top: 48%; width: 16%; height: 28%; }
.home-board-preview-0 .home-board-cover { background: linear-gradient(145deg,#111827,#202b3d 58%,#2f5db6); }
.home-board-preview-0 .home-preview-stage i:nth-child(1) { background:#3b82f6; }
.home-board-preview-0 .home-preview-stage i:nth-child(2) { background:#8b5cf6; }
.home-board-preview-0 .home-preview-stage i:nth-child(3) { background:#f59e0b; }
.home-board-preview-1 .home-board-cover { background: linear-gradient(#acd2f4 0 48%,#72946f 49% 65%,#456a55 66% 100%); }
.home-board-preview-1 .home-preview-stage i { border-radius: 50% 50% 18% 18%; background: rgba(240,248,250,.78); }
.home-board-preview-2 .home-board-cover { background: #edf3fa; }
.home-board-preview-2 .home-preview-stage i { background:#fff; border-color:#dce5ef; }
.home-board-preview-2 .home-preview-stage i:nth-child(2)::after { content:""; position:absolute; inset:26% 20%; border-radius:50%; border:7px solid #60a5fa; border-right-color:#a78bfa; }
.home-board-preview-3 .home-board-cover { background: linear-gradient(145deg,#f4efff,#e7eeff); }
.home-board-preview-3 .home-preview-stage i { border:1px solid #d7c9ff; }
.home-board-preview-4 .home-board-cover { background: #fbfaf8; }
.home-board-preview-4 .home-preview-stage i:nth-child(1) { width:18%; height:70%; background:#111827; }
.home-board-preview-4 .home-preview-stage i:nth-child(2) { left:24%; right:auto; width:64%; height:14%; background:linear-gradient(90deg,#2563eb,#8b5cf6,#22c55e,#f59e0b,#ef4444); }
.home-board-preview-5 .home-board-cover { background: #eef4f8; }
.home-board-preview-5 .home-preview-stage i:nth-child(3)::after { content:""; position:absolute; width:34px; height:34px; border-radius:50%; border:8px solid #3b82f6; border-right-color:#22c55e; left:50%; top:50%; transform:translate(-50%,-50%); }
.home-board-copy { display: flex !important; flex-direction: column; padding: 12px 13px 11px !important; gap: 4px !important; }
.home-board-copy strong { font-size: 12.8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-board-copy em { font-size: 10.5px !important; font-style: normal; color: var(--cm-muted); }
.home-board-arrow { position: absolute; right: 11px; bottom: 11px; color: #8893a1; font-size: 12px; }
.home-side-stack { display: grid; gap: 16px; }
.home-side-card { padding: 16px !important; min-height: 210px; }
.home-section-heading.compact { border-bottom: 1px solid #eef1f4; margin-bottom: 8px; }
.home-side-title-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--cm-accent-soft); color: var(--cm-accent); }
.home-list-row { min-height: 49px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; padding: 7px 6px !important; }
.home-list-row:hover { background: #f7f9fb !important; }
.home-list-icon { width: 30px !important; height: 30px !important; background: #f2f5f8 !important; color: #667383 !important; }
.home-list-row strong { font-size: 11.5px !important; }
.home-list-row em { font-size: 10px !important; color: var(--cm-muted); }
.home-activity-list li { padding: 9px 4px !important; border-bottom: 1px solid #f0f2f4; }
.home-activity-list strong, .home-activity-list span { font-size: 10.8px !important; }
.home-activity-list time { font-size: 9.5px !important; color: var(--cm-muted); }

/* Add menu — compact dropdown, common actions first ----------------------- */
.topbar .tool-rail.add-menu {
  position: absolute !important;
  top: 54px !important;
  right: 0 !important;
  left: auto !important;
  width: 320px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(720px, calc(100vh - 92px)) !important;
  padding: 7px 0 !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: var(--cm-shadow-float) !important;
  overflow-y: auto !important;
  gap: 0 !important;
}
.topbar .tool-rail.add-menu::before { content:"Add to board"; display:block; padding: 10px 14px 8px; font-size: 11px; font-weight: 760; color: #6f7b89; letter-spacing: .08em; text-transform: uppercase; }
.add-menu-group { padding: 8px 8px 9px !important; margin: 0 !important; border: 0 !important; border-top: 1px solid #edf0f3 !important; border-radius: 0 !important; background: transparent !important; }
.add-menu-group:first-of-type { border-top: 0 !important; }
.add-menu-group h3 { padding: 2px 7px 7px !important; margin: 0 !important; font-size: 9.5px !important; letter-spacing: .12em !important; color: #8b95a2 !important; }
.add-menu-group > div, .add-menu-secondary-grid .add-menu-group > div { display: grid !important; grid-template-columns: 1fr !important; gap: 2px !important; }
.topbar .tool-rail.add-menu .add-menu-group button {
  min-height: 49px !important;
  height: auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  text-align: left !important;
  color: var(--cm-ink) !important;
}
.topbar .tool-rail.add-menu .add-menu-group button:hover { background: var(--cm-accent-softer) !important; color: var(--cm-accent) !important; }
.topbar .tool-rail.add-menu .add-menu-group button > svg { width: 20px; height: 20px; color: #657281; }
.topbar .tool-rail.add-menu .add-menu-group button span { display: flex !important; flex-direction: column !important; min-width: 0; gap: 1px; }
.topbar .tool-rail.add-menu .add-menu-group button strong { font-size: 12px !important; font-weight: 710 !important; }
.topbar .tool-rail.add-menu .add-menu-group button small { display: block !important; font-size: 10px !important; color: #87919f !important; font-weight: 450 !important; }
.add-menu-more { margin: 0 8px 4px; border-top: 1px solid #edf0f3; }
.add-menu-more > summary { min-height: 42px; padding: 0 7px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #5f6a78; font-size: 11.5px; font-weight: 680; list-style: none; }
.add-menu-more > summary::-webkit-details-marker { display:none; }
.add-menu-more > summary::after { content:"›"; font-size: 17px; color:#8993a0; transform: rotate(90deg); }
.add-menu-more[open] > summary::after { transform: rotate(-90deg); }
.add-menu-library { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px !important; padding: 2px 0 7px !important; }
.add-menu-library button { min-height: 39px !important; padding: 5px 7px !important; grid-template-columns: 20px 1fr !important; }
.add-menu-library button small { display:none !important; }

/* Command palette — white, focused, compact -------------------------------- */
.command-palette {
  top: 8vh !important;
  width: min(680px, calc(100vw - 34px)) !important;
  max-height: min(760px, calc(100vh - 110px)) !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--cm-ink) !important;
  box-shadow: 0 0 0 100vmax rgba(15,23,42,.34), 0 32px 90px rgba(15,23,42,.24) !important;
  overflow: hidden !important;
}
.command-palette::before { display: none !important; }
.palette-search { min-height: 62px !important; background:#fff !important; border-bottom:1px solid var(--cm-line) !important; padding: 0 16px !important; }
.palette-search input { font-size: 14px !important; color:var(--cm-ink) !important; }
.palette-search input::placeholder { color:#98a1ad; }
.palette-filters { padding: 9px 14px !important; gap: 6px !important; background:#fff !important; border-bottom:1px solid #eef1f4 !important; }
.palette-filters button { height:30px !important; padding:0 11px !important; border-radius:999px !important; background:#f5f7f9 !important; border:0 !important; font-size:10.5px !important; color:#65717f !important; }
.palette-filters button.active { background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.command-results { background:#fff !important; padding: 6px 10px 12px !important; }
.command-section-title { padding: 9px 6px 5px !important; font-size: 9.5px !important; color:#8b95a2 !important; letter-spacing:.12em !important; }
.command-result { min-height: 52px !important; border-radius: 9px !important; padding: 6px 8px !important; background:transparent !important; border:0 !important; }
.command-result:hover, .command-result.active { background:var(--cm-accent-softer) !important; color:var(--cm-ink) !important; }
.command-result-icon { width:34px !important; height:34px !important; border-radius:9px !important; background:#f3f6f8 !important; color:#697686 !important; }
.command-result.active .command-result-icon { background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.command-result strong { font-size:12px !important; }
.command-result small { font-size:10px !important; color:#8a94a1 !important; }
.palette-hint { min-height: 38px !important; padding: 0 14px !important; background:#fff !important; border-top:1px solid var(--cm-line) !important; color:#8a94a1 !important; font-size:10px !important; }

/* Board details — one useful inspector, advanced tools secondary ----------- */
.side-panel {
  width: min(430px, 42vw) !important;
  border-left: 1px solid var(--cm-line) !important;
  background: #fff !important;
  box-shadow: -10px 0 34px rgba(15,23,42,.07) !important;
}
.side-panel > header { min-height: 76px !important; padding: 14px 20px !important; border-bottom:1px solid var(--cm-line) !important; }
.side-panel > header strong { font-size: 16px !important; font-weight: 760 !important; }
.side-panel > header small { font-size: 10.5px !important; color:var(--cm-muted); }
.side-panel-body { overflow:hidden !important; }
.board-details-content { height:100%; overflow-y:auto !important; padding: 0 20px 34px !important; }
.board-detail-section { padding: 18px 0 !important; border-bottom:1px solid #edf0f3 !important; }
.board-detail-section:last-of-type { border-bottom:0; }
.board-detail-section > h3 { margin:0 0 12px !important; font-size: 11px !important; letter-spacing:.08em; text-transform:uppercase; color:#788493; }
.board-detail-section label { display:grid; grid-template-columns:86px 1fr; align-items:center; gap:10px; margin-bottom:8px; font-size:11px; color:var(--cm-muted); }
.board-detail-section input { min-height:40px !important; border-radius:8px !important; background:#fff !important; border-color:var(--cm-line) !important; font-size:12px !important; color:var(--cm-ink) !important; }
.board-detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.board-detail-meta > span { padding:10px 11px; border-radius:9px; background:#f7f9fb; }
.board-detail-meta small { display:block; color:#8a94a1; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.board-detail-meta strong { display:block; margin-top:4px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-detail-members { display:flex; align-items:center; min-height:38px; }
.board-detail-members span { width:34px; height:34px; margin-right:-7px; border-radius:50%; display:grid; place-items:center; background:var(--cm-accent-soft); color:var(--cm-accent); border:3px solid white; font-size:10px; font-weight:740; }
.board-detail-tags { display:flex; gap:6px; flex-wrap:wrap; }
.board-detail-tags span { min-height:26px; padding:0 9px; display:inline-flex; align-items:center; border-radius:999px; background:var(--cm-accent-soft); color:var(--cm-accent); font-size:10px; font-weight:650; }
.board-detail-updates { display:grid; gap:10px; }
.board-detail-update { display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:start; }
.board-detail-update > span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#f1f4f7; color:#6e7a89; font-size:9px; font-weight:700; }
.board-detail-update strong { font-size:10.8px; display:block; }
.board-detail-update small { font-size:9.5px; color:var(--cm-muted); display:block; margin-top:2px; }
.board-detail-swatch { width:36px; height:36px; border-radius:50%; border:3px solid white; box-shadow:0 0 0 1px var(--cm-line); }
.board-tools-details { margin-top:14px; }
.board-tools-details > summary { list-style:none; cursor:pointer; min-height:42px; display:flex; align-items:center; justify-content:space-between; color:#5f6b78; font-size:11.5px; font-weight:700; }
.board-tools-details > summary::-webkit-details-marker { display:none; }
.board-tools-details > summary::after { content:"›"; font-size:18px; transform:rotate(90deg); color:#929ba7; }
.board-tools-details[open] > summary::after { transform:rotate(-90deg); }
.board-tools-details .panel-tabs { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); padding:7px 0 !important; gap:5px !important; border:0 !important; }
.board-tools-details .panel-tabs button { min-height:38px !important; border-radius:8px !important; justify-content:flex-start !important; padding:0 9px !important; background:#f7f9fb !important; }

/* Calendar --------------------------------------------------------------- */
.board-view-root { background:#fff !important; padding: 34px 40px 52px !important; }
.board-view-header { max-width: 1360px !important; margin:0 auto 22px !important; }
.board-view-header .eyebrow { color:var(--cm-accent) !important; }
.board-view-header h2 { font-size: 28px !important; line-height:1.1 !important; letter-spacing:-.035em !important; }
.board-view-subtitle { font-size:12.5px !important; color:var(--cm-muted) !important; }
.calendar-layout { max-width:1360px !important; margin:0 auto !important; grid-template-columns:minmax(0,1fr) 290px !important; gap:18px !important; }
.calendar-main, .calendar-upcoming { border:1px solid var(--cm-line) !important; border-radius:13px !important; background:#fff !important; box-shadow:none !important; }
.calendar-weekdays { min-height:48px !important; background:#fbfcfd !important; border-bottom:1px solid var(--cm-line) !important; }
.calendar-weekdays span { font-size:9.5px !important; letter-spacing:.1em !important; color:#7d8895 !important; }
.cal-day { min-height:112px !important; background:#fff !important; border-color:#edf0f3 !important; padding:10px 8px !important; }
.cal-day-number { font-size:10.5px !important; color:#687482 !important; }
.cal-day.today { box-shadow:inset 0 0 0 2px var(--cm-accent) !important; }
.cal-day.today .cal-day-number { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:white !important; background:var(--cm-accent) !important; }
.cal-event { min-height:29px !important; border:1px solid #e6ebf1 !important; border-radius:7px !important; background:#f8fafc !important; font-size:9.7px !important; box-shadow:none !important; padding:5px 7px !important; }
.cal-event::before { background:var(--cm-accent) !important; }
.calendar-upcoming { padding:16px !important; }
.calendar-upcoming h3 { font-size:14px !important; }
.calendar-upcoming-item { min-height:58px !important; border:0 !important; border-radius:8px !important; padding:7px 5px !important; }
.calendar-upcoming-item:hover { background:#f7f9fb !important; }

/* Timeline --------------------------------------------------------------- */
.timeline-layout { max-width:1360px !important; margin:0 auto !important; display:grid !important; grid-template-columns:minmax(0,1fr) 280px !important; gap:18px !important; align-items:start; }
.timeline-main { min-width:0; }
.timeline-shell { max-width:none !important; width:100% !important; margin:0 !important; border:1px solid var(--cm-line) !important; border-radius:13px !important; background:#fff !important; box-shadow:none !important; overflow:hidden; }
.timeline-scale { min-height:50px !important; background:#fbfcfd !important; border-bottom:1px solid var(--cm-line) !important; }
.timeline-scale-label { width:220px !important; padding-left:16px !important; font-size:9.5px !important; letter-spacing:.1em; color:#7d8895; }
.timeline-row-label { width:220px !important; padding:0 14px !important; }
.timeline-row { min-height:66px !important; border-bottom-color:#edf0f3 !important; }
.timeline-row-label strong { font-size:10.8px !important; }
.timeline-row-label small { font-size:9px !important; color:var(--cm-accent) !important; }
.timeline-track { min-height:66px !important; }
.timeline-today { border-left-color:var(--cm-accent) !important; }
.timeline-today b { background:var(--cm-accent) !important; color:white !important; }
.timeline-bar { height:26px !important; top:20px !important; border-radius:7px !important; box-shadow:none !important; }
.timeline-milestone { width:18px !important; height:18px !important; top:24px !important; }
.timeline-footer { max-width:none !important; font-size:9.5px !important; color:var(--cm-muted); }
.timeline-inspector { border:1px solid var(--cm-line); border-radius:13px; background:#fff; padding:16px; min-height:300px; }
.timeline-inspector-head { display:flex; gap:10px; align-items:center; padding-bottom:14px; border-bottom:1px solid #edf0f3; }
.timeline-inspector-head > span { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--cm-accent-soft); color:var(--cm-accent); }
.timeline-inspector-head strong { display:block; font-size:12.5px; }
.timeline-inspector-head small { display:block; color:var(--cm-muted); font-size:9.5px; margin-top:2px; }
.timeline-inspector section { padding:14px 0; border-bottom:1px solid #edf0f3; }
.timeline-inspector section:last-child { border-bottom:0; }
.timeline-inspector h3 { margin:0 0 9px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#7b8794; }
.timeline-inspector p { margin:0 0 7px; display:flex; justify-content:space-between; gap:10px; font-size:10.5px; color:var(--cm-muted); }
.timeline-inspector p strong { color:var(--cm-ink); }
.timeline-owner { display:flex; gap:8px; align-items:center; font-size:10.5px; }
.timeline-owner > span, .timeline-members > span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--cm-accent-soft); color:var(--cm-accent); font-size:9px; font-weight:750; }
.timeline-members { display:flex; align-items:center; }
.timeline-members > span { margin-right:-5px; border:2px solid white; }
.timeline-members small { margin-left:9px; color:var(--cm-muted); }

/* Focused document workspace -------------------------------------------- */
.document-page { grid-template-rows: 72px 40px minmax(0,1fr) !important; background:#fff !important; }
.document-topbar { height:72px !important; padding:0 20px !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; }
.document-title-group { gap:10px !important; }
.document-back { min-height:40px !important; border-radius:9px !important; background:#fff !important; }
.document-badge { width:40px !important; height:40px !important; border-radius:9px !important; background:#173f38 !important; color:#fff !important; }
.document-title-copy input { font-size:17px !important; font-weight:760 !important; letter-spacing:-.025em !important; }
.document-title-copy small { font-size:9.5px !important; color:var(--cm-muted) !important; }
.document-mode-switch { min-height:44px !important; padding:4px !important; border-radius:11px !important; background:#f2f4f6 !important; }
.document-mode-switch button { height:36px !important; border-radius:8px !important; font-size:11px !important; }
.document-mode-switch button.active { background:#fff !important; color:var(--cm-accent) !important; box-shadow:0 2px 7px rgba(15,23,42,.08) !important; }
.document-formatbar { height:40px !important; padding:0 18px !important; display:flex !important; align-items:center !important; gap:3px !important; border-bottom:1px solid var(--cm-line) !important; background:#fbfcfd !important; }
.document-formatbar button { width:30px; height:29px; display:grid; place-items:center; border:0 !important; border-radius:6px !important; background:transparent !important; color:#606c7b; font-size:11px; }
.document-formatbar button:hover { background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.document-formatbar > span { width:1px; height:18px; background:var(--cm-line); margin:0 4px; }
.document-pane-label { min-height:38px !important; padding:0 15px !important; background:#fbfcfd !important; color:#7a8592 !important; border-bottom:1px solid var(--cm-line) !important; }
.document-pane-label span { font-size:9.5px !important; letter-spacing:.1em !important; }
.document-editor { font-size:14px !important; line-height:1.78 !important; padding:36px 46px !important; color:#27313d !important; background:#fff !important; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace !important; }
.document-preview { padding:44px 56px 80px !important; max-width:760px !important; margin:0 auto !important; }
.document-preview h1 { font-size:34px !important; letter-spacing:-.045em !important; margin-bottom:28px !important; }
.document-preview h2 { font-size:22px !important; letter-spacing:-.03em !important; border-bottom:1px solid #e7eaee !important; padding-bottom:9px !important; margin-top:30px !important; }
.document-preview p, .document-preview li { font-size:14px !important; line-height:1.65 !important; color:#364150 !important; }
.document-preview .mermaid, .document-preview [data-mermaid] { border:1px solid var(--cm-line) !important; border-radius:11px !important; padding:20px !important; background:#fbfcfd !important; }
.document-export-menu > summary { min-height:40px !important; border-radius:9px !important; }

/* Settings — wide desktop preference workspace --------------------------- */
.settings-modal { width:min(1240px, calc(100vw - 36px)) !important; max-width:none !important; padding:0 !important; border-radius:16px !important; }
.settings-modal form { width:100% !important; max-width:none !important; height:min(760px, calc(100vh - 36px)) !important; border-radius:16px !important; overflow:hidden !important; }
.settings-shell { grid-template-columns:220px minmax(0,1fr) !important; height:100%; }
.settings-nav { padding:28px 16px !important; background:#fbfcfd !important; border-right:1px solid var(--cm-line) !important; }
.settings-nav h2 { font-size:24px !important; letter-spacing:-.035em !important; }
.settings-nav nav button { min-height:44px !important; border-radius:9px !important; padding:0 12px !important; font-size:11.5px !important; }
.settings-nav nav button.active { background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.settings-content { padding:30px 34px 42px !important; overflow:auto !important; }
#settings-appearance { display:grid !important; grid-template-columns:minmax(360px,.92fr) minmax(420px,1.08fr) !important; column-gap:28px !important; row-gap:16px !important; align-items:start; }
#settings-appearance > .settings-section-heading { grid-column:1 / -1; }
.settings-section-heading h3 { font-size:24px !important; letter-spacing:-.035em !important; }
.settings-section-heading p { font-size:11.5px !important; color:var(--cm-muted) !important; max-width:650px; }
#theme-picker { grid-column:1; grid-row:2; }
#settings-appearance > .settings-control-group:not(.inline-control) { grid-column:1; grid-row:3; }
#settings-appearance > .settings-control-group.inline-control { grid-column:1; grid-row:4; }
#settings-appearance > .settings-live-preview { grid-column:2; grid-row:2 / span 3; margin:0 !important; min-height:478px !important; height:100% !important; }
.theme-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; }
.theme-choice { min-height:108px !important; border-radius:11px !important; padding:14px !important; }
.theme-choice.active { border-color:var(--cm-accent) !important; background:var(--cm-accent-softer) !important; box-shadow:0 0 0 1px var(--cm-accent) !important; }
.theme-choice > span:first-child { width:31px !important; height:31px !important; border-radius:8px !important; }
.theme-choice strong { font-size:11.5px !important; }
.theme-choice small { font-size:9.5px !important; }
.settings-control-group { border:1px solid var(--cm-line) !important; border-radius:11px !important; padding:16px !important; background:#fff !important; }
.settings-control-copy strong { font-size:11.5px !important; }
.settings-control-copy span { font-size:10px !important; color:var(--cm-muted) !important; }
.density-picker { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; }
.density-picker button { min-height:74px !important; border-radius:9px !important; padding:12px !important; }
.density-picker button.active { border-color:var(--cm-accent) !important; background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }
.settings-live-preview { border:1px solid var(--cm-line) !important; border-radius:12px !important; overflow:hidden !important; background:#fff !important; }
.settings-live-head { min-height:60px !important; padding:0 16px !important; border-bottom:1px solid var(--cm-line) !important; }
.settings-live-head strong { font-size:11.5px !important; }
.settings-live-head small { font-size:9.5px !important; }
.settings-preview-app { min-height:410px !important; grid-template-columns:120px 1fr !important; }
.settings-preview-app aside { background:#fbfcfd !important; border-right:1px solid var(--cm-line) !important; padding:16px 12px !important; }
.preview-brand { background:var(--cm-accent) !important; }
.settings-preview-app aside i.active { background:var(--cm-accent-soft) !important; }
.settings-preview-canvas { background-color:#fbfbfa !important; background-image:radial-gradient(circle at 1px 1px,rgba(71,85,105,.12) 1px,transparent 1px) !important; background-size:18px 18px !important; padding:24px !important; }
.settings-preview-canvas article { border-radius:9px !important; box-shadow:0 6px 16px rgba(15,23,42,.07) !important; }

/* Theme alignment for the new concept layer ------------------------------ */
html[data-theme="dark"] .workspace-shell,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .home-overlay,
html[data-theme="dark"] .home-header,
html[data-theme="dark"] .topbar .tool-rail.add-menu,
html[data-theme="dark"] .command-palette,
html[data-theme="dark"] .palette-search,
html[data-theme="dark"] .palette-filters,
html[data-theme="dark"] .command-results,
html[data-theme="dark"] .palette-hint,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .board-details-content,
html[data-theme="dark"] .board-view-root,
html[data-theme="dark"] .document-page,
html[data-theme="dark"] .document-topbar,
html[data-theme="dark"] .document-formatbar,
html[data-theme="dark"] .document-editor,
html[data-theme="dark"] .document-preview,
html[data-theme="dark"] .settings-modal form { background:var(--cm-panel) !important; color:var(--cm-ink) !important; }
html[data-theme="dark"] .canvas { background-color:var(--cm-canvas) !important; }
html[data-theme="dark"] .home-stat-grid article,
html[data-theme="dark"] .home-recent-panel,
html[data-theme="dark"] .home-side-card,
html[data-theme="dark"] .home-board-card,
html[data-theme="dark"] .calendar-main,
html[data-theme="dark"] .calendar-upcoming,
html[data-theme="dark"] .timeline-shell,
html[data-theme="dark"] .timeline-inspector,
html[data-theme="dark"] .settings-control-group,
html[data-theme="dark"] .settings-live-preview { background:var(--cm-panel) !important; border-color:var(--cm-line) !important; }
html[data-theme="dark"] .home-board-card .home-board-copy { background:var(--cm-panel); }
html[data-theme="dark"] .cal-day { background:var(--cm-panel) !important; }
html[data-theme="dark"] .document-editor, html[data-theme="dark"] .document-preview p, html[data-theme="dark"] .document-preview li { color:var(--cm-ink-soft) !important; }

/* Desktop composition guardrails ---------------------------------------- */
@media (max-width: 1220px) {
  .home-main-grid { grid-template-columns:1fr !important; }
  .home-side-stack { grid-template-columns:1fr 1fr; }
  .timeline-layout { grid-template-columns:1fr !important; }
  .timeline-inspector { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; min-height:0; }
  .timeline-inspector-head { grid-column:1/-1; }
  .timeline-inspector section { border-bottom:0; padding:4px; }
  #settings-appearance { grid-template-columns:1fr !important; }
  #settings-appearance > .settings-live-preview { grid-column:1; grid-row:auto; min-height:400px !important; }
  #theme-picker, #settings-appearance > .settings-control-group:not(.inline-control), #settings-appearance > .settings-control-group.inline-control { grid-column:1; grid-row:auto; }
}
@media (max-width: 980px) {
  .home-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .home-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .calendar-layout { grid-template-columns:1fr !important; }
  .calendar-upcoming { display:block !important; }
  .topbar-left, .topbar-actions { flex-basis:auto; }
  .side-panel { width:min(410px,75vw) !important; }
}
@media (max-width: 760px) {
  .home-header { position:relative !important; padding:22px 18px !important; }
  .home-dashboard { padding:18px !important; }
  .home-stat-grid { grid-template-columns:1fr 1fr !important; }
  .home-board-grid { grid-template-columns:1fr !important; }
  .home-side-stack { grid-template-columns:1fr; }
  .timeline-inspector { grid-template-columns:1fr 1fr; }
  .topbar .tool-rail.add-menu { right:-8px !important; width:304px !important; }
  .settings-modal { width:calc(100vw - 12px) !important; }
  .settings-shell { grid-template-columns:1fr !important; }
  .settings-preview-app { grid-template-columns:72px 1fr !important; }
  .document-editor { padding:28px 22px !important; }
  .document-preview { padding:34px 24px 64px !important; }
}
@media (max-width: 520px) {
  .home-stat-grid { grid-template-columns:1fr !important; }
  .timeline-inspector { grid-template-columns:1fr; }
  .side-panel { width:100% !important; max-width:none !important; }
}

/* Small corrections for concept-alignment components. */
.add-menu-more > summary > svg:last-child { display:none !important; }
.add-menu-library button {
  width:100% !important; height:39px !important; min-height:39px !important;
  display:grid !important; grid-template-columns:20px minmax(0,1fr) !important; gap:7px !important;
  align-items:center !important; padding:5px 7px !important; border:0 !important; border-radius:7px !important;
  background:transparent !important; color:var(--cm-ink) !important; text-align:left !important; font-size:10.5px !important;
}
.add-menu-library button:hover { background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }
.add-menu-library button span { font-size:10.5px !important; font-weight:650 !important; }

/* ==========================================================================\n   V5 — Target-reference system\n   The ten approved concept screens are the visual specification for desktop.\n   This layer intentionally overrides earlier exploratory treatments.\n   ========================================================================== */
:root {
  --cm-accent:#2563eb;
  --cm-accent-hover:#1d4ed8;
  --cm-accent-soft:#eaf2ff;
  --cm-accent-softer:#f4f8ff;
  --cm-ink:#172033;
  --cm-ink-soft:#566174;
  --cm-muted:#7a8494;
  --cm-line:#e3e7ed;
  --cm-line-strong:#d5dbe4;
  --cm-panel:#fff;
  --cm-canvas:#fbfbfa;
  --cm-sidebar:#fcfcfd;
  --cm-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 5px 14px rgba(15,23,42,.04);
  --cm-shadow:0 12px 34px rgba(15,23,42,.09),0 2px 8px rgba(15,23,42,.04);
  --sidebar-expanded:240px;
  --sidebar-rail:64px;
  --topbar-height:80px;
  --accent:var(--cm-accent);
  --accent-2:var(--cm-accent-soft);
}
body { color:var(--cm-ink); background:#fff; font-size:14px; }
button,input,textarea,select { color:inherit; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid rgba(37,99,235,.55); outline-offset:2px; }

/* Shell ------------------------------------------------------------------ */
.workspace-shell { grid-template-columns:var(--sidebar-expanded) minmax(0,1fr) !important; background:#fff !important; }
.workspace-shell.sidebar-collapsed { grid-template-columns:var(--sidebar-rail) minmax(0,1fr) !important; }
.sidebar {
  position:relative !important; z-index:42 !important; min-width:0 !important;
  background:var(--cm-sidebar) !important; color:var(--cm-ink) !important;
  border-right:1px solid var(--cm-line) !important; box-shadow:none !important;
}
.brand-lockup.compact { height:76px !important; padding:0 22px !important; gap:11px !important; font-size:16px !important; border-bottom:0 !important; }
.brand-lockup.compact .brand-mark { width:30px !important; height:30px !important; border-radius:8px !important; background:var(--cm-accent) !important; color:#fff !important; box-shadow:0 5px 14px rgba(37,99,235,.18) !important; }
.brand-lockup.compact strong { font-size:15px !important; font-weight:750 !important; letter-spacing:-.02em !important; }
.sidebar-rail-toggle { display:none !important; }
.sidebar-utility-hidden,.favorites-list.sidebar-board-data { display:none !important; }
.sidebar-scroll-region { min-height:0 !important; overflow:visible !important; padding:12px 14px 0 !important; }
.sidebar-primary { display:grid !important; gap:5px !important; padding:0 !important; }
.sidebar-primary > button,.boards-nav-row > #boards-button {
  position:relative !important; width:100% !important; min-height:44px !important; height:44px !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important;
  padding:0 12px !important; border:0 !important; border-radius:9px !important; background:transparent !important;
  color:#455064 !important; font-size:14px !important; font-weight:550 !important; cursor:pointer !important;
}
.sidebar-primary > button:hover,.boards-nav-row > #boards-button:hover { background:#f3f6fa !important; color:var(--cm-ink) !important; }
.sidebar-primary > button.active,.boards-nav-row > #boards-button.active { background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; font-weight:650 !important; }
.sidebar-primary .nav-icon,.sidebar-footer .nav-icon { width:20px !important; height:20px !important; display:grid !important; place-items:center !important; flex:0 0 20px !important; color:#647084 !important; }
.sidebar-primary .active .nav-icon { color:var(--cm-accent) !important; }
.sidebar-primary .nav-count,.sidebar-footer .nav-count { margin-left:auto !important; min-width:22px !important; height:22px !important; padding:0 7px !important; display:grid !important; place-items:center !important; border-radius:999px !important; background:#f0f2f5 !important; color:#657084 !important; font-size:11px !important; }
.boards-nav-row { position:relative !important; display:block !important; }
.sidebar-new-board { position:absolute !important; right:7px !important; top:8px !important; width:28px !important; height:28px !important; min-width:28px !important; padding:0 !important; border:0 !important; border-radius:7px !important; background:transparent !important; color:#778294 !important; opacity:0 !important; }
.boards-nav-row:hover .sidebar-new-board,.sidebar-new-board:focus-visible { opacity:1 !important; background:#fff !important; }
.sidebar-footer { margin-top:auto !important; padding:14px 14px 18px !important; border-top:1px solid var(--cm-line) !important; background:var(--cm-sidebar) !important; display:grid !important; gap:5px !important; }
.sidebar-footer > button { min-height:42px !important; height:42px !important; padding:0 12px !important; border:0 !important; border-radius:9px !important; background:transparent !important; color:#455064 !important; display:flex !important; align-items:center !important; gap:12px !important; font-size:14px !important; }
.sidebar-footer > button:hover { background:#f3f6fa !important; color:var(--cm-ink) !important; }
.sidebar-footer > #account-button { height:auto !important; min-height:58px !important; margin-top:6px !important; padding:8px 8px !important; border-top:1px solid var(--cm-line) !important; border-radius:0 !important; }
#account-button > span { width:34px !important; height:34px !important; margin:0 !important; border-radius:50% !important; background:#efe4b9 !important; color:#26344a !important; box-shadow:none !important; }
#account-button div { flex:1 !important; }
#account-button strong { font-size:12.5px !important; color:var(--cm-ink) !important; }
#account-button small { font-size:10.5px !important; color:var(--cm-muted) !important; }
#account-button i { margin-left:auto !important; color:var(--cm-muted) !important; }
.board-switcher-popover:not(.hidden) {
  position:fixed !important; z-index:100 !important; left:14px !important; top:208px !important; width:286px !important; max-height:min(440px,calc(100vh - 260px)) !important;
  display:grid !important; gap:3px !important; padding:8px !important; overflow:auto !important;
  border:1px solid var(--cm-line) !important; border-radius:12px !important; background:#fff !important; box-shadow:var(--cm-shadow) !important;
}
.board-switcher-popover button { min-height:40px !important; border-radius:8px !important; color:#485468 !important; }
.board-switcher-popover button:hover,.board-switcher-popover button.active { background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }

/* Compact rail: icon-only and completely bounded. */
.workspace-shell.sidebar-collapsed .sidebar { width:var(--sidebar-rail) !important; max-width:var(--sidebar-rail) !important; }
.workspace-shell.sidebar-collapsed .brand-lockup.compact { height:76px !important; padding:0 !important; justify-content:center !important; }
.workspace-shell.sidebar-collapsed .brand-lockup strong,.workspace-shell.sidebar-collapsed .nav-label,.workspace-shell.sidebar-collapsed #account-button div,.workspace-shell.sidebar-collapsed #account-button i { display:none !important; }
.workspace-shell.sidebar-collapsed .sidebar-scroll-region { padding:12px 8px 0 !important; }
.workspace-shell.sidebar-collapsed .sidebar-primary > button,.workspace-shell.sidebar-collapsed .boards-nav-row > #boards-button,.workspace-shell.sidebar-collapsed .sidebar-footer > button { width:48px !important; min-width:48px !important; height:44px !important; min-height:44px !important; margin:0 auto !important; padding:0 !important; justify-content:center !important; overflow:visible !important; }
.workspace-shell.sidebar-collapsed .sidebar-primary .nav-count,.workspace-shell.sidebar-collapsed .sidebar-footer .nav-count { position:absolute !important; right:0 !important; top:1px !important; min-width:17px !important; height:17px !important; padding:0 4px !important; font-size:9px !important; border:2px solid var(--cm-sidebar) !important; }
.workspace-shell.sidebar-collapsed .sidebar-footer { padding:12px 8px 14px !important; }
.workspace-shell.sidebar-collapsed #account-button { border-top:0 !important; margin-top:4px !important; }
.workspace-shell.sidebar-collapsed #account-button > span { width:34px !important; height:34px !important; }
.workspace-shell.sidebar-collapsed .sidebar-new-board { display:none !important; }

/* Board header ------------------------------------------------------------ */
.board-shell { grid-template-rows:var(--topbar-height) minmax(0,1fr) !important; background:#fff !important; }
.topbar {
  height:var(--topbar-height) !important; min-height:var(--topbar-height) !important; padding:0 28px !important;
  display:grid !important; grid-template-columns:minmax(300px,1fr) auto minmax(300px,1fr) !important; align-items:center !important;
  border-bottom:1px solid var(--cm-line) !important; background:rgba(255,255,255,.96) !important; backdrop-filter:blur(16px) !important; box-shadow:none !important;
}
.topbar-left { min-width:0 !important; display:flex !important; align-items:center !important; gap:14px !important; }
#sidebar-toggle { display:none !important; }
.board-title-wrap { min-width:0 !important; gap:12px !important; }
.board-icon { width:38px !important; height:38px !important; min-width:38px !important; display:grid !important; place-items:center !important; border:0 !important; border-radius:10px !important; background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.board-identity-copy { min-width:0 !important; display:grid !important; gap:3px !important; }
.board-title-field { position:relative !important; min-width:180px !important; max-width:390px !important; height:25px !important; }
#board-title { position:absolute !important; inset:0 !important; width:100% !important; height:25px !important; padding:0 !important; border:0 !important; background:transparent !important; font-size:18px !important; font-weight:720 !important; letter-spacing:-.025em !important; color:transparent !important; caret-color:var(--cm-ink) !important; z-index:2 !important; }
#board-title:focus { color:var(--cm-ink) !important; background:#fff !important; }
#board-title-display { position:absolute !important; inset:0 !important; z-index:1 !important; display:block !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:18px !important; line-height:25px !important; font-weight:720 !important; letter-spacing:-.025em !important; color:var(--cm-ink) !important; cursor:text !important; }
#board-title:focus + #board-title-display { opacity:0 !important; pointer-events:none !important; }
#board-workspace-label { font-size:11.5px !important; color:var(--cm-muted) !important; }
.favorite-button { width:28px !important; height:28px !important; border:0 !important; background:transparent !important; color:#8a94a4 !important; }
.favorite-button.active { color:#e3ad17 !important; }
.topbar-center { justify-self:center !important; display:flex !important; align-items:center !important; gap:8px !important; }
.view-switcher { height:48px !important; padding:4px !important; gap:1px !important; border:1px solid var(--cm-line) !important; border-radius:12px !important; background:#f5f7f9 !important; box-shadow:none !important; }
.view-switcher button { height:38px !important; min-width:112px !important; padding:0 16px !important; gap:8px !important; border:0 !important; border-radius:9px !important; background:transparent !important; color:#657084 !important; font-size:13.5px !important; font-weight:600 !important; }
.view-switcher button.active { background:#fff !important; color:var(--cm-accent) !important; box-shadow:0 1px 3px rgba(15,23,42,.08) !important; }
.view-tools-toggle { display:none !important; }
.topbar-actions { justify-self:end !important; display:flex !important; align-items:center !important; gap:8px !important; overflow:visible !important; }
#presence-strip,#notifications-button,#present-button { display:none !important; }
.add-menu-toggle { height:42px !important; padding:0 17px !important; border-radius:9px !important; gap:8px !important; background:var(--cm-accent) !important; color:#fff !important; border:0 !important; box-shadow:0 4px 12px rgba(37,99,235,.18) !important; font-size:13.5px !important; font-weight:700 !important; }
.add-menu-toggle:hover { background:var(--cm-accent-hover) !important; }
#share-board,.more-action { height:42px !important; padding:0 15px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; border:1px solid var(--cm-line) !important; border-radius:9px !important; background:#fff !important; color:#39465a !important; box-shadow:none !important; font-size:13.5px !important; font-weight:650 !important; }
#share-board:hover,.more-action:hover { background:#f8fafc !important; border-color:var(--cm-line-strong) !important; }

/* Add popover: deliberately a compact menu, not a giant creation sheet. */
.topbar .tool-rail.add-menu {
  position:absolute !important; z-index:110 !important; top:50px !important; right:0 !important; left:auto !important;
  width:310px !important; max-height:min(700px,calc(100vh - 100px)) !important; display:block !important;
  padding:10px !important; overflow:auto !important; border:1px solid var(--cm-line) !important; border-radius:12px !important;
  background:#fff !important; box-shadow:0 18px 50px rgba(15,23,42,.14),0 4px 12px rgba(15,23,42,.05) !important; backdrop-filter:none !important;
}
.topbar .tool-rail.add-menu.hidden { display:none !important; }
.add-menu-head { display:none !important; }
.add-menu-group { padding:4px 0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; }
.add-menu-group + .add-menu-group { margin-top:5px !important; padding-top:9px !important; border-top:1px solid var(--cm-line) !important; }
.add-menu-group h3 { margin:0 !important; padding:6px 10px !important; color:#7b8697 !important; font-size:9.5px !important; line-height:1 !important; letter-spacing:.12em !important; text-transform:uppercase !important; font-weight:800 !important; }
.add-menu-group > div { display:grid !important; grid-template-columns:1fr !important; gap:1px !important; }
.topbar .tool-rail.add-menu .add-menu-group button { width:100% !important; min-width:0 !important; height:57px !important; min-height:57px !important; padding:7px 10px !important; display:grid !important; grid-template-columns:24px minmax(0,1fr) !important; align-items:center !important; justify-content:stretch !important; gap:10px !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:var(--cm-ink) !important; text-align:left !important; box-shadow:none !important; }
.topbar .tool-rail.add-menu .add-menu-group button:hover { background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }
.topbar .tool-rail.add-menu .add-menu-group button > span { display:grid !important; gap:2px !important; min-width:0 !important; color:inherit !important; text-transform:none !important; }
.topbar .tool-rail.add-menu .add-menu-group button strong { font-size:13px !important; font-weight:650 !important; color:inherit !important; }
.topbar .tool-rail.add-menu .add-menu-group button small { font-size:10.5px !important; line-height:1.25 !important; font-weight:450 !important; color:var(--cm-muted) !important; }
.add-menu-more { margin-top:6px !important; border-top:1px solid var(--cm-line) !important; }
.add-menu-more > summary { min-height:44px !important; padding:0 10px !important; display:flex !important; align-items:center !important; gap:10px !important; border-radius:8px !important; cursor:pointer !important; list-style:none !important; color:#586579 !important; }
.add-menu-more > summary:hover { background:#f8fafc !important; }
.add-menu-more > summary span { display:grid !important; gap:1px !important; }
.add-menu-more > summary strong { font-size:12px !important; }
.add-menu-more > summary small { font-size:9.5px !important; color:var(--cm-muted) !important; }
.add-menu-library { display:grid !important; grid-template-columns:1fr 1fr !important; gap:2px !important; padding:5px !important; }
.add-menu-library button { height:38px !important; min-height:38px !important; }

/* Canvas --------------------------------------------------------------- */
.canvas { background-color:var(--cm-canvas) !important; background-image:radial-gradient(circle at 1px 1px,rgba(100,116,139,.14) 1px,transparent 1px) !important; background-size:24px 24px !important; }
.canvas-hint { left:50% !important; right:auto !important; bottom:18px !important; transform:translateX(-50%) !important; padding:6px 10px !important; border:1px solid var(--cm-line) !important; border-radius:8px !important; background:rgba(255,255,255,.88) !important; color:#8791a0 !important; box-shadow:0 2px 8px rgba(15,23,42,.04) !important; font-size:10px !important; }
.canvas-controls { left:24px !important; right:auto !important; bottom:20px !important; height:48px !important; min-height:48px !important; padding:5px 8px !important; gap:3px !important; border:1px solid var(--cm-line) !important; border-radius:11px !important; background:rgba(255,255,255,.96) !important; box-shadow:0 7px 24px rgba(15,23,42,.08) !important; }
.canvas-controls button { width:34px !important; height:34px !important; border:0 !important; border-radius:7px !important; background:transparent !important; color:#5f6b7d !important; }
.canvas-controls button:hover,.canvas-controls button.active { background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }
#zoom-label { min-width:48px !important; font-size:12px !important; font-weight:650 !important; color:#4d596c !important; text-align:center !important; }
.minimap { left:24px !important; right:auto !important; bottom:82px !important; width:150px !important; height:72px !important; opacity:.48 !important; border-radius:9px !important; border:1px solid var(--cm-line) !important; background:rgba(255,255,255,.9) !important; box-shadow:0 4px 12px rgba(15,23,42,.06) !important; }
.minimap:hover { opacity:.9 !important; }
.canvas-item { border:1px solid #e0e5eb !important; border-radius:11px !important; background:#fff !important; box-shadow:0 7px 24px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04) !important; grid-template-rows:42px minmax(0,1fr) !important; }
.canvas-item:hover { border-color:#d6dce5 !important; box-shadow:0 12px 32px rgba(15,23,42,.10),0 2px 5px rgba(15,23,42,.04) !important; }
.canvas-item.selected { outline:2px solid #3b82f6 !important; outline-offset:1px !important; box-shadow:0 12px 34px rgba(37,99,235,.14) !important; }
.item-header { min-height:42px !important; padding:0 11px !important; gap:8px !important; border-bottom:1px solid #edf0f4 !important; background:rgba(255,255,255,.9) !important; }
.item-kind { width:25px !important; height:25px !important; border-radius:7px !important; background:#f2f5f8 !important; color:#697587 !important; }
.item-title { font-size:12px !important; font-weight:650 !important; color:#273347 !important; }
.item-actions button { color:#778294 !important; }
.item-actions button:hover { background:#f3f6fa !important; color:#273347 !important; }

/* Sticky paper instead of a generic yellow card with chrome. */
.canvas-item.type-note { overflow:visible !important; display:block !important; background:linear-gradient(145deg,#fff2a7 0%,#ffefa0 88%,#f3da67 100%) !important; border-color:#f1db72 !important; box-shadow:0 7px 22px rgba(113,87,17,.12) !important; }
.canvas-item.type-note::after { content:""; position:absolute; right:-1px; bottom:-1px; width:34px; height:34px; background:linear-gradient(135deg,rgba(255,255,255,0) 48%,#f6dc72 49%,#fff5b5 100%); border-bottom-right-radius:10px; pointer-events:none; }
.type-note .item-header { position:absolute !important; inset:0 0 auto 0 !important; z-index:4 !important; height:34px !important; min-height:34px !important; border:0 !important; background:transparent !important; }
.type-note .item-kind,.type-note .item-title { opacity:0 !important; pointer-events:none !important; }
.type-note:hover .item-kind,.type-note.selected .item-kind { opacity:.55 !important; }
.type-note .item-body { height:100% !important; min-height:100% !important; overflow:hidden !important; }
.type-note .note-editor { height:100% !important; min-height:100% !important; padding:34px 26px 28px !important; font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive !important; font-size:17px !important; line-height:1.55 !important; color:#34311e !important; background:transparent !important; }
.type-note .item-date-row { position:absolute !important; left:18px !important; bottom:10px !important; opacity:0 !important; transition:.15s !important; }
.type-note:hover .item-date-row,.type-note.selected .item-date-row { opacity:.55 !important; }

/* Rich rendered Markdown card. */
.markdown-canvas-preview { width:100% !important; height:100% !important; display:flex !important; flex-direction:column !important; padding:0 !important; border:0 !important; background:#fff !important; color:#364257 !important; text-align:left !important; cursor:pointer !important; }
.markdown-card-rendered { flex:1 !important; overflow:hidden !important; padding:17px 19px 12px !important; font-size:12.5px !important; line-height:1.55 !important; }
.markdown-card-rendered h1,.markdown-card-rendered h2,.markdown-card-rendered h3 { margin:0 0 9px !important; color:var(--cm-accent) !important; font-size:15px !important; line-height:1.25 !important; font-weight:700 !important; }
.markdown-card-rendered h2 { margin-top:12px !important; font-size:13.5px !important; }
.markdown-card-rendered p,.markdown-card-rendered ul { margin:0 0 8px !important; }
.markdown-card-rendered ul { padding-left:18px !important; }
.markdown-canvas-preview footer { height:34px !important; padding:0 16px !important; border-top:1px solid #edf0f4 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; color:#8a94a4 !important; font-size:9.5px !important; }
.markdown-canvas-preview footer strong { color:var(--cm-accent) !important; font-size:10px !important; }

/* Link cards read like previews; form controls only reveal on focus. */
.link-preview-card { display:flex !important; flex-direction:column !important; height:100% !important; padding:12px !important; gap:8px !important; background:#fff !important; }
.link-preview-media { min-height:92px !important; display:flex !important; align-items:center !important; gap:14px !important; padding:15px !important; border:1px solid #e7ebf0 !important; border-radius:8px !important; background:linear-gradient(135deg,#111827,#27364f) !important; color:#fff !important; text-decoration:none !important; }
.link-site-mark { width:34px !important; height:34px !important; border-radius:8px !important; background:#fff !important; color:#111827 !important; display:grid !important; place-items:center !important; font-size:11px !important; font-weight:800 !important; }
.link-preview-lines { flex:1 !important; display:grid !important; gap:7px !important; }
.link-preview-lines::before,.link-preview-lines::after { content:""; height:7px; border-radius:999px; background:rgba(255,255,255,.65); }
.link-preview-lines::after { width:65%; opacity:.55; }
.link-preview-fields { display:grid !important; gap:2px !important; }
.link-preview-fields input { width:100% !important; height:25px !important; padding:0 !important; border:0 !important; background:transparent !important; }
.link-preview-fields .link-description { font-size:12px !important; font-weight:650 !important; color:#263247 !important; }
.link-preview-fields .link-url { font-size:10px !important; color:#8791a0 !important; }
.link-preview-fields input:focus { outline:1px solid #cbd8f8 !important; border-radius:5px !important; padding:0 5px !important; }
.link-open { margin-top:auto !important; font-size:10px !important; font-weight:650 !important; color:var(--cm-accent) !important; }

.checklist-list { padding:10px 14px 8px !important; }
.checklist-list label { min-height:32px !important; gap:9px !important; font-size:11.5px !important; }
.checklist-list input[type="checkbox"] { width:16px !important; height:16px !important; accent-color:var(--cm-accent) !important; }
.type-image .item-body img,.type-image img { border-radius:0 0 10px 10px !important; }
.container-card { border-color:#dbe6fb !important; background:linear-gradient(180deg,#f7faff,#f2f7ff) !important; }
.container-card.selected { background:linear-gradient(180deg,#f2f7ff,#eaf2ff) !important; }

/* Command palette — 21st.dev dense command pattern adapted to the current DOM. */
.command-palette:not(.hidden) { position:fixed !important; z-index:130 !important; top:70px !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:min(700px,calc(100vw - 40px)) !important; max-height:min(820px,calc(100vh - 110px)) !important; display:grid !important; grid-template-rows:auto auto minmax(0,1fr) auto !important; overflow:hidden !important; border:1px solid rgba(208,215,225,.95) !important; border-radius:12px !important; background:#fff !important; color:var(--cm-ink) !important; box-shadow:0 0 0 100vmax rgba(15,23,42,.38),0 24px 70px rgba(15,23,42,.18) !important; }
.palette-search-row { height:58px !important; padding:0 14px !important; display:grid !important; grid-template-columns:22px minmax(0,1fr) auto !important; gap:10px !important; align-items:center !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; }
.palette-search-row input { width:100% !important; height:46px !important; padding:0 !important; border:0 !important; outline:0 !important; background:transparent !important; color:var(--cm-ink) !important; font-size:14px !important; }
.palette-search-row kbd,.palette-hint kbd { min-width:27px !important; height:24px !important; padding:0 6px !important; display:inline-grid !important; place-items:center !important; border:1px solid var(--cm-line) !important; border-radius:6px !important; background:#f8fafc !important; color:#697587 !important; box-shadow:none !important; font-size:10px !important; }
.palette-filters { min-height:52px !important; padding:9px 14px !important; display:flex !important; align-items:center !important; gap:7px !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; }
.palette-filters button { height:30px !important; padding:0 12px !important; border:0 !important; border-radius:999px !important; background:#f4f6f8 !important; color:#536074 !important; font-size:11px !important; font-weight:600 !important; }
.palette-filters button.active { background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.command-results { min-height:0 !important; overflow:auto !important; padding:8px !important; background:#fff !important; }
.palette-section-label { padding:9px 9px 6px !important; color:#8b95a4 !important; font-size:9.5px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.1em !important; }
.command-results button { width:100% !important; min-height:46px !important; padding:7px 9px !important; display:grid !important; grid-template-columns:30px minmax(0,1fr) auto !important; align-items:center !important; gap:10px !important; border:0 !important; border-radius:8px !important; background:#fff !important; color:var(--cm-ink) !important; text-align:left !important; }
.command-results button:hover,.command-results button.active { background:var(--cm-accent-softer) !important; }
.palette-row-icon { width:28px !important; height:28px !important; display:grid !important; place-items:center !important; border:1px solid #e7ebf0 !important; border-radius:7px !important; background:#fff !important; color:#5f6c80 !important; }
.command-results button.active .palette-row-icon { border-color:#ccdbff !important; color:var(--cm-accent) !important; }
.palette-row-copy { min-width:0 !important; display:grid !important; gap:2px !important; }
.palette-row-copy strong { font-size:12.5px !important; font-weight:630 !important; color:#263247 !important; }
.palette-row-copy small { font-size:10px !important; color:#8a94a4 !important; }
.palette-row-end { font-size:10px !important; color:#8a94a4 !important; }
.palette-hint { min-height:46px !important; padding:0 14px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; border-top:1px solid var(--cm-line) !important; background:#fff !important; color:#8a94a4 !important; font-size:10px !important; }

/* Board details --------------------------------------------------------- */
.side-panel { top:var(--topbar-height) !important; right:0 !important; bottom:0 !important; width:430px !important; max-width:min(430px,45vw) !important; border-left:1px solid var(--cm-line) !important; background:#fff !important; box-shadow:-12px 0 34px rgba(15,23,42,.06) !important; }
.side-panel-header { height:72px !important; min-height:72px !important; padding:0 22px !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; }
.side-panel-title strong { font-size:17px !important; letter-spacing:-.02em !important; }
.side-panel-title small { font-size:10.5px !important; color:var(--cm-muted) !important; }
#panel-close { width:34px !important; height:34px !important; border:1px solid var(--cm-line) !important; border-radius:8px !important; background:#fff !important; }
.side-panel-body { display:block !important; overflow:auto !important; background:#fff !important; }
.board-details-content { padding:0 !important; }
.board-detail-section { padding:20px 22px !important; border-bottom:1px solid var(--cm-line) !important; }
.board-detail-section h3 { margin:0 0 13px !important; font-size:12px !important; font-weight:700 !important; color:#263247 !important; }
.board-detail-section label { display:grid !important; grid-template-columns:76px minmax(0,1fr) !important; align-items:center !important; gap:10px !important; font-size:11px !important; color:#626e80 !important; }
.board-detail-input { height:36px !important; padding:0 10px !important; border:1px solid var(--cm-line) !important; border-radius:7px !important; background:#fff !important; color:#263247 !important; font-size:11.5px !important; }
.board-detail-meta { margin-top:13px !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px 18px !important; }
.board-detail-meta span { display:grid !important; gap:3px !important; }
.board-detail-meta small { font-size:9px !important; color:#9099a7 !important; text-transform:none !important; }
.board-detail-meta strong { font-size:10.5px !important; font-weight:560 !important; color:#4f5c70 !important; }
.board-detail-members { display:flex !important; align-items:center !important; gap:0 !important; }
.board-detail-avatar { width:31px !important; height:31px !important; margin-left:-5px !important; border:2px solid #fff !important; border-radius:50% !important; background:#e7edf7 !important; color:#41506a !important; display:grid !important; place-items:center !important; font-size:10px !important; font-weight:700 !important; }
.board-detail-avatar:first-child { margin-left:0 !important; }
.board-detail-members strong { margin-left:10px !important; font-size:10px !important; color:#707b8d !important; }
.board-detail-tags { display:flex !important; flex-wrap:wrap !important; gap:7px !important; }
.board-detail-tags > span:not(.board-detail-empty) { padding:5px 9px !important; border-radius:6px !important; background:color-mix(in srgb,var(--tag-color) 20%,white) !important; color:#42516a !important; font-size:10px !important; }
.board-detail-updates { display:grid !important; gap:12px !important; }
.board-detail-updates > div { display:flex !important; align-items:flex-start !important; gap:9px !important; }
.board-detail-updates p { margin:0 !important; display:grid !important; gap:2px !important; font-size:10px !important; }
.board-detail-updates small { color:#8a94a4 !important; }
.board-tools-details { margin:12px 16px 22px !important; border:1px solid var(--cm-line) !important; border-radius:9px !important; background:#fbfcfe !important; }

/* Home destination ----------------------------------------------------- */
.workspace-shell.home-open .topbar { display:none !important; }
.workspace-shell.home-open .board-shell { grid-template-rows:minmax(0,1fr) !important; }
.home-overlay { position:absolute !important; inset:0 !important; z-index:36 !important; display:block !important; overflow:auto !important; padding:0 !important; background:#fff !important; color:var(--cm-ink) !important; }
.home-header { position:sticky !important; top:0 !important; z-index:2 !important; min-height:128px !important; padding:30px 46px 24px !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:30px !important; border-bottom:1px solid #eef1f5 !important; background:rgba(255,255,255,.96) !important; backdrop-filter:blur(14px) !important; }
.home-header h2 { margin:0 !important; font-size:30px !important; line-height:1.15 !important; font-weight:720 !important; letter-spacing:-.035em !important; color:#101827 !important; }
.home-header p { margin:8px 0 0 !important; font-size:13px !important; color:#7b8697 !important; }
.home-header-actions { display:flex !important; align-items:center !important; gap:8px !important; }
.home-header-actions button { height:40px !important; padding:0 14px !important; display:flex !important; align-items:center !important; gap:7px !important; border:1px solid var(--cm-line) !important; border-radius:8px !important; background:#fff !important; font-size:11.5px !important; font-weight:650 !important; }
.home-header-actions button.primary { border-color:var(--cm-accent) !important; background:var(--cm-accent) !important; color:#fff !important; }
.home-dashboard { padding:28px 46px 46px !important; max-width:1500px !important; margin:0 auto !important; }
.home-stat-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:18px !important; margin:0 0 24px !important; }
.home-stat-grid article { min-height:142px !important; padding:20px !important; display:flex !important; align-items:flex-start !important; gap:14px !important; border:1px solid var(--cm-line) !important; border-radius:11px !important; background:#fff !important; box-shadow:none !important; }
.home-stat-icon { width:38px !important; height:38px !important; flex:0 0 38px !important; display:grid !important; place-items:center !important; border-radius:9px !important; background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.home-stat-grid article > div { min-width:0 !important; display:grid !important; gap:5px !important; }
.home-stat-grid small { font-size:11px !important; font-weight:650 !important; color:#3e4a5f !important; }
.home-stat-grid strong { font-size:27px !important; line-height:1 !important; font-weight:720 !important; letter-spacing:-.04em !important; color:#111827 !important; }
.home-stat-grid em { margin-top:10px !important; font-style:normal !important; font-size:10px !important; color:#7d8797 !important; }
.home-main-grid { display:grid !important; grid-template-columns:minmax(0,1fr) 320px !important; gap:22px !important; align-items:start !important; }
.home-recent-panel,.home-side-card,.home-assigned-strip { border:1px solid var(--cm-line) !important; border-radius:12px !important; background:#fff !important; box-shadow:none !important; }
.home-recent-panel { padding:18px !important; }
.home-section-heading { min-height:36px !important; margin-bottom:14px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; }
.home-section-heading h3 { margin:0 !important; font-size:13px !important; font-weight:680 !important; color:#1f2a3d !important; }
.home-section-heading button { height:31px !important; padding:0 10px !important; border:1px solid var(--cm-line) !important; border-radius:7px !important; background:#fff !important; color:#4c586b !important; font-size:10px !important; }
.home-board-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; }
.home-board-card { position:relative !important; min-width:0 !important; overflow:hidden !important; display:block !important; padding:0 !important; border:1px solid var(--cm-line) !important; border-radius:9px !important; background:#fff !important; text-align:left !important; box-shadow:none !important; }
.home-board-card:hover { transform:translateY(-1px) !important; border-color:#cfd7e3 !important; box-shadow:0 7px 20px rgba(15,23,42,.07) !important; }
.home-board-cover { position:relative !important; height:150px !important; display:block !important; overflow:hidden !important; background:var(--home-board-color,#f2f5f8) !important; border-bottom:1px solid var(--cm-line) !important; }
.home-preview-chrome { height:24px !important; padding:0 8px !important; display:flex !important; align-items:center !important; gap:5px !important; background:rgba(255,255,255,.78) !important; }
.home-preview-chrome b { width:18px !important; height:5px !important; border-radius:999px !important; background:rgba(100,116,139,.18) !important; }
.home-preview-chrome span { margin-left:auto !important; font-size:8px !important; color:#718096 !important; }
.home-preview-stage { position:absolute !important; inset:24px 0 0 !important; background-image:radial-gradient(circle at 1px 1px,rgba(100,116,139,.12) 1px,transparent 1px) !important; background-size:12px 12px !important; }
.home-mini-item { position:absolute !important; display:block !important; min-width:14px !important; min-height:11px !important; overflow:hidden !important; border:1px solid rgba(255,255,255,.75) !important; border-radius:3px !important; background:#fff !important; box-shadow:0 2px 5px rgba(15,23,42,.08) !important; }
.home-mini-item b,.home-mini-item span { display:block !important; height:2px !important; margin:3px !important; border-radius:999px !important; background:color-mix(in srgb,var(--mini-tone) 55%,white) !important; }
.home-mini-item span:last-child { width:55% !important; }
.home-mini-item.mini-note { background:#fff0a7 !important; }
.home-mini-item.mini-image { background-color:#dce7f8 !important; }
.home-board-copy { min-height:67px !important; padding:12px 12px 10px !important; display:grid !important; gap:5px !important; background:#fff !important; }
.home-board-copy strong { font-size:11.5px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.home-board-copy em { font-style:normal !important; font-size:9.5px !important; color:#8a94a4 !important; }
.home-board-arrow { display:none !important; }
.home-side-stack { display:grid !important; gap:16px !important; }
.home-side-card { padding:16px !important; }
.home-list { display:grid !important; gap:5px !important; }
.home-list-row { min-height:49px !important; padding:7px !important; display:grid !important; grid-template-columns:32px minmax(0,1fr) auto !important; gap:8px !important; align-items:center !important; border:0 !important; border-radius:7px !important; background:#fff !important; text-align:left !important; }
.home-list-row:hover { background:#f7f9fb !important; }
.home-list-icon { width:30px !important; height:30px !important; display:grid !important; place-items:center !important; border-radius:7px !important; background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }
.home-list-row strong { display:block !important; font-size:10.5px !important; }
.home-list-row em { display:block !important; margin-top:2px !important; font-size:9px !important; font-style:normal !important; color:#8993a3 !important; }
.home-activity-list { list-style:none !important; margin:0 !important; padding:0 !important; display:grid !important; gap:12px !important; }
.home-activity-list li { display:flex !important; gap:9px !important; }
.home-activity-list .activity-dot { width:7px !important; height:7px !important; margin-top:5px !important; border-radius:50% !important; background:var(--cm-accent) !important; }
.home-activity-list li > div { display:grid !important; gap:2px !important; font-size:9.5px !important; }
.home-activity-list time { color:#8c96a5 !important; font-size:8.5px !important; }
.home-assigned-strip { margin-top:18px !important; padding:16px !important; }

/* Calendar ------------------------------------------------------------- */
.board-view-root { background:#fff !important; }
.board-view-header { min-height:120px !important; padding:28px 34px 18px !important; background:#fff !important; }
.board-view-header .eyebrow { margin:0 0 6px !important; color:var(--cm-accent) !important; font-size:9.5px !important; }
.board-view-header h2 { margin:0 !important; font-size:28px !important; letter-spacing:-.035em !important; color:#162033 !important; }
.board-view-subtitle { margin:6px 0 0 !important; font-size:11px !important; color:#7f8999 !important; }
.calendar-nav { align-self:center !important; display:flex !important; gap:7px !important; }
.calendar-nav button { height:38px !important; min-width:38px !important; padding:0 12px !important; border:1px solid var(--cm-line) !important; border-radius:8px !important; background:#fff !important; color:#4b576a !important; }
.calendar-next svg { transform:rotate(180deg) !important; }
.calendar-layout { padding:0 34px 34px !important; display:grid !important; grid-template-columns:minmax(0,1fr) 270px !important; gap:20px !important; }
.calendar-main,.calendar-upcoming { border:1px solid var(--cm-line) !important; border-radius:11px !important; background:#fff !important; overflow:hidden !important; }
.calendar-weekdays { height:44px !important; display:grid !important; grid-template-columns:repeat(7,1fr) !important; align-items:center !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; }
.calendar-weekdays span { padding-left:14px !important; color:#707b8c !important; font-size:9px !important; font-weight:750 !important; text-transform:none !important; }
.calendar-view { display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; grid-auto-rows:minmax(118px,1fr) !important; }
.cal-day { min-height:118px !important; padding:10px !important; border-right:1px solid #edf0f4 !important; border-bottom:1px solid #edf0f4 !important; background:#fff !important; }
.cal-day > strong { font-size:10px !important; color:#596679 !important; }
.cal-day.today { outline:2px solid var(--cm-accent) !important; outline-offset:-2px !important; }
.cal-day.today > strong { width:25px !important; height:25px !important; display:grid !important; place-items:center !important; border-radius:50% !important; background:var(--cm-accent) !important; color:#fff !important; }
.cal-events { margin-top:7px !important; display:grid !important; gap:5px !important; }
.cal-events button { min-height:28px !important; padding:5px 7px !important; display:flex !important; align-items:center !important; gap:6px !important; overflow:hidden !important; border:1px solid #dbe8ff !important; border-radius:6px !important; background:#f3f7ff !important; color:#39465a !important; font-size:9px !important; text-align:left !important; }
.cal-events button[data-kind="checklist"] { border-color:#d8eedf !important; background:#f2faf4 !important; }
.cal-events button[data-kind="decision"] { border-color:#e8ddfb !important; background:#f7f2ff !important; }
.cal-events button[data-kind="project"] { border-color:#fde1cd !important; background:#fff6ee !important; }
.cal-events button[data-kind="link"] { border-color:#e7ddfb !important; background:#f8f4ff !important; }
.cal-event-dot { width:6px !important; height:6px !important; border-radius:2px !important; background:#4b8df8 !important; }
.calendar-upcoming { padding:17px !important; }
.view-side-head h3 { margin:4px 0 0 !important; font-size:14px !important; }
.calendar-upcoming-list { display:grid !important; gap:7px !important; }
.calendar-upcoming-list button { min-height:57px !important; padding:7px !important; display:grid !important; grid-template-columns:55px minmax(0,1fr) !important; gap:8px !important; align-items:center !important; border:0 !important; border-radius:7px !important; background:#fff !important; text-align:left !important; }
.calendar-upcoming-list button:hover { background:#f7f9fb !important; }
.upcoming-date { min-height:43px !important; display:grid !important; place-content:center !important; text-align:center !important; border:1px solid var(--cm-line) !important; border-radius:7px !important; }
.upcoming-date strong { font-size:10px !important; }
.upcoming-date small { font-size:8px !important; color:#8a94a4 !important; }
.upcoming-copy { display:grid !important; gap:3px !important; }
.upcoming-copy small { font-size:8px !important; color:var(--cm-accent) !important; text-transform:uppercase !important; font-weight:800 !important; }
.upcoming-copy strong { font-size:10px !important; }

/* Timeline ------------------------------------------------------------- */
.timeline-layout { padding:0 34px 34px !important; grid-template-columns:minmax(0,1fr) 280px !important; gap:20px !important; }
.timeline-shell { border:1px solid var(--cm-line) !important; border-radius:11px !important; background:#fff !important; overflow:hidden !important; }
.timeline-scale { min-height:54px !important; grid-template-columns:230px minmax(0,1fr) !important; border-bottom:1px solid var(--cm-line) !important; }
.timeline-scale-label { padding:0 16px !important; display:flex !important; align-items:center !important; color:#707b8c !important; font-size:9px !important; font-weight:750 !important; text-transform:uppercase !important; }
.timeline-scale-track span strong { font-size:8.5px !important; color:#778294 !important; }
.timeline-row { min-height:67px !important; grid-template-columns:230px minmax(0,1fr) !important; border-bottom:1px solid #edf0f4 !important; background:#fff !important; }
.timeline-row-label { padding:0 14px !important; display:flex !important; align-items:center !important; gap:10px !important; }
.timeline-row-icon { width:32px !important; height:32px !important; display:grid !important; place-items:center !important; border-radius:8px !important; background:#f3f5f8 !important; color:#647084 !important; }
.timeline-row-label span { display:grid !important; gap:2px !important; text-align:left !important; }
.timeline-row-label small { font-size:8px !important; color:var(--cm-accent) !important; text-transform:uppercase !important; font-weight:800 !important; }
.timeline-row-label strong { font-size:10px !important; }
.timeline-track { background-image:linear-gradient(to right,#edf0f4 1px,transparent 1px) !important; background-size:12.5% 100% !important; }
.timeline-bar { height:30px !important; top:50% !important; transform:translateY(-50%) !important; border-radius:6px !important; background:#73a7fa !important; }
.timeline-bar[data-tone="1"] { background:#6cc794 !important; }
.timeline-bar[data-tone="2"] { background:#9d7be8 !important; }
.timeline-bar[data-tone="3"] { background:#f7a24f !important; }
.timeline-milestone { width:15px !important; height:15px !important; top:50% !important; transform:translate(-50%,-50%) rotate(45deg) !important; border:2px solid #75a7ec !important; background:#fff !important; }
.timeline-milestone[data-tone="1"] { border-color:#62b48e !important; }
.timeline-milestone[data-tone="2"] { border-color:#9678d0 !important; }
.timeline-milestone[data-tone="3"] { border-color:#e1a33e !important; }
.timeline-today { width:1px !important; background:var(--cm-accent) !important; }
.timeline-inspector { border:1px solid var(--cm-line) !important; border-radius:11px !important; background:#fff !important; box-shadow:none !important; }
.timeline-inspector-head { padding:17px !important; }
.timeline-inspector section { padding:15px 17px !important; border-top:1px solid var(--cm-line) !important; }

/* Focused document workspace ------------------------------------------ */
.document-page { background:#fff !important; color:var(--cm-ink) !important; }
.document-topbar { height:76px !important; padding:0 22px !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; }
.document-title { gap:11px !important; }
.document-title h2 { font-size:18px !important; letter-spacing:-.025em !important; }
.document-title small { font-size:10px !important; color:#7e8898 !important; }
.document-mode-switch { height:44px !important; padding:4px !important; border-radius:10px !important; background:#f4f6f8 !important; }
.document-mode-switch button { min-width:90px !important; height:36px !important; border-radius:8px !important; font-size:11.5px !important; }
.document-mode-switch button.active { background:#fff !important; color:var(--cm-accent) !important; box-shadow:0 1px 3px rgba(15,23,42,.08) !important; }
.document-formatbar { height:48px !important; padding:0 22px !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; gap:3px !important; }
.document-formatbar button { width:31px !important; height:31px !important; border:0 !important; border-radius:6px !important; background:transparent !important; color:#657084 !important; }
.document-formatbar button:hover { background:#f3f6fa !important; color:var(--cm-accent) !important; }
.document-editor { padding:26px 34px 50px !important; font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace !important; font-size:12.5px !important; line-height:1.65 !important; color:#334054 !important; background:#fff !important; }
.document-preview { padding:35px 48px 70px !important; background:#fff !important; color:#344055 !important; }
.document-preview h1 { margin:0 0 26px !important; font-size:29px !important; letter-spacing:-.035em !important; color:#182235 !important; }
.document-preview h2 { margin:26px 0 13px !important; padding-bottom:8px !important; border-bottom:1px solid var(--cm-line) !important; font-size:20px !important; letter-spacing:-.025em !important; color:#202b3d !important; }
.document-preview p,.document-preview li { font-size:12.5px !important; line-height:1.65 !important; }
.document-preview .mermaid,.document-preview svg { border-radius:9px !important; }

/* Settings is a destination page visually, while retaining <dialog> semantics. */
.settings-modal::backdrop { background:transparent !important; backdrop-filter:none !important; }
.settings-modal[open] { position:fixed !important; z-index:120 !important; top:0 !important; right:0 !important; bottom:0 !important; left:var(--sidebar-expanded) !important; width:auto !important; max-width:none !important; height:100vh !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:#fff !important; box-shadow:none !important; overflow:hidden !important; }
.workspace-shell.sidebar-collapsed .settings-modal[open] { left:var(--sidebar-rail) !important; }
.settings-modal > form { position:relative !important; width:100% !important; height:100% !important; max-height:none !important; display:grid !important; grid-template-rows:auto minmax(0,1fr) !important; overflow:hidden !important; padding:0 !important; background:#fff !important; }
.settings-modal .modal-close { position:absolute !important; z-index:5 !important; top:22px !important; right:24px !important; width:34px !important; height:34px !important; border:1px solid var(--cm-line) !important; border-radius:8px !important; background:#fff !important; color:#596679 !important; }
.settings-shell { display:contents !important; }
.settings-nav { min-height:116px !important; padding:24px 34px 0 !important; display:block !important; border-bottom:1px solid var(--cm-line) !important; background:#fff !important; }
.settings-title-lockup { height:38px !important; display:flex !important; align-items:center !important; gap:10px !important; }
.settings-title-lockup h2 { margin:0 !important; font-size:23px !important; letter-spacing:-.03em !important; }
.settings-nav nav { height:54px !important; margin-top:6px !important; display:flex !important; align-items:flex-end !important; gap:27px !important; }
.settings-nav nav button { position:relative !important; height:54px !important; padding:0 2px 15px !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#526075 !important; font-size:12px !important; font-weight:560 !important; }
.settings-nav nav button.active { color:var(--cm-accent) !important; }
.settings-nav nav button.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--cm-accent); border-radius:999px; }
.settings-content { min-height:0 !important; overflow:auto !important; padding:26px 34px 60px !important; background:#fff !important; }
.settings-section { max-width:1220px !important; margin:0 auto !important; }
#settings-appearance { display:grid !important; grid-template-columns:minmax(450px,1fr) minmax(420px,.95fr) !important; gap:46px !important; align-items:start !important; }
.settings-appearance-controls { display:grid !important; gap:26px !important; min-width:0 !important; }
.settings-block { padding:0 !important; border:0 !important; background:transparent !important; }
.settings-block-head { display:grid !important; gap:4px !important; margin-bottom:11px !important; }
.settings-block-head strong { font-size:12px !important; font-weight:680 !important; color:#263247 !important; }
.settings-block-head span { font-size:10.5px !important; color:#7d8797 !important; }
.settings-theme-picker { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; }
.settings-theme-picker button { min-height:86px !important; padding:12px !important; display:grid !important; place-items:center !important; align-content:center !important; gap:8px !important; border:1px solid var(--cm-line) !important; border-radius:9px !important; background:#fff !important; color:#39465a !important; }
.settings-theme-picker button.active { border-color:var(--cm-accent) !important; background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; box-shadow:0 0 0 1px rgba(37,99,235,.08) !important; }
.density-picker { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; }
.density-picker button { min-height:88px !important; padding:13px !important; display:grid !important; align-content:center !important; justify-items:start !important; gap:4px !important; border:1px solid var(--cm-line) !important; border-radius:9px !important; background:#fff !important; text-align:left !important; }
.density-picker button.active { border-color:var(--cm-accent) !important; background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }
.density-picker strong { font-size:11px !important; }
.density-picker small { font-size:9px !important; color:#8a94a4 !important; }
.density-glyph { width:38px !important; height:18px !important; display:block !important; margin-bottom:3px !important; background:linear-gradient(#64748b,#64748b) 0 1px/100% 2px no-repeat,linear-gradient(#64748b,#64748b) 0 8px/75% 2px no-repeat,linear-gradient(#64748b,#64748b) 0 15px/90% 2px no-repeat !important; opacity:.8 !important; }
.settings-inline-heading { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:20px !important; }
.settings-toggle { width:38px !important; height:22px !important; padding:2px !important; border:0 !important; border-radius:999px !important; background:#dbe1e8 !important; }
.settings-toggle i { width:18px !important; height:18px !important; display:block !important; border-radius:50% !important; background:#fff !important; box-shadow:0 1px 3px rgba(15,23,42,.18) !important; transition:.15s !important; }
.settings-toggle[aria-checked="true"],.settings-toggle.active { background:var(--cm-accent) !important; }
.settings-toggle[aria-checked="true"] i,.settings-toggle.active i { transform:translateX(16px) !important; }
.settings-grid-options { margin-top:10px !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.settings-grid-options label { min-height:40px !important; padding:0 10px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; border:1px solid var(--cm-line) !important; border-radius:8px !important; font-size:10px !important; color:#596679 !important; }
.settings-grid-options select { border:0 !important; background:transparent !important; color:#344055 !important; }
.accent-picker { display:flex !important; gap:14px !important; align-items:center !important; }
.accent-picker button { width:27px !important; height:27px !important; padding:0 !important; border:2px solid transparent !important; border-radius:50% !important; background:var(--accent-choice) !important; box-shadow:inset 0 0 0 2px #fff !important; }
.accent-picker button.active { border-color:var(--cm-accent) !important; }
.accent-picker button i { color:#fff !important; opacity:0 !important; }
.accent-picker button.active i { opacity:1 !important; }
.sidebar-behavior-picker { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; }
.sidebar-behavior-picker button { min-height:82px !important; padding:12px !important; display:grid !important; grid-template-columns:24px 1fr !important; grid-template-rows:auto auto !important; gap:2px 8px !important; align-content:center !important; border:1px solid var(--cm-line) !important; border-radius:9px !important; background:#fff !important; text-align:left !important; }
.sidebar-behavior-picker button svg { grid-row:1/3 !important; color:#647084 !important; }
.sidebar-behavior-picker button strong { font-size:10px !important; }
.sidebar-behavior-picker button small { font-size:8.5px !important; color:#8993a3 !important; }
.sidebar-behavior-picker button.active { border-color:var(--cm-accent) !important; background:var(--cm-accent-softer) !important; color:var(--cm-accent) !important; }
.settings-live-preview { position:sticky !important; top:0 !important; min-height:490px !important; border:1px solid var(--cm-line) !important; border-radius:11px !important; overflow:hidden !important; background:#fff !important; box-shadow:0 5px 20px rgba(15,23,42,.05) !important; }
.settings-live-head { min-height:66px !important; padding:0 18px !important; display:flex !important; align-items:center !important; border-bottom:1px solid var(--cm-line) !important; }
.settings-live-head strong { font-size:12px !important; }
.settings-live-head small { display:block !important; margin-top:4px !important; font-size:9.5px !important; color:#8993a3 !important; }
.settings-preview-app { min-height:420px !important; grid-template-columns:140px 1fr !important; }
.settings-preview-app aside { padding:18px 13px !important; background:#fcfcfd !important; border-right:1px solid var(--cm-line) !important; }
.settings-preview-canvas { background-color:#fbfbfa !important; background-image:radial-gradient(circle at 1px 1px,rgba(100,116,139,.14) 1px,transparent 1px) !important; background-size:16px 16px !important; padding:28px !important; }
#settings-tools,#settings-account { grid-column:1/-1 !important; margin-top:44px !important; padding-top:28px !important; border-top:1px solid var(--cm-line) !important; }

/* Dark theme continues to inherit semantic variables without turning the target
   surfaces into unrelated dark-gray blocks. */
html[data-theme="dark"] { --cm-ink:#edf2f7; --cm-ink-soft:#c5cfdb; --cm-muted:#8e9bad; --cm-line:#303949; --cm-line-strong:#465166; --cm-panel:#171d27; --cm-canvas:#111720; --cm-sidebar:#141a23; }
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .home-overlay,html[data-theme="dark"] .home-header,html[data-theme="dark"] .home-stat-grid article,html[data-theme="dark"] .home-recent-panel,html[data-theme="dark"] .home-side-card,html[data-theme="dark"] .home-board-card,html[data-theme="dark"] .home-board-copy,html[data-theme="dark"] .topbar .tool-rail.add-menu,html[data-theme="dark"] .command-palette,html[data-theme="dark"] .palette-search-row,html[data-theme="dark"] .palette-filters,html[data-theme="dark"] .command-results,html[data-theme="dark"] .palette-hint,html[data-theme="dark"] .side-panel,html[data-theme="dark"] .side-panel-header,html[data-theme="dark"] .board-view-root,html[data-theme="dark"] .calendar-main,html[data-theme="dark"] .calendar-upcoming,html[data-theme="dark"] .cal-day,html[data-theme="dark"] .timeline-shell,html[data-theme="dark"] .timeline-row,html[data-theme="dark"] .timeline-inspector,html[data-theme="dark"] .document-page,html[data-theme="dark"] .document-topbar,html[data-theme="dark"] .document-formatbar,html[data-theme="dark"] .document-editor,html[data-theme="dark"] .document-preview,html[data-theme="dark"] .settings-modal[open],html[data-theme="dark"] .settings-modal>form,html[data-theme="dark"] .settings-nav,html[data-theme="dark"] .settings-content { background:var(--cm-panel) !important; color:var(--cm-ink) !important; }
html[data-theme="dark"] .canvas { background-color:var(--cm-canvas) !important; }

/* Desktop target guardrails. */
@media (max-width:1180px) {
  .topbar { grid-template-columns:minmax(240px,1fr) auto auto !important; padding:0 18px !important; }
  .view-switcher button { min-width:92px !important; }
  .home-main-grid { grid-template-columns:1fr !important; }
  .home-side-stack { grid-template-columns:1fr 1fr !important; }
  .calendar-layout,.timeline-layout { grid-template-columns:1fr !important; }
  .calendar-upcoming,.timeline-inspector { min-height:auto !important; }
  #settings-appearance { grid-template-columns:1fr !important; }
  .settings-live-preview { position:static !important; }
}
@media (max-width:900px) {
  .workspace-shell,.workspace-shell.sidebar-collapsed { grid-template-columns:0 minmax(0,1fr) !important; }
  .workspace-shell .sidebar { position:fixed !important; inset:0 auto 0 0 !important; width:var(--sidebar-expanded) !important; max-width:calc(100vw - 54px) !important; transform:translateX(-105%) !important; transition:transform .2s ease !important; z-index:140 !important; }
  .workspace-shell.mobile-sidebar-open .sidebar { transform:translateX(0) !important; }
  #sidebar-toggle { display:grid !important; width:38px !important; height:38px !important; place-items:center !important; }
  .topbar { grid-template-columns:minmax(180px,1fr) auto !important; }
  .topbar-center { display:none !important; }
  .home-header { padding:24px !important; flex-direction:column !important; }
  .home-dashboard { padding:22px 24px 40px !important; }
  .home-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .home-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .settings-modal[open],.workspace-shell.sidebar-collapsed .settings-modal[open] { left:0 !important; }
}
@media (max-width:640px) {
  .home-stat-grid,.home-board-grid,.home-side-stack { grid-template-columns:1fr !important; }
  .home-header-actions { flex-wrap:wrap !important; }
  .topbar { padding:0 12px !important; }
  #share-board span,.more-action span { display:none !important; }
  #share-board,.more-action { width:40px !important; padding:0 !important; }
  .side-panel { width:100% !important; max-width:none !important; }
  .settings-content { padding:22px 18px 40px !important; }
  .settings-nav { padding-left:18px !important; }
  .settings-theme-picker,.density-picker,.sidebar-behavior-picker { grid-template-columns:1fr !important; }
  .document-preview { padding:30px 24px 60px !important; }
}

/* Brand-hover collapse control: keeps the approved expanded sidebar visually quiet
   while preserving a discoverable rail toggle and the dedicated compact state. */
.sidebar .brand-lockup.compact { position:relative !important; }
.sidebar-rail-toggle { position:absolute !important; right:9px !important; top:24px !important; width:27px !important; height:27px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid var(--cm-line) !important; border-radius:7px !important; background:#fff !important; color:#697587 !important; opacity:0 !important; pointer-events:auto !important; transition:opacity .15s ease,background .15s ease !important; }
.sidebar .brand-lockup:hover .sidebar-rail-toggle,.sidebar-rail-toggle:focus-visible { opacity:1 !important; }
.workspace-shell.sidebar-collapsed .sidebar-rail-toggle { opacity:1 !important; right:3px !important; top:24px !important; width:22px !important; height:27px !important; border-color:transparent !important; background:transparent !important; }

/* ==========================================================================
   V6 — Finishing pass after 20-state visual review
   Fixes shell-fit lifecycle, flagship Markdown surfaces, Settings composition,
   and the small visual defects that still read as unfinished.
   ========================================================================== */

/* Home: keep quick actions bounded and readable at desktop widths. */
.home-header > div:first-child { min-width:0 !important; flex:1 1 auto !important; }
.home-header-actions { flex:0 0 auto !important; max-width:min(560px,48vw) !important; justify-content:flex-end !important; flex-wrap:wrap !important; }
.home-header-actions button { flex:0 0 auto !important; white-space:nowrap !important; }

/* Board details: title/subtitle and secondary action must use product chrome. */
.side-panel-title > div { min-width:0 !important; display:grid !important; gap:3px !important; }
.side-panel-title strong,.side-panel-title small { display:block !important; }
.board-detail-section-heading { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
#board-detail-activity { min-height:31px !important; padding:0 10px !important; border:1px solid var(--cm-line) !important; border-radius:7px !important; background:#fff !important; color:#526075 !important; font-size:10px !important; font-weight:650 !important; cursor:pointer !important; }
#board-detail-activity:hover { border-color:#cdd5e0 !important; background:#f7f9fc !important; color:var(--cm-accent) !important; }

/* Calendar navigation uses the same down-chevron glyph rotated horizontally. */
.calendar-nav #calendar-prev .ui-icon { transform:rotate(90deg) !important; }
.calendar-nav #calendar-next .ui-icon { transform:rotate(-90deg) !important; }

/* Markdown editor: focused writing width + proper line-number gutter. */
.document-editor-pane { min-width:0 !important; overflow:hidden !important; }
.document-editor-shell { min-height:0 !important; height:100% !important; display:grid !important; grid-template-columns:48px minmax(0,1fr) !important; overflow:hidden !important; background:#fff !important; }
.document-line-numbers { height:100% !important; margin:0 !important; padding:26px 10px 50px 0 !important; overflow:hidden !important; border-right:1px solid #edf0f4 !important; background:#fbfcfe !important; color:#a0a9b6 !important; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace !important; font-size:11px !important; line-height:1.65 !important; text-align:right !important; user-select:none !important; }
.document-editor { min-width:0 !important; padding:26px 30px 50px !important; font-size:13px !important; line-height:1.65 !important; tab-size:2 !important; }
.document-workspace.mode-edit .document-editor-pane { background:#f8fafc !important; }
.document-workspace.mode-edit .document-editor-shell { width:min(1120px,100%) !important; margin:0 auto !important; border-left:1px solid #edf0f4 !important; border-right:1px solid #edf0f4 !important; }
.document-formatbar { padding-left:26px !important; }
.document-formatbar button { font-weight:650 !important; }
.document-pane-label small { color:#8a94a4 !important; }

/* Markdown renderer: diagrams should read as content, not thumbnails. */
.document-preview .mermaid { min-height:0 !important; margin:22px 0 !important; padding:20px !important; display:grid !important; place-items:center !important; overflow:hidden !important; border:1px solid var(--cm-line) !important; border-radius:12px !important; background:#fbfcfe !important; }
.document-preview .mermaid.mermaid-rendered svg { width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; display:block !important; margin:auto !important; border-radius:0 !important; }
.document-preview .mermaid-repair-note { display:none !important; }
.document-preview blockquote { margin:22px 0 !important; padding:15px 18px !important; border-left:3px solid #7aa7f8 !important; border-radius:0 9px 9px 0 !important; background:#f4f8ff !important; color:#46546a !important; }
.document-preview pre { margin:20px 0 !important; padding:17px 19px !important; border:1px solid #dfe5ec !important; border-radius:10px !important; background:#f7f9fc !important; color:#263247 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important; }
.document-preview pre code { color:inherit !important; font-size:12px !important; line-height:1.65 !important; }
.document-preview :not(pre) > code { padding:2px 5px !important; border:1px solid #e3dfd6 !important; border-radius:5px !important; background:#f4f1ea !important; color:#39465a !important; }

/* CanvasMark embeds: make ![[Item]] visibly different from a normal wiki link. */
.embedded-item { margin:14px 0 !important; }
.embedded-item-card { width:100% !important; margin:0 !important; padding:13px 14px !important; display:grid !important; grid-template-columns:38px minmax(0,1fr) auto !important; gap:12px !important; align-items:center !important; border:1px solid #dce3ec !important; border-radius:11px !important; background:linear-gradient(180deg,#fff,#f8fbff) !important; color:var(--cm-ink) !important; text-align:left !important; box-shadow:0 4px 14px rgba(15,23,42,.04) !important; cursor:pointer !important; }
.embedded-item-card:hover { border-color:#b9cff8 !important; background:#f6f9ff !important; box-shadow:0 7px 18px rgba(37,99,235,.08) !important; }
.embedded-item-icon { width:38px !important; height:38px !important; display:grid !important; place-items:center !important; border-radius:9px !important; background:var(--cm-accent-soft) !important; color:var(--cm-accent) !important; }
.embedded-item-copy { min-width:0 !important; display:grid !important; gap:3px !important; }
.embedded-item-copy small { color:var(--cm-accent) !important; font-size:8.5px !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase !important; }
.embedded-item-copy strong { margin:0 !important; color:#243149 !important; font-size:12px !important; }
.embedded-item-copy p { margin:0 !important; overflow:hidden !important; color:#6f7a8c !important; font-size:10.5px !important; line-height:1.45 !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; }
.embedded-item-open { display:flex !important; align-items:center !important; gap:3px !important; color:#708096 !important; font-size:9.5px !important; white-space:nowrap !important; }
.embedded-item-open .ui-icon { transform:rotate(-90deg) !important; }

/* Settings: explicitly force the intended two-column Appearance composition. */
#settings-appearance > .settings-appearance-controls { grid-column:1 !important; grid-row:1 !important; width:100% !important; }
#settings-appearance > .settings-live-preview { grid-column:2 !important; grid-row:1 !important; width:100% !important; display:block !important; visibility:visible !important; }
.settings-theme-picker { display:block !important; }
.settings-theme-picker .theme-choice-grid { width:100% !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; }
.settings-theme-picker .theme-choice { min-width:0 !important; min-height:104px !important; padding:14px !important; display:grid !important; align-content:start !important; justify-items:start !important; gap:5px !important; border:1px solid var(--cm-line) !important; border-radius:9px !important; background:#fff !important; }
.settings-theme-picker .theme-choice > span { width:30px !important; height:30px !important; display:grid !important; place-items:center !important; border-radius:8px !important; background:#f2f5f8 !important; font-size:15px !important; }
.settings-theme-picker .theme-choice strong { font-size:11px !important; }
.settings-theme-picker .theme-choice small { font-size:9px !important; color:#8993a3 !important; }
.settings-theme-picker .theme-choice i { position:absolute !important; top:10px !important; right:10px !important; width:18px !important; height:18px !important; display:none !important; place-items:center !important; border-radius:50% !important; background:var(--cm-accent) !important; color:#fff !important; }
.settings-theme-picker .theme-choice.active i { display:grid !important; }
.settings-preview-app { height:430px !important; min-height:430px !important; }
.settings-preview-canvas { position:relative !important; min-height:0 !important; overflow:hidden !important; }
.settings-preview-canvas .preview-note { left:42px !important; top:44px !important; width:150px !important; min-height:145px !important; }
.settings-preview-canvas .preview-doc { right:34px !important; top:68px !important; width:165px !important; min-height:190px !important; }
.settings-preview-canvas .preview-tasks { left:68px !important; bottom:34px !important; width:170px !important; min-height:120px !important; }

@media (max-width:1180px) {
  #settings-appearance > .settings-appearance-controls,#settings-appearance > .settings-live-preview { grid-column:1 !important; grid-row:auto !important; }
  .document-workspace.mode-edit .document-editor-shell { width:100% !important; border-inline:0 !important; }
}
@media (max-width:700px) {
  .document-editor-shell { grid-template-columns:38px minmax(0,1fr) !important; }
  .document-line-numbers { padding-right:8px !important; font-size:10px !important; }
  .embedded-item-card { grid-template-columns:34px minmax(0,1fr) !important; }
  .embedded-item-open { display:none !important; }
}