/* The newsletter row (js/newsletter.js) — sits last in the Done sheet and the
   classic export chooser. Reads the theme tokens, so light, dark and black all
   fall out of the same rules; the v2 tokens carry fallbacks for the classic
   modal, which has no --v2-* of its own. */
.nl {
  --nl-line: var(--v2-line, rgba(120, 140, 200, 0.22));
  --nl-card: var(--v2-card, rgba(255, 255, 255, 0.72));
  display: flex; flex-direction: column; gap: 9px; padding: 11px 12px 10px; border-radius: 12px;
  border: 1px solid var(--nl-line); background: var(--nl-card);
  color: var(--text); text-align: left;
}
html[data-theme="dark"] .nl, html[data-theme="black"] .nl {
  --nl-line: var(--v2-line, rgba(255, 255, 255, 0.10));
  --nl-card: var(--v2-card, rgba(255, 255, 255, 0.06));
}
.nl-head { display: flex; align-items: flex-start; gap: 10px; }
.nl-i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--text-muted); }
.nl-done .nl-i { color: #2f9e57; }
.nl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl-text strong { font: 800 13px/1.15 var(--font); color: var(--text); }
.nl-text span { font: 500 11px/1.35 var(--font); color: var(--text-muted); }
.nl-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.nl-in {
  flex: 1 1 150px; min-width: 0; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1.5px solid var(--nl-line); background: rgba(255, 255, 255, 0.55);
  color: var(--text); font: 600 12px/1 var(--font); outline: none; -webkit-appearance: none;
}
.nl-in::placeholder { color: var(--text-muted); opacity: 0.8; }
.nl-in:focus { border-color: rgba(var(--sel-rgb), 0.7); }
html[data-theme="dark"] .nl-in, html[data-theme="black"] .nl-in { background: rgba(255, 255, 255, 0.06); }
.nl-join {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: none;
  background: var(--cta); color: #fff;
  font: 800 11px/1 var(--font); letter-spacing: 0.04em; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 18px rgba(190, 20, 60, 0.3);
}
.nl-join:disabled, .nl-in:disabled { opacity: 0.55; cursor: default; }
.nl-skip {
  height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1.5px solid transparent; background: transparent;
  color: var(--text-muted); font: 600 11px/1 var(--font); cursor: pointer;
}
.nl-skip:hover { color: var(--text); border-color: var(--nl-line); }
.nl-note { font: 500 11px/1.3 var(--font); color: #c9463c; min-height: 0; }
.nl-note:empty { display: none; }
/* In the classic chooser the card is narrow; the row keeps its own edge. */
.export-modal-card .nl { margin-top: 2px; }