/* Luma workspace: quiet editorial chrome, deliberately free of decorative glow. */
:root {
  --luma-sidebar-bg: #f7f7f5;
  --luma-outline-bg: #fbfbfa;
  --luma-sidebar-ink: #2a3038;
  --luma-sidebar-muted: #707780;
  --luma-sidebar-faint: #9aa0a7;
  --luma-sidebar-rule: #e5e6e3;
  --luma-sidebar-active: #eceeea;
  --luma-sidebar-hover: #f0f1ef;
  --luma-panel-ease: cubic-bezier(.2, .65, .3, 1);
}

:root[data-theme="dark"] {
  --luma-sidebar-bg: #1c1e20;
  --luma-outline-bg: #1e2022;
  --luma-sidebar-ink: #edf0ef;
  --luma-sidebar-muted: #aeb4b8;
  --luma-sidebar-faint: #798087;
  --luma-sidebar-rule: #32363a;
  --luma-sidebar-active: #2b3031;
  --luma-sidebar-hover: #252a2c;
}

.app-shell { background: var(--app-bg); }
.sidebar { background: var(--luma-sidebar-bg); box-shadow: none; }
.outline-panel { background: var(--luma-outline-bg); box-shadow: none; }
.sidebar::before { display: none; }

/* The brand is a simple ink stamp, not a colourful app badge. */
.sidebar .brand-mark {
  border: 1px solid color-mix(in srgb, var(--luma-sidebar-ink) 12%, transparent);
  border-radius: 8px;
  background: #2c333b;
  box-shadow: none;
}
.sidebar .brand-mark svg circle { fill: #d8dfdc; }
.brand { color: var(--luma-sidebar-ink); font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 650; letter-spacing: -.035em; }
.brand-row { border-bottom: 1px solid var(--luma-sidebar-rule); }

.sidebar .icon-button,
.outline-head .icon-button,
.topbar .icon-button {
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--luma-sidebar-muted);
  transition: background-color 160ms var(--luma-panel-ease), border-color 160ms var(--luma-panel-ease), color 160ms var(--luma-panel-ease);
}
.sidebar .icon-button svg,
.outline-head .icon-button svg,
.topbar .icon-button svg,
.quick-actions svg,
.note-icon svg,
.tree-caret svg,
.tree-folder svg { stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .icon-button:hover,
.outline-head .icon-button:hover,
.topbar .icon-button:hover { border-color: var(--luma-sidebar-rule); background: var(--luma-sidebar-hover); color: var(--luma-sidebar-ink); }

.new-note-button,
.sidebar .new-note-button {
  border: 1px solid #2c333b;
  border-radius: 7px;
  background: #2c333b;
  box-shadow: none;
  color: #fff;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .01em;
  transition: background-color 160ms var(--luma-panel-ease), border-color 160ms var(--luma-panel-ease);
}
.new-note-button::after { display: none; }
.new-note-button:hover,
.sidebar .new-note-button:hover { border-color: #171c22; background: #171c22; box-shadow: none; filter: none; transform: none; }
.new-note-button:active { background: #404851; transform: none; }
.new-note-button kbd { border: 0; border-radius: 0; background: transparent; color: rgba(255,255,255,.52); font-size: 10px; }

.quick-actions button,
.sidebar .quick-actions button { border: 1px solid transparent; border-radius: 6px; color: var(--luma-sidebar-muted); font-size: 12px; transition: background-color 160ms var(--luma-panel-ease), color 160ms var(--luma-panel-ease); }
.quick-actions button:hover,
.sidebar .quick-actions button:hover { border-color: transparent; background: var(--luma-sidebar-hover); color: var(--luma-sidebar-ink); transform: none; }
.search-wrap,
.sidebar .search-wrap { border-color: var(--luma-sidebar-rule); border-radius: 7px; background: color-mix(in srgb, var(--luma-sidebar-bg) 88%, var(--surface)); box-shadow: none; }
.search-wrap:focus-within { border-color: color-mix(in srgb, var(--luma-sidebar-ink) 32%, var(--luma-sidebar-rule)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--luma-sidebar-ink) 8%, transparent); }
.search-wrap input { color: var(--luma-sidebar-ink); font-size: 12px; }
.search-wrap input::placeholder { color: var(--luma-sidebar-faint); }
.search-wrap svg { color: var(--luma-sidebar-muted); stroke: currentColor; stroke-width: 1.65; }
.search-wrap kbd { background: transparent; color: var(--luma-sidebar-faint); }

.sidebar .library-heading { color: var(--luma-sidebar-faint); font-size: 10px; font-weight: 680; letter-spacing: .08em; }
.sidebar .tree-group { color: var(--luma-sidebar-muted); font-size: 12px; }
.sidebar .tree-group b { color: var(--luma-sidebar-ink); font-weight: 620; }
.tree-caret { display: grid; width: 16px; height: 16px; place-items: center; color: var(--luma-sidebar-faint); }
.tree-caret svg { width: 14px; height: 14px; }
.sidebar .tree-folder,
.sidebar .shared-folder { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 0; background: transparent; color: var(--luma-sidebar-muted); }
.tree-folder svg { width: 16px; height: 16px; }
.sidebar .tree-group.shared-group { border-top-color: var(--luma-sidebar-rule); }
.tree-group button { border-radius: 5px; color: var(--luma-sidebar-faint); }
.tree-group button:hover { background: var(--luma-sidebar-hover); color: var(--luma-sidebar-ink); }

.sidebar .note-item { height: 35px; margin: 1px 0; border: 1px solid transparent; border-radius: 6px; color: var(--luma-sidebar-muted); font-size: 12px; font-weight: 440; transition: background-color 160ms var(--luma-panel-ease), color 160ms var(--luma-panel-ease); }
.sidebar .note-item::before { left: 19px; background: var(--luma-sidebar-rule); opacity: .7; }
.sidebar .note-item:hover { border-color: transparent; background: var(--luma-sidebar-hover); color: var(--luma-sidebar-ink); transform: none; }
.sidebar .note-item.active { border-color: transparent; background: var(--luma-sidebar-active); box-shadow: inset 2px 0 0 #39434d; color: var(--luma-sidebar-ink); font-weight: 620; }
.sidebar .note-item .note-icon { display: grid; width: 16px; height: 16px; place-items: center; color: var(--luma-sidebar-faint); }
.sidebar .note-item .note-icon svg { width: 15px; height: 15px; }
.sidebar .note-item.active .note-icon { color: var(--luma-sidebar-ink); }
.note-more { color: var(--luma-sidebar-faint); letter-spacing: .12em; }
.member-count { border-radius: 4px; background: transparent; color: var(--luma-sidebar-faint); font-size: 10px; }
.sidebar .group-empty { color: var(--luma-sidebar-faint); }

.learning-nav { border-color: var(--luma-sidebar-rule); border-radius: 7px; background: transparent; box-shadow: none; transition: background-color 160ms var(--luma-panel-ease), border-color 160ms var(--luma-panel-ease); }
.learning-nav:hover,
.learning-nav.active { border-color: var(--luma-sidebar-rule); background: var(--luma-sidebar-hover); box-shadow: none; transform: none; }
.learning-nav-icon { border-radius: 6px; background: #59636e; box-shadow: none; }
.learning-nav strong { color: var(--luma-sidebar-ink); font-weight: 620; }.learning-nav small { color: var(--luma-sidebar-faint); }.learning-nav em { border-radius: 4px; background: var(--luma-sidebar-active); color: var(--luma-sidebar-muted); }.learning-nav-arrow { color: var(--luma-sidebar-faint); }.learning-nav.active .learning-nav-arrow { color: var(--luma-sidebar-ink); transform: none; }

.sidebar-footer { border-top-color: var(--luma-sidebar-rule); }.user-avatar { border: 1px solid var(--luma-sidebar-rule); border-radius: 7px; background: var(--luma-sidebar-active); color: var(--luma-sidebar-ink); }.user-meta strong { color: var(--luma-sidebar-ink); font-weight: 620; }.user-meta small { color: var(--luma-sidebar-faint); }.account-button:hover { background: var(--luma-sidebar-hover); color: var(--luma-sidebar-ink); }

.topbar { border-bottom-color: var(--border); background: var(--surface); box-shadow: none; backdrop-filter: none; }.format-bar { border-bottom-color: var(--border-soft); background: var(--surface); box-shadow: none; }.format-bar::after { display: none; }.mode-switch { border-color: var(--border); border-radius: 7px; background: var(--surface-soft); }.mode-switch button { border-radius: 5px; }.mode-switch button.active { background: var(--surface); box-shadow: 0 1px 2px rgba(20,25,30,.08); color: var(--text); }.document-scroller { background: var(--surface); }.document-title:focus { text-shadow: none; }.document-meta::before { width: 4px; height: 4px; background: var(--text-tertiary); box-shadow: none; }

.format-bar > .delete-selected-blocks { display: flex; width: auto; min-width: 64px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border)); background: var(--danger-bg); color: var(--danger); white-space: nowrap; }
.format-bar > .delete-selected-blocks[hidden] { display: none !important; }
.format-bar > .delete-selected-blocks:disabled { cursor: not-allowed; opacity: .5; }
.format-bar > .delete-selected-blocks svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.outline-panel { border-left-color: var(--luma-sidebar-rule); }.outline-head { height: 58px; border-bottom-color: var(--luma-sidebar-rule); }.outline-head strong { color: var(--luma-sidebar-ink); font-size: 13px; font-weight: 680; letter-spacing: .01em; }.outline-progress { background: transparent; }.outline-progress span { background: #58616b; }.outline-list { padding: 10px 9px 24px; }.outline-list button { min-height: 34px; margin: 1px 0; border-radius: 5px; color: var(--luma-sidebar-muted); font-size: 12px; transition: background-color 160ms var(--luma-panel-ease), color 160ms var(--luma-panel-ease); }.outline-list button:hover { background: var(--luma-sidebar-hover); color: var(--luma-sidebar-ink); transform: none; }.outline-list button.active { background: var(--luma-sidebar-active); box-shadow: inset 2px 0 0 #39434d; color: var(--luma-sidebar-ink); font-weight: 620; }.outline-list button span { width: 4px; height: 4px; }.outline-empty { color: var(--luma-sidebar-faint); }.outline-empty p { color: var(--luma-sidebar-muted); }

/* Desktop panels collapse into the canvas. State is kept by app.js. */
@media (min-width: 921px) {
  .app-shell { grid-template-columns: 248px minmax(0, 1fr) 224px; }
  .app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 224px; }
  .app-shell.outline-collapsed { grid-template-columns: 248px minmax(0, 1fr) 0; }
  .app-shell.sidebar-collapsed.outline-collapsed { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .app-shell.learning-view { grid-template-columns: 248px minmax(0, 1fr) 0; }
  .app-shell.learning-view.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .app-shell.sidebar-collapsed .sidebar,
  .app-shell.outline-collapsed .outline-panel { visibility: hidden; overflow: hidden; border-color: transparent; opacity: 0; pointer-events: none; }
  .sidebar .sidebar-close,
  .outline-panel .outline-head .icon-button { display: grid !important; }
  .menu-button,
  .outline-toggle { display: none; }
  .app-shell.sidebar-collapsed .menu-button,
  .app-shell.outline-collapsed .outline-toggle { display: grid !important; }
}

@media (max-width: 920px) {
  .sidebar, .outline-panel { box-shadow: 12px 0 30px rgba(12,14,16,.16); }
  .outline-panel { box-shadow: -12px 0 30px rgba(12,14,16,.16); }
  .sidebar-close, .menu-button, .outline-toggle, .outline-head .icon-button { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .note-item, .outline-list button, .new-note-button, .quick-actions button, .learning-nav, .sidebar .icon-button, .outline-head .icon-button, .topbar .icon-button { transition: none; }
}