/* ===== Notes (notes.js) ===== */

/* Colours for notes and collections: --nc strong, --nc-soft background, --nc-ink text on the soft background */
.nc-teal { --nc: #0f6e56; --nc-soft: #e1f5ee; --nc-ink: #085041; }
.nc-purple { --nc: #534ab7; --nc-soft: #eeedfe; --nc-ink: #3c3489; }
.nc-coral { --nc: #c2502a; --nc-soft: #faece7; --nc-ink: #712b13; }
.nc-amber { --nc: #a8650f; --nc-soft: #faeeda; --nc-ink: #633806; }
.nc-blue { --nc: #185fa5; --nc-soft: #e6f1fb; --nc-ink: #0c447c; }
.nc-pink { --nc: #b03f67; --nc-soft: #fbeaf0; --nc-ink: #72243e; }
.nc-green { --nc: #3b6d11; --nc-soft: #eaf3de; --nc-ink: #27500a; }
.nc-gray { --nc: #5f5e5a; --nc-soft: #f1efe8; --nc-ink: #444441; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nc-teal { --nc: #5dcaa5; --nc-soft: #12352c; --nc-ink: #9fe1cb; }
  :root:not([data-theme="light"]) .nc-purple { --nc: #a49df0; --nc-soft: #26224a; --nc-ink: #cecbf6; }
  :root:not([data-theme="light"]) .nc-coral { --nc: #f0997b; --nc-soft: #3d2017; --nc-ink: #f5c4b3; }
  :root:not([data-theme="light"]) .nc-amber { --nc: #ef9f27; --nc-soft: #3a2a10; --nc-ink: #fac775; }
  :root:not([data-theme="light"]) .nc-blue { --nc: #85b7eb; --nc-soft: #142a42; --nc-ink: #b5d4f4; }
  :root:not([data-theme="light"]) .nc-pink { --nc: #ed93b1; --nc-soft: #3d1a27; --nc-ink: #f4c0d1; }
  :root:not([data-theme="light"]) .nc-green { --nc: #97c459; --nc-soft: #22301a; --nc-ink: #c0dd97; }
  :root:not([data-theme="light"]) .nc-gray { --nc: #b4b2a9; --nc-soft: #2c2c2a; --nc-ink: #d3d1c7; }
}
:root[data-theme="dark"] .nc-teal { --nc: #5dcaa5; --nc-soft: #12352c; --nc-ink: #9fe1cb; }
:root[data-theme="dark"] .nc-purple { --nc: #a49df0; --nc-soft: #26224a; --nc-ink: #cecbf6; }
:root[data-theme="dark"] .nc-coral { --nc: #f0997b; --nc-soft: #3d2017; --nc-ink: #f5c4b3; }
:root[data-theme="dark"] .nc-amber { --nc: #ef9f27; --nc-soft: #3a2a10; --nc-ink: #fac775; }
:root[data-theme="dark"] .nc-blue { --nc: #85b7eb; --nc-soft: #142a42; --nc-ink: #b5d4f4; }
:root[data-theme="dark"] .nc-pink { --nc: #ed93b1; --nc-soft: #3d1a27; --nc-ink: #f4c0d1; }
:root[data-theme="dark"] .nc-green { --nc: #97c459; --nc-soft: #22301a; --nc-ink: #c0dd97; }
:root[data-theme="dark"] .nc-gray { --nc: #b4b2a9; --nc-soft: #2c2c2a; --nc-ink: #d3d1c7; }

.ni { display: inline-grid; width: 18px; height: 18px; flex: none; }
.ni svg { width: 100%; height: 100%; }

/* ----- Layout: sidebar + page ----- */
.notes-panel { display: grid; grid-template-columns: 236px minmax(0, 1fr); flex: 1; }
.notes-panel[hidden] { display: none; }
.notes-side {
  position: sticky; top: 57px; align-self: start; height: calc(100dvh - 57px); overflow-y: auto;
  padding: 16px 12px; border-right: 1px solid var(--border); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 2px;
}
.notes-main { min-width: 0; }
.ns-search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; font: inherit;
}
.ns-search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-side kbd, .ns-search kbd {
  font: 11px system-ui, sans-serif; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; background: var(--surface);
}
.ns-item {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 8px; border: 0; background: none;
  color: var(--muted); text-decoration: none; font: inherit; font-weight: 500; cursor: pointer; text-align: left; width: 100%;
}
.ns-item:hover { background: var(--surface); color: var(--text); }
.ns-item.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.ns-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ns-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nc); flex: none; margin: 0 4px; }
.ns-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px 4px 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ns-head .icon-btn { width: 26px; height: 26px; }
.ns-empty { padding: 4px 10px; margin: 0; }
.ns-quick kbd { margin-left: auto; }

.nm-page { max-width: 1040px; margin: 0 auto; padding: 28px 32px 64px; }
.nm-date { margin: 0; }
.nm-hello { font-size: 26px; font-weight: 650; letter-spacing: -.02em; margin: 2px 0 18px; }
.nm-capture {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; height: 48px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--muted); font: inherit; font-size: 15px; cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.nm-capture-row { display: flex; gap: 10px; max-width: 760px; }
.nm-capture-row .nm-capture { flex: 1; max-width: none; min-width: 0; }
.nm-new { height: 48px; padding: 0 18px; border-radius: 14px; flex: none; }
.nm-capture:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nm-capture .ni { color: var(--accent); }
.nm-section { margin-top: 30px; }
.nm-section h2 { font-size: 15px; font-weight: 650; margin: 0 0 10px; }
.nm-section h2.late { color: var(--danger); }
.nm-sechead { display: flex; align-items: baseline; justify-content: space-between; }
.nm-more { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; }
.nm-more:hover { text-decoration: underline; }
.nm-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.nm-title-row h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.nm-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; margin: -6px 0 10px -4px; font-weight: 500; }
.nm-empty { padding: 40px 16px; }
.nm-empty .btn { margin-top: 12px; }
.nm-empty-ico { width: 44px; height: 44px; color: var(--muted); margin-bottom: 8px; }

/* ----- Collections ----- */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.coll-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 92px; padding: 14px;
  border-radius: 14px; background: var(--nc-soft); color: var(--nc-ink); text-decoration: none; border: 1px solid transparent;
  transition: transform .12s, border-color .12s;
}
.coll-tile:hover { transform: translateY(-2px); border-color: var(--nc); }
.coll-tile .ni { width: 22px; height: 22px; }
.coll-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-count { font-size: 12px; opacity: .85; }
.coll-new { background: transparent; border: 1.5px dashed var(--border); color: var(--muted); font: inherit; cursor: pointer; text-align: left; }
.coll-new:hover { border-color: var(--accent); color: var(--accent); }
.coll-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.coll-head-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--nc-soft); color: var(--nc); }
.coll-head-ico .ni { width: 24px; height: 24px; }
.coll-head-text { display: grid; min-width: 0; }
.coll-head h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }

/* ----- Note cards ----- */
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.note-card {
  display: flex; flex-direction: column; gap: 6px; min-height: 160px; padding: 14px 16px 12px; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.note-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--nc); }
.note-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nc) 45%, var(--border)); box-shadow: 0 8px 24px rgb(0 0 0 / .07); }
.note-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--nc); }
.note-card-top .ni { width: 20px; height: 20px; }
.note-fav { color: #e0a020; }
.note-fav svg { fill: currentColor; }
.note-card-title { font-weight: 650; font-size: 15px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.note-card-text { color: var(--muted); font-size: 13px; line-height: 1.5; flex: 1; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.note-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.note-card-date { margin-left: auto; white-space: nowrap; }
.note-card-tasks { display: inline-flex; align-items: center; gap: 3px; }
.note-card-tasks .ni { width: 13px; height: 13px; }
.note-card-tasks.all-done { color: var(--ok); }
.ntag {
  display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 1; padding: 4px 9px; border-radius: 999px;
  background: var(--nc-soft, var(--surface-2)); color: var(--nc-ink, var(--muted)); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}

/* ----- Tasks ----- */
.task-list { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.task-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 14px; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: 0; }
.task-row.done .task-text { text-decoration: line-through; color: var(--muted); }
.task-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task-note {
  display: inline-flex; align-items: center; gap: 2px; max-width: 200px; font-size: 12px; color: var(--muted); text-decoration: none;
  padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap;
}
.task-note span:last-child { overflow: hidden; text-overflow: ellipsis; }
.task-note:hover { color: var(--text); border-color: var(--nc); }
.tchk {
  width: 20px; height: 20px; flex: none; border-radius: 7px; border: 1.75px solid color-mix(in srgb, var(--muted) 70%, transparent); background: transparent;
  display: grid; place-items: center; padding: 0; cursor: pointer; color: transparent; transition: background .12s, border-color .12s;
}
.tchk svg { width: 13px; height: 13px; stroke-width: 3; }
.tchk:hover { border-color: var(--accent); }
.tchk.done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.due { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.due.late { background: var(--danger-soft); color: var(--danger); }

/* ----- The note page ----- */
.nb-page { min-height: calc(100dvh - 57px); display: flex; flex-direction: column; }
.nb-top {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px; position: sticky; top: 57px; z-index: 4;
  background: var(--bg); /* solid: a blurred sticky bar flickers black on iPhones while the page changes */
}
.nb-crumbs { display: flex; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.nb-crumbs a { color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-crumbs a:hover { color: var(--text); }
.nb-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.nb-status .ni { width: 16px; height: 16px; color: var(--accent); }
.nb-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0a020; animation: nb-pulse 1s infinite alternate; }
@keyframes nb-pulse { to { opacity: .35; } }
.nb-fav.on { color: #e0a020; }
.nb-fav.on svg { fill: currentColor; }
.nb-top .btn .ni { width: 15px; height: 15px; }
.nb-top .icon-btn svg { width: 18px; height: 18px; }

.nb-doc { width: 100%; max-width: 760px; margin: 0 auto; padding: 4px 32px 0; flex: 1; display: flex; flex-direction: column; }
.nb-cover { height: 84px; border-radius: 16px; border: 0; padding: 0; cursor: pointer; background: var(--nc-soft); transition: filter .15s; }
.nb-cover:hover { filter: brightness(.97); }
.nb-icon {
  width: 56px; height: 56px; margin: -30px 0 0 22px; border-radius: 16px; border: 3px solid var(--bg); cursor: pointer; padding: 0;
  display: grid; place-items: center; background: var(--nc); color: var(--surface); position: relative;
}
.nb-icon .ni { width: 26px; height: 26px; }
.nb-title {
  border: 0; outline: none; background: none; width: 100%; padding: 0; margin: 14px 0 4px; color: var(--text);
  font: 650 32px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.025em;
}
.nb-title::placeholder { color: var(--muted); }
.nb-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.nb-tags { display: contents; }
.nb-meta .ntag { background: var(--nc-soft); color: var(--nc-ink); }
.ntag-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 14px; line-height: 1; opacity: .7; }
.ntag-x:hover { opacity: 1; }
.ntag-add { border: 1px dashed var(--border); background: none !important; color: var(--muted) !important; cursor: pointer; font: inherit; font-size: 12px; }
.ntag-add:hover { border-color: var(--nc); color: var(--nc-ink) !important; }
.ntag-input { height: 24px; width: 110px; border: 1px solid var(--nc); border-radius: 999px; padding: 0 10px; font: inherit; font-size: 12px; background: var(--surface); color: var(--text); outline: none; }

/* Blocks */
.nb-blocks { counter-reset: ol; font-size: 16px; line-height: 1.65; }
.nb { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 2px 0; border-radius: 6px; }
.nb:not([data-type="ol"]) { counter-reset: ol; }
.nb-text { flex: 1; min-width: 0; outline: none; overflow-wrap: anywhere; white-space: pre-wrap; padding: 1px 0; }
.nb-text:empty::before { content: attr(data-ph); color: var(--muted); opacity: .55; pointer-events: none; }
.nb[data-type="p"] .nb-text:empty:not(:focus)::before { content: ""; }
.nb-blocks > .nb:only-child .nb-text:empty::before { content: attr(data-ph) !important; }
.nb[data-type="h1"] .nb-text { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-top: 18px; }
.nb[data-type="h2"] .nb-text { font-size: 21px; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; margin-top: 14px; }
.nb[data-type="h3"] .nb-text { font-size: 17px; font-weight: 650; margin-top: 10px; }
.nb[data-type="ul"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 11px 4px 0 8px; flex: none; }
.nb[data-type="ol"] { counter-increment: ol; }
.nb[data-type="ol"]::before { content: counter(ol) "."; min-width: 18px; margin-left: 4px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.nb[data-type="todo"] .tchk { margin-top: 4px; }
.nb[data-type="todo"][data-done="1"] .nb-text { text-decoration: line-through; color: var(--muted); }
.nb[data-type="quote"] { border-left: 3px solid var(--nc); padding-left: 14px; border-radius: 0; margin: 4px 0; }
.nb[data-type="quote"] .nb-text { font-size: 17px; color: var(--muted); font-style: italic; }
.nb[data-type="hr"] { padding: 10px 0; outline: none; }
.nb[data-type="hr"] hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 0; }
.nb[data-type="hr"]:focus hr, .nb-file:focus { box-shadow: 0 0 0 2px var(--accent); }
.nb-text b { font-weight: 700; }
.nb-text mark { background: color-mix(in srgb, #f5c84b 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.nb-text code { font: 0.88em ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.nb-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.due-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: 2px; padding: 0 6px; border-radius: 999px;
  border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; opacity: 0; transition: opacity .12s;
}
.due-btn svg { width: 15px; height: 15px; }
.nb:hover .due-btn, .nb:focus-within .due-btn, .due-btn.set { opacity: 1; }
.due-btn.set { background: var(--surface-2); }
.due-btn.late { background: var(--danger-soft); color: var(--danger); }
.due-input { position: absolute; right: 0; top: 0; width: 1px; height: 1px; opacity: 0; }

.nb-file { margin: 8px 0; outline: none; border-radius: 12px; }
.nb-file img { max-width: 100%; max-height: 420px; border-radius: 12px; border: 1px solid var(--border); cursor: zoom-in; display: block; }
.nb-card {
  display: flex; align-items: center; gap: 12px; width: min(420px, 100%); padding: 10px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit;
}
.nb-card:hover { border-color: var(--accent); }
.nb-card .ficon { width: 32px; height: 32px; }
.nb-card-text { display: grid; min-width: 0; }
.nb-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-missing { padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 14px; }
.nb-remove { position: absolute; top: 6px; left: 6px; background: var(--surface) !important; box-shadow: 0 1px 4px rgb(0 0 0 / .2); opacity: 0; }
.nb-file:hover .nb-remove, .nb-file:focus .nb-remove { opacity: 1; }
.nb-tail { flex: 1; min-height: 160px; cursor: text; }

/* Floating formatting bar and "/" menu */
.fmt-bar {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px;
  background: #0f1f3a; color: #e6effc; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
}
.fmt-bar .icon-btn { color: #e1f5ee; width: 32px; height: 32px; }
.fmt-bar .icon-btn:hover { background: rgb(255 255 255 / .12); color: #fff; }
.fmt-bar .icon-btn svg { width: 17px; height: 17px; }
.fmt-sep { width: 1px; height: 18px; background: rgb(255 255 255 / .2); margin: 0 3px; }
.slash-menu {
  position: fixed; z-index: 60; width: 260px; max-height: 330px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.slash-head { font-size: 12px; color: var(--muted); padding: 6px 8px 4px; font-weight: 600; }
.slash-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.slash-item.on, .slash-item:hover { background: var(--surface-2); }
.slash-ico { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); display: grid; place-items: center; background: var(--surface); color: var(--muted); flex: none; }
.slash-label { display: block; font-weight: 550; }
.slash-sub { display: block; font-size: 12px; color: var(--muted); }

/* Dialog contents: quick note, pickers, search */
.quick-text { width: 100%; min-height: 130px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.55; background: var(--surface-2); color: var(--text); }
.quick-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface); }
.quick-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quick-act { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.quick-act:hover { border-color: var(--accent); }
.quick-colls { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-radio span { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--border); color: var(--muted); }
.chip-radio input:checked + span { background: var(--nc-soft); color: var(--nc-ink); border-color: var(--nc); font-weight: 600; }
.chip-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--nc); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--nc); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.icon-opt { position: relative; display: grid; place-items: center; height: 40px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.icon-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.icon-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.icon-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cloud-pick { display: grid; max-height: 46vh; overflow-y: auto; gap: 2px; }
.cloud-pick > p { margin: 6px 2px; }
.cloud-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.cloud-row:hover, .cloud-row.on { background: var(--surface-2); }
.cloud-row .ficon { width: 28px; height: 28px; }
.cloud-row-text { display: grid; min-width: 0; }
.cloud-row-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-row-name { font-weight: 550; }
.pal-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--nc-soft); color: var(--nc); flex: none; }
#dlg-body > input[type="search"] { height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; background: var(--surface); color: var(--text); }
#dlg-body > input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Block grip: drag to move, click for the block menu */
.nb-handle {
  position: absolute; left: -30px; top: 3px; width: 22px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center; background: none; color: var(--muted); cursor: grab; opacity: 0; transition: opacity .12s;
}
.nb-handle svg { width: 16px; height: 16px; }
.nb:hover > .nb-handle, .nb:focus-within > .nb-handle { opacity: .7; }
.nb-handle:hover { opacity: 1 !important; background: var(--surface-2); color: var(--text); }
.nb[data-type="h1"] > .nb-handle { top: 22px; }
.nb[data-type="h2"] > .nb-handle { top: 17px; }
.nb[data-type="h3"] > .nb-handle { top: 12px; }
.nb[data-type="quote"] > .nb-handle { left: -47px; }
.nb.dragging { opacity: .4; }
.nb.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.nb.drop-after { box-shadow: 0 2px 0 var(--accent); }

/* Links between notes */
.note-link {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 4px; border-radius: 6px; vertical-align: baseline;
  background: var(--nc-soft); color: var(--nc-ink) !important; text-decoration: none !important; font-weight: 550; cursor: pointer;
}
.note-link::before {
  content: ""; width: 13px; height: 13px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A2.5 2.5 0 0 0 4 5.5v13A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A2.5 2.5 0 0 0 4 5.5v13A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.note-link:hover { filter: brightness(.95); }
.note-link.missing { background: none; color: var(--muted) !important; border: 1px dashed var(--border); }
.nb-backlinks { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border); }
.nb-backlinks h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.nb-back-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 500; max-width: 100%; }
.nb-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-back .ni { color: var(--nc); width: 16px; height: 16px; }
.nb-back:hover { border-color: var(--nc); }

/* Info boxes */
.nb[data-type="callout"] { --c: var(--accent); --c-soft: var(--accent-soft); background: var(--c-soft); border-radius: 12px; padding: 12px 14px; margin: 6px 0; gap: 12px; }
.nb[data-type="callout"][data-kind="tip"] { --c: #3b6d11; --c-soft: #eaf3de; }
.nb[data-type="callout"][data-kind="warning"] { --c: #a8650f; --c-soft: #faeeda; }
.nb[data-type="callout"][data-kind="important"] { --c: #b42318; --c-soft: #fdecec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nb[data-type="callout"][data-kind="tip"] { --c: #97c459; --c-soft: #22301a; }
  :root:not([data-theme="light"]) .nb[data-type="callout"][data-kind="warning"] { --c: #ef9f27; --c-soft: #3a2a10; }
  :root:not([data-theme="light"]) .nb[data-type="callout"][data-kind="important"] { --c: #ef5350; --c-soft: #3a1d1f; }
}
:root[data-theme="dark"] .nb[data-type="callout"][data-kind="tip"] { --c: #97c459; --c-soft: #22301a; }
:root[data-theme="dark"] .nb[data-type="callout"][data-kind="warning"] { --c: #ef9f27; --c-soft: #3a2a10; }
:root[data-theme="dark"] .nb[data-type="callout"][data-kind="important"] { --c: #ef5350; --c-soft: #3a1d1f; }
.callout-ico { flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--c); cursor: pointer; display: grid; place-items: center; }
.callout-ico svg { width: 22px; height: 22px; }

/* Code */
.nb[data-type="code"] .nb-text {
  font: 13.5px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; overflow-x: auto; overflow-wrap: normal;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 4px 0; tab-size: 2;
}

/* Tables */
.nb-table { flex-direction: column; align-items: stretch; gap: 4px; margin: 8px 0; }
.nb-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.nb-table table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.nb-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; min-width: 90px; vertical-align: top; }
.nb-table td:last-child { border-right: 0; }
.nb-table tr:last-child td { border-bottom: 0; }
.nb-table tr:first-child td { background: var(--surface-2); font-weight: 600; }
.nb-cell { padding: 7px 10px; outline: none; min-height: 1.6em; overflow-wrap: anywhere; }
.nb-cell:focus { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 2px; }
.tbl-tools { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.nb-table:focus-within .tbl-tools, .nb-table:hover .tbl-tools { opacity: 1; }
.tbl-btn { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 7px; font: inherit; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.tbl-btn:hover { color: var(--text); border-color: var(--accent); }

/* "On this page" outline, beside the note on wide screens */
.nb-outline { display: none; }
@media (min-width: 1360px) {
  .nb-outline:not([hidden]) {
    display: grid; align-content: start; gap: 2px; position: fixed; top: 140px; right: 24px; width: 200px; max-height: calc(100dvh - 180px); overflow-y: auto;
  }
}
.nb-outline-head { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 8px 6px; }
.nb-outline-item { border: 0; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--muted); padding: 4px 8px; border-radius: 7px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-outline-item:hover { background: var(--surface-2); color: var(--text); }
.nb-outline-item.lvl-h2 { padding-left: 18px; }
.nb-outline-item.lvl-h3 { padding-left: 28px; font-size: 12.5px; }

/* Templates */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.tpl { position: relative; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); }
.tpl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tpl:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.tpl:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-ico { color: var(--accent); margin-bottom: 4px; }
.tpl-ico .ni { width: 20px; height: 20px; }
.tpl-name { font-weight: 600; font-size: 13.5px; }
.tpl-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
dialog:has(.tpl-grid) { width: min(560px, calc(100vw - 32px)); }

/* List tools: tag filter, sort, cards/rows */
.nl-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.nl-tags { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.chip-tag { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chip-tag:hover { color: var(--text); }
.chip-tag.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nl-sort { height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 0 8px; }
.nl-view svg { width: 18px; height: 18px; }
.note-rows { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.note-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.note-row:last-child { border-bottom: 0; }
.note-row:hover { background: var(--row-hover); }
.note-row-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--nc-soft); color: var(--nc); flex: none; }
.note-row-text { display: grid; flex: 1; min-width: 0; }
.note-row-title { display: flex; align-items: center; gap: 6px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-row-title .ni { width: 14px; height: 14px; }
.note-row-ex { font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-row-meta { display: flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--muted); }
.note-row .note-card-date { font-size: 12px; color: var(--muted); }

/* Print or save as PDF: just the note */
@media print {
  .topbar, .tabs, .notes-side, .nb-top, .nb-phonebar, .nb-outline, .nb-handle, .tbl-tools, .nb-remove, .ntag-add, .ntag-x, .nb-tail, .uploads, .toast, .fab, .slash-menu, .fmt-bar { display: none !important; }
  body, .files, .notes-panel, .nb-page { background: #fff !important; color: #000; display: block !important; min-height: 0 !important; padding: 0 !important; }
  .nb-doc { max-width: none; padding: 0; }
  .nb-cover { height: 40px; }
  .due-btn:not(.set) { display: none; }
  .nb-file img { max-height: 60vh; break-inside: avoid; }
  .nb-table, .nb[data-type="callout"], .nb[data-type="code"] { break-inside: avoid; }
}

/* Home: greeting with today's progress, and "Jump back in" */
.nm-hero { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; }
.nm-hero-ring { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; color: var(--muted); }
.ring { position: relative; width: 52px; height: 52px; display: grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring-bg { stroke: var(--border); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1); }
.ring.full .ring-fg { stroke: var(--ok); }
.ring-text { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.jump-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.jump-row::-webkit-scrollbar { display: none; }
.jump {
  display: flex; align-items: center; gap: 10px; flex: none; width: 210px; padding: 10px 12px; border-radius: 14px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .12s, transform .12s;
}
.jump:hover { border-color: var(--nc); transform: translateY(-1px); }
.jump-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--nc-soft); color: var(--nc); flex: none; }
.jump-text { display: grid; min-width: 0; }
.jump-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tasks: the week planner */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.week-day {
  display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; min-width: 0;
}
.week-day:hover { border-color: var(--accent); }
.week-day.today { border-color: var(--accent); }
.week-day.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.week-day.drop { transform: scale(1.06); background: var(--accent-soft); border-color: var(--accent); border-style: dashed; }
.week-wd { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: capitalize; }
.week-day.on .week-wd { color: inherit; opacity: .85; }
.week-dn { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.week-dots { display: flex; gap: 3px; min-height: 6px; }
.week-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.week-day.on .week-dots i { background: currentColor; }
.week-more { font-size: 10px; color: var(--muted); }
.tasks-hint { margin: 0 0 4px; }
.task-row[draggable="true"] { cursor: grab; }
.task-row.dragging { opacity: .45; }
.due-pick { border: 0; cursor: pointer; font: inherit; font-size: 12px; position: relative; }
.due-pick:hover { box-shadow: 0 0 0 1px var(--accent); }
.due-pick.none { background: none; color: var(--muted); opacity: 0; }
.task-row:hover .due-pick.none, .due-pick.none:focus { opacity: 1; }

/* Command bar headings */
.pal-head { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 10px 8px 4px; }
.pal-head:first-child { padding-top: 2px; }

/* Focus mode: just the text */
.nb-focus.on { color: var(--accent); background: var(--accent-soft); }
body.focus-mode .topbar, body.focus-mode .notes-side, body.focus-mode .nb-outline, body.focus-mode .tabs { display: none !important; }
body.focus-mode .notes-panel { grid-template-columns: minmax(0, 1fr); }
body.focus-mode .nb-top { top: 0; opacity: .15; transition: opacity .25s; }
body.focus-mode .nb-top:hover, body.focus-mode .nb-top:focus-within { opacity: 1; }
body.focus-mode .nb-doc { max-width: 720px; padding-top: 24px; }
body.focus-mode .nb-blocks { font-size: 18px; line-height: 1.75; }
body.focus-mode .nb-cover { height: 40px; opacity: .6; }
body.focus-mode .nb-backlinks, body.focus-mode .nb-meta { opacity: .6; }

/* Calendar: meetings on the home page and in the week planner */
.ev-list { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.ev-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border); }
.ev-row:last-child { border-bottom: 0; }
.ev-bar { align-self: stretch; width: 4px; border-radius: 0 3px 3px 0; background: var(--nc); flex: none; }
.ev-time { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 92px; }
.ev-text { display: grid; flex: 1; min-width: 0; }
.ev-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-sub:empty { display: none; }
.ev-row.past { opacity: .55; }
.ev-row.live { background: color-mix(in srgb, var(--nc-soft) 70%, transparent); }
.ev-row.live .ev-time { color: var(--nc-ink); }
.ev-notes { flex: none; gap: 4px; }
.ev-notes .ni { width: 14px; height: 14px; }
.ev-notes.has { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.nm-sechead-btns { display: flex; gap: 14px; align-items: baseline; }
.nm-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.nm-next {
  display: inline-flex; align-items: center; gap: 8px; margin: -8px 0 18px; padding: 6px 14px 6px 10px; border-radius: 999px; max-width: 100%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
}
.nm-next span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-next:hover { border-color: var(--nc); }
.nm-next-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nc); flex: none; box-shadow: 0 0 0 3px var(--nc-soft); }
.week-evs { display: flex; gap: 2px; min-height: 4px; }
.week-evs i { width: 10px; height: 3px; border-radius: 2px; background: var(--nc); }
.week-day.on .week-evs i { background: currentColor; opacity: .8; }
.nb-meeting { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--nc-soft); color: var(--nc-ink); }
.nb-meeting .ni { width: 13px; height: 13px; }

/* Calendars page: two cards side by side (stacked on phones) */
.cal-page { max-width: 1120px; }
.cal-intro { margin: -8px 0 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.cal-card { display: grid; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; min-width: 0; }
.cal-card-head { display: flex; gap: 14px; align-items: flex-start; }
.cal-card-head h2 { font-size: 16px; font-weight: 650; margin: 2px 0 2px; }
.cal-card-head p { margin: 0; }
.cal-card-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.cal-card-ico .ni { width: 20px; height: 20px; }
.cal-card-ico.alt { background: color-mix(in srgb, #e0a020 18%, transparent); color: #b07a10; }

.cal-feeds { display: grid; gap: 8px; }
.cal-feed { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.cal-feed-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--nc-soft); color: var(--nc); }
.cal-feed-text { display: grid; flex: 1; min-width: 0; }
.cal-feed-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-feed-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-feed-sub.err { color: var(--danger); white-space: normal; }
.cal-remove { flex: none; }
.cal-remove.danger, .cal-renew.danger { color: var(--danger); border-color: var(--danger); }

.cal-addbox { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--surface-2); }
.cal-providers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.cal-prov { border: 0; background: none; border-radius: 9px; padding: 8px 4px; font: inherit; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.cal-prov:hover { color: var(--text); }
.cal-prov.on { background: var(--accent); color: var(--on-accent); }
.cal-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
.cal-open { justify-self: start; }
.cal-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cal-form .cal-url { grid-column: 1 / -1; }
.cal-form > .field:last-child { grid-column: 2 / -1; }
@media (max-width: 1280px) { .cal-form { grid-template-columns: minmax(0, 1fr); } .cal-form > .field:last-child { grid-column: auto; } }
.cal-swatches { padding-top: 4px; gap: 6px; }
.cal-swatches .swatch span { width: 26px; height: 26px; }
.cal-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-actions .btn.primary { height: 40px; padding: 0 18px; }
.cal-actions .btn .ni { width: 16px; height: 16px; }

.cal-linkbox { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.cal-link {
  display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  font: 13px ui-monospace, "Cascadia Mono", Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
}
.cal-link-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-link-btns .btn { height: 40px; padding: 0 16px; }
.cal-link-btns .ni { width: 16px; height: 16px; }
.cal-how { display: grid; gap: 10px; }
.cal-how-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.cal-how-item strong { font-weight: 650; }
.cal-how-item span { color: var(--muted); }
.cal-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: var(--muted); border: 1px dashed var(--border); }
.cal-note .ni { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cal-renew { justify-self: start; }

.nb-phonebar { display: none; }

/* ----- Phones ----- */
@media (max-width: 720px) {
  .notes-panel { display: block; }
  .notes-side { display: none; }
  .nm-page { padding: 18px 16px 110px; }
  .nm-hello { font-size: 23px; }
  .nm-capture { height: 50px; }
  .nm-new { height: 50px; width: 50px; padding: 0; }
  .nm-new > span:not(.ico) { display: none; }   /* icon only: keep the icon, hide the words */
  .nm-new .ico { width: 20px; height: 20px; }
  .nm-hero-ring .muted { display: none; }
  .ring { width: 46px; height: 46px; }
  .jump { width: 180px; }
  .week { gap: 4px; }
  .week-day { padding: 8px 2px 6px; border-radius: 12px; }
  .week-dn { font-size: 17px; }
  .week-wd { font-size: 11px; }
  .due-pick.none { opacity: 1; }
  .ev-time { min-width: 0; width: 76px; white-space: normal; font-size: 12px; line-height: 1.3; }
  .ev-notes > span:not(.ni) { display: none; }
  .ev-notes { width: 38px; height: 38px; padding: 0; }
  .ev-notes .ni { width: 18px; height: 18px; }
  .nm-sechead-btns { gap: 10px; }
  .cal-card { padding: 16px; border-radius: 16px; }
  .cal-addbox, .cal-linkbox { padding: 12px; }
  .cal-form { grid-template-columns: minmax(0, 1fr); }
  .cal-feed { flex-wrap: wrap; }
  .cal-remove { margin-left: 48px; }
  .cal-link-btns .btn { flex: 1; justify-content: center; }
  .cal-how-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cal-actions .btn.primary { width: 100%; justify-content: center; height: 46px; }
  .coll-grid { grid-template-columns: 1fr 1fr; }
  .note-grid { grid-template-columns: 1fr; gap: 10px; }
  .note-card { min-height: 0; }
  .coll-head .btn.primary { width: 100%; height: 44px; }
  .nm-title-row .btn.primary span { display: none; }
  .task-note { max-width: 110px; }

  /* A note fills the screen; its own toolbar sits at the bottom instead of the tab bar */
  body.note-open .tabs { display: none; }
  body.note-open .files { padding-bottom: 0; }
  .nb-top { top: 0; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; margin-top: 0; }
  body.note-open .topbar { display: none; }
  .nb-page { min-height: 100dvh; }
  .nb-doc { padding: 0 18px 0; }
  .nb-cover { height: 64px; border-radius: 14px; }
  .nb-icon { width: 50px; height: 50px; margin-left: 16px; }
  .nb-title { font-size: 26px; }
  .nb-blocks { font-size: 16.5px; }
  .due-btn { opacity: 1; }
  .nb-remove { opacity: 1; }
  .nb-tail { min-height: 200px; }
  .nb-phonebar {
    display: flex; justify-content: space-around; position: sticky; bottom: 0; z-index: 5;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border);
  }
  .nb-phonebar .icon-btn { width: 44px; height: 44px; color: var(--text); }
  .nb-handle { display: none; }
  .tbl-tools { opacity: 1; }
  .nl-tools { gap: 6px; }
  .nl-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; }
  .note-row { min-height: 62px; }
  .nb-phonebar .icon-btn svg { width: 22px; height: 22px; }
  .fmt-bar .icon-btn { width: 40px; height: 40px; }
}