/* Notes - library + plain-text editor */
.app-notes {
  --notes-ink: #e8a100;
  --notes-sel: rgba(245, 176, 0, .22);
  --notes-mark: rgba(255, 196, 0, .38);
}
[data-theme="light"] .app-notes { --notes-ink: #c98600; --notes-sel: rgba(245, 176, 0, .26); --notes-mark: rgba(255, 196, 0, .45); }

/* ---------- sidebar ---------- */
.app-notes .notes-side { width: 272px; padding: 0; gap: 0; }
.app-notes.notes-no-side .notes-side { display: none; }
.app-notes .notes-side-head { padding: 12px 12px 6px; flex: 0 0 auto; }
.app-notes .notes-side-head .input { height: 32px; background: var(--tile); box-shadow: none; }
.app-notes .notes-side-head .input:focus { box-shadow: inset 0 0 0 2px var(--notes-ink); }
.app-notes .notes-list { flex: 1; padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.app-notes .notes-list .side-group-label { padding: 12px 10px 4px; }
.app-notes .notes-item {
  position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; flex: 0 0 auto;
  padding: 9px 12px 10px; border: 0; border-radius: 10px; background: none; text-align: left; color: var(--text);
}
.app-notes .notes-item::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px; background: var(--line); }
.app-notes .notes-item:hover { background: var(--hover); }
.app-notes .notes-item.on { background: var(--notes-sel); }
.app-notes .notes-item.on::after, .app-notes .notes-item:hover::after,
.app-notes .notes-item:has(+ .notes-item.on)::after, .app-notes .notes-item:has(+ .notes-item:hover)::after,
.app-notes .notes-item:has(+ .side-group-label)::after,
.app-notes .notes-item:last-child::after { display: none; }
.app-notes .notes-item:focus-visible { outline: 2px solid var(--notes-ink); outline-offset: -2px; }
.app-notes .notes-item-title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-notes .notes-item-sub { display: flex; gap: 8px; font-size: 12.5px; min-width: 0; }
.app-notes .notes-item-date { color: var(--text); opacity: .78; flex: 0 0 auto; font-weight: 500; }
.app-notes .notes-item-prev { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-notes .notes-item-prev mark { background: var(--notes-mark); color: var(--text); border-radius: 3px; padding: 0 1px; }
.app-notes .notes-list-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.app-notes .notes-list-empty b { color: var(--text-2); font-size: 13.5px; margin-top: 4px; }
.app-notes .notes-side-foot { flex: 0 0 auto; padding: 8px 16px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-3); border-top: 1px solid var(--line); }

/* ---------- editor ---------- */
.app-notes .notes-main { position: relative; }
.app-notes .notes-paper { flex: 1; padding: 16px 22px 40px; cursor: text; }
.app-notes .notes-sheet-inner { max-width: 90ch; margin: 0; min-height: 100%; display: flex; flex-direction: column; }
.app-notes .notes-meta { text-align: center; font-size: 12px; font-weight: 500; color: var(--text-3); margin-bottom: 18px; user-select: none; }
.app-notes .notes-editor {
  flex: 1; outline: none; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 15.5px; line-height: 1.68; color: var(--text); caret-color: var(--notes-ink);
}
.app-notes .notes-editor::first-line { font-size: 1.62em; font-weight: 750; letter-spacing: -.012em; line-height: 1.5; }
.app-notes .notes-editor:empty::before { content: attr(data-placeholder); color: var(--text-3); font-size: 1.62em; font-weight: 700; pointer-events: none; }
.app-notes .notes-editor::selection, .app-notes .notes-textarea::selection { background: var(--notes-mark); }
.app-notes .notes-empty { color: var(--text-2); }
.app-notes .notes-empty .btn { margin-top: 10px; }
.app-notes .notes-empty-ic {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; margin-bottom: 4px;
  background: linear-gradient(160deg, #fde68a, #f59e0b); box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .7);
}
.app-notes [hidden] { display: none !important; }

.app-notes .notes-foot {
  height: 30px; flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  font-size: 11.5px; font-weight: 500; color: var(--text-3); border-top: 1px solid var(--line); background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.app-notes .notes-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-notes .notes-kind { padding: 1px 7px; border-radius: 6px; background: var(--tile); font-weight: 700; font-size: 10.5px; letter-spacing: .03em; color: var(--text-2); }
.app-notes .notes-status { display: inline-flex; align-items: center; gap: 4px; min-width: 60px; justify-content: flex-end; transition: opacity .6s, color .6s; }
.app-notes .notes-status.saved { color: #3fae6b; }
.app-notes .notes-status.saved.fade { opacity: .7; color: var(--text-3); }
.app-notes .notes-status.error, .app-notes .notes-status.missing { color: #e5484d; }

/* title-bar buttons */
.app-notes .notes-mback { display: none; }
.win-bar-extra .notes-toggle-side, .win-bar-extra .notes-new { width: 30px; height: 30px; }

/* ---------- single-file mode ---------- */
.app-notes.notes-filemode { background: var(--surface); }
.app-notes .notes-file-body { flex: 1; min-height: 0; display: flex; position: relative; }
.app-notes .notes-file-edit { flex: 1; min-width: 0; display: flex; }
.app-notes .notes-preview { flex: 1; display: none; background: var(--surface); }
.app-notes.notes-showing-preview .notes-file-edit { display: none; }
.app-notes.notes-showing-preview .notes-preview { display: block; }
.app-notes .notes-textarea {
  flex: 1; width: 100%; border: 0; outline: none; resize: none; margin: 0;
  background: var(--surface); color: var(--text); caret-color: var(--notes-ink);
  font-family: var(--font); font-size: 14.5px; line-height: 1.6;
  padding: 12px 16px 40px;
  tab-size: 4;
}
.app-notes .notes-textarea.mono { font-family: var(--mono); font-size: 13px; line-height: 1.6; padding: 12px 16px 40px; }
.notes-seg button { height: 26px; padding: 0 11px; }
.notes-seg button .ic { opacity: .8; }

/* markdown preview */
.notes-md { max-width: 90ch; margin: 0; padding: 16px 22px 50px; font-size: 15px; line-height: 1.7; color: var(--text); user-select: text; -webkit-user-select: text; }
.notes-md > :first-child { margin-top: 0; }
.notes-md h1, .notes-md h2, .notes-md h3, .notes-md h4, .notes-md h5, .notes-md h6 { line-height: 1.25; letter-spacing: -.015em; margin: 1.5em 0 .5em; font-weight: 750; }
.notes-md h1 { font-size: 2.05em; margin-bottom: .6em; }
.notes-md h2 { font-size: 1.38em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.notes-md h3 { font-size: 1.15em; }
.notes-md h4, .notes-md h5, .notes-md h6 { font-size: 1em; color: var(--text-2); }
.notes-md p { margin: .7em 0; }
.notes-md a { color: var(--accent); text-decoration: none; font-weight: 600; cursor: pointer; }
.notes-md a:hover { text-decoration: underline; }
.notes-md strong { font-weight: 750; }
.notes-md code { font-family: var(--mono); font-size: .86em; padding: .12em .4em; border-radius: 6px; background: var(--tile); }
.notes-md pre { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 14px 16px; overflow: auto; font-size: 13px; line-height: 1.55; }
.notes-md pre code { background: none; padding: 0; font-size: inherit; }
.notes-md blockquote { margin: 1em 0; padding: .3em 1em; border-left: 3px solid var(--notes-ink); color: var(--text-2); background: var(--notes-sel); border-radius: 0 10px 10px 0; }
.notes-md hr { border: 0; height: 1px; background: var(--line-2); margin: 2em 0; }
.notes-md ul, .notes-md ol { padding-left: 1.5em; margin: .6em 0; }
.notes-md li { margin: .25em 0; }
.notes-md li::marker { color: var(--text-3); }
.notes-md li.task { list-style: none; margin-left: -1.5em; }
.notes-md li.task label { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.notes-md li.task input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 4px 0 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px var(--text-3); display: grid; place-items: center; cursor: pointer; transition: background .15s, box-shadow .15s;
}
.notes-md li.task input:checked { background: var(--notes-ink); box-shadow: none; }
.notes-md li.task input:checked::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.notes-md li.task.done > label > span { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }
.notes-md table { border-collapse: collapse; margin: 1em 0; font-size: .93em; }
.notes-md th, .notes-md td { padding: 7px 12px; border: 1px solid var(--line-2); text-align: left; }
.notes-md th { background: var(--surface-2); }
.notes-md .notes-md-img { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--tile); color: var(--text-2); font-size: .9em; }

/* CSV table view */
.notes-sheet-wrap { padding: 20px 22px 40px; }
.notes-sheet {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--surface); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden;
  user-select: text; -webkit-user-select: text;
}
.notes-sheet th, .notes-sheet td { padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.notes-sheet td + td, .notes-sheet th + th { border-left: 1px solid var(--line); }
.notes-sheet thead th { position: sticky; top: 0; background: var(--surface-2); font-weight: 700; font-size: 12px; color: var(--text-2); z-index: 1; }
.notes-sheet .num { text-align: right; }
.notes-sheet .rn { width: 40px; padding: 9px 0; text-align: center; color: var(--text-3); font-size: 11.5px; background: var(--surface-2); }
.notes-sheet tbody tr:hover td:not(.rn) { background: var(--hover); }
.notes-sheet tfoot td { font-weight: 750; border-bottom: 0; border-top: 1.5px solid var(--line-2); background: var(--surface-2); }
.notes-sheet tfoot .label { color: var(--text-2); }

/* ---------- phone layout ---------- */
[data-layout="mobile"] .win-bar-extra .notes-toggle-side { display: none; }
[data-layout="mobile"] .app-notes .notes-side { width: 100%; border-right: 0; background: var(--surface); }
[data-layout="mobile"] .app-notes .notes-main { display: none; }
[data-layout="mobile"] .app-notes.notes-editing .notes-side { display: none; }
[data-layout="mobile"] .app-notes.notes-editing .notes-main { display: flex; }
[data-layout="mobile"] .app-notes.notes-no-side .notes-side { display: flex; }
[data-layout="mobile"] .app-notes.notes-no-side.notes-editing .notes-side { display: none; }
[data-layout="mobile"] .app-notes .notes-paper { padding: 16px 20px 60px; }
[data-layout="mobile"] .app-notes .notes-item { padding: 12px 12px 13px; }
[data-layout="mobile"] .app-notes .notes-item-title { font-size: 15px; }
[data-layout="mobile"] .app-notes .notes-textarea { padding: 12px 14px 40px; }
[data-layout="mobile"] .notes-md { padding: 22px 20px 60px; }
[data-layout="mobile"] .notes-sheet-wrap { padding: 12px; }
[data-layout="mobile"] .app-notes .notes-mback {
  display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; flex: 0 0 auto; margin: 8px 0 0 6px; height: 34px; padding: 0 12px 0 4px;
  border: 0; border-radius: 10px; background: none; color: var(--notes-ink); font-size: 15px; font-weight: 600;
}
[data-layout="mobile"] .app-notes .notes-mback:active { background: var(--hover); }
.app-notes input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }