/* Keep the original palette unless an account explicitly selects a new theme. */
.theme-settings { padding: 0 10px 12px; }
.theme-label { margin-bottom: 8px; font-size: 11px; color: var(--ink); }
.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.theme-choices button { min-width: 0; min-height: 44px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; background: var(--paper); }
.theme-choices button:hover:not(:disabled) { border-color: var(--green); }
.theme-choices button[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); font-weight: 650; }
.theme-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 7px; font-size: 10px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.theme-feedback button { padding: 0; min-height: 44px; text-decoration: underline; }
/* The extra settings remain reachable in short windows and landscape drawers. */
.sidebar { overflow-y: auto; overscroll-behavior: contain; }
.sidebar > :not(.board-list) { flex-shrink: 0; }
.sidebar-bottom { padding-top: 16px; }
@media (max-height: 760px) {
  .sidebar-brand-row { margin-bottom: 15px; }
  .sidebar-tip { display: none; }
  .sidebar-bottom { padding-top: 10px; }
  .help-button { min-height: 44px; }
  .profile { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 800px) {
  .sidebar { max-width: 100vw; padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 600px) {
  .search-box input { position: fixed; left: 15px; right: 15px; top: 85px; width: calc(100vw - 30px); }
}

:root[data-theme="light-gray"] {
  color-scheme: light;
  --ink: #25282d;
  --muted: #616975;
  --green: #3e5a47;
  --line: #d7dbe1;
  --paper: #fafafb;
  --theme-canvas: #f2f3f5;
  --theme-dot: #ced2d9;
  --theme-field: #ffffff;
  --theme-soft: #eceef1;
  --theme-hover: #e3e7eb;
  --theme-active: #dce7df;
  --theme-accent: #365b42;
  --theme-primary-hover: #2d4436;
  --theme-focus: #557b60;
  --theme-warning: #805119;
  --theme-warning-bg: #fff0d9;
  --theme-error: #a23832;
  --theme-error-bg: #fce9e7;
  --theme-backdrop: #20242b66;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e4e7ec;
  --muted: #adb5c2;
  --green: #42654d;
  --line: #424853;
  --paper: #22252c;
  --sand: #49412d;
  --rose: #493337;
  --sage: #354332;
  --sky: #2e404d;
  --lavender: #3e354e;
  --white: #30343b;
  --theme-canvas: #181a1f;
  --theme-dot: #343944;
  --theme-field: #1c1f25;
  --theme-soft: #2b3039;
  --theme-hover: #373e49;
  --theme-active: #31483a;
  --theme-accent: #b3d5b9;
  --theme-primary-hover: #50765b;
  --theme-focus: #a4cbb0;
  --theme-warning: #f0c98b;
  --theme-warning-bg: #423624;
  --theme-error: #ffb5ac;
  --theme-error-bg: #472e30;
  --theme-backdrop: #090c12b3;
}

html:is([data-theme="light-gray"], [data-theme="dark"]) body { background: var(--theme-canvas); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .canvas {
  background-color: var(--theme-canvas);
  background-image: radial-gradient(var(--theme-dot) 1px, transparent 1px);
}
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.sidebar, .topbar, .creation-dock, .zoom-controls, .popup-menu, .modal, .search-result, .auth-screen, .loading-screen, .documents-dialog, .gitea-dialog) {
  background: var(--paper); border-color: var(--line);
}
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.secondary-button, .search-box, .section-label > span, .files-detail, .files-drop-hint, .documents-row, .document-preview pre, .gitea-text) {
  background: var(--theme-soft); border-color: var(--line); color: var(--ink);
}
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.new-board-button, .avatar, .todo-add button, .files-link-result:not(:empty), .files-drag-active .files-drop-hint) {
  background: var(--theme-active); border-color: var(--line); color: var(--theme-accent);
}
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.board-item.active, .gitea-toolbar button[aria-pressed="true"]) {
  background: var(--theme-active); color: var(--ink);
}
html:is([data-theme="light-gray"], [data-theme="dark"]) .board-item.active::after { background: var(--theme-accent); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.icon-button, .new-board-button, .board-item, .popup-menu button, .note-popover > button, .add-link, .files-actions button, .files-crumbs button, .files-button:not(.primary), .secondary-button, .documents-card-entry, .documents-row, .gitea-row-button, .theme-choices button):hover:not(:disabled) {
  background: var(--theme-hover); color: var(--ink);
}
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.primary-button, .add-note, .files-button.primary):hover:not(:disabled) { background: var(--theme-primary-hover); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.board-item, .section-label, .sidebar-tip p, .help-button, .profile small, .profile .icon-button, .breadcrumb, .breadcrumb > span, .save-status, .search-box, .topbar-actions > .icon-button, .canvas-hint, .zoom-controls .icon-button, .zoom-controls > #zoom-level, .empty-state p, .empty-state small, .eyebrow, .board-list-empty, .modal > form > p, .modal .shortcut-row, .link-fetch-row, .files-usage, .files-hint, .files-meta, .files-empty, .documents-status, .documents-row small, .documents-attachment small, .gitea-status, .gitea-row small, .gitea-branch, .todo-empty, .todo-item-delete, .todo-item.done .todo-text, .auth-description, .auth-form-wrap label, .field-hint, .auth-security, .auth-footer, .loading-screen) { color: var(--muted); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.text-button, .add-link, .gitea-link, .tip-star, .new-board-button > span) { color: var(--theme-accent); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.search-box input, .modal input, .note-popover input, .todo-new-text, .files-fields input, .files-fields select, .files-share-form input, .files-share-form select, .files-link-result input, .documents-toolbar input, .document-editor, .document-editor textarea, .gitea-field input, .gitea-field select, .auth-form-wrap input) {
  background: var(--theme-field); color: var(--ink); border-color: var(--line);
}
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.documents-detail > input, .link-title) { color: var(--ink); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.files-button:not(.primary), .files-preview-text, .gitea-row, .link-card, .todo-card, .documents-card, .gitea-card) { background: var(--paper); color: var(--ink); border-color: var(--line); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.todo-item, .documents-list, .documents-attachment, .documents-detail > input, .document-editor textarea, .document-preview td, .document-preview th, .gitea-row, kbd, .help-mark, .hint-divider) { border-color: var(--line); }
html:is([data-theme="light-gray"], [data-theme="dark"]) kbd { color: var(--muted); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .add-note kbd { color: #ffffff; }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(button, a, input, textarea, select, summary):focus-visible { outline-color: var(--theme-focus); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(select, summary):focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 3px; }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.theme-choices button[aria-pressed="true"], .note.selected, .files-drag-active) { outline-color: var(--theme-focus); border-color: var(--theme-focus); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .color-button[aria-pressed="true"]::before { outline-color: var(--theme-focus); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .theme-choices button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--theme-focus); }
html:is([data-theme="light-gray"], [data-theme="dark"]) input[type="checkbox"] { accent-color: var(--green); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .sync-banner { color: var(--theme-warning); background: var(--theme-warning-bg); border-color: var(--line); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.gitea-warning, .document-image-missing) { color: var(--theme-warning); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.files-status, .files-form-error, .save-status[data-state="error"], .save-status[data-state="conflict"]) { color: var(--theme-error); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .danger-text { color: var(--theme-error) !important; }
html:is([data-theme="light-gray"], [data-theme="dark"]) .form-error { color: var(--theme-error); background: var(--theme-error-bg); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.modal, .files-dialog, .files-editor, .documents-dialog, .gitea-dialog)::backdrop { background: var(--theme-backdrop); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .drawer-backdrop { background: var(--theme-backdrop); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .files-page-drop-hint { background: var(--paper); color: var(--theme-accent); border-color: var(--theme-focus); }

/* Note colors are CSS variables, so saved content and color names stay intact. */
html[data-theme="dark"] .note { border-color: #68717c80; box-shadow: 0 5px 20px #00000030; }
html:is([data-theme="light-gray"], [data-theme="dark"]) .note-content { color: var(--ink); }
html:is([data-theme="light-gray"], [data-theme="dark"]) :is(.note-grip, .note-header .icon-button, .note-footer, .link-grip svg, .link-menu) { color: var(--muted); }
html:is([data-theme="light-gray"], [data-theme="dark"]) .note-grip::before { color: var(--muted); }
html[data-theme="dark"] :is(.note-grip, .note-header .icon-button, .note-footer, .link-grip svg, .link-menu) { color: #c1c7d0; }
html[data-theme="dark"] .note-grip::before { color: #c1c7d0; }
html[data-theme="dark"] .note-content::placeholder { color: #c1c7d0; }
html[data-theme="dark"] :is(.note-resize, .link-resize, .color-button, .color-picker-button)::before { border-color: #929daa; }
html[data-theme="dark"] .note.search-match { outline-color: #e1bd7d; }
html[data-theme="dark"] .empty-paper.back { background: var(--sage); border-color: var(--line); }
html[data-theme="dark"] .empty-paper.front { background: var(--sand); border-color: var(--line); }
html[data-theme="dark"] :is(.empty-paper span, .empty-spark) { color: var(--theme-accent); }
html[data-theme="dark"] .empty-paper i { background: #c1b78880; }
html[data-theme="dark"] .toast { background: #354c3e; color: var(--ink); }
html[data-theme="dark"] .toast.error { background: var(--theme-error-bg); color: var(--theme-error); }