/* ===============================
   Obsidian-like Design System
   =============================== */
:root {
  --font-sans: ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, Arial, Noto Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Accent (user changeable) */
  --accent: #7c3aed; /* violet-600-ish */
  --accent-2: color-mix(in oklab, var(--accent), white 20%);

  /* Dark theme (default) */
  color-scheme: dark;

  --bg-0: #0f1115;      /* app background */
  --bg-1: #141720;      /* surfaces */
  --bg-2: #1b2030;      /* raised surfaces */
  --elev: 0 4px 16px rgba(0,0,0,.25);

  --text-0: #e6e8ef;    /* primary */
  --text-1: #bcc2d6;    /* secondary */
  --muted:  #8a90a5;    /* tertiary */

  --border: #2a3146;
  --outline: #3a4361;

  --code-bg: #0c0f14;
  --inline-bg: #1b2030;
  --selection: #24304a;

  --ok: #22c55e;      /* green-500 */
  --warn: #f59e0b;    /* amber-500 */
  --err: #ef4444;     /* red-500 */
  --info: #38bdf8;    /* sky-400 */

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --pad: 14px;
  --gap: 14px;
  --ring: 0 0 0 2px color-mix(in oklab, var(--accent), white 20%);
  --trans: 180ms cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-0: #f6f7fb;
    --bg-1: #ffffff;
    --bg-2: #f1f3f9;
    --text-0: #111421;
    --text-1: #2f3651;
    --muted:  #596083;
    --border: #d9dcef;
    --outline: #c9cde3;
    --code-bg: #f3f4f7;
    --inline-bg: #eceef6;
    --selection: #cfe0ff;
    color-scheme: light;
  }
}

/* Optional explicit light class */
.theme-light {
  --bg-0: #f6f7fb;
  --bg-1: #ffffff;
  --bg-2: #f1f3f9;
  --text-0: #111421;
  --text-1: #2f3651;
  --muted:  #596083;
  --border: #d9dcef;
  --outline: #c9cde3;
  --code-bg: #f3f4f7;
  --inline-bg: #eceef6;
  --selection: #cfe0ff;
  color-scheme: light;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font: 15px/1.6 var(--font-sans);
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--selection); }

/* App shell */
.app {
  display: grid;
  grid-template-rows: 44px 1fr 24px;
  grid-template-columns: 260px 1fr; /* removed right column */
  grid-template-areas:
    "titlebar titlebar"
    "sidebar  content"
    "status   status";
  height: 100dvh;
  gap: var(--gap);
  padding: var(--gap);
}

/* Titlebar */
.titlebar {
  grid-area: titlebar;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 8px;
  position: sticky;
  top: 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%);
}
.titlebar .actions { display: flex; align-items: center; gap: 8px; }
.btn, .seg {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text-0);
  cursor: pointer;
  transition: transform var(--trans), background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.seg { display: inline-flex; align-items: center; gap: 8px; }
.seg input[type="color"] { appearance: none; width: 22px; height: 22px; border: none; padding: 0; background: transparent; cursor: pointer; }

/* Sidebar (left) */
.sidebar {
  grid-area: sidebar;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  overflow: auto;
}
.vault { font-weight: 700; letter-spacing: .4px; margin-bottom: 10px; }
.tree { display: grid; gap: 6px; font-size: 14px; color: var(--text-1); }
.tree details { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 6px 8px; }
.tree summary { list-style: none; cursor: pointer; }
.tree summary::-webkit-details-marker { display: none; }
.tree a { display: block; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--text-1); }
.tree a:hover { background: color-mix(in oklab, var(--accent), transparent 90%); color: var(--text-0); }

/* Content (center) */
.content {
  grid-area: content;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 28px);
  overflow: auto;
  scroll-padding-top: 64px;
}
.note { max-width: 860px; margin: 0 auto; }

/* Markdown-like typography */
.note h1, .note h2, .note h3, .note h4 { line-height: 1.25; margin: 1.2em 0 .6em; font-weight: 800; letter-spacing: .3px; }
.note h1 { font-size: clamp(28px, 4vw, 36px); margin-top: 0; }
.note h2 { font-size: clamp(22px, 3vw, 28px); border-bottom: 1px dashed var(--outline); padding-bottom: .25em; }
.note h3 { font-size: clamp(18px, 2.2vw, 22px); }
.note p { margin: .7em 0; color: var(--text-0); }
.note p.lead { color: var(--text-1); font-size: 1.05rem; }
.note a { color: var(--accent-2); text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--accent), transparent 60%); }
.note a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.note hr { border: none; height: 1px; background: var(--outline); margin: 1.6rem 0; border-radius: 99px; }

/* Inline tags under H1 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.tag { display: inline-block; margin: 0; padding: 4px 8px; font-size: 12px; border-radius: 999px; background: color-mix(in oklab, var(--accent), transparent 85%); color: var(--text-0); border: 1px solid var(--border); }

/* Lists & tasks */
.note ul, .note ol { padding-left: 1.4rem; }
.note li + li { margin-top: .2rem; }
.task { list-style: none; padding-left: 0; }
.task li { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 8px; }
.task input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 3px; }
.task li.done label { color: var(--muted); text-decoration: line-through; }

/* Callouts */
.callout {
    display: grid; grid-template-columns: 28px 1fr; gap: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 1rem 0;
}
.callout .icon { font-size: 18px; line-height: 1; margin-top: 2px; }
.callout.info   { border-left-color: var(--info); }
.callout.warn   { border-left-color: var(--warn); }
.callout.ok     { border-left-color: var(--ok); }
.callout.error  { border-left-color: var(--err); }

/* Code & pre */
.note code { font-family: var(--font-mono); background: var(--inline-bg); padding: .1em .35em; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95em; }
.note pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow: auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.note pre code { background: transparent; padding: 0; border: 0; font-size: .95rem; line-height: 1.55; display: block; white-space: pre; }

/* Status bar */
.status { grid-area: status; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; gap: 14px; padding: 0 10px; color: var(--muted); font-size: 12px; }

/* Command palette */
.palette { position: fixed; inset: 0; display: none; place-items: start center; padding-top: 12vh; background: rgba(4,6,10,.45); backdrop-filter: blur(3px); }
.palette.open { display: grid; }
.palette .box { width: min(720px, 92vw); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev); overflow: hidden; }
.palette input { width: 100%; padding: 14px 16px; background: var(--bg-0); color: var(--text-0); border: 0; border-bottom: 1px solid var(--border); font: 15px var(--font-sans); }
.palette ul { margin: 0; padding: 8px; max-height: 50vh; overflow: auto; list-style: none; }
.palette li { padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.palette li:hover, .palette li.active { background: color-mix(in oklab, var(--accent), transparent 88%); }

/* Utilities */
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flexcol { display: flex; flex-direction: column; gap: 10px; }

/* Mobile */
@media (max-width: 1020px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 44px auto 1fr 24px; /* titlebar, sidebar, content, status */
    grid-template-areas:
      "titlebar"
      "sidebar"
      "content"
      "status";
  }

  /* Collapsed by default; expands with .is-open */
  .sidebar {
    /* keep desktop look in base styles; override for mobile collapse */
    max-height: 0;
    overflow: hidden;
    padding: 0;                 /* remove inner space when closed */
    border-color: transparent;  /* hide border when closed */
    transition: max-height var(--trans), padding var(--trans), border-color var(--trans);
  }
  .sidebar.is-open {
    max-height: 50vh;           /* adjust to taste */
    padding: var(--pad);
    border-color: var(--border);
    overflow: auto;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }