/* A small notes app, available without editing the dashboard layout. */
.dashboard-widget-notes { container: notes-widget / inline-size; }
.notes-app { min-width: 0; color: var(--fg); }
.notes-app :is(input,textarea,button) { font-family: inherit; }
.notes-app__toolbar { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-bottom: .85rem; }
.notes-app__count { color: var(--muted); font-size: .75rem; line-height: 1.6; }
.notes-app__button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 0; min-height: 44px; border: 1px solid transparent; border-radius: 9px; padding: .6rem .8rem; font: inherit; font-size: .78rem; font-weight: 650; line-height: 1.5; cursor: pointer; }
.notes-app__button svg { flex: 0 0 auto; width: 16px; height: 16px; }
.notes-app__button--primary { background: var(--brand); color: var(--text-on-brand); }
.notes-app__button--primary:hover { background: var(--brand-dark); }
.notes-app__button--secondary { border-color: var(--border); background: var(--surface-tile); color: var(--fg); }
.notes-app__button--secondary:hover { border-color: var(--brand); background: var(--surface-soft); }
.notes-app__button--danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.notes-app :is(button,input,textarea):disabled { opacity: .6; cursor: wait; }
.notes-app__feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .65rem; }
.notes-app__status { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.6; overflow-wrap: anywhere; }
.notes-app__status:not(:empty) { margin-bottom: .75rem; }
.notes-app__status[data-state="error"],
.notes-app[data-state="error"] .notes-app__status { color: var(--danger); }
.notes-app__text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: 7px; padding: .45rem .5rem; background: transparent; color: var(--brand); font: inherit; font-size: .76rem; font-weight: 600; line-height: 1.5; cursor: pointer; }
.notes-app__text-button:hover { background: var(--brand-soft); }
.notes-app__delete { margin-left: auto; color: var(--danger); }
.notes-app__delete:hover { background: color-mix(in srgb,var(--danger) 8%,transparent); }
.notes-app__notice { margin: 0 0 .9rem; border: 1px solid var(--border); border-radius: 10px; padding: .85rem; background: var(--surface-soft); }
.notes-app__notice p { margin: 0 0 .65rem; color: var(--fg); font-size: .78rem; line-height: 1.65; overflow-wrap: anywhere; }
.notes-app__confirm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.notes-app__workspace,
.notes-app__list-pane,
.notes-app__editor { min-width: 0; }
.notes-app__search { position: relative; margin-bottom: .65rem; }
.notes-app__search > svg { position: absolute; left: .75rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.notes-app__search input { width: 100%; min-width: 0; min-height: 44px; margin: 0; border: 1px solid var(--border); border-radius: 9px; padding: .65rem .7rem .65rem 2.15rem; background: var(--surface-control); color: var(--fg); font-size: .8rem; line-height: 1.5; }
.notes-app input::placeholder,
.notes-app textarea::placeholder { color: var(--muted); opacity: 1; }
.notes-app__list { display: grid; gap: .4rem; max-height: 345px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.notes-app__list:empty { display: none; }
.notes-app__item { display: flex; flex-direction: column; gap: .3rem; width: 100%; min-width: 0; min-height: 88px; border: 1px solid var(--border); border-radius: 10px; padding: .75rem .8rem; background: var(--surface-alt); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.notes-app__item:hover { background: var(--surface-soft); border-color: color-mix(in srgb,var(--brand) 45%,var(--border)); }
.notes-app__item[aria-current="true"],
.notes-app__item[aria-selected="true"],
.notes-app__item.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.notes-app__item-title { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-size: .81rem; font-weight: 650; line-height: 1.5; }
.notes-app__item-preview { display: -webkit-box; width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); font-size: .75rem; line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.notes-app__item-date { color: var(--muted); font-size: .64rem; line-height: 1.5; }
.notes-app__empty { padding: 1.15rem .6rem 1.1rem; text-align: center; }
.notes-app__empty-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: .5rem; border-radius: 10px; background: var(--surface-tile); color: var(--muted); }
.notes-app__empty-icon svg { width: 19px; height: 19px; }
.notes-app__empty-title { margin: 0; color: var(--fg); font-size: .82rem; font-weight: 600; line-height: 1.6; }
.notes-app__empty-detail { max-width: 260px; margin: .3rem auto 0; color: var(--muted); font-size: .74rem; line-height: 1.7; }
.notes-app__editor { margin: 0; }
.notes-app__editor-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: -.25rem 0 .5rem; }
.notes-app__back { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin-left: -.45rem; padding: .45rem; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; }
.notes-app__back:hover { background: var(--surface-tile); color: var(--fg); }
.notes-app__back > span { font-size: 1.1rem; line-height: 1; }
.notes-app__label { display: block; margin: 0 0 .35rem; color: var(--muted); font-size: .7rem; font-weight: 600; line-height: 1.6; }
.notes-app__title,
.notes-app__body { display: block; width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: .65rem .75rem; background: var(--surface-control); color: var(--fg); font-size: .85rem; line-height: 1.65; }
.notes-app__title { min-height: 44px; margin: 0 0 .85rem; font-weight: 600; }
.notes-app__body { min-height: 175px; max-height: 500px; resize: vertical; }
.notes-app__meta { margin: .45rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.65; overflow-wrap: anywhere; }
.notes-app__meta:empty { display: none; }
.notes-app__editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.notes-app__persistence { margin: .9rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.65; }
.notes-app[data-view="editor"] .notes-app__list-pane { display: none; }
@container notes-widget (min-width: 620px) {
    .notes-app[data-view="editor"] .notes-app__workspace { display: grid; grid-template-columns: minmax(190px,.85fr) minmax(0,1.4fr); gap: 1rem; }
    .notes-app[data-view="editor"] .notes-app__list-pane { display: block; padding-right: 1rem; border-right: 1px solid var(--border); }
    .notes-app[data-view="editor"] .notes-app__list { max-height: 380px; }
    .notes-app__body { min-height: 205px; }
}
@media (max-width: 1100px) {
    .notes-app__search input,
    .notes-app__title,
    .notes-app__body { font-size: 16px; }
}
@media (prefers-color-scheme: dark) {
    .notes-app__button--danger { color: #171f32; }
}
