/* Our stylesheet (committed). Open Props supplies the vars; fallbacks keep it sane
   if open-props.min.css hasn't loaded. */
:root { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans, system-ui, sans-serif);
  margin: 0;
  background: var(--surface-1, Canvas);
  color: var(--text-1, CanvasText);
}

.app {
  display: grid;
  grid-template-columns: minmax(200px, 16rem) 1fr;
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid var(--surface-3, #ddd);
  background: var(--surface-2, #f6f6f6);
  padding: var(--size-3, 1rem);
  display: grid;
  gap: var(--size-3, 1rem);
  align-content: start;
}
.brand { font-weight: 700; font-size: var(--font-size-3, 1.25rem); }
.user {
  display: flex; align-items: center; justify-content: space-between; gap: var(--size-2, .5rem);
  font-size: var(--font-size-0, .8rem); color: var(--text-2, #777);
}
.user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout {
  border: none; background: none; color: var(--link, #06f); cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline; flex: none;
}
.demo-banner {
  background: var(--yellow-3, #fde68a); color: var(--yellow-11, #713f12);
  text-align: center; padding: var(--size-1, .3rem); font-size: var(--font-size-0, .85rem);
}

/* auth */
body.auth { display: grid; place-items: center; min-height: 100vh; }
.auth-box {
  display: grid; gap: var(--size-4, 1.25rem); padding: var(--size-6, 2.5rem);
  min-width: 20rem; max-width: 24rem;
}
.auth-box h1 { text-align: center; margin: 0; }
.auth-box form { display: grid; gap: var(--size-2, .5rem); }
.auth-box h2 { font-size: var(--font-size-2, 1rem); margin: 0 0 var(--size-1, .25rem); }
.auth-box input {
  padding: var(--size-2, .5rem); font: inherit; border-radius: var(--radius-2, .35rem);
  border: 1px solid var(--surface-3, #ccc); background: var(--surface-1, #fff); color: inherit;
}
.auth-box button {
  padding: var(--size-2, .5rem); font: inherit; cursor: pointer;
  border: 1px solid var(--surface-3, gray); border-radius: var(--radius-2, .35rem);
  background: var(--surface-2, #f0f0f0); color: inherit;
}
.auth-err { color: var(--red-9, #c00); font-size: var(--font-size-0, .85rem); }

/* guest mode + import */
.guest-banner, .import-bar {
  background: var(--blue-2, #dbeafe); color: var(--blue-11, #1e40af);
  text-align: center; padding: var(--size-2, .5rem); font-size: var(--font-size-0, .85rem);
  display: flex; gap: var(--size-2, .5rem); align-items: center; justify-content: center; flex-wrap: wrap;
}
.guest-banner a { color: inherit; font-weight: 600; }
.import-bar button {
  border: 1px solid currentColor; background: none; color: inherit; cursor: pointer;
  border-radius: var(--radius-2, .35rem); padding: .15rem .6rem; font: inherit;
}
.brand .tag {
  font-size: var(--font-size-0, .7rem); font-weight: 400; color: var(--text-2, #999);
  border: 1px solid var(--surface-3, #ccc); border-radius: var(--radius-1, .2rem); padding: 0 .35rem;
}
.guest-body {
  width: 100%; font: inherit; padding: var(--size-3, 1rem); resize: vertical;
  border: 1px solid var(--surface-3, #ccc); border-radius: var(--radius-2, .35rem);
  background: var(--surface-1, #fff); color: inherit; min-height: 60vh;
}

.newpage {
  padding: var(--size-2, .5rem) var(--size-3, 1rem);
  border: 1px solid var(--surface-3, gray);
  border-radius: var(--radius-2, .35rem);
  background: var(--surface-1, #fff);
  color: inherit;
  cursor: pointer;
  text-align: start;
}
.newpage:hover { background: var(--surface-3, #eaeaea); }

.search {
  width: 100%; padding: var(--size-2, .5rem); font: inherit;
  border: 1px solid var(--surface-3, #ccc); border-radius: var(--radius-2, .35rem);
  background: var(--surface-1, #fff); color: inherit;
}
.results-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--size-1, .25rem); }
.results-list a {
  display: block; padding: var(--size-1, .3rem) var(--size-2, .5rem);
  border-radius: var(--radius-2, .35rem); color: inherit; text-decoration: none;
}
.results-list a:hover { background: var(--surface-3, #eaeaea); }
.s-title { display: block; font-weight: 600; font-size: var(--font-size-0, .85rem); }
.s-snip { display: block; font-size: var(--font-size-0, .8rem); color: var(--text-2, #777); }
.s-snip b { color: var(--text-1, #000); background: var(--yellow-3, #ff9); }

.page-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--size-1, .25rem); }
.page-list li { display: flex; align-items: center; gap: var(--size-1, .25rem); }
.page-list a {
  flex: 1;
  padding: var(--size-1, .3rem) var(--size-2, .5rem);
  border-radius: var(--radius-2, .35rem);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-list a:hover { background: var(--surface-3, #eaeaea); }
.page-list .empty { color: var(--text-2, #888); font-size: var(--font-size-0, .85rem); padding: var(--size-1, .3rem) var(--size-2, .5rem); }
.del {
  border: none; background: none; color: var(--text-2, #999);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: .2rem .4rem; border-radius: var(--radius-2, .35rem);
}
.del:hover { background: var(--red-3, #fdd); color: var(--red-9, #900); }

.main { padding: var(--size-6, 2.5rem); max-width: var(--size-content-3, 65ch); }
.page { display: grid; gap: var(--size-3, 1rem); }
.title {
  font-size: var(--font-size-6, 2rem);
  font-weight: 700;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  width: 100%;
}
.title:focus { outline: none; }
.hint { color: var(--text-2, #888); }

/* share/export toolbar */
.toolbar {
  display: flex; align-items: center; gap: var(--size-2, .5rem); flex-wrap: wrap;
  font-size: var(--font-size-0, .85rem); color: var(--text-2, #777);
  padding-bottom: var(--size-2, .5rem); border-bottom: 1px solid var(--surface-3, #eee);
}
.toolbar button {
  border: 1px solid var(--surface-3, #ccc); background: var(--surface-2, #f3f3f3); color: inherit;
  border-radius: var(--radius-2, .35rem); padding: .15rem .6rem; cursor: pointer; font: inherit;
}
.toolbar .sp { flex: 1; }
.toolbar .exp { color: inherit; text-decoration: none; border: 1px solid var(--surface-3, #ccc);
  border-radius: var(--radius-2, .35rem); padding: .1rem .5rem; }
.toolbar .shared a { color: var(--link, #06f); }

/* public read-only page */
body.public { display: block; }
.pub { max-width: var(--size-content-3, 65ch); margin-inline: auto; padding: var(--size-7, 3rem) var(--size-4, 1.25rem); }
.pblock { margin: var(--size-3, 1rem) 0; }
.pblock > * { margin: 0; }
.pblock img { max-width: 100%; }

/* blocks */
.blocks { display: grid; gap: var(--size-1, .25rem); }
.block {
  display: flex; align-items: flex-start; gap: var(--size-2, .5rem);
  border-radius: var(--radius-2, .35rem);
  padding: var(--size-1, .25rem);
}
.block:hover { background: var(--surface-2, #f6f6f6); }
.drag {
  cursor: grab; color: var(--text-2, #bbb); user-select: none;
  opacity: 0; transition: opacity .1s; padding-top: .2rem;
}
.block:hover .drag { opacity: 1; }
.sortable-ghost { opacity: .4; }
.block-body { flex: 1; cursor: text; min-height: 1.5rem; }
.block-body > * { margin: 0; }
.block-body h2 { font-size: var(--font-size-4, 1.5rem); }
.block-body .empty { color: var(--text-2, #aaa); font-style: italic; }
.block-body blockquote {
  border-left: 3px solid var(--surface-3, #ccc); padding-left: var(--size-3, 1rem);
  color: var(--text-2, #666);
}
.block-body pre {
  background: var(--surface-2, #f0f0f0); padding: var(--size-3, 1rem);
  border-radius: var(--radius-2, .35rem); overflow-x: auto;
}
.block-body hr { border: none; border-top: 1px solid var(--surface-3, #ccc); width: 100%; }
.block-body ul, .block-body ol { padding-left: var(--size-5, 1.5rem); }
.todo-check { margin-top: .35rem; }
.block.done .todo-text { text-decoration: line-through; color: var(--text-2, #999); }
.upl { max-width: 100%; border-radius: var(--radius-2, .35rem); display: block; }
.upl-file {
  display: inline-block; padding: var(--size-1, .3rem) var(--size-2, .5rem);
  background: var(--surface-2, #f0f0f0); border-radius: var(--radius-2, .35rem);
  color: inherit; text-decoration: none;
}
.upl-file:hover { background: var(--surface-3, #e5e5e5); }
.upload {
  margin-top: var(--size-2, .5rem); display: flex; gap: var(--size-2, .5rem);
  align-items: center; font-size: var(--font-size-0, .85rem);
  border-top: 1px dashed var(--surface-3, #ddd); padding-top: var(--size-2, .5rem);
}
.block-ctl { display: flex; gap: .15rem; opacity: 0; transition: opacity .1s; }
.block:hover .block-ctl, .block.editing .block-ctl { opacity: 1; }
.block-ctl button {
  border: none; background: none; color: var(--text-2, #999);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: .15rem .4rem;
  border-radius: var(--radius-2, .35rem);
}
.block-ctl button:hover { background: var(--surface-3, #e5e5e5); color: inherit; }
.block.editing { flex-direction: column; }
.block.editing form { width: 100%; display: grid; gap: var(--size-2, .5rem); }
.block textarea {
  width: 100%; font: inherit; padding: var(--size-2, .5rem);
  border: 1px solid var(--surface-3, #ccc); border-radius: var(--radius-2, .35rem);
  background: var(--surface-1, #fff); color: inherit; resize: vertical;
}
.block select { justify-self: start; padding: .2rem; border-radius: var(--radius-2, .35rem); }
.add-block {
  justify-self: start; margin-top: var(--size-2, .5rem);
  padding: var(--size-1, .3rem) var(--size-3, 1rem);
  border: 1px dashed var(--surface-3, #ccc); border-radius: var(--radius-2, .35rem);
  background: none; color: var(--text-2, #888); cursor: pointer;
}
.add-block:hover { background: var(--surface-2, #f0f0f0); color: inherit; }