/* NOTES - styles. No inline styles anywhere (the page's content-security policy forbids them). */
:root {
  --bg: #f6f6f3;
  --panel: #ffffff;
  --side: #efefea;
  --ink: #1f2328;
  --muted: #6a7078;
  --line: #dcdcd4;
  --accent: #2f6f4f;
  --accent-ink: #ffffff;
  --accent-soft: #e2efe8;
  --danger: #b3261e;
  --warn-bg: #fff4d6;
  --warn-ink: #5a4300;
  --err-bg: #fde7e5;
  --ok-bg: #e3f2e8;
  --mark: #fff0a3;
  --code-bg: #f0f0ea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17191c;
    --panel: #1f2226;
    --side: #1b1e21;
    --ink: #e6e8ea;
    --muted: #9aa1a8;
    --line: #33383d;
    --accent: #5fb88a;
    --accent-ink: #0d1a13;
    --accent-soft: #23352b;
    --danger: #ff8a80;
    --warn-bg: #3b3213;
    --warn-ink: #f3dd9a;
    --err-bg: #3d1f1d;
    --ok-bg: #1f3326;
    --mark: #6b5d0a;
    --code-bg: #2a2d31;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0.2em 0; line-height: 1.25; }
.muted { color: var(--muted); }
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.92em; }
[hidden] { display: none !important; }

/* buttons and inputs */
.btn, button.btn {
  display: inline-block; font: inherit; font-size: 0.95rem; cursor: pointer; text-decoration: none;
  padding: 0.45em 0.95em; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.wide { width: 100%; }
button.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%; }
input[type=text], input[type=search], input[type=password], select, textarea {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.5em 0.7em; max-width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* top bar */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
}
.top .brand { font-weight: 700; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; font-size: 1.1rem; }
.top .menu { display: none; font-size: 1.3rem; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0.1em 0.3em; }
.top .search { flex: 1; max-width: 560px; }
.top .search input { width: 100%; }

/* layout */
.shell { display: flex; min-height: calc(100vh - 54px); }
.side {
  width: 280px; flex: none; background: var(--side); border-right: 1px solid var(--line);
  padding: 0.8rem 0.6rem 2rem; overflow-y: auto; position: sticky; top: 54px; height: calc(100vh - 54px);
}
.main { flex: 1; min-width: 0; padding: 1.2rem 1.5rem 4rem; max-width: 980px; }
.side .sect { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0.9rem 0.6rem 0.3rem; }
.side a, .side button.linklike { display: flex; align-items: center; gap: 0.45rem; padding: 0.38em 0.6em; border-radius: 7px; color: var(--ink); text-decoration: none; }
.side a:hover, .side button.linklike:hover { background: var(--accent-soft); }
.side a.cur { background: var(--accent-soft); font-weight: 600; }
.side .ico { width: 1.3em; text-align: center; flex: none; }
.side .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .cnt { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.side details > summary { list-style: none; cursor: pointer; }
.side details > summary::-webkit-details-marker { display: none; }
.side details > summary > a::after { content: "▸"; margin-left: auto; color: var(--muted); font-size: 0.75rem; padding-left: 0.4rem; }
.side details[open] > summary > a::after { content: "▾"; }
.side .sub { margin-left: 0.9rem; border-left: 1px solid var(--line); padding-left: 0.2rem; }
.side .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0 0.4rem; }
.side .tags .tag { padding: 0.15em 0.55em; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; background: var(--panel); }
.scrim { display: none; }

/* headings and lists */
.head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.crumbs { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.3rem; }
.crumbs a { color: var(--muted); }
.notes { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.note-row {
  display: grid; gap: 0.1rem; padding: 0.7rem 0.9rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: var(--ink);
}
.note-row:hover { border-color: var(--accent); }
.note-row .t { font-weight: 600; color: var(--ink); text-decoration: none; }
.note-row .p { color: var(--muted); font-size: 0.92rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.note-row .p mark { color: var(--ink); }
.note-row .m { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 0.1em; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 10px; margin-top: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.chip { padding: 0.25em 0.8em; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); text-decoration: none; color: var(--ink); font-size: 0.92rem; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.2rem; color: var(--muted); }

/* folder options */
details.opts { margin: 0.4rem 0 0.8rem; }
details.opts > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.opts-body { display: grid; gap: 0.5rem; padding: 0.6rem 0; }
form.inline, .inline-form { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; }

/* flash */
.flash { padding: 0.65rem 0.9rem; border-radius: 10px; margin: 0 0 0.9rem; background: var(--ok-bg); }
.flash.err { background: var(--err-bg); color: var(--danger); }
.flash.warn { background: var(--warn-bg); color: var(--warn-ink); }
.flash a { color: inherit; }

/* a note */
article.note { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.3rem; }
article.note header { border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; padding-bottom: 0.6rem; }
.meta { font-size: 0.82rem; }
.tags.inline { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.tag { text-decoration: none; color: var(--accent); }
.tags.inline .tag { padding: 0.1em 0.6em; background: var(--accent-soft); border-radius: 999px; font-size: 0.85rem; }
.note-body { overflow-wrap: anywhere; }
.note-body h1 { font-size: 1.45rem; } .note-body h2 { font-size: 1.25rem; } .note-body h3 { font-size: 1.1rem; }
.note-body h1, .note-body h2, .note-body h3, .note-body h4 { margin: 1em 0 0.3em; }
.note-body p { margin: 0.5em 0; }
.note-body ul, .note-body ol { margin: 0.4em 0; padding-left: 1.5rem; }
.note-body li { margin: 0.15em 0; }
.note-body li.task { list-style: none; margin-left: -1.2rem; }
.note-body li.task.done { color: var(--muted); text-decoration: line-through; }
.note-body blockquote { margin: 0.6em 0; padding: 0.1em 0.9em; border-left: 3px solid var(--accent); color: var(--muted); }
.note-body pre { background: var(--code-bg); padding: 0.8em 1em; border-radius: 8px; overflow-x: auto; }
.note-body pre code { background: none; padding: 0; }
.note-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.note-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.8rem; }
details.ver { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.9rem; margin-top: 0.5rem; }
details.ver > summary { cursor: pointer; }

/* action bar: stays at the top while you scroll a long note */
.toolbar {
  position: sticky; top: 54px; z-index: 10; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  padding: 0.5rem 0; margin-bottom: 0.4rem; background: var(--bg);
}
.toolbar .grow { flex: 1; }
.toolbar .btn, .toolbar select { margin: 0; }

/* the @ menu in the editor */
.ta-wrap { position: relative; }
.atmenu {
  position: absolute; z-index: 15; min-width: 250px; max-width: 92%; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); padding: 0.25rem; overflow: hidden;
}
.atmenu button {
  display: flex; justify-content: space-between; gap: 1.2rem; width: 100%; text-align: left; font: inherit; font-size: 0.93rem;
  background: none; border: 0; border-radius: 7px; padding: 0.4em 0.65em; cursor: pointer; color: var(--ink);
}
.atmenu button .v { color: var(--muted); }
.atmenu button.sel, .atmenu button:hover { background: var(--accent-soft); }

/* editor */
.editor { display: grid; gap: 0.6rem; }
.editor .title-in { font-size: 1.3rem; font-weight: 600; width: 100%; }
.editor .row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.editor label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.editor label.grow { flex: 1; min-width: 220px; }
.editor .hint { font-size: 0.78rem; color: var(--muted); }

/* the visual editor (Quill) in this site's colors, light and dark */
.toolbar-wrap { position: sticky; top: 54px; z-index: 10; background: var(--bg); padding-bottom: 0.4rem; }
.toolbar-wrap .toolbar { position: static; padding-bottom: 0.35rem; margin-bottom: 0; }
.editor-box .ql-container.ql-snow { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font: inherit; }
.editor-box .ql-editor { min-height: 52vh; padding: 0.9rem 1.1rem; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.editor-box .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; left: 1.1rem; }
.editor-box .ql-editor a { color: var(--accent); }
.editor-box .ql-editor pre.ql-syntax, .editor-box .ql-editor .ql-code-block-container { background: var(--code-bg); color: var(--ink); border-radius: 8px; }
.ql-snow.ql-toolbar { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 0.3rem 0.4rem; }
.ql-snow .ql-stroke { stroke: var(--ink); }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--ink); }
.ql-snow .ql-picker, .ql-snow .ql-picker-label { color: var(--ink); }
.ql-snow .ql-picker-options { background: var(--panel); border-color: var(--line); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); }
.ql-snow .ql-picker.ql-expanded .ql-picker-label, .ql-snow .ql-picker.ql-expanded .ql-picker-options { border-color: var(--line); }
.ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--accent); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: var(--accent); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill { fill: var(--accent); }
.ql-snow .ql-tooltip { background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); z-index: 20; }
.ql-snow .ql-tooltip input[type=text] { background: var(--bg); color: var(--ink); border-color: var(--line); }
.ql-snow .ql-tooltip a { color: var(--accent); }

/* text colors and highlights: saved as these classes (the page forbids inline styles) */
.ql-color-red { color: #d6291f; }
.ql-color-orange { color: #c25e00; }
.ql-color-green { color: #1b7f3b; }
.ql-color-blue { color: #1a5fd0; }
.ql-color-purple { color: #7b3fc4; }
.ql-color-gray { color: #6b7280; }
.ql-bg-yellow { background-color: #fff176; color: #1f2328; }
.ql-bg-lightgreen { background-color: #b9f6ca; color: #1f2328; }
.ql-bg-pink { background-color: #ffc1d9; color: #1f2328; }
.ql-bg-lightblue { background-color: #bfe0ff; color: #1f2328; }
.ql-bg-orange { background-color: #ffd9a8; color: #1f2328; }
@media (prefers-color-scheme: dark) {
  .ql-color-red { color: #ff8a80; }
  .ql-color-orange { color: #ffb454; }
  .ql-color-green { color: #6fdc8c; }
  .ql-color-blue { color: #7db3ff; }
  .ql-color-purple { color: #c9a3ff; }
  .ql-color-gray { color: #a0a7b0; }
}
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.note-body .ql-indent-1 { padding-left: 2em; }
.note-body .ql-indent-2 { padding-left: 4em; }
.note-body .ql-indent-3 { padding-left: 6em; }

/* check lists in a saved note (the editor saves each check item as <li data-list="checked|unchecked">) */
.note-body li[data-list] { list-style: none; position: relative; }
.note-body li[data-list]::before { position: absolute; left: -1.45em; }
.note-body li[data-list="unchecked"]::before { content: "\2610"; }
.note-body li[data-list="checked"]::before { content: "\2611"; }
.note-body li[data-list="checked"] { color: var(--muted); text-decoration: line-through; }
.note-body ul[data-checked] { list-style: none; padding-left: 0.3rem; }
.note-body ul[data-checked] > li::before { content: "\2610"; margin-right: 0.5em; }
.note-body ul[data-checked="true"] > li::before { content: "\2611"; }
.note-body ul[data-checked="true"] > li { color: var(--muted); text-decoration: line-through; }

/* search */
.bigsearch { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.bigsearch input[type=search] { flex: 1; min-width: 220px; }
.check { display: flex; gap: 0.35rem; align-items: center; font-size: 0.9rem; color: var(--muted); }

/* login, setup, public */
body.plain { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; width: 100%; max-width: 380px; display: grid; gap: 0.8rem; }
.card h1 { text-align: center; letter-spacing: 0.06em; }
.card label { display: grid; gap: 0.25rem; font-size: 0.88rem; color: var(--muted); }
.card input { width: 100%; }
body.publicpage .pubmain { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

/* phone */
@media (max-width: 800px) {
  .top .menu { display: block; }
  .top .newbtn { padding: 0.4em 0.7em; }
  .side { position: fixed; left: 0; top: 54px; bottom: 0; height: auto; z-index: 30; transform: translateX(-100%); transition: transform 0.18s ease; width: min(86vw, 320px); }
  body.menu-open .side { transform: none; }
  body.menu-open .scrim { display: block; position: fixed; inset: 54px 0 0 0; background: rgba(0, 0, 0, 0.4); z-index: 25; }
  .main { padding: 1rem 0.9rem 4rem; }
  .editor-box .ql-editor { min-height: 45vh; }
}
@media print {
  .top, .side, .note-actions, .flash { display: none !important; }
  .main { padding: 0; max-width: none; }
}