/* Notes: the list on the left and the open note on the right; on the phone the list, then the note. Spacing, corners and
   type come from the tokens in components.css; the fields keep the global standard. */

.notes {
    --notes-measure: 38rem; /* a comfortable line: about 75 characters */
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

/* ---------- The list ---------- */

.notes__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.notes__filters { display: flex; flex-direction: column; gap: var(--space-3); }
.notes__search input { width: 100%; }
.notes__filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.notes__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.notes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* Note colours: a stripe on the left of a list entry, a band on top of the open note, a light tint. */
.note--yellow { --note: #e9c46a; }
.note--orange { --note: #f4a261; }
.note--pink { --note: #f29bb8; }
.note--purple { --note: #b79cf0; }
.note--blue { --note: #7fb3f0; }
.note--green { --note: #8fd19e; }
.note--none { --note: var(--surface); }

.note-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--note, var(--surface)) 10%, var(--surface));
    box-shadow: inset 4px 0 0 var(--note, transparent);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.note-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.note-item.is-active { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--note, transparent), var(--ring); }
.note-item__icon { color: var(--area); font-size: var(--text-lg); line-height: 1; padding-top: 2px; }
.note-item__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.note-item__title { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item__snippet {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.note-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--ink-muted); font-size: var(--text-xs); }
.note-item__meta .icon { vertical-align: -0.15em; }
.note-item__tag { color: var(--area); }

/* ---------- The open note ---------- */

.notes__main { min-width: 0; position: sticky; top: var(--space-4); }
.notes__placeholder { padding: var(--space-7) var(--space-5); }

.note-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6) var(--space-4);
    min-width: 0;
    /* The colour as a band along the top, inside the card's round corners. */
    box-shadow: inset 0 4px 0 var(--note, transparent), var(--shadow);
}

.note-editor__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.note-editor__back { display: none; flex: none; }
.note-editor__icon { color: var(--area); font-size: var(--text-xl); line-height: 1; flex: none; }
/* The title is a heading you can type in: no frame until you point at it (a real deviation from the field standard). */
.note-editor__title {
    flex: 1;
    min-width: 0;
    border-color: transparent;
    background: transparent;
    font-weight: 700;
}
.note-editor__title:hover { border-color: var(--line); }
.note-editor__status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); white-space: nowrap; flex: none; }
.note-editor__status .spinner { width: 14px; height: 14px; }

.note-editor__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.note-editor__colors { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.note-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--radius-pill);
    border: 2px solid var(--line);
    background: var(--note);
    cursor: pointer;
}
.note-swatch.note--none { background: linear-gradient(135deg, var(--surface) 45%, var(--line) 45% 55%, var(--surface) 55%); }
.note-swatch.is-active { border-color: var(--ink); box-shadow: var(--ring); }
.note-editor__tags { flex: 1 1 140px; min-width: 0; }
.note-editor__tags input { width: 100%; }
.note-editor__delete { margin-left: auto; }

.note-editor__conflict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.note-editor__conflict > span { flex: 1 1 200px; }
.note-editor__conflict > .icon { color: var(--warning); flex: none; }
.note-editor > .form-error { margin: 0; }

/* View tabs and the Markdown toolbar: one line, a rule under it, then the text. */
.note-editor__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}
.note-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.note-toolbar__upload { position: relative; cursor: pointer; }
.note-toolbar__upload input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.note-toolbar__upload.is-busy { cursor: progress; }

/* Writing or reading alone: one column at a readable width. Both: side by side, each half its own column. */
.note-editor__body { display: grid; gap: var(--space-5); min-width: 0; }
.note-editor__body.is-edit, .note-editor__body.is-read { width: 100%; max-width: var(--notes-measure); margin-inline: auto; }
.note-editor__body.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.note-editor__text { min-height: 55vh; }
.note-editor__foot { margin: 0; font-size: var(--text-xs); }

/* ---------- Reading view (rendered Markdown) ---------- */

.note-view { min-width: 0; line-height: 1.65; overflow-wrap: anywhere; }
.note-editor__body.is-split .note-view { max-height: 70vh; overflow: auto; padding-right: var(--space-2); }

/* One rhythm: every block keeps the same space below it, headings get more above. */
.note-view > * { margin-block: 0 var(--space-4); }
.note-view > :last-child { margin-bottom: 0; }
.note-view :is(h1, h2, h3, h4, h5, h6) { line-height: 1.3; margin: var(--space-6) 0 var(--space-2); }
.note-view > :first-child { margin-top: 0; }
.note-view h1 { font-size: var(--text-xl); }
.note-view h2 { font-size: var(--text-lg); }
.note-view :is(h3, h4, h5, h6) { font-size: var(--text-md); }
.note-view p { margin-block: 0 var(--space-4); }
.note-view a { color: var(--accent); }

.note-view :is(ul, ol) { padding-left: 1.5em; }
.note-view li + li, .note-view li > :is(ul, ol) { margin-top: var(--space-1); }
.note-view li > :is(ul, ol) { margin-bottom: 0; }
.note-view li > p { margin-bottom: var(--space-2); }

/* Task lists: the box takes the bullet's place; nested ones step in like a normal list. */
.note-view .contains-task-list { list-style: none; padding-left: 0; }
.note-view .contains-task-list .contains-task-list { padding-left: 1.75em; }
.note-view .task-list-item { display: block; }
.note-view .note-task { margin: 0 var(--space-2) 0 0; vertical-align: -0.2em; cursor: pointer; }
.note-view .task-list-item:has(> .note-task:checked) { color: var(--ink-muted); text-decoration: line-through; }

.note-view blockquote {
    margin-inline: 0;
    padding: var(--space-2) var(--space-4);
    border-left: 3px solid var(--area);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--area) 8%, transparent);
    color: var(--ink-muted);
}
.note-view blockquote > :last-child { margin-bottom: 0; }

.note-view code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--surface-2); overflow-wrap: anywhere; }
.note-view pre { max-width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); overflow-x: auto; line-height: 1.5; }
.note-view pre code { padding: 0; background: none; overflow-wrap: normal; white-space: pre; }

/* Tables scroll sideways inside the note instead of widening it. */
.note-view table { display: block; max-width: 100%; width: max-content; overflow-x: auto; border-collapse: collapse; font-size: var(--text-md); }
.note-view :is(th, td) { padding: var(--space-2) var(--space-3); border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; }
.note-view td { min-width: 6rem; }
.note-view th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }

.note-view img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.note-view p:has(> img:only-child) { line-height: 0; }
.note-view hr { height: 0; border: none; border-top: 1px solid var(--line); margin-block: var(--space-6); }

/* ---------- Phone and tablet upright: the list, then the note ---------- */

@media (max-width: 860px) {
    .notes { grid-template-columns: minmax(0, 1fr); }
    .notes__main { position: static; }
    .notes-page:not(.has-note) .notes__main { display: none; }
    .notes-page.has-note .notes__side { display: none; }
    .notes-page.has-note .page__header { display: none; }
    .note-editor__back { display: inline-flex; }
    .note-editor__split-tab { display: none; }
    /* "Both" isn't offered here: a remembered choice shows the writing view. */
    .note-editor__body.is-split { grid-template-columns: minmax(0, 1fr); }
    .note-editor__body.is-split .note-view { display: none; }
    .note-editor__text { min-height: 50vh; }
}

/* Up to 980px the menu button sits at the bottom left (pages.css). With a note open, the round mixer and quick access
   buttons beside it would sit on the text: the note does without them (as the chat does). */
@media (max-width: 980px) {
    .shani:has(.notes-page.has-note) .quick-mixer, .shani:has(.notes-page.has-note) .quick-access { display: none; }
}

@media (max-width: 560px) {
    /* The note fills the width: the page's own side margin is the card's. */
    .note-editor {
        margin-inline: calc(-1 * var(--space-4));
        padding: var(--space-4);
        border-inline: 0;
        border-radius: 0;
    }
    .note-editor__meta { gap: var(--space-2); }
    .note-editor__bar { gap: var(--space-2); }
}