/* Nyvera's desktop-inspired web shell. System fonts, existing controls, no runtime cost. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-ui);
  --bg: #1b1b20;
  --rail: #222228;
  --panel: #26262d;
  --panel2: #2d2d35;
  --raised: #373740;
  --editor: #1d1d22;
  --text: #eeedf4;
  --muted: #afabbc;
  --subtle: #a09baa;
  --line: #36353f;
  --line2: #4b4856;
  --accent: #c6adfa;
  --accent2: #7951c1;
  --soft: #423451;
  --violet: var(--accent);
  --violet-soft: var(--soft);
  --panel-raised: var(--panel2);
  --line-strong: var(--line2);
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --shadow: 0 16px 48px #0005, 0 0 0 1px #0002;
  --shadow-raised: 0 2px 6px #0002;
  --material: var(--rail);
  --control-highlight: transparent;
  font-family: var(--font-ui);
}
:root.light {
  --bg: #f1f0f5;
  --rail: #eeedf2;
  --panel: #f8f7fb;
  --panel2: #eae8f0;
  --raised: #fff;
  --editor: #fff;
  --text: #25232b;
  --muted: #66616f;
  --subtle: #746e7e;
  --line: #dcd9e3;
  --line2: #c3becd;
  --accent: #7043ad;
  --accent2: #7548b8;
  --soft: #e6dcf4;
  --shadow: 0 24px 80px #24202f26, 0 0 0 1px #24202f0a;
  --shadow-raised: 0 1px 4px #24202f14;
  --material: var(--rail);
  --control-highlight: transparent;
}
body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
:root[data-palette="graphite"] { --accent:#acb8d1; --accent2:#53627d; --soft:#384050; }
:root.light[data-palette="graphite"] { --accent:#45536a; --accent2:#53647d; --soft:#e0e5ee; }
:root[data-palette="ocean"] { --accent:#8fc5ff; --accent2:#376cb1; --soft:#263e57; }
:root.light[data-palette="ocean"] { --accent:#245c9b; --accent2:#315f9c; --soft:#dae8f7; }
:root[data-palette="sage"] { --accent:#9bd3b1; --accent2:#39694b; --soft:#2e4337; }
:root.light[data-palette="sage"] { --accent:#326447; --accent2:#39734e; --soft:#e0eee4; }
:root[data-palette="rose"] { --accent:#ecaec5; --accent2:#9c4767; --soft:#51333f; }
:root.light[data-palette="rose"] { --accent:#9e3f64; --accent2:#a24669; --soft:#f4e0e9; }
:root[data-palette="amber"] { --accent:#e4c488; --accent2:#805815; --soft:#4c3f2a; }
:root.light[data-palette="amber"] { --accent:#795414; --accent2:#825a1c; --soft:#f4e7cc; }
.appearance-settings { margin:0 0 1rem; border:1px solid var(--line); border-radius:.65rem; background:var(--panel2); }
.appearance-settings > summary { display:flex; min-height:2.8rem; align-items:center; gap:.5rem; padding:.65rem .75rem; color:var(--text); font-size:.8rem; font-weight:650; list-style:none; cursor:pointer; }
.appearance-settings > summary::-webkit-details-marker { display:none; }
.appearance-settings > summary > span { margin-left:auto; color:var(--muted); font-size:.7rem; font-weight:450; }
.appearance-settings > summary::after { content:""; width:.4rem; height:.4rem; margin-left:.25rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.appearance-settings[open] > summary::after { transform:rotate(225deg); }
.appearance-content { display:grid; gap:.9rem; border-top:1px solid var(--line); padding:.8rem; }
.appearance-mode { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:.75rem; font-size:.78rem; color:var(--text); }
.appearance-mode select { min-height:2.5rem; max-width:60%; border:1px solid var(--line2); border-radius:.45rem; background:var(--editor); padding:.4rem .7rem; color:var(--text); font:inherit; }
.appearance-palettes { min-width:0; margin:0; border:0; padding:0; }
.appearance-palettes legend { margin-bottom:.5rem; color:var(--muted); font-size:.74rem; font-weight:600; }
.appearance-palette-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
.appearance-choice { position:relative; display:flex; min-width:0; min-height:2.75rem; align-items:center; gap:.45rem; border:1px solid var(--line2); border-radius:.5rem; background:var(--panel); padding:.5rem; color:var(--text); font-size:.74rem; cursor:pointer; }
.appearance-choice input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.appearance-choice:has(input:checked) { border-color:var(--accent); background:var(--soft); box-shadow:inset 0 0 0 1px var(--accent); }
.appearance-choice:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:2px; }
.appearance-swatch { width:1.15rem; height:1.15rem; flex:0 0 auto; border:1px solid #0002; border-radius:50%; background:var(--swatch); }
.appearance-choice:has(input:checked) .appearance-swatch::after { content:""; display:block; width:.4rem; height:.22rem; margin:.3rem auto; border-bottom:2px solid #202024; border-left:2px solid #202024; transform:rotate(-45deg); }
.appearance-note { margin:0; color:var(--muted); font-size:.7rem; line-height:1.5; }
.settings-grid { gap:.5rem; }
.settings-grid button { justify-content:center; }
.settings-dialog .product-attribution { margin:1rem 0 0; font-size:.72rem; line-height:1.6; }
.app-shell .rail, .app-shell .sidebar, .admin-sidebar { background: var(--rail); }
.app-shell .sidebar, .admin-sidebar { border-right-color: var(--line); }
.sidebar-header { padding-bottom: .6rem; }
.sidebar-header strong { font-size: .87rem; letter-spacing: -.01em; }
.sidebar-header .eyebrow, .explorer-label, .panel-heading, .sidebar-label {
  color: var(--subtle);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.rail-button { border-radius: .6rem; }
.rail-button.active, .note-row.active, .nav-item.active {
  border-color: transparent;
  background: var(--soft);
  color: var(--text);
  box-shadow: none;
}
.rail-button.active::before { display: none; }
.note-row, .folder-row { border-radius: .45rem; }
.app-shell .topbar, .admin-shell .topbar {
  background: var(--panel);
  border-bottom-color: var(--line);
  box-shadow: none;
}
.breadcrumbs { font-size: .78rem; }
.breadcrumbs strong { font-weight: 650; }
.workspace-tools, .workspace-pane-bar {
  background: var(--panel);
  border-color: var(--line);
}
.view-switch, .tasks-filters {
  gap: .12rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--bg) 60%, var(--panel2));
  padding: .16rem;
  box-shadow: inset 0 1px #00000008;
}
.view-switch button, .tasks-filters button { border: 0; border-radius: .4rem; }
.view-switch button.active, .tasks-filters button.active,
.tasks-filters button[aria-pressed="true"] {
  background: var(--raised);
  color: var(--text);
  box-shadow: 0 1px 3px #0002, inset 0 1px var(--control-highlight);
}
.workspace-tool, .secondary-button, .paths-secondary-button,
.draw-quiet-button, #coworkDialog .cowork-button,
.workspace-picker select, .draw-workspace-picker select,
.draw-background-control select {
  border-color: var(--line2);
  border-radius: .45rem;
  background: var(--panel2);
  color: var(--text);
  box-shadow: none;
  font-weight: 550;
}
.home-action-primary, .new-note, .primary-button, .auth-submit,
.paths-primary-button, .draw-new-button, #coworkDialog .cowork-button.primary {
  border: 1px solid #ffffff14;
  border-radius: .5rem;
  background: var(--accent2);
  color: #fff;
  box-shadow: none;
  font-weight: 600;
}
.primary-button:hover, .auth-submit:hover,
#coworkDialog .cowork-button.primary:hover {
  background: color-mix(in srgb, var(--accent2) 86%, white);
}
.search-box {
  border-color: var(--line);
  border-radius: .6rem;
  background: color-mix(in srgb, var(--editor) 75%, var(--rail));
  box-shadow: inset 0 1px 2px #0000000a;
}
.search-box kbd { border: 0; background: transparent; }
.workspace-tab { border-radius: .5rem .5rem 0 0; }
.workspace-tab:has([aria-selected="true"]) { box-shadow: inset 0 1px var(--control-highlight); }
.home-copy h1 { font-size: clamp(1.85rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.tasks-head h1, .paths-heading-row h1, .graph-head h1,
.canvas-head h1, .collection-head h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.home-list-row, .home-task-row, .home-path-row, .task-view-row,
.paths-summary, .paths-next-step, .paths-node-details,
.draw-library-panel, .draw-main, .tag-card, .canvas-card,
.module-card, .stat-card, .surface-card, .feedback-card {
  border-radius: .55rem;
  border-color: var(--line);
}
.home-path-row, .task-view-row, .paths-summary, .paths-next-step,
.paths-node-details, .tag-card, .canvas-card, .surface-card,
.module-card, .stat-card, .feedback-card { box-shadow: inset 0 1px var(--control-highlight); }
.draw-toolbar { border-radius: .65rem; background: var(--panel); }
.draw-tool-button[aria-pressed="true"], .draw-tool-button.active {
  background: var(--soft);
  color: var(--accent);
  box-shadow: inset 0 1px var(--control-highlight);
}
.draw-stage, .graph-stage, .canvas-stage { border-radius: .7rem; }
.settings-dialog, .prompt-dialog, .auth-dialog, .setup-dialog,
.feedback-dialog, .conflict-dialog, .paths-dialog, .command-dialog,
.quick-capture-dialog, .note-templates-dialog, .keyboard-help-dialog,
.nyvera-confirm-dialog, #coworkDialog {
  border: 1px solid var(--line2);
  border-radius: .9rem;
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 1px var(--control-highlight);
}
.menu-dialog { border-radius: .65rem; background: var(--panel); box-shadow: var(--shadow); }
.menu-dialog button { border-radius: .35rem; }
.menu-dialog button:hover, .command-item.selected { background: var(--soft); color: var(--text); }
.settings-dialog .settings-grid button, .setup-choice {
  border-radius: .6rem;
  border-color: var(--line);
  background: var(--panel2);
}
.toast, .admin-toast { border-radius: .7rem; background: var(--raised); box-shadow: var(--shadow-raised); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline-offset: 2px;
}
.app-shell .rail, .app-shell .sidebar, .admin-sidebar, .mobile-dock {
  background: var(--material);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (min-width: 1101px) and (pointer: fine) {
  .app-shell .workspace {
    margin: .6rem .6rem .6rem 0;
    border: 1px solid var(--line);
    border-radius: .85rem;
    overflow: hidden;
    box-shadow: 0 8px 28px #0000001a;
  }
  .app-shell .topbar { min-height: 3.35rem; }
  .admin-main { margin: .6rem .6rem .6rem 0; border: 1px solid var(--line); border-radius: .85rem; overflow: hidden; }
}
@media (any-pointer: coarse) {
  .appearance-mode select { font-size:16px; }
  .auth-dialog input, .setup-dialog input:not([type="radio"]),
  .setup-dialog select, .feedback-dialog input, .feedback-dialog select,
  .feedback-dialog textarea, .prompt-dialog input, .command-dialog input,
  .paths-dialog input:not([type="radio"]):not([type="checkbox"]),
  .paths-dialog textarea, .paths-dialog select, .quick-capture-dialog textarea,
  #coworkDialog .cowork-editor input, #coworkDialog .cowork-editor textarea,
  #coworkDialog .cowork-create-space input { font-size: 16px; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-shell .rail, .app-shell .sidebar, .admin-sidebar, .mobile-dock {
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .appearance-choice:has(input:checked) { outline:2px solid Highlight; }
  .rail-button.active, .note-row.active, .nav-item.active,
  .view-switch button.active, .tasks-filters button.active { outline: 2px solid Highlight; }
}

/* Quiet workspace chrome: content carries the hierarchy; controls stay predictable. */
.app-shell .rail { border-right:1px solid var(--line); }
.app-shell .sidebar { padding-inline:.7rem; }
.sidebar-header { gap:.6rem; padding-inline:.35rem; }
.rail-button, .small-icon, .dialog-close, .pane-new-note { color:var(--muted); }
.rail-button:hover, .small-icon:hover, .dialog-close:hover,
.pane-new-note:hover { background:var(--panel2); color:var(--text); }
.rail-button.active { background:var(--soft); color:var(--accent); }
.search-box { min-height:2.5rem; border-radius:.45rem; box-shadow:none; }
.search-box input { font-size:.8rem; }
.explorer-label { padding-block:.75rem .4rem; }
.folder-row { font-size:.78rem; font-weight:600; }
.note-row { font-size:.8rem; }
.note-row.active::before { display:none; }
.note-row.active { color:var(--text); background:var(--soft); }
.sidebar-footer { min-width:0; gap:0; padding:.75rem .4rem .3rem; border-top:1px solid var(--line); }
#storageStatus { display:block; min-width:0; color:var(--muted); font-size:.72rem; line-height:1.5; overflow-wrap:anywhere; }
.app-shell .topbar { gap:.7rem; }
.top-actions { min-width:0; }
.save-state { color:var(--muted); font-size:.72rem; }
.workspace-tool, .workspace-picker select { font-size:.78rem; font-weight:550; }
.workspace-pane-bar { gap:.35rem; background:var(--panel); }
.workspace-tabs { gap:.2rem; }
.workspace-tab { border-color:transparent; background:transparent; }
.workspace-tab-open { color:var(--muted); font-size:.78rem; font-weight:550; }
.workspace-tab:has([aria-selected="true"]) { border-color:var(--line); border-bottom-color:var(--editor); background:var(--editor); box-shadow:none; }
.workspace-tab [aria-selected="true"] { color:var(--text); }
.workspace-pane .note-title { font-size:clamp(1.65rem,3vw,2.25rem); font-weight:650; line-height:1.2; }
.document-meta { color:var(--muted); line-height:1.5; }
.rich-editor, .markdown-body { line-height:1.75; }
.markdown-body blockquote { border-left:2px solid var(--accent); border-radius:0; background:transparent; padding:.15rem 1rem; }
.markdown-body pre { border-radius:.5rem; background:var(--panel); }
.markdown-body h2 { border-bottom-color:var(--line); padding-bottom:.35rem; }
.format-bar { border-radius:.6rem; background:var(--panel); box-shadow:var(--shadow-raised); }
.format-bar button { border-radius:.35rem; }
.context-panel { background:var(--panel); padding-inline:.8rem; }
.backlinks button, .outline button { font-size:.78rem; line-height:1.4; }
.home-copy h1, .tasks-head h1, .paths-heading-row h1,
.graph-head h1, .canvas-head h1, .collection-head h1 { font-size:clamp(1.7rem,3vw,2.25rem); font-weight:650; letter-spacing:-.03em; }
.home-copy p, .tasks-head p, .paths-heading-row p,
.graph-head p, .canvas-head p, .collection-head p { line-height:1.6; }
.home-card-head h2 { font-size:1.15rem; font-weight:650; }
.home-empty, .tasks-empty { border-style:dashed; background:transparent; box-shadow:none; }
.task-view-row { border-radius:.5rem; box-shadow:none; }
.home-path-row, .paths-summary, .paths-next-step,
.paths-node-details, .canvas-card, .tag-card, .module-card,
.stat-card, .surface-card, .feedback-card { box-shadow:none; }
.paths-toolbar, .draw-toolbar { border-radius:.55rem; }
.settings-dialog, .prompt-dialog, .auth-dialog, .setup-dialog,
.feedback-dialog, .conflict-dialog, .paths-dialog, .command-dialog,
.quick-capture-dialog, .note-templates-dialog, .keyboard-help-dialog,
.nyvera-confirm-dialog, #coworkDialog { border-radius:.75rem; }
.settings-dialog .settings-grid button, .setup-choice { background:var(--panel); }
.settings-dialog .settings-grid button:hover, .setup-choice:hover { background:var(--panel2); }
.command-item { border-radius:.4rem; font-size:.82rem; }
.command-item strong { font-weight:550; }
.command-dialog footer { font-size:.72rem; flex-wrap:wrap; }
.mobile-dock-item.active, .mobile-dock-item[aria-expanded="true"] { background:var(--soft); color:var(--accent); box-shadow:none; }
@media (min-width:1101px) and (pointer:fine) {
  .rail-button { width:2.4rem; height:2.4rem; }
  .rail-button svg { width:1.15rem; height:1.15rem; }
  .note-row { min-height:2.25rem; }
  .workspace-tool { min-height:2.15rem; }
}
@media (max-width:760px) {
  .app-shell .topbar { gap:.4rem; }
  .workspace-tool { min-width:0; min-height:2.75rem; padding:.45rem .6rem; font-size:.75rem; line-height:1.3; white-space:normal; }
  .workspace-pane .note-title { font-size:1.8rem; }
  .home-copy h1 { font-size:1.9rem; }
  .home-card-head h2 { font-size:1.1rem; }
}

/* Mobile browser repair: usable form sizes, visible dialogs, and notch-safe chrome. */
@media (any-pointer:coarse) {
  :root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not(.note-title),
  :root textarea:not(.note-title), :root select {
    font-size:max(16px,1rem) !important;
    min-inline-size:0;
    max-inline-size:100%;
  }
  .file-tree, .workspace-tabs, .home-view, .tasks-view, .paths-view,
  .tags-view, .note-body, .preview-pane { overscroll-behavior:contain; }
  .mobile-dock { padding-left:max(.35rem,env(safe-area-inset-left)); padding-right:max(.35rem,env(safe-area-inset-right)); }
}
@media (max-width:1100px) and (any-pointer:coarse) {
  :root { --mobile-dialog-height:max(1px,calc(var(--app-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 1rem)); }
  .app-shell .topbar { min-height:calc(3.5rem + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px); }
  body.keyboard-open .app-shell .topbar { min-height:calc(2.75rem + env(safe-area-inset-top,0px)); }
  .workspace-pane .document-head, .workspace-pane .note-body, .workspace-pane .preview-pane {
    padding-left:max(1rem,env(safe-area-inset-left));
    padding-right:max(1rem,env(safe-area-inset-right));
  }
  .auth-dialog, .setup-dialog, .feedback-dialog, .paths-dialog,
  .prompt-dialog, .command-dialog, .quick-capture-dialog,
  .note-templates-dialog, .keyboard-help-dialog, .nyvera-confirm-dialog {
    box-sizing:border-box;
    max-height:var(--mobile-dialog-height);
    max-width:calc(100vw - 1rem);
    overflow:auto;
    overscroll-behavior:contain;
  }
  body.keyboard-open dialog:modal, body.keyboard-open #coworkDialog {
    top:calc(var(--app-top,0px) + env(safe-area-inset-top,0px) + .5rem);
    bottom:auto;
    margin-block:0;
    transform:none;
    max-height:var(--mobile-dialog-height);
  }
  #coworkDialog { max-height:var(--mobile-dialog-height); }
  #coworkDialog .cowork-shell {
    min-height:0;
    height:min(44rem,var(--mobile-dialog-height));
    max-height:var(--mobile-dialog-height);
    box-sizing:border-box;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .auth-submit, .paths-dialog footer button, .quick-capture-dialog footer button { min-height:2.75rem; }
}