/* notes-editor.css: the note editor (notes-editor.js), in notes and in canvas. Copied by shared/sync.sh: edit this
   file, never the copies. gaudims' paper and ink, one sans; the rhyme tints are the eight note colours (--c1 to --c8). */

.ne {
  --ok: #4f9a5e; --near: #8fb35a; --loose: #d1a338; --weak: #c98a5a;
  --ne-size: 17px; --ne-lh: 1.7;
  display: flex; flex-direction: column; min-height: 0; height: 100%; color: var(--ink);
}
:root[data-theme="dark"] .ne { --ok: #6fbf7e; --near: #a6c96a; --loose: #d9b34e; --weak: #c9895f; }
/* Registered so the tints can cross-fade. */
@property --tint { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --fill { syntax: '<color>'; inherits: false; initial-value: transparent; }

/* The bar: the save line on the left, the lyric tools and their switch on the right. */
.ne-bar { display: flex; align-items: center; gap: 16px; padding: 4px 0 18px; font-size: 13px; min-height: 30px; }
.ne-spacer { flex: 1; }
.ne-status { color: var(--muted); font-size: 12px; min-width: 50px; transition: opacity var(--mid) var(--ease); }
.ne-status:empty { opacity: 0; }
.ne-status.warn { color: var(--late); }
.ne-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color var(--fast) var(--ease); }
.ne-link:hover, .ne-link:focus-visible { color: var(--ink); outline: none; }
/* Toggles read bold when on; the bold width is reserved so the bar doesn't shift. */
.ne-tog.on { color: var(--ink); font-weight: 600; }
.ne-tog::after { content: attr(data-l); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.ne-tools { display: none; align-items: center; gap: 16px; padding-right: 16px; margin-right: -2px; border-right: 1px solid var(--faint); }
.ne.ne-lyrics-on .ne-tools { display: inline-flex; animation: ne-fade var(--mid) var(--ease) both; }
.ne-drawer { display: none; }
/* The host's controls: at the start (back) and the end (share, archive, delete; close on a board). */
.ne-lead:empty, .ne-acts:empty { display: none; }
.ne-lead, .ne-acts { display: inline-flex; align-items: center; gap: 2px; }
.ne-acts { padding-left: 10px; margin-left: -6px; border-left: 1px solid var(--faint); }
.ne-act { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 13px var(--ui); cursor: pointer; white-space: nowrap; text-decoration: none; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.ne-act:hover, .ne-act:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.ne-act.danger:hover { color: var(--late); }
.ne-act .ic { width: 15px; height: 15px; }
.ne-act.strong { color: var(--ink); font-weight: 500; }
.ne-note-line { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ne-ro .ne-tools .ne-drawer { display: none !important; }

/* The writing, and the rhymes beside it when the lyric tools are on. */
.ne-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0; transition: grid-template-columns var(--mid) var(--ease); }
.ne.ne-lyrics-on:not(.ne-ro) .ne-main { grid-template-columns: minmax(0, 1fr) 220px; }
.ne-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.ne-paper { max-width: 720px; margin: 0 auto; padding: 4px 44px 40vh; }
.ne .ne-title, .ne .ne-text, .ne .ne-hl { display: block; width: 100%; background: none; border: 0; padding: 0; margin: 0; color: var(--ink); outline: none; resize: none; font-family: var(--ui); border-radius: 0; }
.ne input.ne-title { font-size: 28px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 22px; padding: 0; border: 0; }
.ne-title::placeholder, .ne-text::placeholder { color: var(--muted); opacity: .6; }

/* The textarea and the layer under it share exact metrics so the drawn words land under the typed ones. */
.ne-wrap { position: relative; }
.ne-text, .ne-hl { font-size: var(--ne-size); line-height: var(--ne-lh); white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; letter-spacing: normal; tab-size: 4; }
/* The textarea holds the caret and the selection; the layer under it draws the words, so its own text is see-through. */
.ne .ne-text { position: relative; min-height: 40vh; overflow: hidden; color: transparent; caret-color: var(--ink); }
.ne-text::selection { background: color-mix(in srgb, var(--ink) 16%, transparent); color: transparent; }
.ne-hl { position: absolute; inset: 0; pointer-events: none; --focus: color-mix(in srgb, var(--ink) 14%, transparent); }
.ne-hl .ln { position: relative; }
/* Section labels (lyric tools on): a line starting with [ */
.ne-hl .ln.section { color: var(--muted); }
.ne-hl .br { opacity: .35; }
/* Formatting, drawn without changing glyph widths so the caret stays true. */
.ne-hl .fb { -webkit-text-stroke: .45px currentColor; }
.ne-hl .fi { display: inline-block; transform: skewX(-11deg); }
.ne-hl .fu { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
/* Rhymes: line endings carry a soft tint; the family under the cursor lights in full (its tint, or grey). */
.ne-hl .wd {
  position: relative; --fill: var(--tint);
  background-image: linear-gradient(var(--fill), var(--fill)); background-repeat: no-repeat; background-position: left; background-size: 0% 100%;
  border-radius: 3px; padding: 1px 3px; margin: -1px -3px;
  transition: background-size var(--mid) var(--ease), --fill var(--mid) var(--ease), --tint var(--mid) var(--ease);
}
.ne-paper.rhymes-on .ne-hl .wd.end { --fill: color-mix(in srgb, var(--tint) 70%, transparent); background-size: 100% 100%; }
.ne-paper.rhymes-on .ne-hl .wd.on { --fill: var(--focus); background-size: 100% 100%; }
/* Stress: room under each line, then a dot per syllable under each word. */
.ne-text, .ne-hl { transition: line-height var(--slow) var(--ease); }
.ne-paper.stress-on .ne-text, .ne-paper.stress-on .ne-hl { line-height: 2.2; }
.ne-hl .wd::after {
  content: attr(data-st); position: absolute; left: 3px; bottom: -.95em; font: 7px/1 var(--ui); letter-spacing: 2px; color: var(--muted);
  opacity: 0; transform: translateY(-5px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); pointer-events: none;
}
.ne-paper.stress-on .ne-hl .wd::after { opacity: .9; transform: none; transition-delay: .12s; }
/* Syllables: each line's count in the gutter. */
.ne-hl .ln::before {
  content: attr(data-syl); position: absolute; left: -42px; width: 30px; text-align: right; font: 11px var(--ui); line-height: inherit;
  color: var(--muted); opacity: 0; transition: opacity var(--mid) var(--ease); font-variant-numeric: tabular-nums;
}
.ne-paper.syl-on .ne-hl .ln::before { opacity: .8; }
@keyframes ne-tick { from { opacity: 0; transform: translateY(5px); } to { transform: none; } }
@keyframes ne-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ne-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ne-paper.syl-on .ne-hl .ln.bump::before { animation: ne-tick var(--mid) var(--ease) both; }

/* The rhyme list. */
.ne-rhymes { min-width: 0; overflow: hidden auto; box-shadow: inset 1px 0 var(--faint); font-size: 14px; }
.ne-rhymes > * { width: 220px; padding-left: 20px; padding-right: 14px; }
.ne-rhead { display: flex; align-items: baseline; gap: 12px; min-height: 26px; margin-bottom: 12px; padding-top: 2px; }
.ne-rword { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-pin { font-size: 12px; }
.ne-pin.on { color: var(--ink); }
.ne-pinned { font-size: 12px; color: var(--muted); margin: -6px 0 14px; }
.ne-pinned button { margin-left: 8px; font-size: 12px; }
.ne-hint { color: var(--muted); font-size: 13px; margin: 0; }
.ne-groups { padding-bottom: 60px; }
.ne-groups.enter { animation: ne-rise var(--mid) var(--ease) both; }
.ne-rgroup { margin-bottom: 20px; }
.ne-rgroup h3 { font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.ne-row { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; }
.ne-w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; cursor: pointer; border-bottom: 1px solid transparent; transition: color var(--fast) var(--ease); }
.ne-w:hover { border-bottom-color: var(--ink); }
.ne-w.copied { color: var(--muted); }
.ne-rate { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex-shrink: 0; align-self: center; }
.ne-rate[data-r="5"] { background: var(--ok); }
.ne-rate[data-r="4"] { background: var(--near); }
.ne-rate[data-r="3"] { background: var(--loose); }
.ne-rate[data-r="2"] { background: var(--weak); }
.ne-none { color: var(--muted); font-size: 13px; }

/* Narrow: one column; the rhymes are a drawer under the bar, opened with "list". */
.ne.ne-narrow .ne-paper { padding: 4px 18px 40vh 38px; }
.ne.ne-narrow .ne-hl .ln::before { left: -34px; width: 26px; }
.ne.ne-narrow .ne-main, .ne.ne-narrow.ne-lyrics-on:not(.ne-ro) .ne-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr); }
.ne.ne-narrow.ne-lyrics-on.ne-drawer-open:not(.ne-ro) .ne-main { grid-template-rows: minmax(0, 36%) minmax(0, 1fr); }
.ne.ne-narrow .ne-rhymes { order: -1; box-shadow: inset 0 -1px var(--faint); }
.ne.ne-narrow .ne-rhymes > * { width: auto; padding-left: 18px; }
.ne.ne-narrow.ne-lyrics-on .ne-drawer { display: inline; }
.ne.ne-narrow.ne-drawer-open .ne-drawer { color: var(--ink); font-weight: 600; }
.ne.ne-narrow .ne-bar { flex-wrap: wrap; row-gap: 10px; gap: 10px; }
.ne.ne-narrow .ne-tools { order: 10; flex-basis: 100%; padding: 0; border: 0; margin: 0; gap: 18px; }
.ne.ne-narrow .ne-act span { display: none; }
.ne.ne-narrow .ne-acts { margin-left: 0; padding-left: 6px; }
@media (prefers-reduced-motion: reduce) { .ne *, .ne *::before, .ne *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }