/* public/assets/ct-note.css — NoteLink rendered note + editor
   ---------------------------------------------------------------------------
   Two scoped systems, both token-driven (ui.css palette):

   .nl-paper[data-look]   the rendered note. The `nl-*` block classes are
                          emitted by notelink-md-core.js (the ONE grammar);
                          the paper's colours and decoration per look come
                          from ct-looks.css (generated from
                          config/og/looks.json), the same catalogue the OG
                          layout core draws from. Add a look there only.
   .nle                   the editor shell: toolbar + textarea + rendered
                          preview, mounted by ct-note-editor.js on any
                          textarea[data-note-editor].
   .nl-emoji              the creator/admin "Title emoji" picker (the Look
                          picker is shared: ct-looks.css + CT.looks).

   Loaded by /note/, /note/admin.html and the /a/notelink/:id page. */

/* ================= Rendered note ================= */

/* The paper's colours come from the shared look catalogue: ct-looks.css
   (generated from config/og/looks.json) sets the --look-* variables per
   [data-look]; this file only maps them onto the note's own tokens. */
.nl-paper {
  --nl-ink: var(--look-head);
  --nl-ink-soft: var(--look-text);
  --nl-mark: var(--look-mark);
  --nl-rule: var(--look-rule);
  --nl-quote-bg: var(--look-quote-bg);
  --nl-code-bg: var(--look-code-bg);
  --nl-lh: 1.75rem;
  position: relative;
  border: 1px solid var(--look-border);
  border-radius: var(--radius-lg);
  background: var(--look-paper);
  color: var(--nl-ink);
  color-scheme: var(--look-scheme);
  overflow: hidden;
}

/* The accent "margin line" (matches the spine on the card). */
.nl-paper::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 2px;
  background: var(--nl-mark);
  opacity: .9;
  pointer-events: none;
}

.nl-rendered {
  position: relative;
  padding: 20px 22px 18px 28px;
  font-size: 1.02rem;
  line-height: var(--nl-lh);
  min-height: 72px;
  color: var(--nl-ink-soft);
  overflow-wrap: anywhere;
}

.nl-rendered > :first-child { margin-top: 0 !important; }
.nl-rendered > :last-child { margin-bottom: 0 !important; }

.nl-rendered .nl-h1 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 780;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--nl-ink);
  position: relative;
}
.nl-rendered .nl-h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--nl-mark);
}
.nl-rendered .nl-h1 + .nl-p { font-size: 1.08rem; }
.nl-rendered .nl-h2 {
  margin: 20px 0 6px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 740;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--nl-ink);
}
.nl-rendered .nl-h3 {
  margin: 16px 0 4px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--nl-ink);
}
.nl-rendered .nl-p { margin: 0 0 10px; }

/* Lists — override the global ul reset (list-style:none; display:grid). */
.nl-rendered .nl-list {
  display: block !important;
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  gap: unset !important;
}
.nl-rendered .nl-list > li {
  display: list-item !important;
  position: relative;
  margin: 0 0 6px;
  padding-left: 22px;
}
.nl-rendered .nl-list:not(.nl-list--num):not(.nl-list--todo) > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(var(--nl-lh) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nl-mark);
}
.nl-rendered .nl-list--num {
  list-style: decimal !important;
  padding-left: 1.7em !important;
}
.nl-rendered .nl-list--num > li { padding-left: 4px; }
.nl-rendered .nl-list--num > li::marker { color: var(--nl-mark); font-weight: 700; }

.nl-rendered .nl-list > li.nl-todo {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
}
.nl-rendered .nl-check {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: calc(var(--nl-lh) / 2 - 10px);
  border-radius: 6px;
  border: 2px solid var(--nl-mark);
  background: transparent;
  position: relative;
  box-sizing: border-box;
}
.nl-rendered .nl-todo--done .nl-check { background: var(--nl-mark); }
.nl-rendered .nl-todo--done .nl-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--look-box-check);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.nl-rendered .nl-todo--done .nl-todo-text {
  color: var(--look-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--look-muted) 55%, transparent);
}

.nl-rendered .nl-quote {
  display: flex;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border-left: 4px solid var(--nl-mark);
  background: var(--nl-quote-bg);
}
.nl-rendered .nl-quote-icon { flex: none; font-size: 1.35rem; line-height: 1.3; }
.nl-rendered .nl-quote-body { min-width: 0; }
.nl-rendered .nl-quote-body p { margin: 0 0 4px; }
.nl-rendered .nl-quote-body p:last-child { margin-bottom: 0; }

.nl-rendered .nl-hr {
  border: 0;
  height: 1px;
  margin: 16px 0;
  background: var(--nl-rule);
}

.nl-rendered a {
  color: var(--look-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nl-mark) 45%, transparent);
  text-underline-offset: 2px;
}
.nl-rendered strong { color: var(--nl-ink); font-weight: 700; }
.nl-rendered code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--nl-code-bg);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .86em;
  border: 1px solid var(--nl-rule);
}
.nl-rendered .nl-empty { color: var(--look-muted); font-style: italic; margin: 0; }

/* ---- Layouts on the page: Page and Columns put the tool name, title and
   subtitle on the paper (no hero band), Columns flows the note through two
   columns where the viewport allows. The card draws the same. ---- */
.nl-paper[data-layout="page"], .nl-paper[data-layout="columns"] { margin-top: 12px; }
.nlHead { padding: 18px 22px 0 28px; }
.nlEyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; font-weight: 600; color: var(--look-muted); }
.nlEyebrowIc { width: 22px; height: 22px; flex: none; color: var(--look-mark); }
.nlHeadSub { margin-left: auto; font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlTitle { margin: 6px 0 6px; font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--nl-ink); overflow-wrap: anywhere; }
.nlRule { display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--nl-mark); margin: 10px 0 4px; }
.nl-paper[data-layout="columns"] .nl-rendered { column-gap: 28px; }
@media (min-width: 600px) {
  .nl-paper[data-layout="columns"] .nl-rendered { column-count: 2; column-rule: 1px solid var(--nl-rule); }
  .nl-paper[data-layout="columns"] .nl-rendered .nl-quote,
  .nl-paper[data-layout="columns"] .nl-rendered .nl-h1,
  .nl-paper[data-layout="columns"] .nl-rendered .nl-h2,
  .nl-paper[data-layout="columns"] .nl-rendered .nl-h3 { break-inside: avoid; }
}

/* Per-look decoration (memo band and rules, notebook dots, sticky glue
   strip, blueprint grid) and the poster / sticky / blueprint palettes are
   GENERATED into ct-looks.css from config/og/looks.json. Add a look there. */

/* ================= Editor shell ================= */

.nle {
  position: relative;
  border: 1px solid var(--ring);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: visible;
  transition: border-color var(--t), box-shadow var(--t);
}
.nle:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ring));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.nle-templates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ring);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--card-soft);
  font-size: .8rem;
  color: var(--muted);
}
.nle-templates-label { margin-right: 2px; font-weight: 600; }

.nle-chip {
  appearance: none;
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0;
  width: auto;
  min-height: 0;
  background: var(--card);
  color: var(--text);
  font: 600 .78rem/1.3 var(--font-sans);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.nle-chip:hover,
.nle-chip:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ring));
  color: var(--accent);
  outline: none;
}
.nle-chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--ring));
  color: var(--accent);
}

.nle-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--ring);
  background: var(--card-soft);
}
.nle-templates + .nle-bar { border-radius: 0; }
.nle-bar:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.nle-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  margin: 0;
  width: auto;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: 600 .82rem/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.nle-btn:hover,
.nle-btn:focus-visible {
  background: var(--card);
  border-color: var(--ring);
  outline: none;
}
.nle-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--ring));
  color: var(--accent);
}
.nle-btn svg { width: 18px; height: 18px; display: block; }
.nle-btn--text { font-weight: 800; letter-spacing: -0.01em; }
.nle-btn--i { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: .98rem; }
.nle-btn--s { text-decoration: line-through; }
.nle-btn--label { padding-inline: 10px; }
.nle-sep { width: 1px; height: 22px; margin: 0 3px; background: var(--ring); }
.nle-spacer { flex: 1 1 auto; }

.nle textarea,
.nle .nle-ta {
  display: block;
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  box-shadow: none !important;
  background: var(--card) !important;
  color: var(--text);
  padding: 14px 16px;
  min-height: 240px;
  resize: vertical;
  font: 400 1rem/1.6 var(--font-sans);
  outline: none !important;
  box-sizing: border-box;
}
.nle textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }

.nle-preview {
  display: none;
  padding: 10px;
  min-height: 240px;
  background: var(--card-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.nle--preview .nle-preview { display: block; }
.nle--preview textarea { display: none !important; }

.nle-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 8px;
  font-size: .76rem;
  color: var(--muted);
  border-top: 1px solid var(--ring);
}
.nle-foot kbd {
  font-family: inherit;
  font-size: .72rem;
  padding: 0 4px;
  border: 1px solid var(--ring);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--card);
}

/* Emoji popover */
.nle-pop {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 6px;
  width: min(320px, calc(100vw - 48px));
  padding: 8px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-elevated);
}
.nle-pop.is-open { display: block; }
.nle-pop-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.nle-pop-grid button {
  appearance: none;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.nle-pop-grid button:hover,
.nle-pop-grid button:focus-visible { background: var(--card-soft); outline: none; }

/* The Look picker (miniatures + dropdown shell) is shared: ct-looks.css,
   rendered by ct-core's CT.looks from the look catalogue. */

/* ================= Templates menu (editor toolbar) ================= */

.nle-pop--menu {
  left: 6px;
  width: min(300px, calc(100vw - 48px));
  padding: 6px;
}
.nle-menu-head {
  padding: 6px 10px 8px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
}
.nle-menu-item {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: 400 .84rem/1.3 var(--font-sans);
  cursor: pointer;
}
.nle-menu-item strong { display: block; font-weight: 650; }
.nle-menu-item span { display: block; color: var(--muted); font-size: .74rem; }
.nle-menu-item:hover,
.nle-menu-item:focus-visible { background: var(--card-soft); outline: none; }
.nle-btn--tpl { gap: 6px; padding-inline: 10px 8px; }
.nle-btn--tpl .nle-caret { font-size: .7em; opacity: .7; }