/* ---- Notes (pages/notes.js, notesEditor.js) ----
   The phone draws the same: components/notes/*. The theme's variables carry
   light and dark; Notes' own colour is the amber of a notepad (--nt), used
   for what is drawn (ticks, markers) and, mixed toward the ink, for what is
   read (links, mentions), so it holds its contrast on any page. */

:root {
  --nt: #E9A520;
  --nt-ink: color-mix(in srgb, #E9A520 52%, var(--ink));
  --nt-soft: color-mix(in srgb, #E9A520 18%, transparent);
  --nt-line: color-mix(in srgb, #E9A520 70%, var(--ink) 30%);
}

/* A wide window gets both panes, as Messages and Mail do (shell.css). */
@media (min-width: 900px) {
  body[data-page='notes'] .app-shell { max-width: 1100px; }
}

.screen > .inner.nt-page {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
  padding: calc(52px + env(safe-area-inset-top)) 0 0;
}
.nt-page svg { stroke: currentColor; fill: none; stroke-width: 36; }
.nt-grow { flex: 1; }

.nt-split { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; }
.nt-listpane, .nt-notepane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: transparent; }
.nt-listpane { flex: 1; }
.nt-notepane { flex: 1; }

/* One pane at a time: the note slides in over the list from the right and
   the list eases a little left under it (open 220 ms, close 160 ms). */
@media (max-width: 899px) {
  .nt-listpane, .nt-notepane { position: absolute; inset: 0; }
  .nt-notepane {
    background: var(--bg); transform: translateX(100%); visibility: hidden;
    transition: transform 160ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 160ms;
    box-shadow: -10px 0 24px rgba(0, 0, 0, 0.08);
  }
  .nt-listpane { transition: transform 160ms cubic-bezier(.4, 0, 1, 1), opacity 160ms; }
  .nt-split[data-view='note'] .nt-notepane { transform: none; visibility: visible; transition: transform 220ms cubic-bezier(.2, .85, .25, 1.02), visibility 0s; }
  .nt-split[data-view='note'] .nt-listpane { transform: translateX(-22%); opacity: 0.4; pointer-events: none; transition: transform 220ms cubic-bezier(.2, .85, .25, 1), opacity 220ms; }
}
@media (min-width: 900px) {
  .nt-listpane { flex: 0 0 340px; border-right: 1px solid var(--border); }
  .nt-back { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nt-notepane, .nt-listpane, .nt-split[data-view] .nt-notepane, .nt-split[data-view] .nt-listpane { transition: none !important; }
}

/* ---- the list's top row: the folder, then the page's actions ---- */
.nt-top { display: flex; align-items: center; gap: 8px; padding: 2px 16px 8px; min-height: 48px; }
.nt-folder-pill {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100% - 112px); height: 44px; padding: 0 12px 0 14px;
  border-radius: 22px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font: 800 16px/1 var(--arc-font); cursor: pointer;
}
.nt-folder-pill:focus-visible, .nt-icon-btn:focus-visible, .nt-head-btn:focus-visible, .nt-back:focus-visible { outline: 3px solid var(--nt); outline-offset: 2px; }
.nt-folder-ico { display: flex; color: var(--nt-ink); flex: none; }
.nt-folder-ico svg { width: 19px; height: 19px; }
.nt-folder-name { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.nt-chev { display: flex; flex: none; color: var(--ink-muted); transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nt-chev.up { transform: rotate(180deg); }
.nt-chev svg { width: 15px; height: 15px; stroke-width: 48; }
.nt-icon-btn {
  flex: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.nt-icon-btn:hover { background: var(--tint, var(--accent-soft)); }
.nt-icon-btn svg { width: 20px; height: 20px; stroke-width: 38; }
.nt-icon-btn.sm { width: 36px; height: 36px; border-radius: 12px; }
.nt-icon-btn.sm svg { width: 17px; height: 17px; }
.nt-compose.arc-candy { min-height: 44px; height: 44px; width: 52px; padding: 0; border-radius: 15px; margin-bottom: 5px; align-self: flex-start; margin-top: 0; }
.nt-compose.arc-candy svg { width: 21px; height: 21px; stroke-width: 40; }
.nt-compose.arc-candy span:empty { display: none; }

/* ---- the folders, opened in place under the row ---- */
.nt-folders {
  margin: 0 16px 10px; padding: 6px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
  max-height: min(56vh, 460px); overflow-y: auto; flex: none;
  animation: nt-drop 220ms cubic-bezier(0.34, 1.4, 0.64, 1) both; transform-origin: top center;
}
@keyframes nt-drop { from { opacity: 0; transform: translateY(-6px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nt-folders { animation: none; } }
.nt-frow-wrap { display: flex; align-items: center; padding-left: calc(var(--d, 0) * 18px); border-radius: 12px; }
.nt-frow-wrap .nt-frow { flex: 1; min-width: 0; }
.nt-frow {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: none; border-radius: 12px;
  background: none; color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.nt-frow:hover { background: var(--tint, var(--accent-soft)); }
.nt-frow.on { background: var(--nt-soft); }
.nt-frow svg { width: 19px; height: 19px; flex: none; color: var(--nt-ink); }
.nt-frow-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.nt-frow-n { color: var(--ink-muted); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.nt-frow-more { flex: none; width: 44px; height: 44px; border: none; background: none; border-radius: 12px; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nt-frow-more:hover { background: var(--tint, var(--accent-soft)); }
.nt-frow-more svg { width: 20px; height: 20px; stroke-width: 56; }
.nt-fsep { height: 1px; background: var(--border); margin: 6px 8px; }
.nt-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 4px; }
.nt-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer;
}
.nt-tag span { color: var(--ink-muted); font-weight: 600; font-size: 12.5px; }
.nt-tag.on { background: var(--nt); border-color: var(--nt); color: #2B2118; }
.nt-tag.on span { color: #2B2118; }
.nt-newfolder {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; margin-top: 4px; border: none; border-radius: 12px;
  background: none; color: var(--nt-ink); font: 700 15px/1 inherit; cursor: pointer;
}
.nt-newfolder:hover { background: var(--nt-soft); }
.nt-newfolder svg { width: 19px; height: 19px; stroke-width: 44; }

/* ---- search ---- */
.nt-list-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 28px; }
.nt-search {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; margin: 0 0 6px;
  border-radius: 22px; border: 1px solid var(--border); background: var(--surface); cursor: text;
}
.nt-search:focus-within { border-color: var(--nt-line); }
.nt-search-ico { display: flex; color: var(--ink-muted); }
.nt-search-ico svg { width: 18px; height: 18px; }
.nt-search-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 16px; color: var(--ink); padding: 8px 0; }
.nt-search-input::-webkit-search-cancel-button { display: none; }
.nt-search-x { flex: none; width: 36px; height: 36px; border: none; background: none; border-radius: 18px; color: var(--ink-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nt-search-x svg { width: 17px; height: 17px; stroke-width: 44; }

/* ---- sections and rows ---- */
.nt-section-title { font: 800 15px/1.2 var(--arc-font); color: var(--ink); margin: 16px 6px 7px; letter-spacing: 0.1px; }
.nt-section:first-child .nt-section-title { margin-top: 10px; }
.nt-rows { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.nt-rows.search { margin-top: 6px; }
.nt-row {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 44px 10px 14px;
  border: none; border-bottom: 1px solid var(--border); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background 120ms;
}
.nt-rows > .nt-row:last-child { border-bottom: none; }
.nt-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.nt-row.on { background: var(--nt-soft); }
.nt-row:focus-visible { outline: 3px solid var(--nt); outline-offset: -3px; }
.nt-row-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nt-row-title { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 750; min-width: 0; }
.nt-row-title > span { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.nt-row-title svg { width: 14px; height: 14px; flex: none; color: var(--nt-ink); stroke-width: 44; }
.nt-row-line { display: flex; gap: 8px; font-size: 14px; min-width: 0; }
.nt-row-time { flex: none; color: var(--ink); font-weight: 600; }
.nt-row-prev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.nt-rows.search .nt-row-prev { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.nt-row-who { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-muted); min-width: 0; }
.nt-row-who svg { width: 14px; height: 14px; flex: none; }
.nt-row-who span { white-space: normal; overflow-wrap: break-word; }
.nt-row-badges { display: flex; gap: 5px; flex: none; margin-left: auto; }
.nt-row-badges:empty { display: none; }
.nt-row-tags { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--nt-ink); font-weight: 700; }
.nt-badge { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-muted); font-size: 11.5px; font-weight: 700; }
.nt-badge svg { width: 13px; height: 13px; stroke-width: 44; }
.nt-badge.wait { color: var(--nt-ink); background: var(--nt-soft); }
.nt-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--nt); box-shadow: 0 0 0 2px var(--surface); }
.nt-row-thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--bg); border: 1px solid var(--border); }
.nt-row mark, .nt-card mark { background: color-mix(in srgb, var(--nt) 38%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.nt-row-more {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); opacity: 0; transition: opacity 120ms;
}
.nt-row-more svg { width: 20px; height: 20px; stroke-width: 56; }
.nt-row:hover .nt-row-more, .nt-row-more:focus-visible, .nt-card:hover .nt-row-more { opacity: 1; }
@media (hover: none) { .nt-row-more { display: none; } .nt-row { padding-right: 14px; } }
.nt-row.trashed .nt-row-time { color: var(--danger); }
.nt-trash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 4px 8px; font-size: 13.5px; color: var(--ink-muted); }

/* the gallery */
.nt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.nt-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--border); border-bottom-width: 4px;
  border-radius: 18px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; overflow: hidden;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
  align-items: stretch;
}
.nt-card:hover { transform: translateY(-2px); }
.nt-card:active { transform: translateY(2px); }
.nt-card.on { border-color: var(--nt-line); }
.nt-card:focus-visible { outline: 3px solid var(--nt); outline-offset: 2px; }
.nt-card-art { height: 116px; margin: 6px 6px 0; border-radius: 13px; overflow: hidden; background: var(--bg); }
.nt-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-card-text { padding: 10px 11px; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }
.nt-card-words { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nt-card-title { display: flex; align-items: center; gap: 6px; font-weight: 750; font-size: 15px; min-width: 0; }
.nt-card-title span { white-space: normal; overflow-wrap: break-word; }
.nt-card-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); flex-wrap: wrap; }
.nt-card .nt-row-more { top: 8px; right: 8px; bottom: auto; width: 36px; height: 36px; border-radius: 12px; background: var(--surface); }

/* empty, loading */
.nt-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px 24px; text-align: center; }
.nt-empty-buddy { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--arc-lemon, #FFC83D) 24%, transparent); }
.nt-empty-words { font: 800 17px/1.3 var(--arc-font); color: var(--ink); }
.nt-loading { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.nt-loading.pad { padding: 22px; }
.nt-skel { height: 58px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); animation: nt-pulse 1.2s ease-in-out infinite; }
.nt-skel.short { width: 60%; }
.nt-skel.tall { height: 36px; width: 70%; }
@keyframes nt-pulse { 50% { opacity: 0.55; } }

/* ---- the open note: its head ---- */
.nt-notehead { display: flex; align-items: center; gap: 8px; padding: 2px 12px 6px; min-height: 52px; flex: none; }
.nt-notehead.idle .nt-head-btn, .nt-notehead.idle .nt-faces { visibility: hidden; }
.nt-back, .nt-head-btn {
  flex: none; height: 44px; min-width: 44px; border-radius: 15px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 0 10px;
}
.nt-back { width: 44px; padding: 0; }
.nt-back svg { width: 22px; height: 22px; stroke-width: 48; }
.nt-head-btn svg { width: 21px; height: 21px; stroke-width: 36; }
.nt-head-btn:hover, .nt-back:hover { background: var(--tint, var(--accent-soft)); }
.nt-share.shared { border-color: var(--nt-line); color: var(--nt-ink); }
.nt-share-n { font-weight: 800; font-size: 14px; }
.nt-share-n:empty { display: none; }
.nt-head-btn[hidden] { display: none; }
/* The Save key (notesKeys.js): the double tick once the server has it all, the struck cloud while it is kept here only, turning while it goes. */
.nt-save[data-state='saved'] { color: var(--nt-ink); }
.nt-save[data-state='offline'] { color: var(--ink-muted); }
.nt-save[data-state='sending'] svg { animation: nt-sending 900ms ease-in-out infinite; }
@keyframes nt-sending { 50% { opacity: 0.35; transform: translateY(1px); } }
.nt-save[hidden] { display: none; }
.nt-status { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.25; }
.nt-status span { white-space: normal; overflow-wrap: break-word; }
.nt-status-save { color: var(--ink-muted); font-weight: 600; }
.nt-status-save.s-offline { color: var(--nt-ink); }
.nt-status-who { color: var(--ink-muted); }
.nt-faces { display: flex; align-items: center; flex: none; }
.nt-faces > .nt-face + .nt-face { margin-left: -8px; }
.nt-faces-more { font-size: 12px; font-weight: 800; color: var(--ink-muted); margin-left: 4px; }
.nt-face {
  flex: none; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: var(--pc); color: #FFFFFF;
  font-weight: 800; line-height: 1; box-sizing: border-box; user-select: none;
}
.nt-face img { width: 100%; height: 100%; object-fit: cover; }
.nt-face.here { border: 2.5px solid var(--pc); box-shadow: 0 0 0 2px var(--bg); animation: nt-pop 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes nt-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

.nt-activity { margin: 0 12px 8px; padding: 6px 8px 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); flex: none; max-height: 34vh; overflow-y: auto; animation: nt-drop 220ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.nt-activity-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px 6px; font-size: 14px; }
.nt-activity-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 6px; font-size: 14px; color: var(--ink); }
.nt-activity-none { padding: 8px; color: var(--ink-muted); }

.nt-pane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 60%; padding: 40px 16px; }
.nt-trash-bar { display: flex; align-items: center; gap: 10px; padding: 4px 16px 8px; flex-wrap: wrap; }
.nt-trash-bar .arc-candy { min-height: 44px; height: 44px; }
.nt-danger-btn {
  height: 44px; padding: 0 16px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: var(--surface);
  color: var(--danger); font: 700 14.5px/1 inherit; cursor: pointer;
}
.nt-danger-btn.wide { width: 100%; margin-top: 14px; }
.nt-danger-btn:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }

/* ---- the toolbar ---- */
.nt-tools-slot { flex: none; }
.nt-tools { border-bottom: 1px solid var(--border); background: var(--bg); }
.nt-tools[hidden] { display: none; }
.nt-tools-row { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; }
.nt-tools-scroll {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none;
  /* A button cut by the edge fades out, so it reads as "more this way", never as tucked under Undo. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.nt-tools-scroll::-webkit-scrollbar { display: none; }
/* Between the buttons that scroll and Undo / Redo, which stand still. */
.nt-tools-line { flex: none; width: 1px; height: 30px; background: var(--border); margin: 0 2px; }
.nt-tools-gap { flex: 1; min-width: 4px; }
.nt-tool {
  flex: none; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nt-tool:hover { background: var(--tint, var(--accent-soft)); }
.nt-tool.on { background: var(--nt-soft); border-color: var(--nt-line); color: var(--nt-ink); }
.nt-tool:disabled { opacity: 0.38; cursor: default; }
.nt-tool svg { width: 21px; height: 21px; stroke-width: 36; }
.nt-tool-word { font: 800 17px/1 var(--arc-font); letter-spacing: -0.3px; }
.nt-openlink { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 18px; background: var(--nt-soft); color: var(--nt-ink); font-weight: 800; font-size: 13.5px; text-decoration: none; }
.nt-openlink[hidden] { display: none; }
/* A phone's width: every button stays 44 wide; the gaps give way, and what does not fit scrolls (Undo and Redo never do). */
@media (max-width: 430px) { .nt-tools-row, .nt-tools-scroll { gap: 2px; } .nt-tools-row { padding: 0 8px 8px; } }
.nt-attach { display: flex; gap: 6px; padding: 0 12px 10px; flex-wrap: wrap; animation: nt-drop 200ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.nt-attach[hidden] { display: none; }
.nt-attach .nt-style { display: inline-flex; align-items: center; gap: 8px; height: 44px; }
.nt-attach svg { width: 19px; height: 19px; color: var(--nt-ink); }
.nt-aa { padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 8px; animation: nt-drop 200ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.nt-aa[hidden] { display: none; }
.nt-aa-styles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.nt-aa-styles::-webkit-scrollbar { display: none; }
.nt-style {
  flex: none; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font: 600 14.5px/1 inherit; cursor: pointer; white-space: nowrap;
}
.nt-style.on { background: var(--nt); border-color: var(--nt); color: #2B2118; }
.nt-style.s-title { font: 900 15.5px/1 var(--arc-font); }
.nt-style.s-h { font-weight: 800; }
.nt-style.s-sub { font-weight: 700; }
.nt-style.s-mono { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; }
.nt-aa-marks { display: flex; gap: 6px; }
.nt-mark {
  width: 48px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font: 700 17px/1 Georgia, serif; cursor: pointer;
}
.nt-mark.m-b { font-weight: 900; font-family: inherit; }
.nt-mark.m-i { font-style: italic; }
.nt-mark.m-u { text-decoration: underline; }
.nt-mark.m-s { text-decoration: line-through; }
.nt-mark.on { background: var(--nt); border-color: var(--nt); color: #2B2118; }
.nt-mentions { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.nt-mentions[hidden] { display: none; }
.nt-mention-pick { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 700 14px/1 inherit; cursor: pointer; }
.nt-mention-pick:first-child { border-color: var(--nt-line); }
.nt-mention-none { font-size: 13.5px; color: var(--ink-muted); padding: 10px 4px; }

/* ---- the note itself ---- */
.nt-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nt-doc-slot { min-height: 100%; }
.nt-editor { max-width: 760px; margin: 0 auto; }
.nt-body { position: relative; padding: 26px 52px 140px 22px; }
@media (max-width: 520px) { .nt-body { padding: 24px 50px 140px 16px; } }
.nt-unit { position: relative; }
.nt-block { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; margin-left: calc(var(--ind, 0) * 26px); }
.nt-text {
  flex: 1; min-width: 0; min-height: 25px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  font-size: 17px; line-height: 25px; color: var(--ink); caret-color: var(--nt-line);
}
.nt-text[contenteditable='false'] { cursor: default; }
.t-title .nt-text { font: 850 28px/34px var(--arc-font); letter-spacing: -0.4px; padding: 4px 0 6px; }
/* The note's name: its title line drawn as a box of its own on top (18 Oct 2026, the user: "text box on top of note to set the name"). */
.nt-blocks > .nt-unit:first-child .t-title .nt-text, .nt-blocks > .t-title:first-child .nt-text {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 10px;
}
.nt-blocks > .nt-unit:first-child .t-title .nt-text:focus, .nt-blocks > .t-title:first-child .nt-text:focus { border-color: var(--nt-line); }
/* On a phone the name box runs into the right margin the body keeps for comments, lined up with the bar above. */
@media (max-width: 520px) { .nt-blocks > .nt-unit:first-child .t-title, .nt-blocks > .t-title:first-child { margin-right: -34px; } }
.t-title .nt-text:empty::before { content: attr(data-ph); color: var(--ink-faint); pointer-events: none; }
.nt-blocks:not(.nt-doc-empty) .t-title .nt-text:empty::before { content: 'New Note'; }
.t-h .nt-text { font-size: 22px; line-height: 28px; font-weight: 800; padding-top: 8px; }
.t-sub .nt-text { font-size: 18px; line-height: 24px; font-weight: 750; padding-top: 6px; }
.t-mono .nt-text {
  font: 15px/22px ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 10px; padding: 6px 10px; margin: 1px 0;
}
.t-quote .nt-text { border-left: 3px solid var(--nt); padding-left: 12px; color: var(--ink-muted); }
.t-check.done .nt-text { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-muted) 60%, transparent); }
.nt-text strong { font-weight: 800; }
.nt-mention { background: var(--nt-soft); color: var(--nt-ink); border-radius: 6px; padding: 0 3px; font-weight: 700; }
.nt-link { color: var(--nt-ink); text-decoration: underline; text-underline-offset: 2px; }
.nt-mk { flex: none; min-width: 22px; text-align: center; color: var(--nt-ink); font-size: 17px; line-height: 25px; user-select: none; }
.nt-bullet { font-size: 20px; }
.nt-num { min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.nt-check {
  position: relative; width: 23px; height: 23px; min-width: 23px; margin-top: 1px; padding: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink-muted) 70%, transparent);
  background: none; display: grid; place-items: center; cursor: pointer; transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), background 120ms;
}
.nt-check::before { content: ''; position: absolute; inset: -11px; }
.nt-check:active { transform: scale(0.86); }
.nt-check.done { background: var(--nt); border-color: var(--nt); }
.nt-check span { display: grid; place-items: center; }
.nt-check svg { width: 15px; height: 15px; stroke: #2B2118; stroke-width: 64; }
.nt-check:focus-visible { outline: 3px solid var(--nt); outline-offset: 2px; }
.nt-block hr { flex: 1; border: none; border-top: 2px solid var(--border); margin: 14px 0; }
.nt-fig { margin: 8px 0; flex: 1; min-width: 0; }
.nt-fig img { display: block; max-width: 100%; max-height: 460px; width: auto; height: auto; object-fit: contain; border-radius: 14px; cursor: zoom-in; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nt-img-wait { height: 140px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-faint); }
.nt-img-wait svg { width: 32px; height: 32px; }
.nt-file {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 6px 0; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--ink); text-decoration: none;
}
.nt-file-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--nt-soft); color: var(--nt-ink); display: grid; place-items: center; }
.nt-file-ico svg { width: 21px; height: 21px; }
.nt-file-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-file-words b { white-space: normal; font-size: 15px; overflow-wrap: break-word; }
.nt-file-words span { font-size: 12.5px; color: var(--ink-muted); }
.nt-file-get { color: var(--ink-muted); display: flex; }
.nt-file-get svg { width: 20px; height: 20px; }
.t-table { flex-direction: column; align-items: stretch; }
.nt-table-wrap { overflow-x: auto; margin: 6px 0 2px; border-radius: 12px; border: 1px solid var(--border); }
.nt-table { border-collapse: collapse; min-width: 100%; }
.nt-table td { border: 1px solid var(--border); padding: 0; min-width: 96px; vertical-align: top; }
.nt-table tr:first-child td { border-top: none; background: color-mix(in srgb, var(--ink) 3.5%, transparent); font-weight: 700; }
.nt-table td:first-child { border-left: none; }
.nt-table td:last-child { border-right: none; }
.nt-table tr:last-child td { border-bottom: none; }
.nt-cell { min-height: 40px; padding: 9px 10px; outline: none; font-size: 15.5px; line-height: 22px; white-space: pre-wrap; overflow-wrap: break-word; }
.nt-cell:focus { box-shadow: inset 0 0 0 2px var(--nt); border-radius: 4px; }
.nt-table-ctl { display: none; gap: 6px; flex-wrap: wrap; padding: 4px 0 6px; }
.t-table:focus-within .nt-table-ctl { display: flex; }
.nt-table-ctl button {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: 700 13px/1 inherit; cursor: pointer;
}
.nt-table-ctl svg { width: 15px; height: 15px; stroke-width: 48; }
.nt-remove {
  position: absolute; top: 6px; right: -48px; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 120ms;
}
.nt-block:hover > .nt-remove, .nt-block:focus-within > .nt-remove, .nt-remove:focus-visible { opacity: 1; }
@media (hover: none) { .nt-remove { opacity: 0; pointer-events: none; } .nt-block:focus-within > .nt-remove, .nt-block:focus > .nt-remove { opacity: 1; pointer-events: auto; } }
.nt-block[tabindex]:focus { outline: none; }
.nt-block[tabindex]:focus > .nt-img, .nt-block[tabindex]:focus > .nt-table-wrap, .nt-block[tabindex]:focus > .nt-file { box-shadow: 0 0 0 3px var(--nt); }
.nt-remove svg { width: 16px; height: 16px; stroke-width: 48; }

/* comments: a bubble beside the line, the thread opened under it */
.nt-cbadge {
  position: absolute; top: 0; right: -46px; min-width: 38px; height: 32px; padding: 0 8px; border-radius: 16px; border: 1px solid var(--nt-line);
  background: var(--surface); color: var(--nt-ink); display: inline-flex; align-items: center; gap: 4px; font: 800 13px/1 inherit; cursor: pointer;
}
.nt-cbadge::before { content: ''; position: absolute; inset: -6px -2px; }
.nt-cbadge.on { background: var(--nt); color: #2B2118; border-color: var(--nt); }
.nt-cbadge svg { width: 15px; height: 15px; stroke-width: 40; }
.nt-block.t-img > .nt-cbadge, .nt-block.t-table > .nt-cbadge { right: 0; }
.nt-thread {
  margin: 4px 0 12px calc(var(--ind, 0) * 26px + 26px); padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border);
  border-left: 3px solid var(--nt); background: var(--surface); display: flex; flex-direction: column; gap: 10px;
  animation: nt-drop 220ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.nt-cmt { display: flex; gap: 9px; align-items: flex-start; position: relative; }
.nt-cmt.reply { margin-left: 30px; }
.nt-cmt.resolved { opacity: 0.6; }
.nt-cmt-main { flex: 1; min-width: 0; }
.nt-cmt-head { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.nt-cmt-head span { color: var(--ink-muted); font-size: 12px; white-space: nowrap; flex: none; }
.nt-cmt-head { flex-wrap: wrap; row-gap: 0; }
.nt-cmt-head b { min-width: 0; display: block; overflow-wrap: break-word; }
@media (max-width: 520px) { .nt-thread { margin-left: 0; } .nt-cmt.reply { margin-left: 14px; } }
.nt-cmt-body { font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.nt-cmt-x { flex: none; width: 32px; height: 32px; border: none; background: none; border-radius: 10px; color: var(--ink-faint); cursor: pointer; display: grid; place-items: center; }
.nt-cmt-x:hover { background: var(--tint); color: var(--ink); }
.nt-cmt-x svg { width: 14px; height: 14px; stroke-width: 48; }
.nt-cmt-reply, .nt-cmt-new { display: flex; gap: 8px; align-items: center; }
.nt-cmt-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 15px; outline: none;
}
.nt-cmt-input.big { height: auto; min-height: 44px; padding: 11px 14px; resize: none; line-height: 1.35; }
.nt-cmt-input:focus { border-color: var(--nt-line); }
.nt-cmt-resolve {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: 700 13.5px/1 inherit; cursor: pointer;
}
.nt-cmt-resolve svg { width: 15px; height: 15px; stroke-width: 52; color: var(--success); }
.nt-cmt-done { flex: 1; font-size: 13px; color: var(--ink-muted); font-weight: 700; }
.nt-cmt-send { flex: none; width: 44px; height: 44px; border-radius: 22px; border: none; background: var(--nt); color: #2B2118; display: grid; place-items: center; cursor: pointer; }
.nt-cmt-send svg { width: 19px; height: 19px; stroke-width: 40; }

/* other people, over the words */
.nt-overlay { position: absolute; inset: 0; pointer-events: none; }
.nt-peer-caret { position: absolute; width: 2px; margin-left: -1px; background: var(--pc); border-radius: 1px; transition: left 90ms linear, top 90ms linear; }
.nt-peer-flag {
  position: absolute; bottom: 100%; left: -1px; margin-bottom: 1px; padding: 2px 6px; border-radius: 7px 7px 7px 0; background: var(--pc); color: #FFFFFF;
  font: 800 11px/1.25 var(--arc-font); white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.nt-peer-caret.typing .nt-peer-flag { animation: nt-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.nt-peer-sel { position: absolute; background: color-mix(in srgb, var(--pc) 26%, transparent); border-radius: 3px; }
.nt-peer-bar { position: absolute; width: 4px; border-radius: 2px; background: var(--pc); }

/* a picture, big */
.nt-lightbox { position: fixed; inset: 0; z-index: var(--z-modal, 44); background: rgba(10, 10, 10, 0.88); display: grid; place-items: center; padding: 24px; cursor: zoom-out; animation: nt-fade 160ms ease-out both; }
.nt-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; }
.nt-lightbox-x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.4); color: #FFFFFF; display: grid; place-items: center; }
.nt-lightbox-x svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 44; }
@keyframes nt-fade { from { opacity: 0; } }

/* ---- menus and the sharing sheet ---- */
.nt-menu {
  position: fixed; z-index: var(--z-modal, 44); min-width: 210px; max-width: min(300px, calc(100vw - 16px)); padding: 6px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--raised, var(--surface)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: nt-drop 200ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.nt-menu svg { stroke: currentColor; fill: none; stroke-width: 36; }
.nt-menu-title { padding: 6px 10px 6px; font-size: 12.5px; font-weight: 800; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.nt-menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: none; border-radius: 11px; background: none;
  color: var(--ink); font: 600 15px/1.2 inherit; text-align: left; cursor: pointer;
}
.nt-menu-row:hover, .nt-menu-row:focus-visible { background: var(--tint, var(--accent-soft)); outline: none; }
.nt-menu-row > svg:first-child { width: 19px; height: 19px; flex: none; color: var(--ink-muted); }
.nt-menu-row > span { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.nt-menu-row > svg:not(:first-child) { width: 16px; height: 16px; flex: none; color: var(--nt-ink); stroke-width: 52; }
.nt-menu-row.danger, .nt-menu-row.danger > svg:first-child { color: var(--danger); }
.nt-menu-noicon { width: 19px; flex: none; }
.nt-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }

.nt-sheet { display: flex; flex-direction: column; gap: 10px; padding: 0 2px 8px; }
.nt-sheet svg { stroke: currentColor; fill: none; stroke-width: 36; }
.nt-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 850 19px/1.2 var(--arc-font); color: var(--ink); }
.nt-sheet-sub { margin-top: -6px; color: var(--ink-muted); font-size: 14px; white-space: normal; overflow-wrap: break-word; }
.nt-find-row { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 14px; border-radius: 24px; border: 1px solid var(--border); background: var(--bg); }
.nt-find-row:focus-within { border-color: var(--nt-line); }
.nt-find-row input::-webkit-search-cancel-button { display: none; }
@media (max-width: 400px) { .nt-member-ctl select { max-width: 92px; } }
.nt-find-ico { display: flex; color: var(--ink-muted); }
.nt-find-ico svg { width: 18px; height: 18px; }
.nt-find { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 16px; color: var(--ink); }
.nt-role { flex: none; height: 36px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 13.5px/1 inherit; cursor: pointer; }
.nt-find-list:empty { display: none; }
.nt-find-list, .nt-members { display: flex; flex-direction: column; }
.nt-find-none { padding: 8px 6px; color: var(--ink-muted); font-size: 14px; }
.nt-member { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 4px; border: none; background: none; text-align: left; color: var(--ink); font: inherit; width: 100%; border-bottom: 1px solid var(--border); }
.nt-members > .nt-member:last-child { border-bottom: none; }
.nt-member.pick { cursor: pointer; border-radius: 12px; border-bottom: none; }
.nt-member.pick:hover { background: var(--tint, var(--accent-soft)); }
.nt-member-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-member-words b { font-size: 15px; display: block; overflow-wrap: anywhere; }
.nt-member-words span { font-size: 12.5px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.nt-member-role { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.nt-member-ctl { display: flex; align-items: center; gap: 4px; flex: none; }
.nt-add { flex: none; width: 36px; height: 36px; border-radius: 18px; background: var(--nt); color: #2B2118; display: grid; place-items: center; }
.nt-add svg { width: 17px; height: 17px; stroke-width: 52; }
.nt-linkrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; border-top: 1px solid var(--border); cursor: pointer; }
.nt-linkrow-ico { width: 36px; height: 36px; border-radius: 12px; background: var(--nt-soft); color: var(--nt-ink); display: grid; place-items: center; flex: none; }
.nt-linkrow-ico svg { width: 19px; height: 19px; }
.nt-linkrow-words { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.nt-switch { appearance: none; -webkit-appearance: none; flex: none; width: 51px; height: 31px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 16%, transparent); position: relative; cursor: pointer; transition: background 160ms; margin: 0; }
.nt-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nt-switch:checked { background: var(--nt); }
.nt-switch:checked::after { transform: translateX(20px); }
.nt-switch:focus-visible { outline: 3px solid var(--nt); outline-offset: 2px; }
.nt-copy { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--nt-line); background: var(--surface); color: var(--nt-ink); font: 800 14.5px/1 inherit; cursor: pointer; }
.nt-copy[hidden] { display: none; }
.nt-copy svg { width: 18px; height: 18px; }
.nt-drive-crumb { font-size: 13px; color: var(--ink-muted); font-weight: 700; }
.nt-drive-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.nt-drive-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 6px; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--ink); font: 600 15px/1.2 inherit; text-align: left; cursor: pointer; }
.nt-drive-row:hover { background: var(--tint, var(--accent-soft)); }
.nt-drive-row > svg { width: 22px; height: 22px; flex: none; color: var(--nt-ink); }
.nt-drive-row > span:first-of-type { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.nt-drive-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; }
.nt-drive-size { flex: none; font-size: 12.5px; color: var(--ink-muted); }

/* ---- the pulled-up bar's notes page (quickNotes.js, 14 Oct 2026) ----
   The Notes app in miniature under the box: two small buttons at the top
   left (your notes, a new note), one plain box filling the page at the
   Notes app's body size (17px also keeps iOS from zooming on focus), or the
   profile's notes as a list. */
.drawer-notes-page { display: flex; flex-direction: column; overflow: hidden; }
.drawer-notes-page > .drawer-list { flex: 1; min-height: 0; display: flex; padding: 0; }
.drawer-notes { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
/* Since 18 Oct 2026 one row of bordered keys: the page's at the left (your notes or back, a new note), the
   note's at the right (Undo, Redo, Save — notesKeys.js), each 40px with 2px of reach round it (a thumb's 44). */
.dn-tools { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; flex: none; }
.dn-grow { flex: 1; min-width: 0; }
.dn-note-keys { display: flex; align-items: center; gap: 6px; }
.dn-tool {
  width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface); padding: 0; position: relative;
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; flex: none; box-sizing: border-box;
}
.dn-tool::after { content: ''; position: absolute; inset: -3px; }
.dn-tool svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 32; }
.dn-tool:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.dn-tool:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.dn-tool:disabled { opacity: .35; cursor: default; transform: none; border-bottom-width: 3px; }
.dn-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dn-tool.nt-save[data-state='saved'] { color: var(--accent); }
.dn-tool[hidden] { display: none; }
.drawer-notes:not(.listing) .dn-tools > .dn-tool:nth-child(2),
.drawer-notes.listing .dn-tools > .dn-tool:first-child { display: none; }
.drawer-notes.listing .dn-note-keys, .drawer-notes.listing .dn-name { display: none; }
/* The name: the note's title line, one line in a bordered box over the words (notesDoc.mjs setNoteName). */
.dn-name {
  flex: none; height: 44px; margin: 6px 12px 4px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 19px; font-weight: 700; outline: 0; caret-color: var(--accent); min-width: 0;
}
.dn-name::placeholder { color: var(--ink-faint); font-weight: 600; }
.dn-name:focus { border-color: var(--accent); }
.dn-name:disabled { opacity: .6; }
.quick-notes {
  flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; border: 0; outline: 0; background: none;
  font: inherit; font-size: 17px; line-height: 24px; color: var(--ink); caret-color: var(--accent);
  padding: 6px 18px calc(16px + env(safe-area-inset-bottom));
}
.quick-notes::placeholder { color: var(--ink-faint); }
.quick-notes:disabled { opacity: .6; }
.drawer-notes.listing .quick-notes { display: none; }
.dn-list { display: none; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.drawer-notes.listing .dn-list { display: block; }
.dn-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 52px; box-sizing: border-box; text-align: left;
  padding: 10px 18px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--ink); cursor: pointer;
}
.dn-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dn-row:active { opacity: .6; }
.dn-row-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; width: 100%; align-self: stretch; }
.dn-row-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }
.dn-row.here .dn-row-title { color: var(--accent); }
.dn-row-time { flex: none; font-size: 13px; color: var(--ink-muted); }
.dn-row-preview { display: block; width: 100%; font-size: 14px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* preview: a long free-text preview a tap opens in full — the one sanctioned cut */ }

/* The owner's change notes box (changeBox.js, 20 Oct 2026): the same row and box as a note's, its top left the
   page's name and the profile under it — whole, wrapping if it must — where the note's own keys would be. */
.dn-tools.cn-tools { height: auto; min-height: 44px; padding-left: 18px; }
.cn-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 0; color: var(--accent); }
.cn-head svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 32; }
.cn-words { display: flex; flex-direction: column; min-width: 0; }
.cn-name { font-size: 15px; font-weight: 700; line-height: 19px; color: var(--ink); overflow-wrap: anywhere; }
.cn-profile { font-size: 12px; line-height: 15px; color: var(--ink-muted); }