/* css/notes.css
 *
 * Note cards and the note editor, including the formatting strip.
 */

.notes { padding: 4px 2px 20px; }
/* The chips take the space they need and the actions sit right after them,
   not pinned to the far edge of a wide window: `space-between` parked the
   search box and "New note" a screen-width away from the chips they belong
   with, which read as two unrelated toolbars. */
.nbar {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin-bottom: 14px;
}
.nchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.nchip {
  background: var(--fill); box-shadow: none; color: var(--text-2);
  border-radius: 999px; padding: 5px 11px; font-size: 0.87em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
/* `--fill-2` was never defined, so this resolved to `transparent` and hovering
   a folder chip made its capsule disappear instead of highlighting it. */
.nchip:hover { filter: none; background: var(--chrome-2); color: var(--text); }
.nchip.on { background: var(--accent); color: #fff; }
.nchip .c { font-size: 0.88em; opacity: .72; font-variant-numeric: tabular-nums; }
.nactions { display: flex; gap: 8px; align-items: center; flex: none; }
/* A pill with a leading glyph, not a bordered box — the shape iOS gives a
   search field everywhere it appears. */
.nsearch {
  font-size: 0.9em; min-width: 190px; border: 0; box-shadow: none;
  background: var(--fill); border-radius: 999px; padding: 7px 12px 7px 30px;
  -webkit-appearance: none; appearance: none; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 10px center; background-size: 13px;
}
.nsearch:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.nsearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nnew { flex: none; font-size: 0.9em; padding: 7px 15px; border-radius: 999px; font-weight: 590; }
.ngrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
}
.ncard {
  background: var(--chrome); border-radius: 18px; padding: 14px 15px;
  box-shadow: var(--shadow); cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s ease;
}
/* The note's colour fills the whole card, the way it does in iOS Notes —
   a note IS its colour there, rather than wearing a stripe of it.
   `color-mix` with the page's own canvas is what keeps that readable in both
   themes: the palette below is the phone's saturated ink, and 22% of it over
   white (or 30% over near-black) lands in the same tint range Apple uses for
   its own filled cards, where body text still clears contrast. */
.ncard[style*="--nc"] {
  background: color-mix(in srgb, var(--nc) var(--note-tint), var(--canvas));
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--nc) var(--note-edge), transparent),
              0 1px 2px rgba(0,0,0,.05);
}
.ncard:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.ncard:active { transform: scale(.985); }
.ncard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ncard.pending { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .ncard { transition: none; }
  .ncard:hover, .ncard:active { transform: none; }
}
.nhead { display: flex; align-items: flex-start; gap: 6px; }
.ntitle {
  margin: 0; font-size: 0.98em; font-weight: 640; line-height: 1.3;
  overflow-wrap: anywhere;
}
.ntitle.empty { color: var(--text-3); font-weight: 500; }
/* An UNpinned note shows no pin at all until the card is hovered or the
   button is focused. A permanently visible grey pin on every card reads as
   state ("this one is pinned too?") rather than as an affordance, which is
   exactly the confusion the pinned/unpinned distinction exists to avoid. */
.npin {
  margin-left: auto; flex: none; background: none; box-shadow: none;
  font-size: 0.9em; line-height: 1; padding: 2px 3px; border-radius: 6px;
  cursor: pointer; opacity: 0; filter: grayscale(1);
  transition: opacity .12s ease;
}
.ncard:hover .npin, .npin:focus-visible { opacity: .45; }
.npin:hover { filter: none; opacity: .85; background: var(--fill); }
.npin.on { opacity: 1; filter: none; }
/* Touch cannot hover a card, which made unpinned notes unpinnable there — the
   pin rests faint instead of invisible. `.npin.on` above still wins its full
   opacity on specificity. */
@media (hover: none) { .npin { opacity: .45; } }
.nprev {
  margin: 0; font-size: 0.88em; line-height: 1.45; color: var(--text-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nitems { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.nitems li {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85em; color: var(--text-2);
}
/* Round, and ticked when done — the checklist shape iOS uses. A filled grey
   square read as "disabled" rather than "done". */
.nitems .box {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--text-3); position: relative;
}
.nitems li.on { color: var(--text-3); text-decoration: line-through; }
.nitems li.on .box { background: var(--ok); border-color: var(--ok); }
.nitems li.on .box::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/62% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
}
.nitems li.more { color: var(--text-3); padding-left: 17px; }
.nmeta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 0.78em; color: var(--text-3); margin-top: auto;
}
.nmeta .nwhen { margin-left: auto; font-variant-numeric: tabular-nums; }
.nempty { color: var(--text-3); padding: 26px 4px; text-align: center; }
/* ---- the note editor -------------------------------------------------
 *
 * Built as an iOS sheet rather than a web form. Three things carry that, and
 * all three were what made the old one read as a system dialog from 2007:
 *
 * 1. NO native control chrome. A bare <input>/<textarea>/<select> paints the
 *    platform's own bevel, focus ring and dropdown arrow — the single loudest
 *    tell. Every field here is reset and restyled.
 * 2. Actions live in a HEADER, not a footer: Cancel left, Done right, title
 *    centred, exactly where a navigation bar puts them.
 * 3. Fields are grouped into one inset panel with hairline separators, the
 *    way an iOS grouped list works, instead of floating as separate boxes.
 *
 * The corner radii are concentric per Apple's iOS 26 guidance: the inner
 * radius is the outer minus the padding between them, so curves stay
 * visually parallel instead of fighting.
 * --------------------------------------------------------------------- */
.taskedit .pane.noteedit {
  /* A note is prose — 420px wraps it into a column too narrow to read, and
     560 still made a long note a tall thin ribbon you scrolled instead of
     read. 720px holds roughly 75 characters at this type size, which is the
     upper end of the comfortable measure for running text. */
  width: min(720px, 100%);
  padding: 0; border-radius: 20px;
  /* The pane must NOT scroll: it is a column whose header is fixed and whose
     body scrolls. Leaving the inherited `overflow-y: auto` in place gave two
     nested scrollers, and the inner one's content was clipped by the outer —
     the delete button and half the palette were simply unreachable. */
  display: flex; flex-direction: column; overflow: hidden;
  /* No absolute ceiling. The 760px cap meant a tall screen still got a short
     sheet with the body scrolling inside it — the "маленькое окошко" the
     screen had plenty of room to avoid. `max-height` (not `height`) so a
     two-line note still hugs its content instead of stretching to a mostly
     empty full-height panel; the writing area grows into the space instead,
     via `.ne-text` below. */
  max-height: 92vh;
  /* Grouped-list logic: the sheet is the BASE and the groups sit on top of it.
     Inheriting `--chrome` made the two the same tone, so the fields read as
     floating plates rather than as rows inside a panel. */
  background: var(--canvas);
}
.noteedit .ne-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 13px 20px; flex: none;
  border-bottom: .5px solid var(--sep-soft);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.noteedit .ne-bar .t {
  grid-column: 2; font-size: 0.95em; font-weight: 600; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.noteedit .ne-bar button {
  background: none; box-shadow: none; padding: 4px 2px; cursor: pointer;
  font-size: 0.95em; color: var(--accent); border-radius: 8px;
}
.noteedit .ne-bar button:hover { filter: none; opacity: .65; }
.noteedit .ne-bar .cancel { justify-self: start; grid-column: 1; }
/* Done is the confirming action, so it carries the weight — the same
   emphasis a bar button gets when it commits rather than dismisses. */
.noteedit .ne-bar .done { justify-self: end; grid-column: 3; font-weight: 600; }
/* The only scroller. `min-height: 0` is what actually lets it shrink inside
   the flex column — without it a flex item refuses to go below its content
   height and the overflow escapes the pane instead of scrolling. */
.noteedit .ne-body {
  /* A flex column, not a grid. As a grid its rows were sized ONCE from the
     items' automatic minimum, and the first row measured 199px because the
     group inside it clips (`overflow: hidden` cancels a grid item's automatic
     minimum height). Giving the group `min-height: min-content` grew the group
     but not the ROW it sits in, so it overflowed its own track and drew across
     the block below. A flex column has no tracks to disagree with: each child
     is its own content height, in order. */
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 20px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
/* Blocks keep their content height and never absorb spare space; the column
   simply scrolls when the sum exceeds the pane. */
.noteedit .ne-body > * { flex: none; }

/* Title and body share one inset group, hairline-separated. */
.noteedit .ne-group {
  background: var(--chrome); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 .5px var(--sep-soft);
  /* Lay the three children out explicitly instead of leaving them to block
     flow inside a grid item. The body used to be a `<textarea>` — a replaced
     element, which carries its own intrinsic height — so the group sized
     itself correctly by accident. A `<div>` has no intrinsic height. */
  display: flex; flex-direction: column;
  /* And the group must not be squeezed by the grid it sits in.
     `min-height: auto` normally stops a grid item from shrinking below its
     content, but that automatic minimum is CANCELLED for an item whose own
     `overflow` is not `visible` — and this group clips, because that is what
     rounds the corners of the fields inside it. The result was a group frozen
     at 200px around 458px of children, with `overflow: hidden` cutting the
     formatting strip off the bottom: the buttons existed, laid out, and were
     invisible. Asking for the content minimum explicitly restores it without
     giving up the clipping. */
  min-height: min-content;
}
/* Each child keeps its own height rather than being stretched or squeezed to
   share the column: the strip is a fixed 43px and the field takes the rest. */
.noteedit .ne-group > * { flex: none; }
.noteedit .ne-title, .noteedit .ne-text {
  width: 100%; display: block; background: none; border: 0; box-shadow: none;
  outline: none; font: inherit; color: var(--text); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.noteedit .ne-title {
  font-size: 1.08em; font-weight: 600; padding: 15px 18px;
  border-bottom: .5px solid var(--sep-soft);
}
/* No resize handle: it is a native affordance drawn in the corner of the
   field, and it is the last piece of browser chrome in a sheet built to look
   like a sheet. The body grows with the pane instead. */
.noteedit .ne-text {
  /* The reading surface, so it gets the room. `min-height` in `vh` lets a
     tall display give the note more of itself rather than capping it at a
     fixed box and scrolling — the specific complaint about this sheet. */
  min-height: min(46vh, 420px); resize: none;
  font-size: 1.0em; line-height: 1.6;
  padding: 16px 18px 18px;
  /* It is a contenteditable now, so the newline handling a textarea gave for
     free has to be asked for, and long unbroken strings need somewhere to
     break or they widen the sheet.

     No `max-height` and no scroller of its own: `.ne-body` is the one scroller
     in this sheet (see its comment), and a second one here clipped the
     formatting strip out of the rounded group entirely — the strip sits BELOW
     the field, so anything that stops the field from growing pushes the strip
     outside the group's `overflow: hidden`. The field grows; the body scrolls. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* The markers stay IN the text — that is what gets saved — and are merely made
   invisible. `font-size: 0` rather than `display: none`, because a caret cannot
   be placed inside a box that does not exist, and the caret has to be able to
   sit between a marker and the word it wraps for the toggle to unwrap it. */
.noteedit .ne-text .nm { font-size: 0; line-height: 0; }
.noteedit .ne-text:empty::before,
.noteedit .ne-text[data-blank="1"]::before {
  content: attr(data-empty); color: var(--text-3);
}
.noteedit .ne-title::placeholder { color: var(--text-3); }

/* Formatting strip. Sits directly under the body, inside the same rounded
   group, so it reads as belonging to the field it acts on rather than as a
   floating toolbar. On the phone this lives above the keyboard; there is no
   keyboard to sit above here, so it docks to the field instead. */
.noteedit .ne-fmt {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 8px 12px; border-top: .5px solid var(--sep-soft);
  background: var(--chrome-2);
}
.noteedit .ne-fmt button {
  -webkit-appearance: none; appearance: none; border: 0; background: none;
  color: var(--text); font: inherit; padding: 0; cursor: pointer;
  width: 32px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.noteedit .ne-fmt button:hover:not(:disabled) { background: var(--sep-soft); filter: none; }
/* Disabled, not hidden: the buttons need a selection, and a control that
   vanishes when you look away is harder to learn than one that greys out. */
.noteedit .ne-fmt button:disabled { color: var(--text-3); cursor: default; }
.noteedit .ne-fmt button.on { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.noteedit .ne-fmt button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.noteedit .ne-fmt .b { font-weight: 700; }
.noteedit .ne-fmt .i { font-style: italic; font-family: Georgia, serif; }
.noteedit .ne-fmt .s { text-decoration: line-through; }
.noteedit .ne-fmt .sep { width: 1px; height: 20px; background: var(--sep-soft); margin: 0 3px; }
.noteedit .ne-fmt .ink {
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,.45);
}
.noteedit .ne-fmt .ink:hover:not(:disabled) { background: none; }
/* No read/write switch: the editor renders the styling itself, so there is
   nothing a preview mode would show that the field does not already. */

/* Rows: a label on the left, its control hugging the right, 44px tall — the
   minimum touch target, and what makes a stack of them read as a list. */
.noteedit .ne-rows { background: var(--chrome); border-radius: 14px; box-shadow: 0 0 0 .5px var(--sep-soft); }
.noteedit .ne-r {
  display: flex; align-items: center; gap: 12px; min-height: 46px;
  padding: 0 18px; text-transform: none; letter-spacing: normal;
}
/* The colour row: a dot for the current colour and a chevron, the palette
   folded beneath. Clicking anywhere on the trailing control unfolds it. */
.noteedit .ne-cval {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; box-shadow: none; padding: 6px 0 6px 8px;
  cursor: pointer; color: var(--text-3); font: inherit; border-radius: 8px;
}
.noteedit .ne-cval:hover { filter: none; color: var(--text-2); }
.noteedit .ne-cval:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.noteedit .ne-cval .dot {
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.16);
}
.noteedit .ne-cval .dot.none {
  background: linear-gradient(135deg, transparent 46%, var(--sep) 46%, var(--sep) 54%, transparent 54%);
  box-shadow: inset 0 0 0 1px var(--sep);
}
.noteedit .ne-cval .chev {
  width: 7px; height: 11px; flex: none;
  background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11' viewBox='0 0 7 11'%3E%3Cpath d='M1.2 1.2 5.4 5.5 1.2 9.8' fill='none' stroke='%238e8e93' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.noteedit .ne-r.open .ne-cval .chev { transform: rotate(90deg); }
.noteedit .ne-pal {
  padding: 8px 18px 16px; border-top: .5px solid var(--sep-soft);
}
.noteedit .ne-pal[hidden] { display: none; }
.noteedit .ne-r + .ne-r { border-top: .5px solid var(--sep-soft); }
.noteedit .ne-r .lbl { font-size: 0.94em; flex: none; }
.noteedit .ne-folder {
  margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 62%;
  background: none; border: 0; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 0.94em; color: var(--text-3);
  text-align: right; text-align-last: right;
  padding: 6px 18px 6px 6px; cursor: pointer; border-radius: 8px;
  /* The disclosure chevron is drawn, not the platform's arrow. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11' viewBox='0 0 7 11'%3E%3Cpath d='M1.2 1.2 5.4 5.5 1.2 9.8' fill='none' stroke='%238e8e93' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.noteedit .ne-folder:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* An iOS switch, for a boolean that applies immediately on the model. */
.noteedit .ne-switch {
  margin-left: auto; flex: none; width: 51px; height: 31px; padding: 0;
  border-radius: 999px; background: var(--sep); box-shadow: none;
  position: relative; cursor: pointer; border: 0;
  transition: background .2s cubic-bezier(.32,.72,0,1);
}
.noteedit .ne-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
  transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.noteedit .ne-switch:hover { filter: none; }
.noteedit .ne-switch.on { background: var(--ok); }
.noteedit .ne-switch.on::after { transform: translateX(20px); }
.noteedit .ne-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.noteedit .ne-items { margin: 0; padding: 0; list-style: none; }
.noteedit .ne-items li + li { border-top: .5px solid var(--sep-soft); }
/* `text-transform: none` is load-bearing: a checklist item is user text, and
   the pane inherits an uppercase rule meant for field labels — which rendered
   "хлеб" as "ХЛЕБ" and silently misrepresented what the user wrote. */
.noteedit .ne-items label {
  display: flex; align-items: center; gap: 10px; font-size: 0.94em;
  cursor: pointer; text-transform: none; letter-spacing: normal;
  min-height: 44px; padding: 0 14px;
}
/* Round ticks, matching the note CARDS. Left as a native checkbox these were
   square and blue here but round and green two pixels away on the card
   behind the sheet — the same item drawn two different ways. */
.noteedit .ne-items input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 21px; height: 21px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--sep); background: transparent;
  transition: background .15s ease, box-shadow .15s ease;
}
.noteedit .ne-items input:checked {
  background: var(--ok); box-shadow: none;
  /* The tick is drawn, not a glyph: a text checkmark inherits the body font
     and lands off-centre in whichever family the theme is using. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.noteedit .ne-items input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.noteedit .ne-items input:checked + span { text-decoration: line-through; color: var(--text-3); }
.noteedit .ne-photos { margin: 0 0 0 auto; font-size: 0.9em; color: var(--text-3); text-align: right; }
/* A section caption, as a grouped list uses above its rows. */
.noteedit .ne-cap {
  margin: 0 0 7px 4px; font-size: 0.76em; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
/* Explanatory line UNDER a group — the footnote half of the same pattern. */
.noteedit .ne-foot {
  margin: 7px 4px 0; font-size: 0.82em; color: var(--text-3);
}

/* ---- settings sheet ------------------------------------------------- */
/* Same chrome as the note editor, minus the prose: it holds two rows, so it
   hugs its content rather than inheriting the tall reading sheet. */
/* Height lives HERE and only here. A second `max-height` on this same selector
   further down silently won, so editing this number appeared to do nothing. */