/* Nyvera / Vanta — editorial violet interface, October 2026. */
:root {
  color-scheme: dark;
  --bg: #0f0d15;
  --panel: #17141f;
  --panel2: #201b2a;
  --raised: #2b2437;
  --line: #342e40;
  --line2: #51455f;
  --text: #f5f0f9;
  --muted: #b1a7bb;
  --accent: #c4acff;
  --accent2: #7d5bc5;
  --soft: #302640;
  --green: #84d5ae;
  --danger: #f08e9d;
  --shadow: 0 24px 70px #08060cb3;
  --editor: #121019;
  --rail: #0b0a11;
  --font-ui: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-family: var(--font-ui);
}
:root.light {
  color-scheme: light;
  --bg: #f6f3f8;
  --panel: #fffdfa;
  --panel2: #f2edf5;
  --raised: #ffffff;
  --line: #e2dbe7;
  --line2: #cdbfd8;
  --text: #292232;
  --muted: #736a7e;
  --accent: #6948b0;
  --accent2: #704fc0;
  --soft: #ede6f5;
  --green: #327d58;
  --danger: #b84961;
  --shadow: 0 18px 60px #32233d1c;
  --editor: #fffdfa;
  --rail: #f0ebf4;
}
html, body { background: var(--bg); color: var(--text); }
body { background-image: none; font-family: var(--font-ui); }
::selection { background: color-mix(in srgb, var(--accent) 36%, transparent); }
.eyebrow { color: var(--accent); font-size: .62rem; font-weight: 750; letter-spacing: .15em; }

/* The navigation frame is quiet so content carries the emphasis. */
.app-shell { background: var(--bg); }
.rail {
  border-right: 1px solid var(--line);
  background: var(--rail);
}
.rail nav, .rail-bottom { gap: .45rem; }
.logo { background: none; box-shadow: none; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.rail-button {
  border: 1px solid transparent;
  border-radius: .8rem;
  color: var(--muted);
}
.rail-button:hover { background: var(--panel2); color: var(--text); transform: none; }
.rail-button.active {
  border-color: color-mix(in srgb, var(--accent) 37%, var(--line));
  background: var(--soft);
  color: var(--accent);
  box-shadow: inset 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
}
.rail-button.active::before { left: -.55rem; height: 1.35rem; }
.sidebar {
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.sidebar-header { padding-bottom: .85rem; }
.sidebar-header strong { color: var(--text); font-size: .95rem; }
.sidebar-header .eyebrow { font-size: .54rem; }
.new-note {
  border: 1px solid color-mix(in srgb, var(--accent) 31%, var(--accent2));
  border-radius: .7rem;
  background: var(--accent2);
  box-shadow: none;
}
.new-note:hover { background: color-mix(in srgb, var(--accent2) 78%, var(--accent)); }
.search-box {
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: var(--bg);
}
.explorer-label { color: var(--muted); letter-spacing: .12em; }
.folder-row { border-radius: .5rem; }
.note-row {
  border-radius: .5rem;
  line-height: 1.35;
}
.note-row:hover { transform: none; }
.note-row.active {
  background: var(--soft);
  color: var(--text);
}
.note-row.active::before { background: var(--accent); }
.sidebar-footer { border-color: var(--line); }

/* Workspace: stronger hierarchy, softer editor surface, precise controls. */
.workspace { background: var(--editor); }
.app-shell .topbar {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.breadcrumbs { color: var(--muted); }
.breadcrumbs strong { color: var(--text); }
.view-switch {
  border-color: var(--line);
  border-radius: .65rem;
  background: var(--bg);
}
.view-switch button {
  border-radius: .42rem;
  color: var(--muted);
  font-weight: 650;
}
.view-switch button.active {
  background: var(--raised);
  color: var(--text);
  box-shadow: 0 2px 8px #0002;
}
.workspace-tools {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.workspace-picker select, .workspace-tool {
  border-color: var(--line);
  border-radius: .58rem;
  background: var(--bg);
  color: var(--text);
  font-weight: 650;
}
.workspace-tool { color: var(--muted); }
.workspace-tool:hover, .workspace-tool[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: var(--soft);
  color: var(--text);
}
.workspace-pane, .workspace-pane .editor-view { background: var(--editor); }
.workspace-pane-bar {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.workspace-tab:has([aria-selected="true"]) {
  border-color: var(--line);
  border-bottom-color: var(--editor);
  background: var(--editor);
}
.workspace-tab-open { font-weight: 600; }
.pane-new-note {
  border: 1px solid transparent;
  border-radius: .5rem;
  color: var(--accent);
}
.pane-new-note:hover { border-color: var(--line); background: var(--soft); }
.document-head { max-width: 58rem; }
.workspace-pane .note-title {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 550;
  letter-spacing: -.045em;
}
.document-meta { color: var(--muted); }
.format-bar {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 6px 24px #0002;
}
.format-bar button:hover { background: var(--soft); color: var(--accent); }
.workspace-pane .note-body { color: var(--text); }
.rich-editor { caret-color: var(--accent); }
.preview-pane { background: var(--editor); }
.markdown-body { color: var(--text); }
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-family: var(--font-display);
  font-weight: 560;
}
.markdown-body h2 { border-bottom-color: var(--line); }
.markdown-body blockquote {
  border-left-color: var(--accent);
  background: var(--panel2);
  color: var(--text);
}
.markdown-body pre { background: var(--panel); }
.markdown-body a { color: var(--accent); }
.markdown-body p, .markdown-body li, .markdown-body blockquote { overflow-wrap: anywhere; }
.editor-view.preview-only .preview-pane { padding-top: .15rem; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body table { max-width: 100%; display: block; overflow-x: auto; }
.markdown-body img { height: auto; }
.context-panel { border-left: 1px solid var(--line); background: var(--panel); }
.context-panel-header { border-bottom-color: var(--line); }

/* The overview reads like a dashboard, with one clear entry point. */
.home-view {
  gap: clamp(1rem, 2.5vh, 1.65rem);
  background: var(--bg);
  padding-top: clamp(1.35rem, 3vw, 2.55rem);
}
.home-hero {
  min-height: 13rem;
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: linear-gradient(108deg, var(--panel) 55%, color-mix(in srgb, var(--accent) 8%, var(--panel)));
  padding: clamp(1.3rem, 3vw, 2.25rem);
  box-shadow: none;
}
.home-hero::before {
  position: absolute;
  top: 1.4rem;
  bottom: 1.4rem;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  content: "";
}
.home-hero::after { display: none; }
.home-copy h1 {
  max-width: 16ch;
  margin-block: .55rem .65rem;
  font-size: clamp(2.1rem, 3.5vw, 3.15rem);
  line-height: 1.03;
  letter-spacing: -.05em;
}
.home-copy p { max-width: 35rem; font-size: .86rem; line-height: 1.65; }
.home-actions button { border-radius: .58rem; font-size: .73rem; }
.home-action-primary { background: var(--accent2); box-shadow: none; }
.home-action-secondary { background: var(--panel2); }
.home-stat-grid { gap: .55rem; }
.home-stat {
  min-height: 7.2rem;
  gap: .38rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--panel);
  padding: 1rem 1.1rem;
  box-shadow: none;
}
.home-stat-focus { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); }
.home-stat strong { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; }
.home-stat small { white-space: normal; line-height: 1.4; }
.home-card {
  border-radius: .75rem;
  background: var(--panel);
  padding: 1.1rem;
  box-shadow: none;
}
.home-card-head h2 { font-size: 1.33rem; }
.home-list-row, .home-task-row, .home-path-row { border-radius: .55rem; }
.home-list-row:hover, .home-task-row:hover, .home-path-row:hover { transform: none; }
.home-path-row { background: var(--panel2); }
.home-progress-track span { background: var(--accent); }
.home-empty { background: var(--panel2); }

/* Paths keeps its arcade nodes, in the same calmer visual language. */
.paths-view:not([hidden]) { background: var(--bg); }
.paths-heading-row h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); }
.paths-heading-row p { font-size: .83rem; }
.paths-brand-mark { border-radius: .4rem; background: var(--soft); box-shadow: none; }
.paths-toolbar, .paths-summary, .paths-next-step {
  border-color: var(--line);
  border-radius: .75rem;
  background: var(--panel);
  box-shadow: none;
}
.paths-summary {
  border-left: 3px solid var(--path-accent, var(--accent));
  padding: 1.4rem;
}
.paths-summary::after { display: none; }
.paths-summary-mark { border-radius: .7rem; background: var(--panel2); box-shadow: none; }
.paths-summary-copy h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.paths-meter-value { filter: none; }
.paths-next-step { border-left: 2px solid var(--accent); }
.paths-route-rail { stroke: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.paths-route-rail-active { stroke: var(--accent); }
.paths-node-orb {
  border-color: color-mix(in srgb, var(--node-accent) 72%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--node-accent) 51%, var(--raised)), color-mix(in srgb, var(--node-accent) 17%, var(--panel2)));
  box-shadow: inset 0 1px #ffffff70, 0 4px 0 color-mix(in srgb, var(--node-accent) 27%, #12101a), 0 10px 20px #0004;
}
.paths-node-orb.is-done { box-shadow: inset 0 1px #ffffff55, 0 3px 0 color-mix(in srgb, var(--green) 36%, #12101a), 0 8px 16px #0003; }
.paths-node-details {
  border-color: var(--line);
  border-radius: .75rem;
  background: var(--panel);
  box-shadow: 0 10px 25px #0002;
}
.paths-node-card.is-nested .paths-node-details { background: var(--panel2); }
.paths-kind, .paths-optional-chip, .paths-deadline { border-radius: .35rem; }
.paths-primary-button { background: var(--accent2); box-shadow: none; }
.paths-primary-button:hover { background: color-mix(in srgb, var(--accent2) 75%, var(--accent)); box-shadow: none; }
.paths-secondary-button { background: var(--panel2); }
.paths-empty-state .paths-empty-mark, .paths-empty-orbit { background: var(--panel2); box-shadow: none; }
.paths-template-card { background: var(--panel); }
.paths-focus-dialog { background: var(--panel); }

/* Shared work, visual tools, and panels use the same surface rhythm. */
.cowork-dialog, .cowork-header, .cowork-sidebar, .cowork-section, .cowork-editor-wrap { border-color: var(--line); }
.cowork-header { background: var(--panel); }
.cowork-sidebar { background: var(--bg); }
.cowork-section, .cowork-editor-wrap { background: var(--panel); }
.cowork-space-item[aria-current="true"], .cowork-doc-item[aria-current="true"] { background: var(--soft); }
.cowork-editor input { font-family: var(--font-display); }
.graph-view, .tags-view, .canvas-view { background: var(--bg); }
.graph-stage, .canvas-stage { border-color: var(--line); border-radius: .75rem; background-color: var(--panel); box-shadow: none; }
.canvas-card, .tag-card { border-color: var(--line); border-radius: .7rem; background: var(--panel); }
.canvas-card:hover, .tag-card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.settings-dialog, .prompt-dialog, .auth-dialog, .setup-dialog, .feedback-dialog, .conflict-dialog, .paths-dialog, .cowork-dialog, .nyvera-confirm-dialog {
  border-color: var(--line2);
  border-radius: .9rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.settings-grid button, .setup-choice, .paths-template-card { border-radius: .65rem; background: var(--panel2); }
.settings-grid button:hover { background: var(--soft); }
.primary-button, .auth-submit, .cowork-primary-button { background: var(--accent2); box-shadow: none; }

/* Control Center shares the palette while keeping its own layout. */
body:has(.admin-shell) {
  --panel-raised: var(--panel2);
  --line-strong: var(--line2);
  --subtle: var(--muted);
  --violet: var(--accent);
  --violet-soft: var(--soft);
}
.admin-sidebar { background: var(--rail); }
.admin-shell .topbar { background: var(--panel); }
.nav-item.active { border-color: var(--line2); background: var(--soft); color: var(--text); }
.module-card, .surface-card, .stat-card { border-color: var(--line); background: var(--panel); }
.module-card:hover { border-color: var(--accent); background: var(--panel2); }
.module-icon { background: var(--soft); color: var(--accent); }
.page-heading { border-bottom-color: var(--line); }

/* Keep the two-column mobile workspace controls above later legacy rules. */
@media (max-width: 760px) {
  .workspace-tools, .workspace-tools.split-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(2.75rem, auto);
    gap: .35rem;
    align-content: center;
    overflow: visible;
    padding: .45rem;
  }
  .workspace-tools > .workspace-picker, .workspace-tools > .workspace-tool {
    width: 100%;
    min-width: 0;
  }
  .workspace-tools .workspace-picker select { width: 100%; max-width: none; min-width: 0; }
  .workspace-tools .workspace-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: .35rem;
    font-size: clamp(.66rem, 2.6vw, .74rem);
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .app-shell .topbar { padding-inline: .55rem; }
  .workspace-pane .note-title { font-size: clamp(1.5rem, 6.1vw, 1.9rem); }
  .home-hero { min-height: auto; padding: 1.25rem; }
  .home-hero::before { top: 1.1rem; bottom: 1.1rem; }
  .home-copy h1 { font-size: clamp(1.95rem, 7vw, 2.55rem); }
  .home-stat { min-height: 6.2rem; padding: .85rem; }
  .paths-primary-actions { flex-wrap: wrap; }
  .paths-summary { padding: 1rem; }
  .paths-toolbar { flex-wrap: wrap; }
  .paths-picker-control { min-width: 0; max-width: 100%; }
  .paths-picker { max-width: min(60vw, 20rem); }
  .markdown-body table { scrollbar-width: thin; }
}

@media (max-width: 360px) {
  .workspace-tools > .workspace-picker { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .home-view { padding-inline: .75rem; }
  .home-stat-grid { gap: .45rem; }
  .home-stat small { font-size: .57rem; }
  .paths-heading-row { align-items: stretch; }
  .paths-primary-actions { width: 100%; }
  .paths-primary-actions > button { flex: 1 1 auto; }
}
/* Split notes need headings sized to their pane, not the full tablet viewport. */
@media (min-width: 761px) and (max-width: 1100px) {
  .workspace-panes.split-workspace .workspace-pane .preview-pane {
    padding: 1.5rem clamp(1rem, 2vw, 1.35rem) 2.5rem;
  }
  .workspace-panes.split-workspace .workspace-pane .markdown-body h1 {
    font-size: clamp(1.5rem, 2.8vw, 1.8rem);
    overflow-wrap: break-word;
  }
  .workspace-panes.split-workspace .workspace-pane .markdown-body h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  }
  .workspace-panes.split-workspace .workspace-pane .markdown-body h3 {
    font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}