/* ── overrides ──
 * Sections appended after the ones above and depending on coming last: settings
 * swatches, sidebar row actions and trailing columns, the /help reference sheet,
 * folder-drop feedback and the sync indicator. Splitting these into the files they
 * belong to would move them EARLIER in the cascade — do not do it without checking
 * every affected state in a browser.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Settings float: wallpaper swatches ────────────────────────────────────
   The mock picked backgrounds by sight, not by reading a list of names. */
.pal-sect {
  color: var(--accent); font-size: 11px; letter-spacing: .6px;
  margin: 10px 0 8px; text-transform: lowercase;
}
/* Which surface the picker below is driving. A segmented control rather than two
   sections, so the twenty-swatch grid is drawn once instead of once per surface. */
.pal-target { display: flex; gap: 0; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.pal-tgt {
  flex: 1; padding: 5px 8px; border: 0; background: none; cursor: pointer;
  color: var(--fg-dim); font: inherit; font-size: 11px; transition: background .12s var(--ease), color .12s var(--ease);
}
.pal-tgt:hover { color: var(--fg); background: var(--accent-soft); }
.pal-tgt.on { background: var(--accent); color: var(--bg-page); font-weight: 600; }
.pal-tgt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pal-swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px; margin-bottom: 4px;
}
.pal-swatch {
  position: relative; height: 62px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  /* The presets are mostly translucent gradients, so they need the panel's own
     colour underneath — without it a button's default UA background shows through
     and every swatch reads as washed-out white. */
  background-color: var(--bg-raised);
  background-size: cover; background-position: center;
}
.pal-swatch:hover { border-color: var(--fg-dim); }
.pal-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pal-swatch span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  text-align: left; font-size: 10.5px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.pal-swatch.on span::after { content: ' ✓'; color: var(--accent); }
body.focus-mode .blk-lines { display: none; }
@media (max-width: 820px) { .blk-lines { display: none; } }

/* ── Sidebar row actions (rename / delete / new subfolder) ───────────────────
   Hidden until hover or keyboard focus so the tree stays quiet, but always
   reachable — the panel previously had no way to delete a note at all. */
.sb-act {
  /* Visible at rest, not hidden until hover. These were opacity:0, so the only way to
     discover that a row could be renamed at all was to hover it and notice a faint
     glyph appear — people reasonably concluded the feature did not exist. */
  opacity: .45; flex: 0 0 auto; padding: 1px 4px; margin-left: 2px;
  color: var(--fg-dim); font-size: 1em; line-height: 1; border-radius: 3px;
  transition: opacity .12s var(--ease), color .12s var(--ease);
}
.sb-row:hover .sb-act, .sb-row:focus-within .sb-act { opacity: .9; }
.sb-act:hover { opacity: 1; color: var(--fg); background: var(--accent-soft); }
.sb-act.sb-del:hover { opacity: 1; color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
/* ── Row trailing columns ────────────────────────────────────────────────────
   The name grows to fill, so everything after it is pinned to the right edge
   instead of trailing wherever the text happens to stop. It was `flex: 0 1 auto`
   — shrink but never grow — which left the rename and delete icons sitting at a
   different x on every row, following each file name like punctuation.

   The three trailing slots are fixed width and always present (the open-note dot
   renders empty when the note isn't open), so ✎ and ✕ line up down a column
   across notes and folders alike. */
.sb-row .sb-name { flex: 1 1 auto; min-width: 0; }
.sb-row .sb-count,
.sb-row .sb-open {
  /* min-width, not width: a folder count is unbounded, and a fixed box clipped "12"
     to "1" — the same class of misalignment this block exists to fix, one column
     over. The slot still reserves its space when the number is a single digit. */
  flex: 0 0 auto; min-width: 1.1em; margin-left: 4px; text-align: center;
}
.sb-act { flex: 0 0 auto; width: 1.5em; text-align: center; padding: 1px 0; margin-left: 2px; }

/* ── Settings float: give the list and the swatches their own room ───────────
   #palette-list was height-capped while the swatches and bars took the rest, so
   only one row ("hide sidebar") was visible and "reset background" was cut off. */
#palette.float #palette-list { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; }
#palette.float #palette-bars { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Focus has to out-shout the artwork. A 2px ring at 2px offset sat directly against
   the photo and vanished on the bright ones, and it read almost identically to the
   `.on` selected border — so "where I am" and "what is chosen" looked the same.
   The inner ring of panel colour separates the accent from whatever is behind it,
   which is what makes this legible over every wallpaper rather than most of them. */
.pal-swatch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bg-raised);
}
.pal-upload {
  display: grid; place-items: center;
  background-image: none; background: var(--bg-code);
  border-style: dashed; color: var(--fg-dim); font-size: 12px;
}
.pal-upload:hover { color: var(--accent); border-color: var(--accent); }
.pal-upload span { position: static; background: none; padding: 0; }

/* ── Folder glyph in the tree ────────────────────────────────────────────────
   The mock led every folder with an nvim-tree folder icon; a bare chevron made
   folders read as just another indented row. Filled when open, outlined when
   collapsed, so the state is legible without reading the chevron. */
.sb-folder {
  /* em, like everything else in .sb-row — a fixed icon next to text that scales
     from 9px to 20px goes from dwarfing the name to disappearing beside it. */
  width: 1.2em; height: 1.2em; flex: 0 0 1.2em;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.sb-folder svg { width: 1.12em; height: 1.12em; display: block; }

/* ── /help as a reference sheet, not a command list ──────────────────────────
   Keycaps lead each row and share a column, so the eye scans keys down the left
   and meanings down the right — the mock's layout. */
#palette-list.help-grid .help-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 5px 13px; cursor: default; background: none;
}
#palette-list.help-grid .help-keys {
  flex: 0 0 132px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-start;
}
#palette-list.help-grid .help-keys kbd {
  background: var(--bg-code); color: var(--accent);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; font: inherit; font-size: 11px; line-height: 1.5;
}
#palette-list.help-grid .help-text { color: var(--fg-dim); font-size: 12.5px; }
/* Read-only: no row highlight to imply something will happen on Enter. */
#palette-list.help-grid .help-row:hover { background: none; }

/* ── Drag a note onto a folder ───────────────────────────────────────────── */
.sb-row[draggable="true"] { cursor: grab; }
.sb-row.dragging { opacity: .45; }
/* The drop target is the folder itself, so highlight the row rather than a line
   between rows — this reorders nothing, it only re-files. */
.sb-row.dir.drop-into {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 var(--accent);
}
/* A help row with no key of its own spans the full width instead of leaving an
   empty keycap column beside it. */
#palette-list.help-grid .help-row.help-prose { padding-left: 13px; }
#palette-list.help-grid .help-row.help-prose .help-text { color: var(--fg); }

/* ── Sync indicator ──────────────────────────────────────────────────────────
   Persistent, because the thing it reports is persistent. A failed push used to be
   a toast that cleared after 1.5s, and from then on a dead connection was
   indistinguishable from a working one — the app kept taking edits and quietly kept
   them to itself. Three states, told apart by colour rather than by reading:
   off is quiet, on is quiet, and only "not getting through" asks for attention. */
#status .seg.sync { cursor: default; white-space: nowrap; }
#status .seg.sync .sync-short { display: none; }
#status .seg.sync[data-tone="off"]  { color: var(--fg-faint); }
#status .seg.sync[data-tone="ok"]   { color: var(--fg-dim); }
#status .seg.sync[data-tone="warn"] {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  font-weight: 500;
}

/* Narrow screens. This block must stay BELOW the base .sync rules above: a media
   query adds no specificity, so whichever of two single-class rules comes last in the
   file wins, and putting this higher up silently hid both spans at once. */
@media (max-width: 700px) {
  /* The segment itself stays, unlike its neighbours. It is the only thing in this bar
     that reports a problem, and a phone is where a flaky connection is likeliest. */
  #status .seg.sync .sync-full  { display: none; }
  #status .seg.sync .sync-short { display: inline; }
}