/* Newsletters (docs/newsletters-v1.md): the public doors (unsubscribe, preferences, sign-up,
   confirmation) on the auth shell, and the Contacts space's newsletter surfaces. Prefix nl-. */

/* ── Public doors ─────────────────────────────────────────────────── */
.nl-door { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; padding: 0 0 8px; }
.nl-door-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.nl-door-org { font-size: 13px; font-weight: 600; color: var(--text-muted); line-height: 1.4; }
.nl-door-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.nl-door-line { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.nl-door-address {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); line-height: 1.3;
}
.nl-door-actions { display: flex; flex-direction: column; gap: 8px; }
.nl-door-actions .btn { width: 100%; }
.nl-door-glyph { color: var(--text); }
.nl-door-glyph.is-done { color: var(--success); }

.nl-prefs { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; }
.nl-pref {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px;
    padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.nl-pref:last-child { border-bottom: 0; }
.nl-pref-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.nl-pref > input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* The ONE switch of the newsletter surfaces: an ink track when on, the knob inverting with it. */
.nl-switch {
    position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    transition: background .15s ease, border-color .15s ease;
}
.nl-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform .15s ease;
}
input:checked ~ .nl-switch { background: var(--text); border-color: var(--text); }
input:checked ~ .nl-switch::after { transform: translateX(14px); }
input:focus-visible ~ .nl-switch { outline: 2px solid var(--text); outline-offset: 2px; }

.nl-field { display: flex; flex-direction: column; gap: 6px; }
.nl-field label { font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.nl-field input {
    height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.4;
}
.nl-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .nl-switch, .nl-switch::after { transition: none; }
}

/* ── The space's newsletter page (the approved sketch "1") ───────────── */
.nl-page { display: flex; flex-direction: column; gap: 16px; }
/* A newsletter page starts where the context panel does (owner, 2026-11-02: "align top and bottom limit with the left panel"). */
.app-page-inner.nl-page { padding-top: var(--app-pane-inset-y); }
.nl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-sizing: border-box; }

/* Controls side by side share ONE height: the gear and the ink verb stand 32px tall together. */

.nl-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; line-height: 1.4; white-space: nowrap; text-decoration: none; }
a.nl-meta:hover { color: var(--text); }
.nl-meta.is-warn { color: var(--warning-text); }

.nl-t-blue { color: #0060df; }
.nl-t-amber { color: var(--warning-text); }
.nl-t-green { color: var(--success-fg, #1a7f37); }
.nl-t-red { color: #b42318; }
.nl-t-muted { color: var(--text-muted); }
[data-theme="dark"] .nl-t-blue { color: #6aa8ff; }
[data-theme="dark"] .nl-t-red { color: #ff7b72; }
.nl-c-blue { color: #0060df; }
.nl-c-orange { color: #c2410c; }
.nl-c-green { color: #15803d; }
.nl-c-purple { color: #7c3aed; }
.nl-c-teal { color: #0f766e; }
.nl-c-pink { color: #be185d; }

/* A table stands whole inside its card at every width: never a column run past the card, never a sideways
   scroll. Each table folds by ITS OWN width (a container), never the screen's: under the width its columns
   need, a row stacks - its name owning its line, its verb at the line's end, its facts as labelled units
   under it - and the heads step away. The page is the ONE scroller, so every hairline runs the card's width. */

/* The fold: a campaign row needs about 1000px of table to stand in columns, a subscriber or an excluded
   address about 760, a delivery about 620. */

/* What a folded campaign row says of its figures: each a labelled unit, only once it was sent. */

.nl-st { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.35; min-width: 0; }
.nl-k { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.nl-when { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }

.nl-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; line-height: 1.4; }
.nl-copy { width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-muted); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nl-copy:hover { color: var(--text); }


/* The settings window of a newsletter. */
.nl-settings { width: min(560px, calc(100vw - 32px)); padding: 18px 20px 20px; gap: 14px; }
.nl-set-rows { display: flex; flex-direction: column; }
.nl-set-row { position: relative; display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nl-set-row:last-child { border-bottom: 0; }
.nl-set-l { flex: 0 0 160px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nl-set-v { font-size: 13px; }
.nl-set-row input[type="text"], .nl-set-row input[type="number"] {
    flex: 1 1 200px; height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface); color: var(--text); font: inherit; line-height: 1.4;
}
.nl-hide { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* The campaign assistant (the approved sketches "2a" to "2d"). */
/* The newsletter's name stands on the title's own line, so both words share ONE baseline by construction
   (an inline-flex box led by a glyph takes its baseline from the glyph and floats off the title's). */
.nl-assist-of { display: inline; margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.nl-assist-of > svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }

.nl-foot-line { font-size: 13px; color: var(--text-muted); flex: 1 1 220px; min-width: 0; line-height: 1.4; }

.nl-when-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* The campaign page. */

/* Settings, Newsletters (the approved sketches "3a" to "3c"). */
.nl-settings-page { max-width: 1180px; }

.nl-conn-k { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

.nl-smtp-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.nl-smtp-fields[hidden] { display: none; }
.nl-span-2 { grid-column: span 2; }
.nl-span-3 { grid-column: span 3; }
.nl-span-4 { grid-column: span 4; }
.nl-span-6 { grid-column: span 6; }
.nl-smtp-fields .nl-field > span { font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.nl-smtp-fields .nl-field input { height: 36px; }

@media (max-width: 720px) {
    
    
    
    
    .nl-smtp-fields { grid-template-columns: 1fr; }
    .nl-span-2, .nl-span-3, .nl-span-4, .nl-span-6 { grid-column: auto; }
}

/* ── v2 · a newsletter's page (the approved sketches "v2 · 1, 2, 3, 3b") ─────────────────────────
   ONE head card on the house grammar: the glyph bare in its colour, ONE strong name, the two lanes as
   the house segmented control with their figures, the gear and the ink verb - every control of the
   title line 32px tall (the row decides, never each control's padding). Its facts are marked units,
   its strip the stages joined by chevrons. The lists are read from their marks, and fold by THEIR own
   width into a phone's row: the name owns its line, the marks stand under it. */
.nlv-regions { display: flex; flex-direction: column; gap: 16px; }
.nlv-head { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 12px; }
/* A head with no strip under it (the track stands below) keeps its own padding at its foot. */
.nlv-head:not(:has(> .nlv-strip)) { padding-bottom: 18px; }
.nlv-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 12px; }
.nlv-glyph { display: inline-flex; flex: none; }
.nlv-glyph svg { width: 26px; height: 26px; }
.nlv-name { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlv-lanes { height: 32px; box-sizing: border-box; flex: none; }
.nlv-lanes .bf-segmented-btn { gap: 8px; padding: 0 12px; font-size: 13px; line-height: 1.3; }
.nlv-lane-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.nlv-lanes .bf-segmented-btn.is-active .nlv-lane-n { color: var(--text); }
.nlv-verbs { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nlv-verbs > .nlv-ibtn, .nlv-verbs > .nlv-btn { height: 32px; }
.nlv-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; box-sizing: border-box; padding: 0 12px;
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.nlv-btn:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); color: var(--text); text-decoration: none; }
.nlv-btn.nlv-ink { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 600; }
.nlv-btn.nlv-ink:hover { background: color-mix(in srgb, var(--text) 88%, var(--surface)); color: var(--surface); }
.nlv-btn svg { width: 14px; height: 14px; flex: none; }
.nlv-ibtn {
    width: 32px; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none;
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-muted); cursor: pointer; padding: 0;
}
.nlv-ibtn:hover { color: var(--text); }
.nlv-ibtn svg { width: 16px; height: 16px; }

.nlv-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.nlv-unit {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text); line-height: 1.3; white-space: nowrap; min-width: 0;
}
.nlv-unit > svg { width: 13px; height: 13px; flex: none; color: var(--text-muted); }
.nlv-unit > span { overflow: hidden; text-overflow: ellipsis; }
.nlv-unit b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nlv-unit-warn, .nlv-unit-warn > svg { color: var(--warning-text); }
.nlv-ok, .nlv-warn { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.nlv-ok { color: var(--success-fg, #15803d); }
.nlv-warn { color: var(--warning-text); }
.nlv-ok svg, .nlv-warn svg { width: 12px; height: 12px; }
.nlv-dim { color: var(--text-muted); }
.nlv-copy {
    width: 22px; height: 22px; padding: 0; border: 0; background: transparent; border-radius: 6px; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.nlv-copy:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nlv-copy svg { width: 13px; height: 13px; }

.nlv-strip { display: flex; align-items: stretch; gap: 8px; padding: 8px 12px; margin: 0 -20px; border-top: 1px solid var(--border); }
.nlv-tile {
    flex: 1 1 0; min-width: 0; padding: 10px 12px; border-radius: 10px; display: flex; flex-direction: column; gap: 6px;
    color: var(--text); text-decoration: none; box-sizing: border-box;
}
.nlv-tile:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); text-decoration: none; }
.nlv-tile.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlv-tile-w { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-tile-w svg { width: 15px; height: 15px; flex: none; }
.nlv-tile-f { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nlv-tile-f b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.nlv-tile-f span { font-size: 12px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-chev { display: flex; align-items: center; color: var(--border-strong); flex: none; }
.nlv-health { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 8px 0 16px; border-left: 1px solid var(--border); }
.nlv-bar { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.nlv-bar i { display: block; height: 100%; background: var(--warning-text); border-radius: 4px; }

/* A way's glyph (Settings, Newsletters' connection kinds) stands bare in ink: never on a plate. */
.nlv-way-g { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
.nlv-way-g svg { width: 20px; height: 20px; }
.nlv-code {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; box-sizing: border-box; padding: 0 5px 0 10px; max-width: 100%;
    border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.3;
}
.nlv-code > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* The lists. */
.nlv-list { overflow: hidden; }
.nlv-none { display: flex; align-items: center; gap: 10px; padding: 22px 20px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nlv-none svg { width: 16px; height: 16px; flex: none; }
.nlv-tbl { container-type: inline-size; container-name: nlv-tbl; }
.nlv-grid {
    display: grid; column-gap: 24px; align-items: center; padding: 0 20px; box-sizing: border-box;
    grid-template-columns: minmax(200px, 2.6fr) minmax(120px, 1.1fr) minmax(150px, 1.2fr) 76px 56px 56px minmax(120px, auto);
}
.nlv-thead { min-height: 40px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); line-height: 1.3; }
.nlv-row { min-height: 64px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-row:last-child { border-bottom: 0; }
.nlv-r { text-align: right; justify-self: end; }
.nlv-subj { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nlv-st { width: 20px; display: inline-flex; justify-content: center; flex: none; }
.nlv-st svg { width: 18px; height: 18px; }
.nlv-subj-w { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nlv-subj-w b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nlv-subj-w b a { color: inherit; text-decoration: none; }
.nlv-subj-w b a:hover { text-decoration: underline; }
.nlv-subj-w > span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nlv-subj-w > span:empty { display: none; }
.nlv-aud { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; white-space: nowrap; min-width: 0; }
.nlv-aud svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.nlv-aud > span { overflow: hidden; text-overflow: ellipsis; }
.nlv-aud em { font-style: normal; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nlv-when { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nlv-when b { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.nlv-when b.nlv-when-m { font-weight: 500; }
.nlv-when > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-pct { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.35; }
.nlv-pct.is-none { color: var(--border-strong); font-weight: 500; }
.nlv-verb { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.nlv-marks { display: none; }
.nlv-m {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; box-sizing: border-box; padding: 0 8px; border-radius: 8px;
    background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 12px; line-height: 1.3; white-space: nowrap;
}
.nlv-m svg { width: 12px; height: 12px; flex: none; }
.nlv-m b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nlv-av { display: inline-flex; width: 32px; height: 32px; }
.nlv-av .contact-avatar { width: 32px; height: 32px; font-size: 13px; }
.nlv-ps { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.nlv-ps svg { width: 14px; height: 14px; flex: none; }
.nlv-src { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.nlv-since { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; }

/* A campaign row needs about 990px of list for its columns (its tracks' minimums, the verb's Continue and its
   bin, gaps and inset, measured on an iPad): under that it
   is a phone's row - the state and the name on one line with the verb at its end, the marks under it. */
@container nlv-tbl (max-width: 1000px) {
    .nlv-tbl:not(.is-wait) > .nlv-thead { display: none; }
    .nlv-tbl:not(.is-wait) > .nlv-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .nlv-tbl:not(.is-wait) > .nlv-row > .nlv-subj { grid-column: 1; grid-row: 1; }
    .nlv-tbl:not(.is-wait) > .nlv-row > .nlv-verb { grid-column: 2; grid-row: 1; }
    .nlv-tbl:not(.is-wait) > .nlv-row > .nlv-aud, .nlv-tbl:not(.is-wait) > .nlv-row > .nlv-when, .nlv-tbl:not(.is-wait) > .nlv-row > .nlv-pct { display: none; }
    .nlv-tbl:not(.is-wait) > .nlv-row > .nlv-marks { display: flex; grid-column: 1 / -1; gap: 8px; flex-wrap: wrap; padding-left: 32px; }
}
/* What is in progress has four columns: it folds into the phone's row only under about 760px of list. */
@container nlv-tbl (max-width: 760px) {
    .nlv-tbl.is-wait > .nlv-thead { display: none; }
    .nlv-tbl.is-wait > .nlv-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .nlv-tbl.is-wait > .nlv-row > .nlv-subj { grid-column: 1; grid-row: 1; }
    .nlv-tbl.is-wait > .nlv-row > .nlv-verb { grid-column: 2; grid-row: 1; }
    .nlv-tbl.is-wait > .nlv-row > .nlv-aud, .nlv-tbl.is-wait > .nlv-row > .nlv-when { display: none; }
    .nlv-tbl.is-wait > .nlv-row > .nlv-marks { display: flex; grid-column: 1 / -1; gap: 8px; flex-wrap: wrap; padding-left: 32px; }
}
}
/* On a phone the head folds: the strip becomes a line of chips, never the big tiles. */
@media (max-width: 600px) {
    .nlv-head { padding: 14px 14px 0; }
    .nlv-title { gap: 10px; }
    .nlv-lanes { order: 3; flex: 1 1 100%; height: 40px; }
    .nlv-lanes .bf-segmented-btn { flex: 1; justify-content: center; }
    .nlv-verbs { order: 2; }
    .nlv-verbs > .nlv-ibtn, .nlv-verbs > .nlv-btn { height: 40px; }
    .nlv-verbs > .nlv-ibtn { width: 40px; }
    .nlv-strip { margin: 0 -14px; padding: 8px 14px 10px; flex-wrap: wrap; gap: 8px; }
    .nlv-tile { flex: none; flex-direction: row; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; }
    .nlv-tile-w span, .nlv-tile-f span, .nlv-tile .nlv-bar { display: none; }
    .nlv-tile-f b { font-size: 13px; }
    .nlv-chev { display: none; }
    .nlv-health { flex-direction: row; border-left: 0; padding: 0; }
    .nlv-health .nlv-unit > span { display: none; }
    .nlv-facts { display: none; }
}

/* ── v2 · the campaign assistant (the approved sketches "v2 · 4, 5, 6") ─────────────────────────── */
.documents-incassist-card.nl-assist { width: min(1080px, calc(100vw - 32px)); }
/* The studio takes the room it needs: three columns and the message at its true width. */
.documents-incassist-card.nl-assist.is-wide { width: min(1600px, calc(100vw - 32px)); }
.nlv-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); box-sizing: border-box; flex: none; }
:checked + .nlv-radio, .is-on > .nlv-radio, .nlv-answer.is-on .nlv-radio { border: 5px solid var(--text); }

/* Audience: two answers, the segments, the total. */
.nlv-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nlv-answer { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; box-sizing: border-box; min-width: 0; }
.nlv-answer > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nlv-answer:hover { border-color: var(--border-strong); }
.nlv-answer.is-on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nlv-answer.is-off { cursor: default; opacity: .6; }
.nlv-answer > input:focus-visible ~ .nlv-answer-top { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 6px; }
.nlv-answer-top { display: flex; align-items: center; gap: 12px; }
.nlv-answer-top svg { width: 20px; height: 20px; flex: none; }
.nlv-answer-top b { font-size: 15px; font-weight: 600; line-height: 1.3; flex: 1; min-width: 0; }
.nlv-fig { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nlv-fig b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.nlv-fig span { font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.nlv-segs { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: opacity .14s ease; }
.nlv-segs.is-off { opacity: .55; }
.nlv-segs-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); min-height: 52px; box-sizing: border-box; }
.nlv-segs-k { margin-left: auto; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nlv-find { display: inline-flex; align-items: center; gap: 8px; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; min-width: 220px; color: var(--text-muted); }
.nlv-find input { border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.3; flex: 1; min-width: 0; }
.nlv-find svg { width: 14px; height: 14px; flex: none; }
.nlv-seg { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) 140px 64px; column-gap: 16px; align-items: center; min-height: 48px; padding: 0 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); cursor: pointer; }
.nlv-seg:last-child { border-bottom: 0; }
.nlv-seg > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nlv-seg:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.nlv-seg.is-on { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nlv-seg-name { font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-seg-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; }
.nlv-meter { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.nlv-meter i { display: block; height: 100%; width: 0; background: var(--text); border-radius: 4px; transition: width .3s ease; }
.nlv-segs-rows { display: flex; flex-direction: column; }
.nlv-noseg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nlv-noseg > svg { width: 16px; height: 16px; flex: none; }
.nlv-noseg > span { flex: 1; min-width: 0; }
.nlv-total { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); min-height: 64px; box-sizing: border-box; }
/* The figure and its words on ONE line box: one baseline by construction. */
.nlv-total-fig { font-size: 14px; font-weight: 500; line-height: 1.3; }
.nlv-total-fig b { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nlv-total-marks { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.nlv-total-marks:empty { display: none; }
.nlv-total .nlv-unit { background: var(--surface); }
.nlv-unit.is-red > svg { color: var(--danger, #b42318); }
.nlv-unit.is-amber > svg { color: var(--warning-text); }

/* Content: the message, edited on itself. */
.nlv-compose { display: flex; min-height: 0; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.nlv-stage { position: relative; flex: 1; min-width: 0; background: color-mix(in srgb, var(--text) 5%, var(--surface)); padding: 16px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nlv-modes { align-self: flex-end; height: 32px; box-sizing: border-box; }
.nlv-modes .bf-segmented-btn { gap: 6px; padding: 0 12px; font-size: 13px; line-height: 1.3; }
.nlv-modes svg { width: 14px; height: 14px; }
.nlv-mail { width: 100%; max-width: 640px; background: #fff; color: #0f172a; border-radius: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); padding: 28px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.nlv-blocks { display: flex; flex-direction: column; gap: 4px; }
.nlv-blocks-empty { padding: 28px 10px; text-align: center; font-size: 13px; color: #556274; border: 1px dashed #cbd5e1; border-radius: 8px; line-height: 1.4; }
.nlv-blk { position: relative; padding: 8px 10px; border-radius: 8px; border: 1px dashed transparent; display: flex; flex-direction: column; gap: 8px; }
.nlv-blk:hover { border-color: #cbd5e1; }
.nlv-blk.is-sel { border: 1.5px solid #0f172a; }
.nlv-tools { position: absolute; top: -40px; left: 0; z-index: 2; display: none; gap: 2px; padding: 3px; background: #0f172a; border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); }
.nlv-blk.is-sel > .nlv-tools { display: flex; }
.nlv-tool { width: 28px; height: 28px; border: 0; background: transparent; color: #fff; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
.nlv-tool:hover { background: rgba(255, 255, 255, .14); }
.nlv-tools-sep { width: 1px; background: rgba(255, 255, 255, .2); margin: 4px 2px; }
.nlv-ed { outline: 0; min-height: 1.4em; }
.nlv-ed:empty::before { content: attr(data-empty); color: #94a3b8; }
.nlv-ed-h { font-size: 24px; font-weight: 700; line-height: 1.3; }
.nlv-ed-t { font-size: 15px; line-height: 1.6; color: #334155; }
.nlv-ed-t p { margin: 0 0 12px; }
.nlv-ed-t p:last-child { margin-bottom: 0; }
.nlv-ed-t ul, .nlv-ed-t ol { margin: 0 0 12px; padding-left: 22px; }
.nlv-ed-t a { color: #0f172a; }
.nlv-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: rgba(0, 96, 223, .08); color: #0047a8; font-size: 12px; font-weight: 500; line-height: 1.3; vertical-align: 1px; white-space: nowrap; }
.nlv-cta-wrap { display: flex; }
.nlv-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 8px; background: #0f172a; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.3; }
.nlv-img { max-width: 100%; border-radius: 6px; align-self: flex-start; }
.nlv-img-pick { display: flex; align-items: center; justify-content: center; gap: 8px; height: 140px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; color: #475569; font: inherit; font-size: 13px; cursor: pointer; line-height: 1.3; }
.nlv-hr { width: 100%; border: 0; border-top: 1px solid #e2e8f0; margin: 8px 0; }
.nlv-space { display: flex; align-items: center; justify-content: center; border: 1px dashed transparent; }
.nlv-space-s { min-height: 16px; } .nlv-space-m { min-height: 32px; } .nlv-space-l { min-height: 56px; }
.nlv-space-pick { display: none; height: 28px; }
.nlv-blk.is-sel .nlv-space-pick { display: inline-flex; }
.nlv-blk-field { display: flex; align-items: center; gap: 8px; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.nlv-blk-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #0f172a; font: inherit; font-size: 13px; line-height: 1.3; }
.nlv-blk-field-g { display: inline-flex; color: #556274; }
.nlv-blk:not(.is-sel) > .nlv-blk-field { display: none; }
.nlv-linkask { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; align-items: center; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); }
.nlv-linkask .nlv-blk-field { width: 320px; }
.nlv-render { width: 100%; display: flex; justify-content: center; }
.nlv-frame { width: 100%; max-width: 640px; min-height: 160px; border: 0; border-radius: 6px; background: #fff; }
.nlv-side { width: 264px; flex: none; border-left: 1px solid var(--border); padding: 18px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; background: var(--surface); }
.nlv-side-sec { display: flex; flex-direction: column; gap: 10px; }
.nlv-side h5 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nlv-pal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nlv-pal button { height: 64px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; line-height: 1.3; }
.nlv-pal button:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.nlv-pal svg { width: 18px; height: 18px; }
.nlv-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.nlv-fld { display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.nlv-fld:hover { border-color: var(--border-strong); }

/* Recap: the journey, the run, the month. */
.nlv-recap { display: flex; flex-direction: column; gap: 20px; }
.nlv-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.nlv-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 23px; height: 2px; background: var(--border); }
.nlv-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 8px; text-align: center; text-decoration: none; color: var(--text); min-width: 0; }
.nlv-node:hover { color: var(--text); text-decoration: none; }
.nlv-node:hover .nlv-ring { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.nlv-ring { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--text); background: var(--surface); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.nlv-ring svg { width: 20px; height: 20px; }
.nlv-node-k { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nlv-node b { font-weight: 600; line-height: 1.35; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nlv-node-s { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); line-height: 1.35; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlv-node-s svg { width: 12px; height: 12px; flex: none; }
.nlv-dns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.nlv-d { display: inline-flex; align-items: center; gap: 4px; height: 24px; box-sizing: border-box; padding: 0 7px; border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; }
.nlv-d svg { width: 11px; height: 11px; }
.nlv-block-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning-text) 40%, var(--border)); border-radius: 12px; font-size: 13px; line-height: 1.4; }
.nlv-block-row > svg { width: 16px; height: 16px; color: var(--warning-text); flex: none; }
.nlv-block-row > span { flex: 1; min-width: 0; }
.nlv-timeline { border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; }
.nlv-tl { display: grid; grid-template-columns: 64px 20px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 44px; padding: 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-tl:last-child { border-bottom: 0; }
.nlv-tl-t { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.nlv-tl > span:nth-child(2) { display: inline-flex; }
.nlv-tl svg { width: 16px; height: 16px; }
.nlv-tl-d { font-size: 13px; line-height: 1.4; }
.nlv-allow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); }
.nlv-allow-w { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; }
.nlv-allow-w svg { width: 15px; height: 15px; color: var(--text-muted); }
.nlv-meter-2 { display: flex; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.nlv-meter-2 i { display: block; height: 100%; background: color-mix(in srgb, var(--text) 35%, transparent); }
.nlv-meter-2 i.is-this { background: var(--text); }
.nlv-allow.is-over .nlv-meter-2 i.is-this { background: var(--warning-text); }
.nlv-allow-f { font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
.documents-incassist-foot [data-nl-commit] { display: inline-flex; align-items: center; gap: 6px; }
.documents-incassist-foot [data-nl-commit] svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
    .nlv-answers { grid-template-columns: 1fr; }
    .nlv-compose { flex-direction: column; }
    .nlv-side { width: auto; border-left: 0; border-top: 1px solid var(--border); }
    .nlv-track { grid-template-columns: 1fr 1fr; row-gap: 20px; }
    .nlv-track::before { display: none; }
    .nlv-seg { grid-template-columns: 18px minmax(0, 1fr) 64px; }
    .nlv-seg .nlv-meter { display: none; }
}

/* ── v2 · a campaign's report (the approved sketch "v2 · 7") ────────────────────────────────────── */
.nlv-crumb { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; margin-left: -8px; border-radius: 8px; font-size: 13px; color: var(--text-muted); text-decoration: none; line-height: 1.3; }
.nlv-crumb:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); text-decoration: none; }
.nlv-crumb .nlv-glyph svg { width: 16px; height: 16px; }
.nlv-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.nlv-state svg { width: 16px; height: 16px; }
.nlv-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 2px 0; }
.nlv-progress-f { font-size: 13px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; }
.nlv-progress-f b { font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.nlv-progress-hold { font-size: 13px; line-height: 1.3; }
.nlv-bar-lg { height: 8px; border-radius: 4px; }
.nlv-bar-lg i { transition: width .4s ease; }
.nlv-bar-ink i { background: color-mix(in srgb, var(--text) 45%, transparent); }
.nlv-bar-green i { background: var(--success-fg, #15803d); }
.nlv-bar-blue i { background: #0060df; }
[data-theme="dark"] .nlv-bar-blue i { background: #6aa8ff; }
.nlv-tile.is-fact:hover { background: transparent; }
a.nlv-unit-door { text-decoration: none; color: var(--text); }
a.nlv-unit-door:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
a.nlv-unit-door.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); border-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlv-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nlv-cols > :only-child { grid-column: 1 / -1; }
.nlv-card-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nlv-card-head h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.nlv-card-head .nlv-dim { font-size: 13px; font-variant-numeric: tabular-nums; }
.nlv-pr { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(120px, auto) minmax(72px, auto); column-gap: 14px; align-items: center; min-height: 56px; padding: 8px 18px; box-sizing: border-box; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-pr:last-child { border-bottom: 0; }
.nlv-pr .nlv-since { text-align: right; }
.nlv-lk { display: grid; grid-template-columns: minmax(0, 1fr) 120px 48px; column-gap: 14px; align-items: center; min-height: 52px; padding: 8px 18px; box-sizing: border-box; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-lk:last-child { border-bottom: 0; }
.nlv-lk .nlv-bar { height: 8px; border-radius: 4px; }
.nlv-lk .nlv-pct { text-align: right; }
.nlv-message-card { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; box-sizing: border-box; }
.nlv-message-stage { overflow: auto; background: color-mix(in srgb, var(--text) 5%, var(--surface)); border-radius: 12px; padding: 16px; display: flex; justify-content: center; }
@media (max-width: 900px) {
    .nlv-cols { grid-template-columns: 1fr; }
    .nlv-funnel { flex-wrap: wrap; }
    .nlv-funnel .nlv-health { flex-direction: row; flex-wrap: wrap; border-left: 0; padding: 0; flex-basis: 100%; }
    .nlv-progress { grid-template-columns: 1fr; row-gap: 8px; }
}
@media (max-width: 600px) {
    .nlv-pr { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 6px; }
    .nlv-pr .nlv-since { display: none; }
}

/* ── v2 · Settings, Newsletters (the approved sketch "v2 · 8") ──────────────────────────────────── */
.nlv-set-frame { display: flex; gap: 16px; align-items: flex-start; }
.nlv-chaps { width: 248px; flex: none; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nlv-chap { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--text-muted); text-decoration: none; font-size: 13px; line-height: 1.3; }
.nlv-chap:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); text-decoration: none; }
.nlv-chap.is-on { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlv-chap > svg { width: 16px; height: 16px; flex: none; }
.nlv-chap-r { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nlv-chap-r svg { width: 13px; height: 13px; }
.nlv-chap-r.nlv-dim { font-weight: 500; }
.nlv-set-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nlv-set-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 32px; }
.nlv-set-bar h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; margin-right: auto; }
.nlv-set-add { display: flex; gap: 8px; align-items: center; }
.nlv-set-add .nlv-blk-field { width: 260px; }
.nlv-conn { overflow: hidden; }
.nlv-conn-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.nlv-conn-top > .nlv-subj-w { flex: 1 1 220px; }
.nlv-conn-top > .nlv-subj-w b { font-size: 15px; }
.nlv-conn-units { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nlv-conn-verbs { display: flex; gap: 8px; align-items: center; }
.nlv-senders { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--text) 1.5%, var(--surface)); }
.nlv-sender { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; column-gap: 14px; row-gap: 10px; align-items: center; min-height: 60px; padding: 10px 18px 10px 32px; box-sizing: border-box; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-sender-verbs { display: flex; gap: 8px; align-items: center; }
.nlv-sender-verbs .bf-select { min-width: 200px; }
.nlv-fix { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 3%, transparent); }
.nlv-fix-w { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; margin-right: auto; }
.nlv-fix-w svg { width: 14px; height: 14px; flex: none; }
.nlv-fix-field { width: 200px; background: var(--surface); }
.nlv-sender-add { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; column-gap: 10px; align-items: center; padding: 12px 18px 12px 32px; }
.nlv-av-add { width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); box-sizing: border-box; }
.nlv-av-add svg { width: 14px; height: 14px; }
.nlv-sender-add .nlv-blk-field, .nlv-set-row .nlv-blk-field, .nlv-set-add .nlv-blk-field { border-color: var(--border-strong); background: var(--surface); }
.nlv-sender-add .nlv-blk-field input, .nlv-set-row .nlv-blk-field input, .nlv-set-add .nlv-blk-field input { color: var(--text); }
.nlv-set-card { padding: 4px 18px; }
.nlv-set-row { display: grid; grid-template-columns: 28px 180px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 60px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-set-row:last-child { border-bottom: 0; }
.nlv-set-g { display: inline-flex; color: var(--text-muted); }
.nlv-set-g svg { width: 18px; height: 18px; }
.nlv-set-l { font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.nlv-set-row .nlv-blk-field { height: 36px; }
.nlv-answers-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nlv-answer-line { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nlv-supp { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(100px, auto) minmax(110px, auto); column-gap: 20px; align-items: center; min-height: 52px; padding: 8px 18px; box-sizing: border-box; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-supp:last-child { border-bottom: 0; }
@media (max-width: 900px) {
    .nlv-set-frame { flex-direction: column; align-items: stretch; }
    .nlv-chaps { width: auto; flex-direction: row; overflow-x: auto; }
    .nlv-chap { flex: none; }
    .nlv-answers-3 { grid-template-columns: 1fr; }
    .nlv-sender { grid-template-columns: 32px minmax(0, 1fr) auto; padding-left: 18px; }
    .nlv-sender .nlv-dns { grid-column: 2 / -1; justify-content: flex-start; }
    .nlv-sender-add { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; padding-left: 18px; }
    .nlv-sender-add > :not(.nlv-av) { grid-column: 2; }
    .nlv-set-row { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; padding: 10px 0; }
    .nlv-set-row .nlv-blk-field { grid-column: 1 / -1; }
    .nlv-supp { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
}

/* The content step fills its window: the window takes a fixed height and the stage is its ONE
   scroller; full screen makes the window the viewport (owner, 2026-10-28: "Editor must be able to be
   enlarged to the space size"). */
/* Safari counts its own bars in vh: the window is sized from the screen it really has (dvh), never past it. */
.documents-incassist-card.nl-assist.is-wide { height: min(86vh, calc(100vh - 32px)); height: min(86dvh, calc(100dvh - 32px)); }
.nlv-content-step { overflow: hidden; }
.nlv-content-step > .nlv-compose { flex: 1 1 auto; min-height: 0; }
.nlv-stage { overflow-y: auto; min-height: 0; }
.nlv-side { min-height: 0; }
.nlv-stage-bar { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nlv-full-off { display: none; }
.is-full .nlv-full-on { display: none; }
.is-full .nlv-full-off { display: inline-flex; }
.nlv-ibtn > span { display: inline-flex; }
.documents-incassist-card.nl-assist.is-full {
    top: 0; left: 0; transform: none; width: 100vw; max-width: none; height: 100vh; max-height: none;
    border-radius: 0; animation: none; padding: 16px 24px 18px;
}
.documents-incassist-card.nl-assist.is-full .nlv-compose { border-radius: 14px; }
.documents-incassist-foot .nlv-btn { height: 32px; }
.nlv-ed-t.is-blank:not(:empty)::before { content: attr(data-empty); color: #94a3b8; position: absolute; pointer-events: none; }
.nlv-ed-t { position: relative; }
/* A title and the state beside it stand on ONE baseline: the state is inline text with its glyph nudged
   onto the line, never an inline-flex box led by a glyph. */
.nlv-title > .nlv-name, .nlv-title > .nlv-state { align-self: baseline; }
.nlv-title > .nlv-state { display: inline-block; white-space: nowrap; }
.nlv-title > .nlv-state > svg { vertical-align: -3px; margin-right: 6px; }

/* The editor's tool row: the switch of how the message is seen, then Full screen at the row's end -
   glyph and word, the row deciding ONE height for both. */
.nlv-stage-bar > .bf-segmented, .nlv-stage-bar > .nlv-full { height: 32px; box-sizing: border-box; }
.nlv-stage-bar { container-type: inline-size; }
.nlv-stage-bar > .bf-segmented, .nlv-stage-bar > .nlv-full { flex: none; }
/* A row too narrow for both folds Full screen to its glyph (the word rides its tooltip and its name);
   the view switch is never squeezed. */
@container (max-width: 580px) {
    .nlv-full { width: 32px; padding: 0; justify-content: center; }
    .nlv-full .nlv-full-word { display: none; }
}
.nlv-full > span { display: inline-flex; align-items: center; gap: 6px; }
.nlv-full > .nlv-full-off { display: none; }
.nlv-full svg { width: 14px; height: 14px; }
.is-full .nlv-full > .nlv-full-on { display: none; }
.is-full .nlv-full > .nlv-full-off { display: inline-flex; }

/* ══ The AUDIENCE (owner, 2026-11-01: "newsletter -> Campaigns, newsletter -> Audience"): its sections on a list beside the
   content, the segments, the builder and the concepts before their first. ══════════════════════════════════════════════ */
.nl5-aud { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.nl5-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.nl5-nav-i { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.3; text-decoration: none; }
.nl5-nav-i:hover { background: color-mix(in srgb, var(--text) 4%, transparent); text-decoration: none; color: var(--text); }
.nl5-nav-i.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); font-weight: 600; }
.nl5-nav-i > svg { width: 16px; height: 16px; color: var(--text-muted); }
.nl5-nav-i > b { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nl5-nav-st { display: inline-flex; color: var(--text-muted); }
.nl5-nav-st svg { width: 14px; height: 14px; }
.nl5-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
    .nl5-aud { grid-template-columns: minmax(0, 1fr); }
    .nl5-nav { flex-direction: row; flex-wrap: wrap; }
    .nl5-nav-i { flex: 1 1 140px; }
}

/* A concept before its first (owner, 2026-11-01: "describe to the end user the concept, clearly, with few words"; "better
   use space... not tons of UI elements"): two columns - a title saying the benefit, ONE line, the verbs - and ONE picture
   made of the app's own pieces. On a narrow card they stack. */
.nl5-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); align-items: center; gap: 32px; padding: 32px; container-type: inline-size; }
.nl5-hero-w { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.nl5-hero-t { margin: 0; font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nl5-hero-l { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; max-width: 46ch; }
.nl5-hero-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nl5-hero-acts .nlv-btn { height: 36px; }
.nl5-hero-starts { display: flex; flex-wrap: wrap; gap: 8px; }
.nl5-start { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.3; cursor: pointer; }
.nl5-start:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.nl5-start svg { width: 14px; height: 14px; color: var(--text-muted); }
.nl5-hero-art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 160px; padding: 24px; border-radius: 14px; background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
@media (max-width: 900px) { .nl5-hero { grid-template-columns: minmax(0, 1fr); padding: 24px; } }
/* Faces of which a rule keeps a part: the first stand in their colour, the others fade. */
.nl5-faces { display: inline-flex; align-items: center; }
.nl5-face { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); overflow: hidden; }
.nl5-face + .nl5-face { margin-left: -8px; }
.nl5-face > *, .nl5-face .bf-avatar-letter, .nl5-face img { width: 36px !important; height: 36px !important; font-size: 14px; }
.nl5-face.is-out { opacity: .32; filter: grayscale(1); }
.nl5-face.is-ghost { background: color-mix(in srgb, var(--text) 12%, var(--surface)); }
.nl5-faces.is-mini .nl5-face { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--surface); }
.nl5-faces.is-mini .nl5-face + .nl5-face { margin-left: -6px; }
.nl5-rule { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.3; }
.nl5-rule svg { width: 14px; height: 14px; color: var(--text-muted); }
.nl5-art-fig { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.nl5-art-fig > b { font-size: 20px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
/* Miniatures: an inbox row, three subscriber rows, a sign-up page. */
.nl5-mini-mail { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; width: min(360px, 100%); padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-sizing: border-box; }
.nl5-mini-av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: currentColor; font-size: 14px; font-weight: 600; }
.nl5-mini-av > span { color: #fff; }
.nl5-mini-mw { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nl5-mini-mw > b { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.nl5-mini-mw > i { display: block; height: 8px; width: 70%; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, var(--surface)); }
.nl5-mini-marks { display: inline-flex; gap: 16px; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl5-mini-marks > span { display: inline-flex; align-items: center; gap: 6px; }
.nl5-mini-marks svg { width: 14px; height: 14px; }
.nl5-mini-list { display: flex; flex-direction: column; gap: 8px; width: min(300px, 100%); }
.nl5-mini-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.nl5-mini-row .nl5-face { width: 28px; height: 28px; box-shadow: none; }
.nl5-mini-row > i { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, var(--surface)); }
.nl5-mini-src { display: inline-flex; color: var(--text-muted); }
.nl5-mini-src svg { width: 16px; height: 16px; }
.nl5-mini-page { display: flex; flex-direction: column; gap: 10px; width: min(260px, 100%); padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-sizing: border-box; }
.nl5-mini-head { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); line-height: 1.3; }
.nl5-mini-head svg { width: 16px; height: 16px; }
.nl5-mini-field { display: block; height: 30px; border: 1px solid var(--border-strong); border-radius: 8px; }
.nl5-mini-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; border-radius: 8px; background: var(--text); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 1.3; }
/* The sign-up page's address and facts. */
.nl5-addr { margin-top: 4px; }
.nl5-addr > svg { width: 14px; height: 14px; color: var(--text-muted); }
.nl5-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.nl5-fact { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); line-height: 1.3; text-decoration: none; }
.nl5-fact svg { width: 14px; height: 14px; color: var(--text-muted); }
.nl5-fact.is-door:hover { text-decoration: underline; color: var(--text); }
.nl5-fact > b { font-variant-numeric: tabular-nums; }

/* The segments' list: a row is its glyph, its name and its rule in one line, who it keeps, its last campaign, its verbs. */
.nl5-seg-head, .nl5-seg-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 140px minmax(0, 220px) 80px; align-items: center; column-gap: 24px; padding: 0 20px; box-sizing: border-box; }
.nl5-seg-head { min-height: 40px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); line-height: 1.3; }
.nl5-seg-row { min-height: 64px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nl5-seg-row:last-child { border-bottom: 0; }
.nl5-seg-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.nl5-seg-g { display: inline-flex; color: var(--text-muted); }
.nl5-seg-g svg { width: 18px; height: 18px; }
.nl5-seg-w { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl5-seg-name { align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
button.nl5-seg-name:hover { text-decoration: underline; }
.nl5-seg-rule { font-size: 12px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl5-seg-n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.3; }
.nl5-seg-n > b { font-size: 15px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.nl5-seg-n > span { font-size: 12px; color: var(--text-muted); }
/* A figure keeps 40px from the words after it: the column steps in, its head with it. */
.nl5-seg-head > :nth-child(4) { padding-left: 16px; }
.nl5-seg-last { padding-left: 16px; }
.nl5-seg-last { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nl5-seg-last > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl5-seg-last svg { width: 13px; height: 13px; flex: none; }
.nl5-seg-acts { display: inline-flex; justify-content: flex-end; gap: 8px; }
@container nlv-tbl (max-width: 720px) { .nl5-seg-head { display: none; } }
@media (max-width: 760px) {
    .nl5-seg-head { display: none; }
    .nl5-seg-row { grid-template-columns: 20px minmax(0, 1fr) auto 80px; padding: 8px 16px; }
    .nl5-seg-last { display: none; }
}

/* The campaign step's segments: a box, the segment's glyph and name, its meter and figure; before the first, one line. */
.nl5-step-seg { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.nl5-step-seg > svg { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.nl5-step-seg > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-segs-rows .nlv-seg { position: relative; }
.nlv-segs-rows .nlv-seg > input[data-nl-segpick] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nlv-segs-rows .nlv-seg > input[data-nl-segpick]:checked + .nl3-box { background: var(--text); border-color: var(--text); color: var(--surface); }
.nlv-segs-rows .nlv-seg > input[data-nl-segpick]:focus-visible + .nl3-box { outline: 2px solid var(--text); outline-offset: 2px; }
.nlv-segs[hidden] { display: none; }
.nl5-step-none { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nl5-step-none[hidden] { display: none; }

/* THE segment builder: a window stacked over the page or the campaign. */
.documents-incassist-card.nl5-sb { width: min(780px, calc(100vw - 32px)); }
.nl5-sb .documents-incassist-head h3 { display: inline-flex; align-items: center; gap: 10px; line-height: 1.4; }
.nl5-sb-mark { display: inline-flex; color: var(--text-muted); }
.nl5-sb-mark svg { width: 18px; height: 18px; }
.nl5-sb-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.nl5-sb-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 16px; overflow-y: auto; min-height: 0; }
.nl5-sb-match { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nl5-sb-k { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.nl5-sb-any { height: 32px; }
.nl5-sb-rules { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; }
.nl5-sb-rules[hidden] { display: none; }
.nl5-sb-row { display: grid; grid-template-columns: minmax(150px, 190px) minmax(150px, 220px) minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding: 10px 12px; }
.nl5-sb-row + .nl5-sb-row { border-top: 1px solid var(--border); }
.nl5-sb-field { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; min-width: 0; }
.nl5-sb-field > span { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl5-sb-field > svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
/* ONE height for a condition's controls: its field, its operator and its count. */
.nl5-sb-row .bf-select-trigger, .nl5-sb-row .bf-select-btn, .nl5-sb-row select { height: 34px; min-height: 34px; width: 100%; box-sizing: border-box; }
.nl5-sb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.nl5-sb-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, var(--surface)); font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.3; max-width: 100%; }
.nl5-sb-chip > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl5-sb-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; }
.nl5-sb-chip-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.nl5-sb-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 30px; padding: 0 8px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.3; cursor: pointer; }
.nl5-sb-more:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.nl5-sb-rm { width: 32px; height: 32px; }
.nl5-sb-add-row { display: flex; }
.nl5-sb-out { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.nl5-sb-out[hidden] { display: none; }
.nl5-sb-out-faces, .nl5-sb-faces { display: inline-flex; align-items: center; flex: none; align-self: center; }
.nl5-sb-face { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); overflow: hidden; }
.nl5-sb-face + .nl5-sb-face { margin-left: -6px; }
.nl5-sb-face > *, .nl5-sb-face .bf-avatar-letter, .nl5-sb-face img { width: 26px !important; height: 26px !important; font-size: 11px; }
.nl5-sb-out-w { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.4; }
.nl5-sb-out .nlv-btn { flex: none; height: 32px; }
.nl5-sb-name { display: flex; align-items: center; gap: 14px; }
.nl5-sb-name > input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; box-sizing: border-box; }
.nl5-sb-name > input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
.nl5-sb-foot { flex-wrap: wrap; row-gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.nl5-sb-fig { display: inline-flex; align-items: baseline; gap: 10px; flex: 1 1 260px; min-width: 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nl5-sb-fig > b { font-size: 18px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.nl5-sb-fig > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl5-sb-foot .nlv-btn[disabled] { opacity: .45; cursor: default; }
.nl5-sb-del { margin-right: auto; }
/* Its popovers: the condition picker (four groups side by side, a find over them) and a field's values. */
.nl5-sb-pop { position: absolute; z-index: 12; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(15, 23, 42, .16); box-sizing: border-box; }
.nl5-sb-pop.is-picker { width: min(640px, calc(100% - 24px)); }
.nl5-sb-pop.is-values { width: min(320px, calc(100% - 24px)); }
.nl5-sb-find { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-muted); }
.nl5-sb-find > input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; outline: none; line-height: 1.4; }
.nl5-sb-grps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .nl5-sb-grps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nl5-sb-row { grid-template-columns: minmax(0, 1fr) 32px; } .nl5-sb-row > :nth-child(2), .nl5-sb-row > :nth-child(3) { grid-column: 1 / -1; } }
.nl5-sb-grp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nl5-sb-grp[hidden] { display: none; }
.nl5-sb-grp-h { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nl5-sb-grp-h svg { flex: none; }
.nl5-sb-pick { display: flex; align-items: center; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; line-height: 1.3; cursor: pointer; }
.nl5-sb-pick:hover, .nl5-sb-pick:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); outline: none; }
.nl5-sb-pick[hidden] { display: none; }
.nl5-sb-vals { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.nl5-sb-val { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; line-height: 1.3; cursor: pointer; }
.nl5-sb-val:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nl5-sb-val[hidden] { display: none; }
.nl5-sb-val[aria-pressed="true"] .nl3-box { background: var(--text); border-color: var(--text); color: var(--surface); }
.nl5-sb-val-w { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl5-sb-val-n { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nl5-sb-none { padding: 10px 8px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
/* The setup card without its hero column (before the first campaign, the campaigns' own card holds those verbs). */
.nl3-setup.is-nohero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ══ The SEQUENCES (owner, 2026-11-01, suggestion 1, the approved sketch "Newsletter · Séquence de bienvenue"): the head
   card - who is in it now, its state - then the journey of cards on ONE guide, the waits standing on it, the exit. ══ */
.nl6-pickseq { align-self: flex-start; }
.nl6-seq { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.nl6-shead { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; column-gap: 16px; padding: 16px 20px; }
.nl6-plate { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, var(--surface)); color: var(--text); }
.nl6-plate svg { width: 20px; height: 20px; }
.nl6-sname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nl6-sname-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nl6-sname-row > b { min-width: 0; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl6-sname > span:last-child { font-size: 12px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl6-sname-pen { width: 26px; height: 26px; border-color: transparent; }
.nl6-sname-pen svg { width: 14px; height: 14px; }
.nl6-rename { width: min(320px, 100%); height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; box-sizing: border-box; }
.nl6-now { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.nl6-now > b { font-size: 16px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.nl6-head-acts { display: inline-flex; align-items: center; gap: 8px; }
.nl6-state { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; cursor: pointer; }
.nl6-state.is-read { cursor: default; }
.nl6-state-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nl-switch.is-on { background: var(--text); border-color: var(--text); }
.nl-switch.is-on::after { transform: translateX(14px); }
.bf-assist-choice-input:checked ~ .bf-assist-choice-end .nl-switch { background: var(--text); border-color: var(--text); }
.bf-assist-choice-input:checked ~ .bf-assist-choice-end .nl-switch::after { transform: translateX(14px); }

.nl6-journey { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nl6-journey::before { content: ""; position: absolute; left: 39px; top: 24px; bottom: 24px; width: 1px; background: var(--border-strong); }
.nl6-node { position: relative; }
.nl6-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 14px 16px 14px 20px; }
.nl6-card.is-mail { grid-template-columns: 40px 56px minmax(0, 1fr) auto auto; }
.nl6-w { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nl6-k { font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nl6-t { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl6-t.is-todo { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--warning-text); }
.nl6-t.is-todo svg { width: 14px; height: 14px; flex: none; }
.nl6-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nl6-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, var(--surface)); font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.3; }
.nl6-chip[hidden] { display: none; }
.nl6-chip svg { width: 13px; height: 13px; color: var(--text-muted); flex: none; }
.nl6-chip.is-cond { background: transparent; border: 1px solid var(--border); }
.nl6-thumb { display: flex; flex-direction: column; gap: 8px; width: 56px; height: 76px; padding: 8px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.nl6-thumb > i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, var(--surface)); }
.nl6-thumb > i.is-h { height: 6px; width: 70%; background: color-mix(in srgb, var(--text) 30%, var(--surface)); }
.nl6-thumb > i.is-s { width: 60%; }
.nl6-thumb > i.is-btn { height: 9px; width: 50%; margin-top: auto; border-radius: 2px; background: var(--text); }
.nl6-figs { display: inline-flex; align-items: center; gap: 16px; }
.nl6-fig { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.3; }
.nl6-fig svg { width: 14px; height: 14px; color: var(--text-muted); }
.nl6-wait { position: relative; display: flex; align-items: center; gap: 12px; padding-left: 20px; min-height: 32px; }
.nl6-wchip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg, var(--surface)); font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nl6-wchip svg { width: 13px; height: 13px; color: var(--text-muted); }
.nl6-waiting { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl6-faces { display: inline-flex; align-items: center; }
.nl6-faces > .nl6-f, .nl6-faces > .nl6-f .bf-avatar-letter, .nl6-faces > .nl6-f img { width: 24px !important; height: 24px !important; font-size: 10px !important; }
.nl6-faces > .nl6-f { box-shadow: 0 0 0 2px var(--surface); }
.nl6-faces > .nl6-f + .nl6-f { margin-left: -6px; }
.nl6-add { display: flex; padding-left: 20px; }
.nl6-add .nlv-btn { position: relative; z-index: 1; border-style: dashed; background: var(--bg, var(--surface)); }
.nl6-card.is-exit .nl6-chip { background: transparent; padding: 0; height: auto; color: var(--text-muted); }
.nl6-lock { display: inline-flex; color: var(--text-muted); }
.nl6-lock svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
    .nl6-shead { grid-template-columns: 40px minmax(0, 1fr); row-gap: 12px; }
    .nl6-shead > .nl6-now, .nl6-shead > .nl6-head-acts { grid-column: 2; justify-self: start; }
    .nl6-card.is-mail { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .nl6-card.is-mail > .nl6-thumb, .nl6-card.is-mail > .nl6-figs, .nl6-card.is-mail > span:empty { display: none; }
}
@media (max-width: 600px) {
    /* A narrow window: the foot's line stands on its own row above the verbs; the message card loses its miniature. */
    .nl6-win .documents-incassist-foot { flex-wrap: wrap; row-gap: 10px; }
    .nl6-win .documents-incassist-foot > .nl-foot-line { flex: 1 0 100%; order: -1; }
    .nl6-msg { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .nl6-msg > .nl6-thumb { display: none; }
}

/* The empty state's picture: a person arriving, then the e-mails on their days. */
.nl6-art { display: flex; flex-direction: column; gap: 10px; width: min(250px, 100%); }
.nl6-art-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; }
.nl6-art-when { font-size: 11px; font-weight: 600; color: var(--text-muted); text-align: right; line-height: 1.3; white-space: nowrap; }
.nl6-art-mail { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.nl6-art-mail svg { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.nl6-art-mail > i { display: block; flex: 1 1 auto; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 12%, var(--surface)); }
.nl6-art-who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); line-height: 1.3; }
.nl6-art-face { width: 28px; height: 28px; box-shadow: none; }

/* The windows: rows that answer, a wait set in place, the message's card, the start's recap. */
.nl6-win .documents-incassist-card { width: min(640px, calc(100vw - 32px)); }
.nl6-step { display: flex; flex-direction: column; gap: 12px; padding: 2px; }
.nl6-step [hidden] { display: none; }
.nl6-q { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.nl6-when { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.3; }
.nl6-num { width: 64px; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; box-sizing: border-box; }
.nl6-num:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
.nl6-when .bf-select-btn, .nl6-catch-end .bf-select-btn { height: 34px; min-height: 34px; min-width: 120px; box-sizing: border-box; }
.nl6-msg { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; }
.nl6-msg .nl6-t.is-todo { color: var(--warning-text); }
.nl6-recap { display: flex; flex-direction: column; padding: 4px 16px; }
.nl6-rline { display: grid; grid-template-columns: 20px 120px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.35; }
.nl6-rline:last-child { border-bottom: 0; }
.nl6-rline > svg { width: 15px; height: 15px; color: var(--text-muted); }
.nl6-rk { color: var(--text-muted); }
.nl6-rv { color: var(--text); font-weight: 500; min-width: 0; padding: 8px 0; }
.nl6-catch-end { gap: 12px; }
.nl6-refused { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--warning-text); line-height: 1.4; }
.nl6-refused svg { width: 15px; height: 15px; flex: none; }
.nl6-win [data-nls-mail-remove] { margin-right: auto; }

/* Where a subscriber stands in a sequence, beside their name: its glyph, a track of its e-mails, when the next leaves. */
.nl3-pn.nl6-pn > .nl6-inseq { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: middle; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text-muted); }
.nl6-inseq svg { width: 13px; height: 13px; }
.nl6-track { display: inline-flex; align-items: center; gap: 3px; }
.nl6-track i { display: block; width: 12px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.nl6-track i.is-done { background: color-mix(in srgb, var(--text) 55%, transparent); }
.nl6-track i.is-next { background: var(--text); }
/* The composer opened on a sequence's e-mail: its message alone, no rail of steps. */
.nl-assist.is-seqmail .documents-incassist-rail { display: none; }


/* ══ v3 (the approved sketch "Newsletters v3"): creating, adding people, deleting ═══════════════════ */

/* A space with no newsletter: how a newsletter works as three marks, one line, ONE door. */
.nl3-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 24px; text-align: center; }
.nl3-flow { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; padding-bottom: 6px; }
.nl3-flow-step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; color: var(--text-muted); }
.nl3-flow-step svg { width: 34px; height: 34px; }
.nl3-flow-step b { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nl3-flow-chev { display: flex; color: var(--border-strong); }
.nl3-empty-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.nl3-empty-line { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.nl3-empty-go { height: 36px; padding: 0 14px; }

/* The windows: the house assistant frame, the newsletter's own mark in its head; every choice's glyph bare. */
.nl3-create .documents-incassist-card.nl3-assist, .nl3-add .documents-incassist-card.nl3-assist { width: min(1020px, calc(100vw - 32px)); }
.nl3-assist-mark { display: inline-flex; vertical-align: -3px; margin-right: 10px; }
.nl3-assist-mark svg { width: 18px; height: 18px; }
.nl3-assist .bf-assist-choice-glyph { border: 0; width: 24px; height: 24px; color: var(--text); }
.nl3-assist .bf-assist-choice-glyph svg { width: 18px; height: 18px; }
.nl3-assist .bf-assist-choice { min-height: 56px; }
/* A row whose control is a switch (an add-on, never an answer): the switch says on or off, the row keeps its hairline. */
.nl3-assist .bf-assist-choice:has(> input[type="checkbox"]) { border-color: var(--border); box-shadow: none; }
.bf-assist-choice:has(> input:checked) .nl-switch, .nl3-confirm:has(> input:checked) .nl-switch { background: var(--text); border-color: var(--text); }
.bf-assist-choice:has(> input:checked) .nl-switch::after, .nl3-confirm:has(> input:checked) .nl-switch::after { transform: translateX(14px); }
.bf-assist-choice:has(> input:focus-visible) .nl-switch { outline: 2px solid var(--text); outline-offset: 2px; }
.nl3-assist .nl-foot-line { flex: 1 1 auto; font-size: 13px; color: var(--text-muted); line-height: 1.4; min-width: 0; }

/* Name and colour, beside where the newsletter will be seen. */
.nl3-name-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
@media (max-width: 860px) { .nl3-name-grid { grid-template-columns: minmax(0, 1fr); } }
.nl3-name-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.nl3-field { display: flex; flex-direction: column; gap: 8px; }
.nl3-lab { font-size: 13px; font-weight: 600; line-height: 1.3; }
.nl3-input-wrap { position: relative; display: flex; }
.nl3-input-wrap input {
    flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 76px 0 12px; border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--surface); color: var(--text); font: inherit; font-size: 15px; line-height: 1.4;
}
.nl3-input-wrap input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.nl3-input-n { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.nl3-colours { display: flex; gap: 8px; flex-wrap: wrap; }
.nl3-colour { position: relative; width: 48px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nl3-colour > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nl3-colour svg { width: 22px; height: 22px; }
.nl3-colour:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.nl3-colour:has(> input:checked) { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); }
.nl3-colour:has(> input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.nl3-colours.is-compact { gap: 6px; }
.nl3-colours.is-compact .nl3-colour { width: 34px; height: 32px; border-radius: 8px; }
.nl3-colours.is-compact .nl3-colour svg { width: 18px; height: 18px; }
.nl3-see { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nl3-see h5 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nl3-see-rail { border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nl3-see-row { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.3; min-width: 0; }
.nl3-see-row > span:first-child { display: inline-flex; flex: none; }
.nl3-see-row.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-weight: 600; }
.nl3-see-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.nl3-see-row b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nl3-see-signup { border: 1px solid var(--border); border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; background: color-mix(in srgb, var(--text) 2%, var(--surface)); }
.nl3-see-signup > span:first-of-type:not(.nl3-see-org) { display: inline-flex; }
.nl3-see-signup b { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.nl3-see-org { font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--text-muted); text-transform: uppercase; line-height: 1.3; }
.nl3-see-field { align-self: stretch; height: 32px; box-sizing: border-box; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl3-see-btn { align-self: stretch; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--text); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 1.3; }
.nl3-mail .nl3-see-btn { align-self: center; padding: 0 14px; }
.nl3-see-line { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.nl3-via { display: inline-flex; align-items: center; gap: 6px; }
.nl3-via svg { width: 13px; height: 13px; flex: none; }
.nl3-state, .nl3-dim { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.nl3-dim { font-weight: 500; color: var(--text-muted); }
.nl3-state svg, .nl3-dim svg { width: 13px; height: 13px; flex: none; }

/* The recap: the newsletter as it will stand, each line a door back to its step. */
.nl3-recap { overflow: hidden; }
.nl3-recap-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nl3-recap-top > span:first-child { display: inline-flex; }
.nl3-recap-top > b { font-size: 20px; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.nl3-recap-zero { margin-left: auto; display: flex; gap: 16px; }
.nl3-recap-zero > span { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; line-height: 1.3; }
.nl3-recap-zero svg { width: 14px; height: 14px; align-self: center; }
.nl3-recap-zero b { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.nl3-recap-line { display: grid; grid-template-columns: 24px 120px minmax(0, 1fr) 32px; column-gap: 14px; align-items: center; min-height: 56px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl3-recap-line:last-child { border-bottom: 0; }
.nl3-recap-input { height: 32px; box-sizing: border-box; min-width: 0; width: 100%; max-width: 360px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; }
.nl3-recap-input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.nl3-recap-g { display: flex; justify-content: center; color: var(--text-muted); }
.nl3-recap-g svg { width: 16px; height: 16px; }
.nl3-recap-k { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl3-recap-v { font-weight: 500; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.nl3-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nl3-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.3; }
.nl3-chip svg { width: 13px; height: 13px; flex: none; }
.nl3-chip.is-off { color: var(--text-muted); }

/* The three next acts, once the newsletter stands. */
.nl3-next { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-top: 4px; }
.nl3-next-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 64px; padding: 10px 18px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl3-next-row:last-child { border-bottom: 0; }
.nl3-next-g { display: flex; justify-content: center; color: var(--text); }
.nl3-next-row > b { font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nl3-next-row > .nl3-code { max-width: 250px; }
.nl3-code {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; box-sizing: border-box; padding: 0 5px 0 10px; max-width: 100%; min-width: 0;
    border: 1px solid var(--border); border-radius: 8px; font-size: 12px; line-height: 1.3; color: var(--text);
}
.nl3-code > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nl3-code > svg { width: 13px; height: 13px; flex: none; color: var(--text-muted); }

/* The newsletter's TRACK, until a campaign ever left: three stages, a ring each, joined by one line. */

/* The list's health over 30 days: a group of the strip in the tiles' grammar, never two bordered chips. */
.nl3-health { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 4px 16px; border-left: 1px solid var(--border); }
.nl3-health-k { padding: 4px 8px 0; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.nl3-health-pair { display: flex; gap: 4px; }
.nl3-htile { min-width: 120px; padding: 6px 10px 8px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; box-sizing: border-box; }
a.nl3-htile:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); text-decoration: none; }
.nl3-htile-w { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.nl3-htile-w svg { width: 14px; height: 14px; flex: none; }
.nl3-htile-f { display: flex; align-items: baseline; gap: 8px; }
.nl3-htile-f b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.nl3-htile-f span { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl3-meter { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.nl3-meter i { display: block; height: 100%; border-radius: 2px; background: var(--text-muted); }
.nl3-htile.is-warn .nl3-htile-w, .nl3-htile.is-warn .nl3-htile-f b { color: var(--warning-text); }
.nl3-htile.is-warn .nl3-meter i { background: var(--warning-text); }
@media (max-width: 1100px) { .nl3-health { display: none; } }

/* Adding people: three ways side by side, then the way's own pane, then the figure. */
.nl3-find { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-muted); }
.nl3-find svg { width: 15px; height: 15px; flex: none; }
.nl3-find input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; outline: none; }
.nl3-find:focus-within { border-color: var(--text); }
.nl3-pick { position: relative; display: grid; grid-template-columns: 20px 28px minmax(0, 1.4fr) minmax(0, 1fr) auto; column-gap: 14px; align-items: center; min-height: 52px; padding: 6px 14px; border-bottom: 1px solid var(--border); box-sizing: border-box; cursor: pointer; }
.nl3-pick:last-child { border-bottom: 0; }
.nl3-pick > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nl3-pick:hover:not(.is-off) { background: color-mix(in srgb, var(--text) 3%, transparent); }
.nl3-pick.is-on { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nl3-pick.is-off { cursor: default; color: var(--text-muted); }
.nl3-box { width: 18px; height: 18px; box-sizing: border-box; border-radius: 6px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.nl3-box svg { width: 12px; height: 12px; }
.nl3-pick > input:checked + .nl3-box { background: var(--text); border-color: var(--text); color: var(--surface); }
.nl3-pick > input:focus-visible + .nl3-box { outline: 2px solid var(--text); outline-offset: 2px; }
.nl3-pick.is-off .nl3-box { border-color: var(--border); background: color-mix(in srgb, var(--text) 3%, transparent); }
.nl3-pick-av { display: inline-flex; width: 28px; height: 28px; }
.nl3-pick-av .contact-avatar, .nl3-pick-av img { width: 28px !important; height: 28px !important; }
.nl3-pick-w { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nl3-pick-w b { font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-pick-w span { font-size: 12px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-pick-co { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.35; }
.nl3-pick-co svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.nl3-pick-co span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-pick-mark > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.nl3-pick-mark svg { width: 13px; height: 13px; }
.nl3-pick-none { display: flex; align-items: center; gap: 10px; padding: 18px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nl3-pick-none svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .nl3-pick { grid-template-columns: 20px 28px minmax(0, 1fr) auto; } .nl3-pick-co { display: none; } }
.nl3-drop { margin: 12px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.nl3-drop.is-over { border-color: var(--text); background: color-mix(in srgb, var(--text) 3%, transparent); }
.nl3-drop-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.nl3-drop-head svg { flex: none; }
/* The drop line is ONE line: its words give way (ellipsis, the whole sentence in the field's tooltip), never wrap into a column. */
.nl3-drop-head > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nl3-drop-head .nlv-btn { margin-left: auto; position: relative; flex: none; }
.nl3-drop textarea { min-height: 88px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.nl3-total-marks { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.nl3-mk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); white-space: nowrap; line-height: 1.3; }
.nl3-mk[hidden] { display: none; }
.nl3-mk svg { width: 13px; height: 13px; }
.nl3-mk[data-nla-mk="already"] svg, .nl3-mk[data-nla-out="already"] svg { color: var(--success-fg, #15803d); }
.nl3-mk[data-nla-mk="noAddress"] svg, .nl3-mk[data-nla-out="noAddress"] svg { color: var(--warning-text); }
.nl3-mk[data-nla-mk="excluded"] svg, .nl3-mk[data-nla-out="excluded"] svg { color: #b42318; }
.nl3-mk b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nl3-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; cursor: pointer; }
.nl3-confirm[hidden] { display: none; }

/* Settings: three groups, each row its glyph, its word and its control; Delete at the foot. */
.nl3-settings { width: min(720px, calc(100vw - 32px)); padding: 0; display: flex; flex-direction: column; }
.nl3-settings .documents-incassist-head { padding: 16px 16px 14px 24px; border-bottom: 1px solid var(--border); }
.nl3-set { padding: 4px 24px 12px; display: flex; flex-direction: column; overflow-y: auto; }
.nl3-set-grp { margin: 0; padding: 16px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.nl3-set-row { position: relative; display: grid; grid-template-columns: 24px 180px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl3-set-g { display: flex; justify-content: center; color: var(--text-muted); }
.nl3-set-g svg { width: 16px; height: 16px; }
.nl3-set-k { font-size: 13px; font-weight: 500; line-height: 1.35; }
.nl3-set-v { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nl3-set-v input[type="text"] { height: 34px; box-sizing: border-box; min-width: 0; width: 100%; max-width: 320px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; }
label.nl3-set-row { cursor: pointer; }
.nl3-set-v { flex-wrap: nowrap; }
.nl3-set-v .nl3-code { min-width: 0; max-width: 260px; flex: 0 1 auto; }
.nl3-set-v .nl3-state { white-space: normal; text-align: right; min-width: 0; }
.nl3-set-v .nl-switch { flex: 0 0 auto; }
@media (max-width: 600px) { .nl3-set-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 8px; } .nl3-set-v { grid-column: 1 / -1; justify-content: flex-start; } }
.nl3-set-foot { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); }
.nl3-set-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl3-set-meta svg { width: 13px; height: 13px; }
.nlv-btn.nl3-danger { color: #b42318; border-color: color-mix(in srgb, #b42318 35%, var(--border)); }
.nlv-btn.nl3-danger:hover { color: #b42318; background: color-mix(in srgb, #b42318 5%, var(--surface)); }
[data-theme="dark"] .nlv-btn.nl3-danger, [data-theme="dark"] .nlv-btn.nl3-danger:hover { color: #ff7b72; }

/* Delete: what goes, what stays, the name typed; or the refusal while a campaign leaves. */
.nl3-dlg { width: min(560px, calc(100vw - 32px)); padding: 0; }
.nl3-dlg-top { display: flex; align-items: center; gap: 12px; padding: 22px 24px 8px; }
.nl3-dlg-top > span { display: inline-flex; }
.nl3-dlg-top svg { width: 22px; height: 22px; }
.nl3-dlg-top h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.nl3-dlg-line { margin: 0; padding: 0 24px 0 58px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nl3-dlg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 24px; }
@media (max-width: 520px) { .nl3-dlg-cols { grid-template-columns: minmax(0, 1fr); } }
.nl3-dlg-col { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.nl3-dlg-col h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.nl3-dlg-col h4 svg { width: 13px; height: 13px; }
.nl3-dlg-col.is-goes h4 { color: #b42318; }
.nl3-dlg-col.is-stays h4 { color: var(--success-fg, #15803d); }
[data-theme="dark"] .nl3-dlg-col.is-goes h4 { color: #ff7b72; }
.nl3-dlg-it { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.35; }
.nl3-dlg-it > svg, .nl3-dlg-it > span:first-child > svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.nl3-dlg-it > span:first-child { display: inline-flex; }
.nl3-dlg-it b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nl3-dlg-typed { display: flex; flex-direction: column; gap: 8px; padding: 8px 24px 4px; font-size: 13px; line-height: 1.35; }
.nl3-dlg-typed input { height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.4; }
.nl3-dlg-typed input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.nl3-dlg-camp { margin: 16px 24px 4px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.nl3-dlg-camp > span:first-child { display: flex; }
.nl3-dlg-camp-w { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl3-dlg-camp-w b { font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-dlg-camp-w span { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nl3-dlg-camp .nlv-bar { grid-column: 1 / -1; }
.nl3-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; }
.nl3-dlg-foot .nlv-btn { height: 36px; padding: 0 14px; }
.nlv-btn.nl3-danger-ink { background: #b42318; border-color: #b42318; color: #fff; font-weight: 600; }
.nlv-btn.nl3-danger-ink:hover { background: #9b1c12; color: #fff; }
.nlv-btn.nl3-danger-ink:disabled { opacity: .45; cursor: default; }

/* The track, actionable (the approved sketch "Newsletters v3 · 17-20"): every state a mark, ONE ink verb, the
   sign-up page a VALUE at the foot - a read-only address on the field tone, never a bordered chip that reads
   as a button, and never beside an act. */
.nl3-faces { display: inline-flex; align-items: center; }
.nl3-faces .nl3-face { width: 26px !important; height: 26px !important; font-size: 11px; box-shadow: 0 0 0 2px var(--surface); }
.nl3-faces .nl3-face + .nl3-face { margin-left: -6px; }

/* The sending setup's fields: a word over its field, two to a row where they are short. */
.nl3-smtp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 4px; }
.nl3-smtp[hidden] { display: none; }
.nl3-sender-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 520px; }
.nl3-sf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nl3-sf-wide { grid-column: 1 / -1; }
.nl3-sf > span { font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nl3-sf input { height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; min-width: 0; }
.nl3-sf input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.nl3-sf .bf-select { width: 100%; min-width: 0; }
.nl3-sf .bf-select-btn { height: 36px; min-height: 36px; box-sizing: border-box; }
@media (max-width: 760px) { .nl3-smtp { grid-template-columns: minmax(0, 1fr); } }
.nl3-setup .documents-incassist-card.nl3-assist { width: min(960px, calc(100vw - 32px)); }
.nl3-assist .nl-foot-line { display: inline-flex; align-items: center; gap: 8px; }
.nl3-assist .nl-foot-line svg { width: 14px; height: 14px; flex: none; }

/* ── Add people (the approved sketch "Newsletters v3 · 21-24") ─────────────────────────────────────────────────
   The head names the newsletter as a chip. WHO stands still - the sources, the find, the Chosen column's head -
   and only the rows scroll (owner, 2026-10-29: "I don't like the scrollbar scrolling everything. need to pinned
   and also bottom"); whatever any source picks lands in ONE Chosen column, grouped by where it came from. */
.nl3-add .documents-incassist-card.nl3-assist { width: min(1180px, calc(100vw - 32px)); }
.nl3-add-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.3; }
.nl3-add-nl { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 8px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.nl3-add-nl > span:first-child { display: inline-flex; }
.nl3-add-nl svg { width: 16px; height: 16px; }
.nl3-add .documents-incassist-form:has(> .documents-incassist-rail) > .documents-incassist-step.nl3-who { overflow: hidden; display: flex; padding-bottom: 14px; }
.nl3-add .documents-incassist-form:has(> .documents-incassist-rail) > .documents-incassist-step.nl3-who[hidden] { display: none; }
.nl3-who-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; }
.nl3-src-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.nl3-srcs { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.nl3-src { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.nl3-src svg { width: 16px; height: 16px; flex: none; }
.nl3-src:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.nl3-src.is-on { color: var(--text); font-weight: 600; border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nl3-src:disabled { cursor: default; opacity: .55; }
.nl3-src-c { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: color-mix(in srgb, var(--text) 7%, transparent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; line-height: 1.3; }
.nl3-src-c[hidden] { display: none; }
.nl3-srcpane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.nl3-srcpane[hidden] { display: none; }
.nl3-srcpane-head { flex: none; display: flex; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.nl3-srcpane-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nl3-find-hint { flex: none; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl3-find-hint[hidden] { display: none; }
.nl3-pick-new { margin: 8px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.nl3-pick-new:last-child { border-bottom: 1px dashed var(--border-strong); }
.nl3-pick-new[hidden] { display: none; }
.nl3-ghost { align-items: center; justify-content: center; border: 1.5px dashed var(--border-strong); border-radius: 50%; box-sizing: border-box; color: var(--text-muted); }
.nl3-ghost svg { width: 14px; height: 14px; }
.nl3-vrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 104px; column-gap: 14px; align-items: center; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl3-vrow:last-child { border-bottom: 0; }
.nl3-vrow.is-on { background: color-mix(in srgb, var(--text) 4%, transparent); }
.nl3-vrow-g { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.nl3-vrow-g svg { width: 16px; height: 16px; }
.nl3-vrow-name { font-weight: 500; line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl3-vrow-n { white-space: nowrap; line-height: 1.3; }
.nl3-vrow-n b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nl3-vrow-n span { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.nl3-vrow-act { justify-self: end; display: inline-flex; }
.nl3-vrow-act .nlv-btn[hidden], .nl3-vrow-added[hidden] { display: none; }
.nl3-vrow-added { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.nl3-vrow-added svg { width: 14px; height: 14px; }
/* Pasted addresses: the field across the pane, then what was read - its marks and its verb standing still on one line,
   the rows alone scrolling under them, each address owning the pane's width. */
.nl3-paste-head { padding: 12px; }
.nl3-paste-head .nl3-drop { margin: 0; flex: 1 1 auto; min-width: 0; }
.nl3-paste-out { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.nl3-paste-none { display: flex; align-items: center; gap: 10px; padding: 18px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nl3-paste-none svg { width: 16px; height: 16px; flex: none; }
.nl3-readout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nl3-read-sum { flex: none; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: 52px; padding: 10px 12px 10px 16px; box-sizing: border-box; border-bottom: 1px solid var(--border); }
.nl3-read-add { margin-left: auto; flex: none; }
.nl3-read-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px; }
.nl3-read-sum > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); white-space: nowrap; line-height: 1.3; }
.nl3-read-sum svg { width: 14px; height: 14px; flex: none; }
.nl3-read-sum b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nl3-rr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 46px; padding: 6px 4px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl3-rr:last-child { border-bottom: 0; }
.nl3-rr.is-off { color: var(--text-muted); }
/* ONE line box: the address (or the name) strong, what follows muted on the same baseline. */
.nl3-rr-w { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 19px; }
/* The mark at the row's end takes the address's line box, so both stand on one baseline whatever their sizes. */
.nl3-rr .nl3-pick-mark > span { line-height: 19px; }
.nl3-rr-w b { font-weight: 600; }
.nl3-rr-w b.is-struck { font-weight: 500; text-decoration: line-through; }
.nl3-rr-w span { margin-left: 8px; font-size: 12px; color: var(--text-muted); }
.nl3-rr-g { align-items: center; justify-content: center; color: var(--text-muted); }
.nl3-rr-g svg { width: 16px; height: 16px; }
.nl3-chosen { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--text) 2%, var(--surface)); overflow: hidden; }
.nl3-chosen-head { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 14px 14px 10px; }
.nl3-chosen-head b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.nl3-chosen-tot { margin-left: auto; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.nl3-chosen-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 14px; }
.nl3-chosen-none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 8px; text-align: center; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nl3-chosen-none[hidden] { display: none; }
.nl3-chosen-none svg { width: 22px; height: 22px; }
.nl3-grp { display: flex; flex-direction: column; gap: 6px; }
.nl3-grp[hidden] { display: none; }
.nl3-gk { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.nl3-gk svg { width: 12px; height: 12px; flex: none; }
.nl3-gk b { margin-left: auto; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.nl3-grp-items { display: flex; flex-direction: column; gap: 6px; }
.nl3-ci { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 8px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.nl3-ci-av { flex: none; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--text-muted); }
.nl3-ci-av .contact-avatar, .nl3-ci-av img, .nl3-ci-av .bf-avatar-letter { width: 24px !important; height: 24px !important; font-size: 10px; }
.nl3-ci-av svg { width: 14px; height: 14px; }
.nl3-ci-w { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nl3-ci-w b { font-size: 13px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-ci-w span { font-size: 11px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-ci-x { flex: none; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; }
.nl3-ci-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
/* New contacts: a card per source, every address whole on its own row. */
.nl3-cs { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px 4px 10px; }
.nl3-cs-head { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl3-cs-head svg { width: 13px; height: 13px; flex: none; }
.nl3-cs-head b { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.nl3-cs-n { font-variant-numeric: tabular-nums; }
.nl3-cs-row { display: flex; align-items: center; gap: 10px; min-height: 36px; border-top: 1px solid var(--border); }
.nl3-cs-row .contact-avatar { flex: none; width: 22px !important; height: 22px !important; font-size: 10px; }
.nl3-cs-a { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nl3-once { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 12px; color: var(--text); line-height: 1.35; }
.nl3-once[hidden] { display: none; }
.nl3-once svg { width: 14px; height: 14px; color: var(--text-muted); }
.nl3-once b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .nl3-who-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .nl3-chosen { max-height: 200px; } }
.nl3-add .documents-incassist-foot .nl3-total-marks { margin-left: 0; display: flex; align-items: center; }
/* The recap: ONE aligned card, a row per part - its plate, its word, its value, its pen. */
.nl3-rcard { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.nl3-rln { display: grid; grid-template-columns: 36px 132px minmax(0, 1fr) 32px; column-gap: 14px; align-items: center; min-height: 60px; padding: 10px 14px 10px 16px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl3-rln:last-child { border-bottom: 0; }
.nl3-rln[hidden] { display: none; }
.nl3-rln-g { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.nl3-rln-g svg { width: 18px; height: 18px; }
.nl3-rln-k { font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.nl3-rln-v { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-width: 0; padding: 6px 0; }
/* Every value is ONE line box - the strong word, then its muted line - so they share a baseline in every row;
   what stands after it (faces, addresses) is a box centred on the row, never a second baseline. */
.nl3-rln-t { flex: 0 1 auto; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nl3-rln-strong { font-weight: 600; }
.nl3-rln-line { margin-left: 8px; font-size: 13px; color: var(--text-muted); }
.nl3-rln-chips { flex: 1 1 auto; display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.nl3-faces { display: inline-flex; flex: none; }
.nl3-faces[hidden] { display: none; }
.nl3-face { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.nl3-face + .nl3-face { margin-left: -6px; }
.nl3-face .contact-avatar, .nl3-face img, .nl3-face .bf-avatar-letter { width: 26px !important; height: 26px !important; font-size: 10px; }
.nl3-face-more { align-items: center; justify-content: center; background: color-mix(in srgb, var(--text) 7%, var(--surface)); color: var(--text); font-size: 11px; font-weight: 600; line-height: 1.3; }
.nl3-rln-v.nl3-total-marks { margin-left: 0; }
@media (max-width: 760px) { .nl3-rln { grid-template-columns: 36px minmax(0, 1fr) 32px; } .nl3-rln-k { display: none; } }

/* ── The campaign report (the approved sketch "Newsletters v3 · 25-28") ────────────────────────────────────────
   Each funnel step against the newsletter's last campaigns (an arrow in the tone of what it means); opens wear
   their "≈" (an estimate); the first 48 hours as bars; the links ranked, each with its people; who, by tabs. */
.nlv-cmp { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; }
.nlv-cmp svg { width: 12px; height: 12px; flex: none; }
.nlv-cmp-a { font-size: 11px; color: var(--text-muted); }
.nlv-cmp-a.is-good { color: var(--success-fg, #15803d); }
.nlv-cmp-a.is-bad { color: #b42318; }
html[data-theme="dark"] .nlv-cmp-a.is-bad { color: #ff8a80; }
.nlv-est { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 10px; font-weight: 700; color: var(--text-muted); line-height: 1; }
.nlv-head-end { margin-left: auto; }
.nlv-mode { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.nlv-mode-g { display: inline-flex; color: var(--text); }
.nlv-mode-g svg { width: 22px; height: 22px; }
.nlv-mode-w { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.nlv-mode-w b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.nlv-mode-w span { font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.nlv-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.nlv-mode-m { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
button.nlv-mode-m { cursor: pointer; }
button.nlv-mode-m:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.nlv-mode-m.is-on { color: var(--text); font-weight: 600; border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); cursor: default; }
.nlv-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); line-height: 1.3; white-space: nowrap; }
.nlv-card-head h2 + .nlv-legend { margin-left: auto; }
.nlv-sw { width: 10px; height: 10px; border-radius: 4px; display: inline-block; }
.nlv-sw.is-open, .nlv-bar-open { background: color-mix(in srgb, #0060df 24%, var(--surface)); fill: color-mix(in srgb, #0060df 24%, var(--surface)); }
.nlv-sw.is-click, .nlv-bar-click { background: #0060df; fill: #0060df; }
html[data-theme="dark"] .nlv-sw.is-click, html[data-theme="dark"] .nlv-bar-click { background: #6aa8ff; fill: #6aa8ff; }
.nlv-chart { padding: 16px 18px 4px; }
.nlv-chart svg { display: block; }
.nlv-chart-base { stroke: var(--border); stroke-width: 1; }
.nlv-chart-x { position: relative; height: 20px; margin-top: 6px; }
.nlv-chart-x span { position: absolute; top: 0; font-size: 11px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; }
.nlv-peaks { display: flex; gap: 20px; flex-wrap: wrap; padding: 6px 18px 16px; }
.nlv-peaks .nlv-unit b { font-weight: 600; margin-left: 2px; }
.nlv-lk { grid-template-columns: 22px minmax(0, 1fr) 110px 64px 64px; }
.nlv-lk.is-on { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nlv-rank { width: 22px; height: 22px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text); line-height: 1; }
.nlv-lk .nlv-pct { display: flex; flex-direction: column; align-items: flex-end; }
.nlv-lk .nlv-pct b { font-weight: 600; }
.nlv-lk .nlv-pct span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.nlv-lk > .nlv-unit-door { justify-self: end; }
.nlv-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.nlv-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; box-sizing: border-box; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; line-height: 1.3; }
.nlv-tab b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.nlv-tab:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); text-decoration: none; }
.nlv-tab.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlv-tab.is-on b { color: var(--text); }
.nlv-linkfilter { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.nlv-clickmap-card { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; box-sizing: border-box; }
.nlv-clickmap-card .documents-incassist-head { align-items: center; }
.nlv-clickmap-card h3 { display: inline-flex; align-items: center; gap: 8px; }
.nlv-clickmap-card h3 svg { width: 18px; height: 18px; }
.nlv-clickmap-by { margin-left: auto; }
.nlv-clickmap-body { display: flex; flex-direction: column; min-height: 0; }
.nlv-fig-of { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.nlv-fig-of svg { width: 14px; height: 14px; flex: none; }
.nlv-fig-of span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.nl3-followup .documents-incassist-card.nl3-assist { width: min(720px, calc(100vw - 32px)); }
.nl3-fu-subject { margin-top: 14px; }
.nl3-fu-fig b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-assist-choice.is-off { color: var(--text-muted); cursor: default; }
@media (max-width: 600px) {
    .nlv-tile .nlv-cmp, .nlv-tile .nlv-est { display: none; }
    .nlv-lk { grid-template-columns: 22px minmax(0, 1fr) 56px; }
    .nlv-lk .nlv-bar, .nlv-lk > .nlv-unit-door, .nlv-lk > span:last-child:empty { display: none; }
}
/* The report's list kept as a live view; subject ideas by the writing assistant (the approved sketch "Newsletters v3 · 25, 27"). */
.nlv-who-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); }
.nlv-who-foot-l { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nlv-who-foot-l svg { width: 14px; height: 14px; flex: none; }
.nlv-who-foot .nlv-btn[hidden] { display: none; }
.nl3-fu-ideas { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.nl3-fu-ideas .nlv-btn svg { width: 14px; height: 14px; }
.nl3-fu-ideas-list { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 260px; min-width: 0; align-items: center; min-height: 32px; }
.nl3-fu-idea { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; box-sizing: border-box; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer; }
.nl3-fu-idea:hover { border-style: solid; }
.nl3-fu-idea.is-on { border: 1px solid var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nl3-fu-ideas-say { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nl3-fu-ideas-say.is-error { color: #b42318; }
html[data-theme="dark"] .nl3-fu-ideas-say.is-error { color: #ff8a80; }

/* ── Composer V2 (the approved sketch "Newsletter - campaign composer V2", owner, 2026-10-30) ──────────────
   The message wears the newsletter's look as the renderer draws it (--nlm-*, set by newsletters-composer.js);
   the header is a block of its own; the side panel holds the blocks and the style, or the chosen block's
   settings. The stage and the side panel's body are the two columns' ONE scroller each. */
.nlv-stage { background: var(--nlm-ground, color-mix(in srgb, var(--text) 5%, var(--surface))); }
.nlv-stage-fill { flex: 1 1 auto; }
.nlv-stage-bar { justify-content: flex-start; }
.nlv-stage-bar > .nlv-btn { height: 32px; box-sizing: border-box; flex: none; }
/* The stage scrolls its content; nothing in it ever shrinks to the stage's height (the message clips its own
   corners, so a shrunk message would cut its blocks instead of scrolling them). */
.nlv-stage > * { flex-shrink: 0; }
.nlv-mail {
    max-width: var(--nlm-width, 600px); padding: 0 0 20px; overflow: hidden; gap: 0;
    font-family: var(--nlm-font, inherit); border-radius: var(--nlm-radius, 8px);
}
.nlv-blocks { padding: 18px 22px 0; }

/* The header: the newsletter's, a block like the others - chosen, it opens its settings. */
.nlv-hdr {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 16px 32px; box-sizing: border-box;
    background: var(--nlh-ground, #fff); color: var(--nlh-ink, #0f172a); cursor: pointer; outline: 0;
    box-shadow: inset 0 0 0 1.5px transparent;
}
.nlv-hdr.is-plain { border-bottom: 1px solid #eef1f5; }
.nlv-hdr:hover, .nlv-hdr:focus-visible { box-shadow: inset 0 0 0 1px #cbd5e1; }
.nlv-hdr.is-sel { box-shadow: inset 0 0 0 2px #0f172a; }
.nlv-hdr.is-dark.is-sel { box-shadow: inset 0 0 0 2px #ffffff; }
.nlv-hdr-tag {
    position: absolute; top: 6px; left: 8px; padding: 2px 7px; border-radius: 4px; background: rgba(15, 23, 42, .78); color: #fff;
    font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; opacity: 0; pointer-events: none;
}
.nlv-hdr:hover .nlv-hdr-tag, .nlv-hdr.is-sel .nlv-hdr-tag { opacity: 1; }
.nlv-hdr-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nlv-hdr-logo { height: 32px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.nlv-hdr-logo[hidden], .nlv-hdr-name[hidden], .nlv-hdr-online[hidden] { display: none; }
.nlv-hdr-name { font-size: 17px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-hdr-online { margin-left: auto; font-size: 12px; text-decoration: underline; opacity: .78; white-space: nowrap; line-height: 1.3; }
.nlv-hdr[data-layout="center"], .nlv-hdr[data-layout="logo"] { flex-direction: column; justify-content: center; gap: 8px; }
.nlv-hdr[data-layout="center"] .nlv-hdr-row { flex-direction: column; gap: 10px; }
.nlv-hdr[data-layout="center"] .nlv-hdr-online, .nlv-hdr[data-layout="logo"] .nlv-hdr-online { margin-left: 0; }
.nlv-hdr[data-layout="logo"] .nlv-hdr-logo { height: 44px; }

/* The blocks wear the style. */
.nlv-ed-h { color: var(--nlm-brand, #0f172a); }
.nlv-ed-h.is-h2 { font-size: 19px; }
.nlv-ed-t { color: var(--nlm-text, #334155); }
.nlv-ed-t a { color: var(--nlm-accent, #0f172a); }
.nlv-blk[data-align="center"] { text-align: center; align-items: center; }
.nlv-blk[data-align="right"] { text-align: right; align-items: flex-end; }
.nlv-blk[data-align="center"] .nlv-cta-wrap { justify-content: center; }
.nlv-blk[data-align="right"] .nlv-cta-wrap { justify-content: flex-end; }
.nlv-blk[data-align="full"] .nlv-cta-wrap > .nlv-cta { flex: 1 1 auto; justify-content: center; }
.nlv-blk[data-pad="none"] { padding-block: 0; }
.nlv-blk[data-pad="tight"] { padding-block: 2px; }
.nlv-blk[data-pad="loose"] { padding-block: 18px; }
.nlv-cta-wrap { align-items: center; gap: 10px; flex-wrap: wrap; }
.nlv-cta {
    background: var(--nlb-color, var(--nlm-accent, #0f172a)); color: var(--nlb-ink, #fff); border: 2px solid transparent;
    border-radius: var(--nlm-btn-radius, 8px); box-sizing: border-box;
}
.nlv-cta.is-outline { background: transparent; border-color: var(--nlb-color, #0f172a); }
.nlv-cta.is-link { background: transparent; padding: 0; min-height: 28px; border: 0; text-decoration: underline; }
.nlv-cta.is-s { min-height: 34px; padding-inline: 14px; font-size: 13px; }
.nlv-cta.is-l { min-height: 50px; padding-inline: 26px; font-size: 16px; }
.nlv-cta:empty::before { content: attr(data-empty); opacity: .7; }
.nlv-cta-nolink { font-size: 12px; color: #556274; line-height: 1.3; }
.nlv-img { border-radius: min(var(--nlm-radius, 8px), 12px); }
.nlv-img.is-medium { width: 60%; }
.nlv-blk[data-align="center"] .nlv-img { align-self: center; }
.nlv-blk[data-align="right"] .nlv-img { align-self: flex-end; }
.nlv-q-mark { font-family: Georgia, 'Times New Roman', serif; font-size: 44px; line-height: .8; color: var(--nlm-accent, #0f172a); }
.nlv-ed-q { font-size: 18px; line-height: 1.55; font-style: italic; color: var(--nlm-text, #334155); }
.nlv-q-by { font-size: 13px; color: #556274; line-height: 1.4; }
.nlv-it { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 20px; align-items: start; }
.nlv-it.is-right > :first-child { order: 2; }
.nlv-it > .nlv-img, .nlv-gal > .nlv-img { width: 100%; }
.nlv-it > .nlv-img-pick, .nlv-gal > .nlv-img-pick { height: 120px; }
.nlv-gal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.nlv-vid { position: relative; display: flex; }
.nlv-vid > .nlv-img { width: 100%; }
.nlv-vid-play {
    position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
    background: rgba(15, 23, 42, .62); color: #fff; display: inline-flex; align-items: center; justify-content: center; pointer-events: none;
}
.nlv-vid-label { display: flex; align-items: center; gap: 6px; color: var(--nlm-accent, #0f172a); font-size: 14px; font-weight: 600; line-height: 1.35; }
.nlv-vid-label svg { width: 12px; height: 12px; flex: none; }
.nlv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.nlv-soc { display: flex; flex-wrap: wrap; gap: 8px; }
.nlv-blk[data-align="center"] .nlv-soc { justify-content: center; }
.nlv-blk[data-align="right"] .nlv-soc { justify-content: flex-end; }
.nlv-soc-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--nlm-text, #0f172a); line-height: 1.3; }
.nlv-soc-none { font-size: 13px; color: #556274; line-height: 1.4; }
.nlv-code { display: inline-flex; align-self: flex-start; padding: 12px 24px; border: 2px dashed var(--nlm-accent, #0f172a); border-radius: min(var(--nlm-radius, 8px), 12px); }
.nlv-blk[data-align="center"] .nlv-code { align-self: center; }
.nlv-blk[data-align="right"] .nlv-code { align-self: flex-end; }
.nlv-code-v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--nlm-text, #0f172a); line-height: 1.35; }
.nlv-code-cap { font-size: 13px; color: #556274; line-height: 1.4; }
.nlv-ev { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid #e2e8f0; border-radius: min(var(--nlm-radius, 8px), 12px); }
.nlv-ev-t { font-size: 17px; font-weight: 700; color: var(--nlm-brand, #0f172a); line-height: 1.35; }
.nlv-ev-when { font-size: 14px; font-weight: 600; color: var(--nlm-text, #0f172a); line-height: 1.4; }
.nlv-ev-where { font-size: 14px; color: #556274; line-height: 1.4; }
.nlv-ev > .nlv-cta { align-self: flex-start; margin-top: 8px; }

/* The side panel: two tabs, or the chosen block's settings; its body the ONE scroller of its column. */
.nlv-side { padding: 0; gap: 0; overflow: hidden; }
@media (min-width: 901px) { .nlv-side { width: 300px; } }
/* Under 900px the side panel stands under the message: the stage and the panel share the step's height, each
   scrolling its own content - nothing the panel holds is ever out of reach. */
@media (max-width: 900px) {
    .nlv-content-step > .nlv-compose > .nlv-stage { flex: 1 1 55%; }
    .nlv-content-step > .nlv-compose > .nlv-side { flex: 1 1 45%; min-height: 0; }
}
.nlv-insp-head[hidden], .nlv-side-pane[hidden] { display: none; }
.nlv-side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.nlv-side-pane { display: flex; flex-direction: column; gap: 20px; }
.nlv-pal button { height: 58px; }
.nlv-themes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.nlv-theme {
    display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; text-align: left;
}
.nlv-theme > span { padding: 0 2px 2px; white-space: nowrap; }
.nlv-theme[aria-pressed="true"], .nlv-opt[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nlv-crow { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.nlv-crow-k { flex: 1 1 auto; font-size: 13px; color: var(--text); line-height: 1.35; }
.nlv-cval {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 5px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted);
    font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer;
}
.nlv-cval[aria-expanded="true"] { border-color: var(--text); }
.nlv-cval > i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); }
.nlv-pal-row { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.nlv-pal-row[hidden] { display: none; }
.nlv-sws { display: flex; flex-wrap: wrap; gap: 8px; }
.nlv-sw {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; flex: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #0f172a 16%, transparent);
}
.nlv-sw.is-sm { width: 22px; height: 22px; }
.nlv-sw.is-custom:not([style]) { background: conic-gradient(#e5484d, #f2b84b, #30a46c, #2457d6, #8e4ec6, #e5484d); }
.nlv-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.nlv-opts { display: flex; gap: 8px; }
.nlv-opt {
    flex: 1 1 0; min-width: 0; height: 56px; padding: 0 4px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font: inherit;
}
.nlv-opt small { font-size: 11px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; }
.nlv-opt-aa { font-size: 20px; font-weight: 600; line-height: 1.3; }
.nlv-opt-aa.is-classic { font-family: Georgia, 'Times New Roman', serif; }
.nlv-opt-aa.is-friendly { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-weight: 700; }
.nlv-width { display: flex; width: 100%; height: 32px; box-sizing: border-box; }
.nlv-width > .bf-segmented-btn { flex: 1 1 0; }
.nlv-side-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nlv-side-note svg { width: 14px; height: 14px; flex: none; }

/* The chosen block's settings: its glyph, its name, its verbs, then one row per setting. */
.nlv-insp-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); }
.nlv-insp-g { display: inline-flex; color: var(--text); }
.nlv-insp-g svg { width: 16px; height: 16px; }
.nlv-insp-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-insp-tools { display: inline-flex; gap: 6px; }
.nlv-insp-body { display: flex; flex-direction: column; gap: 18px; }
.nlv-insp-sec { display: flex; flex-direction: column; gap: 8px; }
.nlv-insp-sec > h5 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nlv-insp-input {
    width: 100%; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.3;
}
.nlv-insp-input:focus { outline: 2px solid color-mix(in srgb, var(--text) 30%, transparent); outline-offset: 1px; }
/* A block dragged from the catalog: its tile's face follows the pointer, ONE line says where it lands. */
.nlv-dragghost { position: fixed; left: 0; top: 0; z-index: 7000; pointer-events: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-width: 84px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text);
    font-size: 12px; line-height: 1.3; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); opacity: .96; }
.nlv-dragghost.is-out { opacity: .55; }
.nlv-dragghost svg { width: 16px; height: 16px; }
.nlv-dropline { position: fixed; z-index: 6999; height: 2px; border-radius: 2px; background: var(--text); pointer-events: none; }
.nlv-dropline[hidden] { display: none; }
.nlv-dropline::before, .nlv-dropline::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.nlv-dropline::before { left: -4px; }
.nlv-dropline::after { right: -4px; }
.nlv-compose.is-dragging-block, .nlv-compose.is-dragging-block * { cursor: grabbing !important; user-select: none; }
[data-nl-add] { cursor: grab; }
/* An event's day: its words, and THE calendar beside them - one height for both. */
.nlv-insp-when { display: flex; align-items: center; gap: 8px; }
.nlv-insp-when > .nlv-insp-input { flex: 1 1 auto; min-width: 0; }
.nlv-insp-when > .nlv-insp-when-pick { width: 34px; height: 34px; }
.nlv-hex { width: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nlv-insp-seg { display: flex; width: 100%; height: 32px; box-sizing: border-box; }
.nlv-insp-seg > .bf-segmented-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.nlv-insp-seg svg { width: 15px; height: 15px; }
.nlv-insp-switch { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; padding-top: 14px; border-top: 1px solid var(--border); }
.nlv-insp-switch-w { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nlv-insp-switch-w > b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.nlv-insp-switch-w > span { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nlv-insp-img { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.nlv-insp-img > img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; flex: none; background: color-mix(in srgb, var(--text) 4%, transparent); }
.nlv-insp-img-none { width: 40px; height: 40px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: color-mix(in srgb, var(--text) 4%, transparent); }
.nlv-insp-img-w { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nlv-insp-img > .nlv-btn, .nlv-insp-img > .nlv-ibtn { height: 32px; }
.nlv-insp-line { display: flex; align-items: center; gap: 8px; }
.nlv-insp-line > .nlv-insp-input { height: 32px; }
.nlv-insp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nlv-insp-chips > .nlv-btn, .nlv-insp-add { height: 32px; }
.nlv-insp-add { align-self: flex-start; }
.nlv-insp-note { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; }

/* Import (an answer of the start step): the text and what it becomes, side by side. */
.nlv-imp-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.nlv-imp-k { flex: none; display: flex; align-items: center; gap: 10px; min-height: 32px; }
.nlv-imp-k > b { flex: 1 1 auto; font-size: 14px; font-weight: 600; line-height: 1.35; }
.nlv-imp-k > .bf-segmented { height: 32px; box-sizing: border-box; }
.nlv-imp-n { font-size: 13px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; }
.nlv-imp-drop { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.nlv-imp-drop.is-over { border-color: var(--text); background: color-mix(in srgb, var(--text) 3%, transparent); }
.nlv-imp-drop > textarea {
    flex: 1 1 auto; min-height: 0; resize: none; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nlv-imp-dropline { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 13px; color: var(--text-muted); }
.nlv-imp-dropline > svg { width: 16px; height: 16px; flex: none; }
.nlv-imp-dropline > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nlv-imp-dropline > .nlv-btn { flex: none; position: relative; height: 32px; }
.nlv-imp-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 10px; }
.nlv-imp-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.nlv-imp-row:last-child { border-bottom: 0; }
.nlv-imp-kind { flex: none; width: 104px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; }
.nlv-imp-kind > svg { width: 15px; height: 15px; flex: none; }
.nlv-imp-words { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nlv-imp-mark { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; line-height: 1.3; }
.nlv-imp-mark > svg { width: 14px; height: 14px; flex: none; }
.nlv-imp-none { display: flex; align-items: center; gap: 10px; padding: 18px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nlv-imp-none[hidden] { display: none; }
.nlv-imp-none > svg { width: 16px; height: 16px; flex: none; }

/* The Moment step: a month drawn beside the usual hours, and what the choice means said once. */
.bf-assist-more.nlw { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 6px 14px 10px 58px; }
.bf-assist-more.nlw[hidden] { display: none; }
.nlw-cal { min-height: 300px; }
.nlw-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nlw-sec { display: flex; flex-direction: column; gap: 8px; }
.nlw-k { font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nlw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nlw-chip {
    height: 32px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
    color: var(--text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer;
}
.nlw-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.nlw-chips .bf-select-trigger, .nlw-chips [data-bf-select] + .bf-select { height: 32px; }
.nlw-sum { margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.nlw-sum > svg { width: 16px; height: 16px; flex: none; }
.nlw-sum-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 1.35; }
.nlw-sum-t > b { font-weight: 600; }
.nlw-sum-t > span { margin-left: 8px; font-size: 13px; color: var(--text-muted); }
/* The month and the hours stand one under the other once the window cannot hold both whole. */
@media (max-width: 1100px) { .bf-assist-more.nlw { grid-template-columns: minmax(0, 1fr); } .nlw-cal { max-width: 300px; } }
@media (max-width: 760px) { .bf-assist-more.nlw { padding-left: 14px; } }

/* ── The setup card (the approved sketch "Newsletter - setup area", version B, 2026-10-30) ──────────────────
   ONE card until a campaign ever left: the hero (the first campaign drawn in the newsletter's colour, its verbs)
   then a tile per thing it needs. The four columns share ONE set of rows - a head of 20px, what stands, a foot
   of 32px - so every control of the card stands on one line. A tile is read from its road sign, its value and
   its one control; no sentence. It folds by its OWN width (the wrapper is its container): the hero over the three
   tiles, then one row per tile - its sign, its value, its control - on a phone. */
.nl3-setup-wrap { container-type: inline-size; container-name: nl3setup; }
.nl3-setup { display: grid; grid-template-columns: minmax(260px, 320px) repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; overflow: visible; }
.nl3-hero, .nl3-tile { display: grid; grid-template-rows: 20px minmax(0, 1fr) 32px; row-gap: 14px; min-height: 212px; padding: 16px; border-radius: 10px; box-sizing: border-box; min-width: 0; }
.nl3-hero { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.nl3-tile { border: 1px solid var(--border); }
.nl3-tile.is-empty { border-style: dashed; border-color: var(--border-strong); }
/* The drawn campaign: a card in the newsletter's colour, its lines waiting to be written. */
.nl3-art { grid-row: 1 / 3; align-self: center; justify-self: center; width: 100%; max-width: 248px; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08); }
.nl3-art-band { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; background: currentColor; }
.nl3-art-band > i { display: block; width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .9); }
.nl3-art-band > i + i { width: 64px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .7); }
.nl3-art-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.nl3-art-body > i { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.nl3-art-body > .nl3-art-l1 { width: 70%; height: 8px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.nl3-art-body > .nl3-art-l3 { width: 86%; }
.nl3-art-body > .nl3-art-cta { width: 60px; height: 18px; margin-top: 2px; border-radius: 6px; background: var(--text); }
.nl3-art-t { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-hero-acts { grid-row: 3; display: flex; gap: 8px; min-width: 0; }
.nl3-hero-go { flex: 1 1 auto; justify-content: center; min-width: 0; }
.nl3-hero-go > span { overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
/* A tile's head: its glyph and word, its road sign at the end. */
.nl3-tile-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nl3-tile-i { display: inline-flex; color: var(--text-muted); flex: none; }
.nl3-tile-i svg { width: 16px; height: 16px; }
.nl3-tile-k { font-size: 13px; font-weight: 600; color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-tile-s { margin-left: auto; display: inline-flex; flex: none; }
.nl3-tile-s svg { width: 18px; height: 18px; }
.nl3-tile-b { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nl3-tile-f { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.nl3-tile-f > .nlv-btn > svg:last-child:not(:first-child) { width: 12px; height: 12px; }
.nl3-tile-av { display: inline-flex; flex: none; width: 40px; height: 40px; }
.nl3-tile-av .nl3-tile-face, .nl3-spick-av .nl3-tile-face { width: 40px !important; height: 40px !important; font-size: 15px; }
.nl3-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nl3-who > b { font-size: 15px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-who-a { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nl3-who-a > span { min-width: 0; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-faces-l .nl3-face, .nl3-faces-l .nl3-face.avatar-img { width: 34px !important; height: 34px !important; font-size: 13px; box-shadow: 0 0 0 2px var(--surface); }
.nl3-faces-l .nl3-face + .nl3-face { margin-left: -8px; }
.nl3-faces-l .nl3-face-more { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.nl3-tile-pend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; }
.nl3-tile-pend svg { width: 15px; height: 15px; }
.nl3-tile-pend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* A seat that holds nobody yet: drawn empty, never a sentence. */
.nl3-seat { display: inline-flex; align-items: center; gap: 12px; }
.nl3-seat > i { display: block; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 1.5px dashed var(--border-strong); }
.nl3-seat > span { display: flex; flex-direction: column; gap: 8px; }
.nl3-seat > span > i { display: block; width: 110px; height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.nl3-seat > span > i + i { width: 150px; height: 8px; }
.nl3-seat.is-faces { gap: 0; }
.nl3-seat.is-faces > i { width: 34px; height: 34px; }
.nl3-seat.is-faces > i + i { margin-left: -8px; }
/* An address: its words, then its copy (and its open) - a designed chip, one line. */
.nl3-addr {
    display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 10px; box-sizing: border-box; max-width: 100%; min-width: 0;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.nl3-addr > span { min-width: 0; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 4px; }
.nl3-addr > button, .nl3-addr > a {
    flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nl3-addr > button:hover, .nl3-addr > a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nl3-addr svg { width: 13px; height: 13px; }
/* The sign-up page's switch: the house switch, then its one word. */
.nl3-switch { display: inline-flex; align-items: center; gap: 10px; height: 32px; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; }
/* The sender picker, under its Change: the organisation's senders; a press chooses. */
.nl3-spick {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 340px; max-width: calc(100vw - 48px); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.nl3-spick[hidden] { display: none; }
.nl3-spick.is-up { top: auto; bottom: calc(100% + 6px); }
.nl3-spick-o {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; column-gap: 12px; align-items: center; min-height: 56px; padding: 6px 10px;
    border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.nl3-spick-o:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.nl3-spick-o.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nl3-spick-av { display: inline-flex; width: 40px; height: 40px; }
.nl3-spick-w { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nl3-spick-w > b { font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-spick-w > span { font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl3-spick-s { display: inline-flex; }
.nl3-spick-s svg { width: 16px; height: 16px; }
.nl3-spick-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.nl3-spick-more {
    display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
    color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.nl3-spick-more:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.nl3-spick-more svg { width: 14px; height: 14px; margin: 0 13px; }
/* Under 1000px of card the hero stands over the three tiles, its picture beside its verbs. */
@container nl3setup (max-width: 1000px) {
    .nl3-setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nl3-hero { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; column-gap: 20px; min-height: 0; }
    .nl3-art { grid-row: auto; }
    .nl3-hero-acts { grid-row: auto; justify-content: flex-start; }
    .nl3-hero-go { flex: 0 1 auto; }
}
/* On a phone's width each tile is ONE row: its sign, its value, its control - the words go, the marks stay. */
@container nl3setup (max-width: 640px) {
    .nl3-setup { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 12px 4px; }
    .nl3-hero { grid-template-columns: minmax(0, 1fr); padding: 0 0 12px; background: transparent; }
    .nl3-art { display: none; }
    .nl3-hero-go { flex: 1 1 auto; height: 40px; }
    .nl3-hero-acts > .nlv-ibtn { width: 40px; height: 40px; }
    .nl3-tile, .nl3-tile.is-empty { grid-template-rows: none; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 60px; padding: 8px 4px; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
    .nl3-tile-h { display: contents; }
    .nl3-tile-i, .nl3-tile-k { display: none; }
    .nl3-tile-s { grid-column: 1; grid-row: 1; margin: 0; }
    .nl3-tile-b { grid-column: 2; grid-row: 1; }
    .nl3-tile-f { grid-column: 3; grid-row: 1; }
    .nl3-tile-f > .nlv-btn > span, .nl3-switch > span:last-child { display: none; }
    .nl3-tile-f > .nlv-btn { width: 32px; padding: 0; justify-content: center; }
    .nl3-who-a, .nl3-seat > span { display: none; }
    .nl3-tile-av, .nl3-tile-av .nl3-tile-face { width: 32px !important; height: 32px !important; }
    .nl3-seat > i { width: 32px; height: 32px; }
    .nl3-spick { left: auto; right: 0; }
}

/* ── The subscribers' lane (the approved sketch, B5-B7) ─────────────────────────────────────────────────
   The filters are chips at the list's top; a row is ONE line - the face, the name and its full address - then
   its state as its mark, how it came as its glyph, since when, and its verb at the row's end, seen on hover (always
   under a finger). The columns hold what they hold: the person ends where a long address does, the facts follow it.
   Filtered on one state the state column folds away. Under 720px of list the row keeps its face, its name, its
   mark and its verb. */
.nl3-fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.nl3-fchip {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-decoration: none;
}
.nl3-fchip:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); text-decoration: none; }
.nl3-fchip.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); border-color: color-mix(in srgb, var(--text) 16%, transparent); }
.nl3-fchip-i { display: inline-flex; }
.nl3-fchip-i svg { width: 15px; height: 15px; }
.nl3-fchip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.nl3-sgrid {
    display: grid; grid-template-columns: 32px minmax(0, 520px) 56px 56px 80px minmax(0, 1fr) 32px; column-gap: 24px; align-items: center;
    padding: 0 20px; box-sizing: border-box;
}
.nl3-sgrid.is-one-state { grid-template-columns: 32px minmax(0, 520px) 56px 80px minmax(0, 1fr) 32px; }
.nl3-shead { min-height: 40px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); line-height: 1.3; }
.nl3-srow2 { min-height: 56px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nl3-srow2:last-child { border-bottom: 0; }
.nl3-srow2:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.nl3-sc { display: flex; justify-content: flex-start; text-align: left; }
.nl3-sr { text-align: right; justify-self: end; }
.nl3-sst svg, .nl3-ssrc svg { width: 18px; height: 18px; }
.nl3-ssrc { color: var(--text-muted); }
.nl3-pn { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nl3-pn > a { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
.nl3-pn > a:hover { text-decoration: underline; }
.nl3-pn > span { margin-left: 10px; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-muted); }
.nl3-sverb { display: flex; justify-content: flex-end; }
.nl3-srow2 .nl3-sverb > .nlv-ibtn { opacity: 0; transition: opacity .12s; }
.nl3-srow2:hover .nl3-sverb > .nlv-ibtn, .nl3-srow2:focus-within .nl3-sverb > .nlv-ibtn { opacity: 1; }
@media (hover: none) { .nl3-srow2 .nl3-sverb > .nlv-ibtn { opacity: 1; } }
@container nlv-tbl (max-width: 720px) {
    .nl3-shead { display: none; }
    .nl3-sgrid, .nl3-sgrid.is-one-state { grid-template-columns: 32px minmax(0, 1fr) auto 32px; column-gap: 12px; padding: 0 12px; }
    .nl3-pn > span, .nl3-ssrc, .nl3-srow2 > .nl3-sr, .nl3-srow2 > span:empty { display: none; }
    .nl3-sgrid.is-one-state { grid-template-columns: 32px minmax(0, 1fr) 32px; }
    .nl3-sgrid.is-pick, .nl3-sgrid.is-pick.is-one-state { grid-template-columns: 18px 32px minmax(0, 1fr) auto 32px; }
    .nl3-sgrid.is-pick.is-one-state { grid-template-columns: 18px 32px minmax(0, 1fr) 32px; }
    .nl3-srow2 .nl3-sverb > .nlv-ibtn { opacity: 1; }
}

/* ── Composer V3 (the approved sketch "Newsletter - campaign composer V2 / V3", owner, 2026-10-31) ─────────────
   THE STUDIO: three columns - the blocks (to add, or the message's own in order), the message under the line its
   inbox shows, the chosen block's settings or the message's style. Each column is the ONE scroller of its own
   content; both side columns widen by their grip (--nlv-pal-w, --nlv-side-w, set by newsletters-composer.js). Under
   a narrow window the blocks fold to their glyphs and the settings ride over the message. */
.nlv-content-step > .nlv-compose {
    /* The columns' widths at rest; a grip's drag sets them inline on this element, over these. */
    --nlv-pal-w: 248px; --nlv-side-w: 300px;
    display: grid; grid-template-columns: var(--nlv-pal-w, 248px) minmax(0, 1fr) var(--nlv-side-w, 300px);
    position: relative; overflow: hidden;
}
.nlv-content-step .nlv-compose > .nlv-stage { padding: 0; gap: 0; overflow: hidden; align-items: stretch; min-width: 0; }
/* The stage's tool row folds by the STAGE's width, never the window's: a column widened by its grip folds its words to
   their glyphs (each riding its tooltip) before any control is cut. */
.nlv-content-step .nlv-compose > .nlv-stage { container-type: inline-size; container-name: nlstage; }
/* Under 640px of stage (a side panel open beside an iPad's stage): the AI pass and the preview fold to their glyph, their word riding the
   tooltip, so Full screen keeps its place at the row's end. */
@container nlstage (max-width: 640px) {
    .nlv-stage-bar > .nlv-btn.nl-ai-pass { width: 32px; padding: 0; justify-content: center; margin-left: 0; }
    .nlv-stage-bar > .nlv-btn.nl-ai-pass > span { display: none; }
    .nlv-mode-tg { width: 28px; padding: 0; justify-content: center; }
    .nlv-mode-tg > span { display: none; }
}
@container nlstage (max-width: 520px) {
    .nlv-content-step .nlv-compose > .nlv-stage > .nlv-stage-bar { padding: 10px 8px; gap: 6px; }
}
.nlv-content-step .nlv-compose > .nlv-side { width: auto; min-width: 0; position: relative; overflow: visible; border-top: 0; border-left: 1px solid var(--border); }
.nlv-content-step .nlv-compose > .nlv-side > .nlv-side-body { overflow-y: auto; }

/* The blocks' column. */
.nlv-pal-side { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
.nlv-pal-head { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
.nlv-pal-tabs { display: flex; height: 32px; box-sizing: border-box; }
.nlv-pal-tabs > .bf-segmented-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; white-space: nowrap; }
.nlv-pal-tabs svg { width: 14px; height: 14px; flex: none; }
.nlv-pal-find { min-width: 0; width: 100%; }
.nlv-pal-find[hidden] { display: none; }
.nlv-pal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.nlv-pal-pane { display: flex; flex-direction: column; gap: 16px; }
.nlv-pal-pane[hidden], .nlv-pal-side [data-nl-pal-group][hidden], .nlv-pal-side [data-nl-add][hidden], .nlv-pal-side [data-nl-tag][hidden] { display: none; }
.nlv-pal-side .nlv-pal { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.nlv-pal-side .nlv-pal button { height: 60px; min-width: 0; padding: 0 4px; font-size: 11px; font-weight: 600; }
.nlv-pal-side .nlv-pal button > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.nlv-pal-toggle { display: none; }

/* The message's own blocks in order: a press chooses, a drag moves. */
.nlv-struct { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nlv-struct-i { display: grid; grid-template-columns: 16px 72px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 40px; padding: 0 8px; border-radius: 8px; cursor: pointer; outline: 0; }
.nlv-struct-i.is-drag { cursor: grab; }
.nlv-struct-i:hover, .nlv-struct-i:focus-visible { background: color-mix(in srgb, var(--text) 4%, transparent); }
.nlv-struct-i.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlv-struct-i.is-over { box-shadow: inset 0 2px 0 var(--text); }
.nlv-struct-i.is-moving { opacity: .5; }
.nlv-struct-g { display: inline-flex; color: var(--text-muted); }
.nlv-struct-g svg { width: 14px; height: 14px; }
.nlv-struct-i > b { font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-struct-w { font-size: 12px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A side column's grip: drag to widen, a double-click puts it back; its width said while it moves. */
.nlv-grip { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 3; cursor: col-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.nlv-pal-side > .nlv-grip { right: -6px; }
.nlv-side > .nlv-grip { left: -6px; }
.nlv-grip::before { content: ""; width: var(--bf-grip-w); height: var(--bf-grip-h); border-radius: var(--bf-grip-r); background: var(--bf-grip-rest); transition: background-color .12s ease; }
.nlv-grip:hover::before { background: var(--bf-grip-hot); }
.nlv-grip.is-hot::before { background: var(--bf-grip-drag); }
.nlv-grip.is-hot[data-width]::after {
    content: attr(data-width); position: absolute; top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 6px;
    background: #111418; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none;
}
.nlv-pal-side > .nlv-grip.is-hot::after { left: 16px; }
.nlv-side > .nlv-grip.is-hot::after { right: 16px; }

/* The studio's tool row and its canvas, the ONE scroller of the message. */
.nlv-content-step .nlv-stage > .nlv-stage-bar { flex: none; min-height: 52px; padding: 10px 14px; box-sizing: border-box; gap: 8px; }
.nlv-stage-bar > .nlv-ibtn, .nlv-stage-bar > .bf-segmented, .nlv-stage-bar > .nlv-btn { height: 32px; box-sizing: border-box; flex: none; }
.nlv-ibtn.is-bare { border-color: transparent; background: transparent; }
.nlv-ibtn.is-bare:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nlv-ibtn:disabled { opacity: .4; cursor: default; }
.nlv-style-open { display: none; }
.nlv-stage-bar > .nlv-full { width: 32px; padding: 0; justify-content: center; }
.nlv-canvas { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 24px 32px; }
.nlv-canvas > * { flex-shrink: 0; }
.nlv-canvas > .nlv-render { width: 100%; }
/* The picture being prepared: laid out at its real width (so it can be measured), unseen, the editor still standing.
   It takes the editor's place in ONE frame once it is ready - never a blank, never a jump. */
.nlv-canvas > .nlv-render.is-staging { position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; padding-left: inherit; padding-right: inherit; visibility: hidden; pointer-events: none; }
/* Edited at a phone's width, as a phone reads it: side-by-side parts stack, a block phones do not show says so. */
.nlv-stage[data-device="phone"] .nlv-mail .nlv-it, .nlv-stage[data-device="phone"] .nlv-mail .nlv-cols { grid-template-columns: minmax(0, 1fr); }
.nlv-stage[data-device="phone"] .nlv-mail .nlv-it.is-right > :first-child { order: 0; }
.nlv-stage[data-device="phone"][data-mode="edit"] .nlv-blk.is-hide-phone { opacity: .5; }
.nlv-stage[data-device="phone"][data-mode="edit"] .nlv-blk.is-hide-phone::after {
    content: attr(data-phone-tag); position: absolute; top: 6px; right: 8px; padding: 2px 7px; border-radius: 4px;
    background: rgba(15, 23, 42, .78); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; pointer-events: none;
}
.nlv-stage[data-device="phone"] .nlv-frame { max-width: 375px; }
/* A dark mail app inverts the message's colours: this is what most of them show. */
.nlv-stage[data-view="dark"] .nlv-frame { filter: invert(1) hue-rotate(180deg); }

/* THE BAR (the approved sketch "Newsletter · L'enveloppe du message"): three purposes, three shapes, one family of 28px pills.
   The preview: ONE toggle, a hairline at rest, ink while on. */
.nlv-mode-tg {
    height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; box-sizing: border-box; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.nlv-mode-tg svg { width: 15px; height: 15px; flex: none; }
.nlv-mode-tg:hover { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.nlv-mode-tg.is-on { border-color: var(--text); background: var(--text); color: var(--bg); }
/* The device: two pictures on a soft track, a raised thumb under the one in view. */
.nlv-dev { position: relative; height: 28px; display: inline-flex; align-items: center; padding: 2px; box-sizing: border-box; border-radius: 14px; background: color-mix(in srgb, var(--text) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--border); }
.nlv-dev-thumb { position: absolute; top: 2px; left: 2px; width: 34px; height: 24px; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .18), 0 0 0 .5px rgba(15, 23, 42, .08); transition: left .16s ease; }
.nlv-dev[data-on="phone"] .nlv-dev-thumb { left: 36px; }
.nlv-dev > button { position: relative; width: 34px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); cursor: pointer; }
.nlv-dev > button.is-on, .nlv-dev > button:hover { color: var(--text); }
.nlv-dev svg { width: 15px; height: 15px; }
/* Light or dark: a switch whose track shows both, the knob resting on the one in view; the preview's alone. */
.nlv-lightsw { position: relative; width: 56px; height: 28px; flex: none; padding: 0; box-sizing: border-box; cursor: pointer; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--text) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--border); }
.nlv-lightsw-ic { position: absolute; top: 2px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); z-index: 1; }
.nlv-lightsw-ic.is-sun { left: 2px; color: var(--text); }
.nlv-lightsw-ic.is-moon { right: 2px; }
.nlv-lightsw-ic svg { width: 14px; height: 14px; }
.nlv-lightsw-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: left .16s ease; }
.nlv-lightsw.is-on { background: #1c1c1e; box-shadow: none; }
.nlv-lightsw.is-on .nlv-lightsw-knob { left: 30px; background: #3a3a3c; }
.nlv-lightsw.is-on .nlv-lightsw-ic.is-sun { color: #8e8e93; }
.nlv-lightsw.is-on .nlv-lightsw-ic.is-moon { color: #f2f2f7; }

/* THE ENVELOPE, edited: three lines named, each its own field - the subject bold as an inbox shows it, the preview muted. */
.nlv-inbox {
    width: 100%; max-width: var(--nlm-width, 600px); box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.nlv-inbox-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nlm-brand, #0f172a); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; flex: none; }
.nlv-env-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 34px; }
.nlv-env-k { font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.3; margin: 0; }
.nlv-env-from { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nlv-env-from > .nlv-inbox-av { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 1px var(--border); }
.nlv-env-from-n { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-btn.nlv-env-change { height: 28px; }
.nlv-env-field {
    position: relative; grid-column: 2 / 4; display: flex; align-items: center; gap: 4px; height: 34px; box-sizing: border-box;
    padding: 0 3px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.nlv-env-field:hover { border-color: var(--border-strong); }
.nlv-env-field:focus-within { border-color: var(--text); }
.nlv-env-field input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; line-height: 1.3; }
.nlv-env-field.is-subject input { font-size: 15px; font-weight: 700; }
.nlv-env-field.is-pre { padding-right: 10px; }
.nlv-env-field.is-pre input { font-size: 13px; color: var(--text-muted); }
.nlv-env-ai { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--primary); cursor: pointer; }
.nlv-env-ai svg { width: 15px; height: 15px; }
.nlv-env-ai:hover, .nlv-env-ai.is-open { background: color-mix(in srgb, var(--text) 7%, transparent); }
/* Where a phone cuts the subject: a dashed hairline in the field, the phone under it. */
.nlv-env-field.has-cut { margin-bottom: 20px; }
.nlv-env-cut { position: absolute; top: 6px; bottom: 6px; width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--text) 45%, transparent); }
.nlv-env-cut > svg { position: absolute; top: calc(100% + 11px); left: -7.5px; width: 13px; height: 13px; color: var(--text); }

/* THE ENVELOPE, previewed: the row a recipient's inbox draws - a mail app's own white or its own dark, nothing to act on. On
   a desk ONE line (sender, the subject then the preview line greyed, the hour); on a phone the sender and the hour, the
   subject on one line, the preview line on two. The cut probe is the phone's row, laid out unseen. */
.nlv-inrow {
    max-width: 100%; box-sizing: border-box; overflow: hidden; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center;
    padding: 10px 16px; background: #fff; color: #1f1f1f; border: 1px solid #e3e3e3; border-radius: 12px; font-size: 14px; line-height: 1.4;
}
.nlv-inrow-av { width: 28px; height: 28px; font-size: 12px; }
.nlv-inrow-w { display: grid; grid-template-columns: fit-content(180px) minmax(0, 1fr) auto; grid-template-areas: "from line time"; column-gap: 12px; align-items: baseline; min-width: 0; }
.nlv-inrow-top { display: contents; }
.nlv-inrow-from { grid-area: from; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.nlv-inrow-time { grid-area: time; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.nlv-inrow-line { grid-area: line; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.nlv-inrow-subject { flex: 0 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.nlv-inrow-pre { flex: 1 1 0; min-width: 0; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.nlv-inrow-pre:not(:empty)::before { content: "\2013\00a0"; }
.nlv-stage[data-device="phone"] .nlv-inrow, .nlv-inrow.is-probe { grid-template-columns: 40px minmax(0, 1fr); align-items: start; padding: 12px 16px; }
.nlv-stage[data-device="phone"] .nlv-inrow-av, .nlv-inrow.is-probe .nlv-inrow-av { width: 40px; height: 40px; font-size: 16px; }
.nlv-stage[data-device="phone"] .nlv-inrow-w, .nlv-inrow.is-probe .nlv-inrow-w { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from time" "line line"; row-gap: 1px; }
.nlv-stage[data-device="phone"] .nlv-inrow-from, .nlv-inrow.is-probe .nlv-inrow-from { font-size: 15px; line-height: 1.35; }
.nlv-stage[data-device="phone"] .nlv-inrow-time, .nlv-inrow.is-probe .nlv-inrow-time { font-size: 13px; font-weight: 400; color: #5f6368; line-height: 1.35; }
.nlv-stage[data-device="phone"] .nlv-inrow-line, .nlv-inrow.is-probe .nlv-inrow-line { flex-direction: column; align-items: stretch; gap: 1px; }
.nlv-stage[data-device="phone"] .nlv-inrow-subject, .nlv-inrow.is-probe .nlv-inrow-subject { flex: none; font-size: 15px; font-weight: 600; line-height: 1.35; }
.nlv-stage[data-device="phone"] .nlv-inrow-pre, .nlv-inrow.is-probe .nlv-inrow-pre { flex: none; font-size: 14px; line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nlv-stage[data-device="phone"] .nlv-inrow-pre::before { content: none; }
.nlv-stage[data-view="dark"] .nlv-inrow { background: #1c1c1e; color: #f2f2f7; border-color: #2c2c2e; }
.nlv-stage[data-view="dark"] .nlv-inrow-pre, .nlv-stage[data-view="dark"] .nlv-inrow-time { color: #8e8e93; }
.nlv-inrow.is-probe { position: absolute; left: -9999px; top: 0; width: 375px; visibility: hidden; pointer-events: none; }

/* The foot of the message: the newsletter's, chosen like the header. */
.nlv-mail { padding-bottom: 0; }
.nlv-foot {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; padding: 18px 32px 18px; box-sizing: border-box;
    border-top: 1px solid #eef1f5; font-size: 12px; color: #556274; line-height: 1.6; text-align: left; cursor: pointer; outline: 0;
    box-shadow: inset 0 0 0 1.5px transparent;
}
.nlv-foot[data-align="center"] { align-items: center; text-align: center; }
.nlv-foot:hover, .nlv-foot:focus-visible { box-shadow: inset 0 0 0 1px #cbd5e1; }
.nlv-foot.is-sel { box-shadow: inset 0 0 0 2px #0f172a; }
.nlv-foot:hover .nlv-hdr-tag, .nlv-foot.is-sel .nlv-hdr-tag { opacity: 1; }
.nlv-foot-l { max-width: 100%; }
.nlv-foot-l[hidden] { display: none; }

/* The message's own links, placed anywhere. */
.nlv-own { font-size: 13px; color: #556274; line-height: 1.5; }
.nlv-own-l { text-decoration: underline; }
.nlv-own-l:empty::before { content: attr(data-empty); }
.nlv-must { margin-left: 8px; padding: 1px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.4; }

/* What still stands in the way, in the window's foot, said as the act that settles it: ONE button - its road sign and its
   verb - or, for several, one button saying how many, opening their list. Nothing at all while the message is fine. */
.nlv-checks { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.nlv-checks[hidden] { display: none; }
.nlv-checks > .nl-fix { flex: none; height: 32px; gap: 8px; white-space: nowrap; }
.nl-fix svg, .nl-fixes svg { width: 16px; height: 16px; flex: none; }
.nl-fixes {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 8; width: max-content; max-width: min(480px, 90vw);
    display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14); box-sizing: border-box;
}
/* The review's own section: what only the writer settles, the foot's rows under one head. */
.nl-ai-yours { gap: 4px; }
.nl-ai-yours-h { padding: 0 2px 6px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nl-ai-yours .nl-fixes-row { padding-left: 4px; padding-right: 0; }
.nl-fixes-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px 6px 10px; }
.nl-fixes-row + .nl-fixes-row { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nl-fixes-sign { display: inline-flex; }
.nl-fixes-what { min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; }
.nl-fixes-go { height: 30px; gap: 6px; font-size: 12px; white-space: nowrap; }
.nl-fixes-go svg { display: none; }
/* The doors that read the whole message stand only while there is a message to read. */
.nlv-stage-bar > .nl-ai-pass[hidden], .nl-ai-ideas-door[hidden] { display: none; }
/* Writing an empty block: the ask, ONE verb that writes it from what surrounds it, what the AI reads. */
.nl-ai-menu .nl-ai-write-one { display: flex; width: calc(100% - 20px); margin: 8px 10px 0; height: 36px; justify-content: center; gap: 8px; box-sizing: border-box; }
.nl-ai-menu .nl-ai-from { display: flex; align-items: center; gap: 6px; padding: 10px 12px 6px; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.nl-ai-tile > .nl-ai-why { margin-left: auto; padding-left: 8px; flex: none; font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
.nl-assist:has(.nlv-checks:not([hidden])) .nl-foot-line { flex: 0 1 auto; }

/* START: the campaigns already written as drawn cards; a text read as blocks beside it. */
.nlv-start-more[hidden] { display: none; }
.nlv-start-more > .nlv-find { align-self: flex-start; }
.nlv-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.nlv-tpl-card { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.nlv-tpl-card[hidden] { display: none; }
.nlv-tpl-art { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.nlv-tpl-art > i { display: block; height: 5px; margin: 0 10px; border-radius: 4px; background: #e5e7eb; }
.nlv-tpl-art > .nlv-tpl-band { height: 22px; margin: 0; border-radius: 0; background: var(--tpl-band, #0f172a); }
.nlv-tpl-art > .nlv-tpl-cta { width: 44px; height: 12px; background: var(--tpl-band, #0f172a); }
.nlv-tpl-art > b { margin: 4px 10px 0; font-size: 12px; font-weight: 600; color: #0f172a; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-tpl-card:hover .nlv-tpl-art { border-color: var(--border-strong); }
.nlv-tpl-card[aria-pressed="true"] .nlv-tpl-art { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.nlv-start-more.nlv-imp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nlv-start-more.nlv-imp[hidden] { display: none; }
.nlv-start-more .nlv-imp-drop > textarea { min-height: 220px; }
.nlv-start-more .nlv-imp-rows { overflow: visible; }

/* A laptop: the blocks fold to their glyphs and unfold over the message. A narrower window (an iPad): the settings
   ride over it too, once a block is chosen (or the style is asked). */
@media (max-width: 1440px) {
    .nlv-content-step > .nlv-compose { grid-template-columns: 64px minmax(0, 1fr) var(--nlv-side-w, 300px); }
    .nlv-compose:not(.is-pal-open) .nlv-pal-head, .nlv-compose:not(.is-pal-open) .nlv-pal-side h5,
    .nlv-compose:not(.is-pal-open) .nlv-pal-side .nlv-fields, .nlv-compose:not(.is-pal-open) .nlv-pal-pane[data-nl-pal-pane="structure"] { display: none; }
    .nlv-compose:not(.is-pal-open) .nlv-pal-side .nlv-pal { grid-template-columns: 1fr; }
    .nlv-compose:not(.is-pal-open) .nlv-pal-side .nlv-pal button { height: 44px; }
    .nlv-compose:not(.is-pal-open) .nlv-pal-side .nlv-pal button > span { display: none; }
    .nlv-compose:not(.is-pal-open) .nlv-pal-body { padding: 0 10px 10px; }
    .nlv-compose:not(.is-pal-open) .nlv-pal-pane[data-nl-pal-pane="blocks"] { display: flex !important; gap: 6px; }
    .nlv-compose:not(.is-pal-open) .nlv-pal-side [data-nl-pal-group]:last-child { display: none; }
    .nlv-pal-toggle { display: inline-flex; flex: none; align-self: center; margin: 10px 0 8px; background: var(--text); border-color: var(--text); color: var(--surface); }
    .nlv-pal-toggle:hover { color: var(--surface); }
    .nlv-compose.is-pal-open .nlv-pal-toggle { align-self: flex-end; margin: 10px 10px 0; }
    .nlv-compose.is-pal-open .nlv-pal-side {
        position: absolute; left: 0; top: 0; bottom: 0; width: min(300px, calc(100% - 48px)); z-index: 5; box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    }
    .nlv-pal-side > .nlv-grip { display: none; }
}
@media (max-width: 1240px) {
    .nlv-content-step > .nlv-compose { grid-template-columns: 64px minmax(0, 1fr); }
    .nlv-content-step .nlv-compose > .nlv-side {
        position: absolute; right: 12px; top: 64px; bottom: 12px; width: min(320px, calc(100% - 24px)); z-index: 4; display: none;
        border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    }
    .nlv-content-step .nlv-compose.is-side-open > .nlv-side { display: flex; }
    .nlv-side > .nlv-grip { display: none; }
    .nlv-style-open { display: inline-flex; }
    .documents-incassist-foot .nlv-check:not(.is-warn) > span { display: none; }
}
/* Under 1240px the settings open on demand only (the block's gear, the header, the foot, the style), and where the studio
   has room they stand BESIDE the message, which fits itself to what is left - never over the words being edited. Only a
   studio too narrow for both lets them ride over it, and a press into the message lets them go (newsletters-composer.js). */
.nlv-content-step { container: nlcompose / inline-size; }
.nlv-tool.nlv-tool-set { display: none; }
@media (max-width: 1240px) {
    .nlv-tool.nlv-tool-set { display: inline-flex; }
    @container nlcompose (min-width: 800px) {
        .nlv-content-step > .nlv-compose.is-side-open { grid-template-columns: 64px minmax(0, 1fr) 300px; }
        .nlv-content-step .nlv-compose.is-side-open > .nlv-side {
            position: relative; inset: auto; width: auto; z-index: auto; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none;
        }
    }
}
/* An iPad held upright: the rail keeps its marks alone while the studio is open (each mark says its step). */
@media (min-width: 721px) and (max-width: 1000px) {
    .nl-assist.is-wide .documents-incassist-form:has(> .documents-incassist-rail) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
    .nl-assist.is-wide .documents-incassist-rail { padding-right: 8px; }
    .nl-assist.is-wide .documents-incassist-railwords { display: none; }
}
/* Under 900px of window every check is its mark alone (its words ride its tooltip): the foot never clips one. */
@media (max-width: 900px) {
    .nl-assist .documents-incassist-foot .nlv-check > span { display: none; }
    .nl-assist .documents-incassist-foot .nlv-check { width: 32px; padding: 0; justify-content: center; }
}
@media (max-width: 720px) {
    .nlv-canvas { padding: 4px 12px 24px; }
    .nlv-start-more.nlv-imp { grid-template-columns: minmax(0, 1fr); }
}

/* THE SUMMARY, V3: every fact a row with its Change on the left, the message as it will be received on the right. */
.nlv-recap3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 20px; align-items: start; }
.nlv-recap3-l { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nlv-facts3 { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.nlv-fact3 { display: grid; grid-template-columns: 18px 96px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-fact3:last-child { border-bottom: 0; }
.nlv-fact3-g { display: inline-flex; color: var(--text-muted); }
.nlv-fact3-g svg { width: 16px; height: 16px; }
.nlv-fact3-k { font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.35; }
.nlv-fact3-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 13px; line-height: 1.4; }
.nlv-fact3-v > b { font-weight: 600; }
.nlv-fact3-v > span { color: var(--text-muted); }
.nlv-fact3-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
/* The domain's three marks stand on a line of their own, under the address. */
.nlv-fact3-v > .nlv-dns { flex-basis: 100%; justify-content: flex-start; gap: 8px; }
.nlv-fact3 > .nlv-btn { height: 30px; }
.nlv-recap3-checks { justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
.nlv-recap3-r { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: color-mix(in srgb, var(--text) 4%, var(--surface)); min-width: 0; }
.nlv-recap3-bar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 12px; box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--border); }
.nlv-recap3-bar > .bf-segmented { height: 32px; box-sizing: border-box; flex: none; }
.nlv-recap3-bar .bf-segmented-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 13px; line-height: 1.3; }
.nlv-recap3-bar svg { width: 14px; height: 14px; flex: none; }
.nlv-recap3-view { display: flex; justify-content: center; padding: 12px; }
.nlv-recap3-view .nlv-frame { width: 100%; max-width: 600px; min-height: 420px; height: var(--nl-mail-h, 420px); }
/* On a desk the summary fills the step's room: the preview card ends above the foot with the step's own air, and the
   e-mail scrolls inside its frame - never a card cut by the foot (owner, 2026-10-31: "appearance defect here"). */
@media (min-width: 1101px) {
    .nl-recap { flex: 1 1 auto; min-height: 0; }
    .nlv-recap3 { height: 100%; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
    .nlv-recap3-r { min-height: 0; }
    /* The facts, the readiness card and the allowance never squeeze each other: the column is the pane's ONE scroller. */
    .nlv-recap3-l { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
    .nlv-recap3-l > * { flex: none; }
    .nlv-recap3-view { flex: 1 1 auto; min-height: 0; }
    .nlv-recap3-view .nlv-frame { height: 100%; min-height: 0; }
}
.nlv-recap3-view[data-device="phone"] .nlv-frame { max-width: 360px; }
.nlv-recap3-view .nlv-frame[hidden] { display: none; }
.nlv-recap3-src { width: 100%; margin: 0; padding: 12px; box-sizing: border-box; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.nlv-recap3-src[hidden] { display: none; }
@media (max-width: 1100px) { .nlv-recap3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .nlv-fact3 { grid-template-columns: 18px minmax(0, 1fr) auto; } .nlv-fact3-k { display: none; } .nlv-fact3 > .nlv-btn > span { display: none; } }

/* The foot's lines (the approved sketch "Composer Footer & Images", 2026-10-31): one switch of states per line, then
   what the state shows - the automatic words read-only wearing AUTO, one's own words in ink in a field one press
   empties, or the line said gone. The newsletter's name is a chip, in the field as in the automatic words. */
.nlv-foot-seg { width: 100%; height: 32px; box-sizing: border-box; }
.nlv-foot-seg > .bf-segmented-btn { flex: 1 1 0; justify-content: center; font-size: 12px; }
.nlv-foot-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.nlv-foot-auto { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, var(--surface)); font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.nlv-foot-badge { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; box-sizing: border-box; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); line-height: 1.4; margin-top: 1px; }
.nlv-foot-auto-t { min-width: 0; overflow-wrap: anywhere; }
.nlv-foot-gone { padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border); font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.nlv-wfield { display: flex; align-items: flex-start; gap: 8px; min-height: 40px; padding: 8px 8px 8px 12px; box-sizing: border-box; border: 1px solid var(--text); border-radius: 10px; background: var(--surface); }
.nlv-wfield:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); }
.nlv-wfield-t { flex: 1 1 auto; min-width: 0; min-height: 22px; font-size: 13px; color: var(--text); line-height: 1.6; outline: none; overflow-wrap: anywhere; cursor: text; }
.nlv-wfield-clr { flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, var(--surface)); color: var(--text-muted); cursor: pointer; padding: 0; }
.nlv-wfield-clr:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, var(--surface)); }
.nlv-wfield-clr svg { width: 12px; height: 12px; }
.nlv-tok { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; margin: 0 1px; box-sizing: border-box; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.4; vertical-align: 1px; white-space: nowrap; user-select: all; }
.nlv-foot-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; box-sizing: border-box; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.nlv-foot-add:hover { color: var(--text); border-color: var(--text); }
.nlv-foot-add svg { width: 12px; height: 12px; }

/* A picture's panel (the approved sketch "Composer Footer & Images", I1): what it weighs - a road sign, the figure, what it
   weighed as uploaded struck through, the bar of what is left, its size as a chip - then its width, its framing drawn as
   ratios, its style. */
.nlv-iw { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.nlv-iw.is-busy { opacity: .6; }
.nlv-iw-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.nlv-iw-mark svg { width: 18px; height: 18px; }
.nlv-iw-m { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nlv-iw-fig { display: block; white-space: nowrap; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.nlv-iw-fig > b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nlv-iw-from { display: inline; margin-left: 8px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nlv-iw-bar { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 9%, var(--surface)); overflow: hidden; }
.nlv-iw-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--success); }
.nlv-iw.is-raw .nlv-iw-bar > i { background: var(--warning); }
.nlv-iw-dim { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.4; }
.nlv-insp-note.is-busy { color: var(--text); }
.nlv-insp-switch.is-locked { cursor: default; }
.nlv-insp-switch.is-locked .nl-switch { opacity: .55; }
.nlv-slider { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 12px; align-items: center; min-height: 32px; }
.nlv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; --nlv-fill: 100%; }
.nlv-range:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.nlv-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--text) var(--nlv-fill), color-mix(in srgb, var(--text) 14%, var(--surface)) var(--nlv-fill)); }
.nlv-range::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, var(--surface)); }
.nlv-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--text); }
.nlv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text); box-sizing: border-box; box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 18%, transparent); }
.nlv-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text); box-sizing: border-box; }
.nlv-slider-v { display: grid; place-items: center; height: 32px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.4; }
.nlv-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nlv-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 64px; padding: 8px 6px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.nlv-frame:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 40%, var(--border)); }
.nlv-frame[aria-pressed="true"] { color: var(--text); border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nlv-frame-box { display: block; height: 20px; max-width: 36px; border-radius: 4px; border: 1.5px solid currentColor; box-sizing: border-box; }
.nlv-frame-box.is-free { width: 30px; border-style: dashed; }

/* ══ WRITING WITH THE AI (newsletters-ai.js; the approved sketch, rows "AI while writing" and "Ideas, waiting and
   failure") and READY TO SEND (_CampaignReady; row "Before sending"). Every proposal is reviewed where it lands;
   a mark stands only where it says something. ══ */

/* ── The door in a block's toolbar: the same tool, a sparkle and its word ── */
.nlv-tool.nl-ai-door { width: auto; padding: 0 9px; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.nlv-tool.nl-ai-door svg { width: 14px; height: 14px; }
.nlv-tool.nl-ai-door.is-open { background: rgba(255, 255, 255, .16); }
/* The whole message's review, in the stage's tool row; ideas, in the inbox line. */
.nlv-stage-bar > .nlv-btn.nl-ai-pass { margin-left: 8px; font-weight: 600; }
.nlv-btn.nl-ai-pass:disabled { opacity: .5; cursor: default; }
.nlv-btn.nl-ai-pass svg { color: var(--primary); width: 14px; height: 14px; flex: none; }

/* ── THE AI popover (.bf-ai-pop): ask, the one suggestion, four quick tools, More ── */
.nl-ai-menu { position: absolute; z-index: 30; width: 360px; max-width: calc(100% - 32px); }
.nl-ai-menu.is-compact { width: 300px; padding: 0 0 6px; }
.nl-ai-ask { display: flex; align-items: center; gap: 8px; margin: 10px 10px 8px; height: 38px; padding: 0 5px 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); box-sizing: border-box; cursor: text; }
.nl-ai-ask:focus-within { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nl-ai-ask > svg { color: var(--primary); flex: none; }
.nl-ai-ask input { flex: 1; min-width: 0; height: 30px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.3; padding: 0; }
.nl-ai-ask input::placeholder { color: var(--text-muted); }
.nl-ai-ask button { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--text); color: var(--surface); display: grid; place-items: center; cursor: pointer; }
.nl-ai-suggest { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 0 10px 8px; height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); text-align: left; line-height: 1.3; cursor: pointer; }
.nl-ai-suggest svg { width: 16px; height: 16px; flex: none; }
.nl-ai-suggest .nl-ai-why { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.nl-ai-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 10px 8px; }
.nl-ai-tiles.is-one { grid-template-columns: minmax(0, 1fr); padding-top: 4px; }
.nl-ai-tile { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; color: var(--text); line-height: 1.3; cursor: pointer; min-width: 0; }
.nl-ai-tile span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-ai-tile svg { color: var(--text-muted); flex: none; }
.nl-ai-tile:hover, .nl-ai-suggest:hover, .nl-ai-chip:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.nl-ai-more { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 0 10px; height: 40px; padding: 0 6px; box-sizing: border-box; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; font-size: 13px; color: var(--text); text-align: left; line-height: 1.3; cursor: pointer; }
.nl-ai-more > svg { color: var(--text-muted); flex: none; }
.nl-ai-more .nl-ai-more-w { margin-left: auto; min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.nl-ai-sub-h { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; font-size: 13px; line-height: 1.3; }
.nl-ai-back { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.nl-ai-group { padding: 8px 12px 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.nl-ai-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 10px 8px; }
.nl-ai-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12px; color: var(--text); line-height: 1.3; cursor: pointer; }

/* ── A proposal reviewed IN its block: the block ringed, the others stand back, the change in the words ── */
.nlv-blocks.is-ai-reviewing > .nlv-blk:not(.is-ai-review) { opacity: .42; pointer-events: none; }
/* The proposal is a layer over its block: the block keeps its size underneath, unseen, so nothing moves when the
   answer arrives; the layer (the block's face, then the review card) stands over what follows. */
.nlv-blk.is-ai-review { z-index: 6; border-color: transparent !important; }
.nlv-blk.is-ai-review > :not(.nl-ai-sheet) { visibility: hidden; }
.nlv-blk.is-ai-review > .nlv-tools { display: none !important; }
.nl-ai-sheet { position: absolute; top: -1.5px; left: -1.5px; right: -1.5px; z-index: 6; }
.nl-ai-sheet > .nl-ai-sheet-blk { background: #fff; border: 1px solid transparent !important; box-shadow: 0 0 0 2px #0f172a; }
.nl-ai-sheet-blk .nlv-ed p { margin: 0 0 12px; }
.nl-ai-sheet-blk .nlv-ed p:last-child { margin-bottom: 0; }
.nl-ai-sheet-blk .bf-textdiff-del, .nl-ai-sheet-blk .bf-textdiff-add { font-weight: inherit; }
.nl-ai-before { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-left: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.nl-ai-review { margin: 12px 0 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 32px rgba(15, 23, 42, .12); color: var(--text); text-align: left; }
.nl-ai-review-h { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 14px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl-ai-review-h b { font-size: 13px; font-weight: 650; line-height: 1.3; min-width: 0; }
.nl-ai-review-h .nl-ai-spark { color: var(--primary); display: inline-grid; flex: none; }
.nl-ai-review-h .bf-segmented { height: 30px; margin-left: auto; flex: none; }
.nl-ai-review-h .bf-segmented-btn { padding: 0 10px; font-size: 12px; }
.nl-ai-refine { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.nl-ai-refine .nl-ai-field { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; box-sizing: border-box; line-height: 1.3; outline: 0; }
.nl-ai-refine .nl-ai-field:focus { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nl-ai-refine .nl-ai-field::placeholder { color: var(--text-muted); }
.nlv-btn.nl-ai-sq { width: 34px; height: 34px; padding: 0; justify-content: center; flex: none; }
.nl-ai-review-f { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.nl-ai-review-f .nlv-btn { height: 34px; }
.nl-ai-review-f .nl-ai-left, .nl-ai-review-f .nl-ai-hint { margin-right: auto; }
.nl-ai-hint { font-size: 12px; color: var(--text-muted); line-height: 1.3; display: inline-flex; gap: 6px; align-items: center; }
.nl-ai-wait { display: flex; align-items: center; gap: 12px; padding: 16px 14px; font-size: 13px; color: var(--text); line-height: 1.4; }
.nl-ai-wait.is-pane { padding: 4px 0 0; }
.nl-ai-wait.is-inline { padding: 8px 0 0; font-size: 12px; }
.nl-ai-wait > svg { width: 20px; height: 20px; flex: none; }
.nl-ai-wait-w { flex: 1; min-width: 0; }
.nl-ai-dots { display: inline-flex; gap: 6px; flex: none; }
.nl-ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); opacity: .5; }
.nl-ai-dots i:nth-child(2) { opacity: .3; }
.nl-ai-dots i:nth-child(3) { opacity: .15; }
.nl-ai-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* ── The side panel while a proposal stands: what it changes, by marks; what left for the server ── */
.nl-ai-facts { display: flex; flex-direction: column; gap: 10px; }
.nl-ai-fact { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 28px; font-size: 13px; line-height: 1.35; color: var(--text); }
.nl-ai-fact.is-plain { grid-template-columns: minmax(0, 1fr) auto; }
.nl-ai-fact > svg { width: 18px; height: 18px; }
.nl-ai-fact .nl-ai-val { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-ai-sent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, var(--surface)); font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.nl-ai-sent svg { color: var(--text-muted); margin-top: 1px; }

/* ── The whole message reviewed: a number on each change where it stands, the list in the side panel ── */
.nl-ai-pin { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--surface); font-size: 11px; font-weight: 700; line-height: 1; font-style: normal; flex: none; }
.nl-ai-pin.is-kept { background: var(--mark-success); color: var(--mark-success-ink); }
.nl-ai-pin.is-abs { position: absolute; left: -10px; top: -10px; z-index: 3; box-shadow: 0 0 0 3px var(--surface); }
.is-ai-pinned { position: relative; }
.is-ai-pinned.is-ai-on { box-shadow: 0 0 0 2px var(--text); border-radius: 8px; }
.nlv-inbox:has(.nl-ai-pin) { position: relative; }
.nlv-inbox input.is-ai-pinned.is-ai-on { box-shadow: inset 0 0 0 2px var(--text); border-radius: 6px; }
.nl-ai-count { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.nl-ai-count b { font-size: 15px; font-weight: 650; line-height: 1.3; }
.nl-ai-count span { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nl-ai-progress { display: grid; gap: 6px; }
.nl-ai-progress i { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, var(--surface)); }
.nl-ai-progress i.is-kept { background: var(--mark-success); }
.nl-ai-progress i.is-gone { background: color-mix(in srgb, var(--text) 40%, var(--surface)); }
.nl-ai-item { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.nl-ai-item.is-on { box-shadow: 0 0 0 2px var(--text); border-color: transparent; cursor: default; }
.nl-ai-item.is-done { background: color-mix(in srgb, var(--text) 3%, var(--surface)); cursor: default; }
/* A decided proposal folds to its line: its number, what it was, and what became of it. */
.nl-ai-item.is-done > :not(.nl-ai-item-h) { display: none; }
.nl-ai-item.is-done { gap: 0; padding: 6px 12px; }
.nl-ai-item-h { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nl-ai-item-h .nl-ai-acts { margin-left: auto; }
.nl-ai-acts { display: inline-flex; gap: 6px; flex: none; }
.nl-ai-acts button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text); cursor: pointer; }
.nl-ai-acts button.is-keep { background: var(--text); border-color: var(--text); color: var(--surface); }
.nl-ai-item p, .nl-ai-diff p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.nl-ai-diff { display: flex; flex-direction: column; gap: 6px; }
/* A diff read as marks: a removed run and an added one never touch, and wrapped marked lines keep their air. */
.nl-ai-item p, .nl-ai-diff p, .nl-ai-swap { line-height: 1.9; }
.nl-ai-sheet-blk .nlv-ed { line-height: 1.8; }
.nl-ai-item .bf-textdiff-del + .bf-textdiff-add, .nl-ai-item .bf-textdiff-add + .bf-textdiff-del,
.nl-ai-sheet-blk .bf-textdiff-del + .bf-textdiff-add, .nl-ai-sheet-blk .bf-textdiff-add + .bf-textdiff-del { margin-left: 8px; }
.nl-ai-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nl-ai-swap svg { color: var(--text-muted); flex: none; }
.nl-ai-alt { display: flex; align-items: center; gap: 10px; }
.nl-ai-thumb { width: 44px; height: 32px; border-radius: 6px; object-fit: cover; flex: none; }
.nl-ai-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.nl-ai-state svg { width: 16px; height: 16px; }
.nl-ai-none { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; }
.nl-ai-none svg { width: 18px; height: 18px; flex: none; }
/* The shared diff tokens are drawn for a light page: on the app's dark chrome (the side panel, a proposal under a field)
   they take the light tones of the same red and green; inside the message, always light, they stay as they are. */
html[data-theme="dark"] .nl-ai-item .bf-textdiff-del, html[data-theme="dark"] .nl-ai-altprop .bf-textdiff-del { color: #fca5a5; text-decoration-color: rgba(252, 165, 165, .75); background: rgba(239, 68, 68, .22); }
html[data-theme="dark"] .nl-ai-item .bf-textdiff-add, html[data-theme="dark"] .nl-ai-altprop .bf-textdiff-add { color: #86efac; background: rgba(34, 197, 94, .2); }
/* A number pinned inside the message wears the message's own ink, whatever the app's theme. */
.nlv-mail .nl-ai-pin { background: #0f172a; color: #ffffff; }
.nlv-mail .nl-ai-pin.is-abs { box-shadow: 0 0 0 3px #ffffff; }
.nlv-mail .nl-ai-pin.is-kept { background: var(--mark-success); color: var(--mark-success-ink); }
.nlv-mail .is-ai-pinned.is-ai-on { box-shadow: 0 0 0 2px #0f172a; }
.nl-ai-list-f { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.nl-ai-list-f .nlv-btn { height: 34px; flex: 1; justify-content: center; }

/* ── Envelope ideas, from the subject: each a whole envelope - its subject over its preview line, named as the envelope
   names them; the card is the choice, its verb in ink once hovered or focused ── */
.nl-ai-ideas { padding: 0; max-width: calc(100% - 32px); }
.nl-ai-ideas .bf-ai-pop-head { justify-content: space-between; gap: 12px; padding: 12px 12px 10px 14px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.nl-ai-ideas .bf-ai-pop-head > svg { color: var(--primary); flex: none; }
.nl-ai-ideas .bf-ai-pop-head > span { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.nlv-btn.nl-ai-env-more { height: 28px; flex: none; font-size: 13px; }
.nl-ai-env-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.nl-ai-env {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: baseline; width: 100%; box-sizing: border-box;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.nl-ai-env:hover, .nl-ai-env:focus-visible { background: color-mix(in srgb, var(--text) 4%, var(--surface)); border-color: var(--border-strong); outline: 0; }
.nl-ai-env-k { font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.3; }
.nl-ai-env-sub { grid-column: 2; font-size: 14px; font-weight: 700; line-height: 1.35; }
.nl-ai-env-pre { grid-column: 2; font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.nl-ai-env-use {
    grid-column: 3; grid-row: 1 / 3; align-self: center; height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; box-sizing: border-box; border-radius: 8px;
    font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; background: var(--text); color: var(--bg); opacity: 0;
}
.nl-ai-env-use svg { width: 13px; height: 13px; }
.nl-ai-env:hover .nl-ai-env-use, .nl-ai-env:focus-visible .nl-ai-env-use { opacity: 1; }
/* A narrow envelope (a small window): the verb is its mark alone, its word riding the card's tooltip, so the words keep the room. */
.nl-ai-ideas { container: nlideas / inline-size; }
@container nlideas (max-width: 480px) {
    .nl-ai-env { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 10px; }
    .nl-ai-env-use { width: 28px; padding: 0; justify-content: center; }
    .nl-ai-env-use > span { display: none; }
}
.nl-ai-pop-f { display: flex; gap: 8px; padding: 8px 12px 8px; }

/* ── A picture's words, proposed under its field ── */
.nlv-btn.nl-ai-alt-btn { margin-top: 8px; height: 30px; }
.nlv-btn.nl-ai-alt-btn svg { color: var(--primary); width: 14px; height: 14px; }
.nl-ai-altprop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; line-height: 1.45; }

/* ── Ready to send: the register's card in the summary ── */
.nl-rts-host { display: block; }
.nl-rts-host[aria-busy="true"] { opacity: .6; }
.nl-rts { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.nl-rts-h { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; }
.nl-rts-ring { position: relative; width: 64px; height: 64px; }
.nl-rts-ring svg { display: block; }
.nl-rts-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--text); }
.nl-rts-say { min-width: 0; }
.nl-rts-h h3 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--text); }
.nl-rts-h p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.nl-rts-tools { display: flex; align-items: center; gap: 8px; }
.nl-rts-tools .nlv-btn { height: 32px; }
.nl-rts-fix { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 58px; padding: 8px 18px; border-top: 1px solid var(--border); box-sizing: border-box; }
.nl-rts-fix > svg { width: 18px; height: 18px; }
.nl-rts-fix-w { min-width: 0; }
.nl-rts-fix b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); }
.nl-rts-fix span.l { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35; margin-top: 1px; }
.nl-rts-fix .nlv-btn { height: 32px; }
.nl-rts-fix .nlv-btn svg, .nl-rts-line .nlv-btn svg { color: var(--primary); width: 14px; height: 14px; }
.nl-rts-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; color: var(--text); white-space: nowrap; line-height: 1.3; box-sizing: border-box; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.nl-rts-folded { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 18px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; font-size: 13px; color: var(--text-muted); line-height: 1.35; text-align: left; cursor: pointer; }
.nl-rts-folded:hover { color: var(--text); }
.nl-rts-chev { margin-left: auto; display: inline-grid; color: var(--text-muted); transition: transform .14s ease; }
[aria-expanded="true"] > .nl-rts-chev { transform: rotate(180deg); }
.nl-rts-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 24px; padding: 0 18px; border-top: 1px solid var(--border); }
.nl-rts-groups[hidden] { display: none; }
/* The groups never touch: a real gap between the columns, the hairlines drawn inside it and between rows. */
.nl-rts-group { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; min-height: 52px; padding: 8px 0; border: 0; box-sizing: border-box; font: inherit; font-size: 13px; color: var(--text); line-height: 1.35; background: none; text-align: left; width: 100%; cursor: pointer; }
.nl-rts-group:not(.is-row1)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); }
.nl-rts-group.is-right::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.nl-rts-gn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-rts-g { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text); }
.nl-rts-g svg { width: 15px; height: 15px; }
.nl-rts-sum { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nl-rts-sum svg { width: 16px; height: 16px; }
.nl-rts-open { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin: 0 -18px; padding: 12px 18px 14px 56px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--text) 2%, var(--surface)); }
.nl-rts-open[hidden] { display: none; }
.nl-rts-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 32px; font-size: 13px; line-height: 1.35; color: var(--text); }
.nl-rts-line > svg, .nl-rts-line > span > svg { width: 16px; height: 16px; }
.nl-rts-lt { min-width: 0; }
.nl-rts-val { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; line-height: 1.35; }
.nl-rts-line .nlv-btn { height: 30px; }
.nl-rts-okq, .nl-rts-unk { display: inline-grid; place-items: center; width: 18px; color: var(--text-muted); }
.nl-rts-okq svg, .nl-rts-unk svg { width: 15px; height: 15px; }

/* ── The real reception test, a window stacked over the campaign ── */
.bf-modal.nl-rx-modal { z-index: 2060; }
.bf-modal-card.nl-rx-card { width: min(760px, calc(100vw - 32px)); border-radius: 16px; overflow: hidden; padding: 0; }
.nl-rx-h { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl-rx-hg { width: 24px; height: 32px; display: grid; place-items: center; color: var(--text); flex: none; }
.nl-rx-h h2 { margin: 0; flex: 1; font-size: 16px; font-weight: 650; line-height: 1.3; }
.nl-rx-sub { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: color-mix(in srgb, var(--text) 3%, var(--surface)); font-size: 13px; color: var(--text); line-height: 1.4; }
.nl-rx-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1; }
.nl-rx-when { color: var(--text-muted); }
.nl-rx-sub .nlv-btn { height: 34px; margin-left: auto; flex: none; }
.nl-rx-sub .nlv-btn:disabled { opacity: .55; cursor: default; }
.nl-rx-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 110px; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.nl-rx-g { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text); }
.nl-rx-who { min-width: 0; }
.nl-rx-who b { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-rx-plain { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.nl-rx-verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.nl-rx-verdict > svg, .nl-rx-verdict > span > svg { width: 18px; height: 18px; }
.nl-rx-score { text-align: right; }
.nl-rx-score b { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.nl-rx-score span { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.nl-rx-raw { padding: 12px 20px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.nl-rx-raw summary { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.35; cursor: pointer; list-style: none; min-height: 28px; }
.nl-rx-raw summary::-webkit-details-marker { display: none; }
.nl-rx-raw summary svg { transform: rotate(-90deg); transition: transform .14s ease; }
.nl-rx-raw[open] summary svg { transform: none; }
.nl-rx-raw code { display: block; margin-top: 6px; font-family: 'Cascadia Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-muted); line-height: 1.5; white-space: normal; word-break: break-word; }
@media (max-width: 640px) {
    .nl-rts-h { grid-template-columns: 52px minmax(0, 1fr); }
    .nl-rts-tools { grid-column: 1 / -1; }
    .nl-rts-fix { grid-template-columns: 18px minmax(0, 1fr); }
    .nl-rts-fix > .nl-rts-chip, .nl-rts-fix > .nlv-btn { grid-column: 2; justify-self: start; }
    .nl-rts-groups { grid-template-columns: minmax(0, 1fr); }
    .nl-rts-group.is-right::before { display: none; }
    .nl-rts-group.is-right.is-row1::after { display: block; }
    .nl-rx-row { grid-template-columns: 36px minmax(0, 1fr); }
    .nl-rx-verdict, .nl-rx-score { grid-column: 2; text-align: left; }
}

/* ── The subscribers come from TWO sources (owner, 2026-11-01: "be sure we are 100% clear and standard for audience /
   segments / subscribers"): the space's CONTACTS and the ORGANISATION (all of it, or teams, kept up to date). ONE list
   holds both; a campaign goes to every subscriber or to a view of the contacts. ── */
.nl-org-pile { display: inline-flex; align-items: center; justify-self: start; min-width: 0; }
.nl-org-pile .nl-org-pip { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px var(--surface); box-sizing: border-box; }
.nl-org-pile > .nl-org-pip + .nl-org-pip, .nl-org-pile > span + span:not(.nl-org-more) { margin-left: -6px; }
.nl-org-pile > span { display: inline-flex; }
.nl-org-pile > .nl-org-more { margin-left: 10px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }

/* The add window's contacts: the find, a view and the pasted addresses on ONE row of one height. */
.nl3-ctools { gap: 8px; align-items: center; }
.nl3-ctools > .nl3-find, .nl3-ctools > .nl3-paste-door, .nl3-ctools .bf-select-trigger { height: 34px; box-sizing: border-box; }
.nl3-ctools > .nl3-paste-door { flex: none; }
.nl3-ctools > .nl3-paste-door.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); border-color: color-mix(in srgb, var(--text) 16%, transparent); }
.nl3-ctools .nl3-src-c { margin-left: 2px; }
.nl3-view-pick { flex: 0 1 200px; min-width: 0; }
/* The list head: its box chooses every contact found; the figure says how many there are. */
.nl3-lhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 14px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.nl3-lhead[hidden] { display: none; }
.nl3-lhead-k { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nl3-lhead-n { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.nl3-lhead-n svg { width: 13px; height: 13px; }
.nl3-all { position: relative; display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; cursor: pointer; }
.nl3-all > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nl3-all > input:checked + .nl3-box { background: var(--text); border-color: var(--text); color: var(--surface); }
.nl3-all > input:focus-visible + .nl3-box { outline: 2px solid var(--text); outline-offset: 2px; }
.nl3-all > input:disabled + .nl3-box { opacity: .45; }
.nl3-box-some { display: none; width: 8px; height: 2px; border-radius: 1px; background: var(--surface); }
.nl3-all.is-some .nl3-box { background: var(--text); border-color: var(--text); }
.nl3-all.is-some .nl3-box svg { display: none; }
.nl3-all.is-some .nl3-box-some { display: block; }
/* The next page stands as a row of its own height until it is drawn: the list never jumps. */
.nl3-pick-more { min-height: 52px; display: flex; align-items: center; padding: 0 14px; }
.nl3-pick-more::before { content: ""; width: 40%; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.nl3-pastepane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.nl3-pastepane[hidden], .nl3-srcpane-rows[hidden] { display: none; }
/* The organisation's rows: the team's own icon, its name and members, its faces. */
.nl3-orow .nl3-pick-av { align-items: center; justify-content: center; color: var(--text); }
.nl3-orow .nl3-pick-av svg { width: 18px; height: 18px; }
.nl3-team-icon { --bf-icon-size: 28px; width: 28px; height: 28px; border-radius: 8px; flex: none; }
.nl3-orow.is-all { border-bottom: 1px solid var(--border); }
.nl3-orow.is-included { cursor: default; }
.nl3-orow.is-included .nl3-box { background: color-mix(in srgb, var(--text) 35%, var(--surface)); border-color: transparent; color: var(--surface); }
.nl3-orow.is-included .nl3-pick-w b { color: var(--text-muted); }
@media (max-width: 1100px) { .nl3-orow .nl-org-pile { display: none; } }

/* The subscribers' list: a row's box stands in the boxes' OWN column before the face, every row and the head alike; the
   selection bar stands OVER the head with the one verb (nothing below moves). */
.nl3-sgrid.is-pick { grid-template-columns: 18px 32px minmax(0, 520px) 56px 56px 80px minmax(0, 1fr) 32px; }
.nl3-sgrid.is-pick.is-one-state { grid-template-columns: 18px 32px minmax(0, 520px) 56px 80px minmax(0, 1fr) 32px; }
.nl3-pick-cell { display: inline-flex; align-items: center; width: 18px; }
.nl3-pick-cell .nl3-all { gap: 0; }
/* The ONE selection mark, inside its row and off every border (a layer, so nothing moves). */
.nl3-srow2 { position: relative; }
.nl3-srow2.is-picked::before { content: ""; position: absolute; inset: 4px 8px; border-radius: 10px; background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); pointer-events: none; }
.nl3-shead { position: relative; }
.nl3-selbar { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--surface); box-sizing: border-box; }
.nl3-selbar[hidden] { display: none; }
.nl3-selbar .nl3-all { gap: 0; }
.nl3-selbar-n { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.nl3-selbar-p { font-size: 12px; color: var(--text-muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
/* The bar's verbs stand together at its right end, 8px apart (owner, 2026-11-01: "please allign options... With correct
   alignment to right"). */
.nl3-selbar-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.nl3-selbar .nlv-btn { height: 30px; }
/* An organisation source in the list: the whole organisation or a team, its members said by their faces. */
.nl3-orgav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text); }
.nl3-orgav svg { width: 20px; height: 20px; }
.nlv-av .nl3-team-icon { --bf-icon-size: 32px; width: 32px; height: 32px; }
.nl3-orgname { display: flex; align-items: center; gap: 14px; }
.nl3-orgname > b { font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.nl3-pn.nl3-orgname > span { margin-left: 0; font: inherit; }

/* ══ Naming the new contacts (owner, 2026-11-01: "we need to be sure that when we import email, we have associated name";
   the approved sketch "Newsletter · Nommer les nouveaux contacts"). The pasted list says, once, that every unknown
   address becomes a contact; the naming step gives each its name; the unnamed are said, never hidden. ══ */
.nl3-read-act { flex: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 16px; box-sizing: border-box; border-bottom: 1px solid var(--border); }
.nl3-read-line { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.4; }
.nl3-read-line > svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.nl3-read-act .nl3-read-add { margin-left: auto; }
.nl3-mark-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; font-weight: 600; }
.nl3-mark-chip.is-new { border-style: dashed; border-color: var(--border-strong); }
.nl3-rr-w .nl3-rr-co { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.nl3-rr-w .nl3-rr-co svg { width: 12px; height: 12px; }
.nl3-member-mark { display: inline-flex; align-items: center; gap: 6px; }
.nl3-member-mark svg { width: 13px; height: 13px; }

.nl7-names { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.nl7-names .documents-incassist-title { margin: 0; }
.nl7-nfigs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.nl7-nfig { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); line-height: 1.3; }
.nl7-nfig[hidden] { display: none; }
.nl7-nfig svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.nl7-nfig b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nl7-ntable { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 12px; }
.nl7-nhead, .nl7-nrow { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(220px, 1.3fr) minmax(0, 1fr); align-items: center; column-gap: 24px; padding: 0 16px; box-sizing: border-box; }
.nl7-nhead { min-height: 40px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); line-height: 1.3; }
.nl7-nrows { overflow-y: auto; overscroll-behavior: contain; max-height: 360px; }
.nl7-nrow { min-height: 60px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nl7-nrow:last-child { border-bottom: 0; }
.nl7-nav { display: inline-flex; width: 28px; height: 28px; }
.nl7-nav > *, .nl7-nav .bf-avatar-letter { width: 28px !important; height: 28px !important; font-size: 12px; }
.nl7-naddr { min-width: 0; font-size: 13px; color: var(--text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl7-nfield { position: relative; display: flex; align-items: center; min-width: 0; height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-sizing: border-box; padding: 0 8px 0 12px; gap: 8px; }
.nl7-nfield:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
.nl7-nfield > input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; line-height: 1.4; }
.nl7-nguess { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.3; }
.nl7-nguess svg { width: 12px; height: 12px; }
.nl7-nguess[hidden], .nl7-nwarnmark[hidden] { display: none; }
.nl7-nwarnmark { flex: none; display: inline-flex; }
.nl7-nwarnmark svg { width: 16px; height: 16px; }
.nl7-nco { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.4; }
.nl7-nco > svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.nl7-nco > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl7-nwarn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.nl7-nwarn[hidden] { display: none; }
.nl7-nwarn-g { display: inline-flex; }
.nl7-nwarn-g svg { width: 20px; height: 20px; }
.nl7-nwarn-w { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.4; }
.nl7-nwarn-w > b { font-size: 14px; font-weight: 600; color: var(--text); }
.nl7-nwarn-w > span { font-size: 12px; color: var(--text-muted); }
.nl3-chip.is-unnamed { border-style: dashed; border-color: var(--border-strong); }
@media (max-width: 760px) {
    .nl7-nhead { display: none; }
    .nl7-nrow { grid-template-columns: 28px minmax(0, 1fr); row-gap: 8px; padding: 10px 12px; }
    .nl7-nrow > .nl7-nfield, .nl7-nrow > .nl7-nco { grid-column: 2; }
    .nl7-nco:empty { display: none; }
}

/* ══ The Newsletters home (owner, 2026-11-01: "for newsletter click we should have a dedicated page where we add support for
   multiple newsletter registration and subscription management"; the approved sketch "Newsletter · Page d’inscription et
   intégration", boards 9-14): the head card in the newsletter page's grammar, then ONE card per lane. ══ */
.nlv-tile.is-fact { cursor: default; }
.nlv-tile.is-fact:hover { background: none; }
.hm-g { display: inline-flex; flex: none; }
.hm-g svg { width: 18px; height: 18px; }
.hm-card { display: flex; flex-direction: column; overflow: hidden; }
.hm-thead, .hm-row { display: grid; align-items: center; column-gap: 24px; padding: 0 20px; box-sizing: border-box; }
.hm-thead { min-height: 40px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.hm-thead > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.hm-thead .is-num { text-align: right; padding-right: 16px; }
.hm-row { min-height: 64px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); color: var(--text); text-decoration: none; }
.hm-row:last-child { border-bottom: 0; }
a.hm-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); text-decoration: none; }
.hm-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); text-decoration: none; }
a.hm-who:hover { color: var(--text); text-decoration: none; }
a.hm-who:hover > b { text-decoration: underline; text-underline-offset: 3px; }
.hm-who > b { font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-who > span { font-size: 12px; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lane 1: every newsletter. */
.hm-nl { grid-template-columns: 24px minmax(160px, 1.1fr) 112px minmax(200px, 1.6fr) 128px 128px 16px; }
.hm-num { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding-right: 16px; font-variant-numeric: tabular-nums; }
.hm-num > b { font-size: 16px; font-weight: 650; line-height: 1.3; }
.hm-up { font-size: 12px; color: var(--success); line-height: 1.3; }
.hm-last { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-last.is-quiet { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.hm-subj { font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); line-height: 1.4; white-space: nowrap; }
.hm-m { display: inline-flex; align-items: center; gap: 6px; }
.hm-m svg { width: 12px; height: 12px; flex: none; }
.hm-next, .hm-sign { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.hm-next svg { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.hm-sign svg { width: 16px; height: 16px; flex: none; }
.hm-next.is-quiet, .hm-sign.is-quiet { color: var(--text-muted); }
.hm-chev { display: inline-flex; color: var(--text-subtle); }

/* Lane 2: who receives what - one column per newsletter, its name over its cells. */
.hm-fbar { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.hm-tbl { overflow-x: auto; }
.hm-ppl { grid-template-columns: 32px minmax(200px, 1.6fr) repeat(var(--hm-cols, 1), minmax(96px, 128px)) 120px 104px; min-width: min-content; }
.hm-c { display: flex; justify-content: flex-start; min-height: 18px; }
.hm-c svg { width: 18px; height: 18px; }
.hm-c.is-quiet { color: var(--text-subtle); }
.hm-face { display: inline-flex; flex: none; }
.hm-face .contact-avatar { width: 32px; height: 32px; font-size: 13px; }
.hm-since { font-size: 12px; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-end { display: flex; justify-content: flex-end; }
.hm-verb { height: 30px; opacity: 0; transition: opacity .12s ease; }
.hm-row:hover .hm-verb, .hm-verb:focus-visible, .hm-verb[aria-busy="true"] { opacity: 1; }
@media (hover: none) { .hm-verb { opacity: 1; } }
.hm-more { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* A person's choices: one row per newsletter, its switch live; the person's own leave locked. */
.hm-win .bf-modal-card.hm-wcard { width: min(560px, calc(100vw - 32px)); }
.hm-chtitle { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.hm-chtitle .contact-avatar { width: 28px; height: 28px; font-size: 12px; }
.hm-chname { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.hm-chaddr { min-width: 0; padding-left: 10px; border-left: 1px solid var(--border); font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.hm-chs { display: flex; flex-direction: column; padding: 8px 24px 16px; }
.hm-chrow, .hm-offer { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 60px; border-bottom: 1px solid var(--border); }
.hm-chrow:last-child, .hm-offer:last-child { border-bottom: 0; }
.hm-chend { display: inline-flex; align-items: center; }
.hm-lock { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; font-size: 12px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; text-decoration: none; }
a.hm-lock:hover { color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--text) 4%, transparent); }
.hm-lock svg { width: 13px; height: 13px; flex: none; }

/* Lane 3: the space's ONE sign-up page - what it offers on the left, the page as a visitor sees it on the right. */
.hm-signup { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
.hm-sgl { display: flex; flex-direction: column; padding: 16px 24px 20px; border-right: 1px solid var(--border); }
.hm-sgtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; }
.hm-sgtop .nl3-addr { margin: 0; }
.hm-sgstate { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.hm-sgstate svg { width: 16px; height: 16px; flex: none; }
.hm-sgstate.is-quiet { color: var(--text-muted); }
.hm-sgr { min-width: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--text) 3%, var(--bg)); }
.hm-prevbar { flex: none; display: flex; align-items: center; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.hm-prevk { font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
.hm-prevbar .hm-prevgo { margin-left: auto; }
.hm-stage { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; padding: 24px; }
.hm-door { width: 100%; max-width: 460px; box-sizing: border-box; padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .35); }
.hm-door .nl-door { max-width: none; padding: 0; }
@media (max-width: 900px) {
    .hm-signup { grid-template-columns: minmax(0, 1fr); }
    .hm-sgl { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* THE shared form (public page and preview): each newsletter a row the visitor ticks, its own mark in its own colour. */
.nl-picks { display: flex; flex-direction: column; gap: 8px; }
.nl-pick { position: relative; display: grid; grid-template-columns: 18px 18px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 52px; padding: 8px 14px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.nl-pick > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nl-pick-box { width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 6px; box-sizing: border-box; }
.nl-pick > input:checked ~ .nl-pick-box { background: var(--text); border-color: var(--text); box-shadow: inset 0 0 0 3px var(--surface); }
.nl-pick:has(> input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nl-pick > input:focus-visible ~ .nl-pick-box { outline: 2px solid var(--text); outline-offset: 2px; }
.nl-pick-g { display: inline-flex; }
.nl-pick-g svg { width: 18px; height: 18px; }
.nl-pick-name { min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.nl-shared-legal { font-size: 12px; text-align: center; }
.nl-pref-g { display: inline-flex; flex: none; }
.nl-pref-g svg { width: 18px; height: 18px; }
/* The newsletters' table folds by ITS width, never the screen's: what comes next steps out first, then the last campaign,
   then the sign-up's word (its mark stays). */
.hm-card { container-type: inline-size; }
@container (max-width: 960px) {
    .hm-nl { grid-template-columns: 24px minmax(140px, 1fr) 104px minmax(160px, 1.4fr) 120px 16px; }
    .hm-nl > :nth-child(5) { display: none; }
}
@container (max-width: 720px) {
    .hm-nl { grid-template-columns: 24px minmax(0, 1fr) 88px 112px 16px; }
    .hm-nl > :nth-child(4) { display: none; }
}
@container (max-width: 480px) {
    .hm-nl { grid-template-columns: 24px minmax(0, 1fr) 72px 24px 16px; column-gap: 16px; }
    .hm-nl .hm-sign > span, .hm-thead.hm-nl > :nth-child(6) { font-size: 0; }
    .hm-row, .hm-thead { padding-left: 14px; padding-right: 14px; }
}

/* ══ THE sign-up page (owner, 2026-11-01: "need customization appearance support for that. We also need option to get a script
   that we can embed on a webpage"; the approved sketch "Newsletter · Page d’inscription et intégration", boards 1-8): the
   look's colour, font and corners on the page's ground and layout. Public page, a site's frame (the card alone) and the
   settings window's live preview are ONE renderer (_SignupPage). The page's own ink is fixed: it stays light in a dark
   app, as a visitor sees it. ══ */
/* A public door is a page, never the app shell: the document scrolls, html and body grow with what they hold. */
html.nlp-doc, html.nlp-doc > body.nlp-body { height: auto; overflow: visible; }
.nlp-body { margin: 0; min-height: 100vh; background: #ffffff; }
.nlp-embed-body { margin: 0; background: transparent; }
.nlp-host { display: block; min-height: 100vh; }
.nlp-embed-body .nlp-host { min-height: 0; }
.nlp { container-type: inline-size; color: #0f172a; font-family: var(--nlp-font); }
.nlp-in { position: relative; display: flex; min-height: 100vh; box-sizing: border-box; background: #f1f5f9; }
.nlp-ground-brand.nlp-center .nlp-in { background: var(--nlp-accent); }
.nlp-ground-image.nlp-center .nlp-in { background: #0f172a var(--nlp-image) center / cover no-repeat; }
.nlp-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 48px 24px; box-sizing: border-box; }
.nlp-side .nlp-main { background: #f8fafc; }
.nlp-art { flex: 0 0 44%; position: relative; background: color-mix(in srgb, var(--nlp-accent) 14%, #ffffff); }
.nlp-ground-brand .nlp-art { background: var(--nlp-accent); }
.nlp-ground-image .nlp-art { background: #0f172a var(--nlp-image) center / cover no-repeat; }
.nlp-art > span { position: absolute; border-radius: 50%; aspect-ratio: 1; background: color-mix(in srgb, var(--nlp-accent) 22%, transparent); }
.nlp-ground-brand .nlp-art > span { background: rgba(255, 255, 255, .16); }
.nlp-art-a { width: 56%; left: 10%; top: 14%; }
.nlp-art-b { width: 34%; right: 10%; bottom: 10%; }
.nlp-ground-brand .nlp-art > .nlp-art-c, .nlp-art-c { width: 12%; right: 18%; top: 16%; background: #ffffff; }
.nlp-card { width: 100%; max-width: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 36px; border-radius: var(--nlp-radius); background: #ffffff; box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .45); }
.nlp-center.nlp-ground-plain .nlp-card { border: 1px solid #e2e8f0; box-shadow: 0 12px 32px -18px rgba(15, 23, 42, .3); }
.nlp-side .nlp-card { padding: 8px; background: transparent; box-shadow: none; }
.nlp-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #334155; line-height: 1.4; }
.nlp-brand img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; flex: none; }
.nlp-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: #0f172a; line-height: 1.3; overflow-wrap: anywhere; }
.nlp-line { margin: 0; font-size: 15px; color: #475569; line-height: 1.5; }
.nlp-alert { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #0f172a; line-height: 1.4; }
.nlp-alert svg { flex: none; }
.nlp-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.nlp-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.nlp-field > span { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.4; }
.nlp-field > span > i { font-style: normal; font-weight: 400; color: #64748b; }
.nlp-field > input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: min(var(--nlp-radius), 10px); background: #ffffff; color: #0f172a; font: inherit; font-size: 15px; line-height: 1.4; }
.nlp-field > input:focus { outline: 2px solid var(--nlp-accent); outline-offset: 1px; border-color: var(--nlp-accent); }
.nlp-picks { display: flex; flex-direction: column; gap: 8px; }
.nlp-pick { position: relative; display: grid; grid-template-columns: 18px 18px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 52px; padding: 8px 14px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: min(var(--nlp-radius), 10px); background: #ffffff; cursor: pointer; }
.nlp-pick > input, .nlp-consent > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nlp-box { width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #94a3b8; border-radius: 6px; background: #ffffff; }
.nlp-pick > input:checked ~ .nlp-box, .nlp-consent > input:checked ~ .nlp-box { background: var(--nlp-accent); border-color: var(--nlp-accent); box-shadow: inset 0 0 0 3px #ffffff; }
.nlp-pick:has(> input:checked) { border-color: var(--nlp-accent); box-shadow: inset 0 0 0 1px var(--nlp-accent); }
.nlp-pick > input:focus-visible ~ .nlp-box, .nlp-consent > input:focus-visible ~ .nlp-box { outline: 2px solid var(--nlp-accent); outline-offset: 2px; }
.nlp-pick-g { display: inline-flex; }
.nlp-pick-g svg { width: 18px; height: 18px; }
.nlp-pick-name { min-width: 0; font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4; overflow-wrap: anywhere; }
.nlp-consent { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; column-gap: 10px; margin: 2px 0 0; font-size: 13px; color: #475569; line-height: 1.5; cursor: pointer; }
.nlp-consent > .nlp-box { margin-top: 1px; }
.nlp-consent a { color: var(--nlp-accent); }
.nlp-go { min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--nlp-btn-radius); background: var(--nlp-accent); color: var(--nlp-on-accent); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.nlp-go:hover { filter: brightness(.94); }
.nlp-go:focus-visible { outline: 2px solid var(--nlp-accent); outline-offset: 2px; }
/* A public page's second answer (Unsubscribe from everything, Manage my preferences): the hairline beside the accent's verb,
   the same height and corners. */
.nlp-alt { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: var(--nlp-btn-radius); background: #ffffff; color: #0f172a; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; }
.nlp-alt:hover { background: #f8fafc; color: #0f172a; }
.nlp-alt:focus-visible { outline: 2px solid var(--nlp-accent); outline-offset: 2px; }
.nlp-go:disabled, .nlp-alt:disabled { opacity: .55; cursor: default; filter: none; }
/* The address a page speaks to, as a quiet chip under its title. */
.nlp-address { align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; color: #334155; line-height: 1.4; overflow-wrap: anywhere; }
.nlp-done .nlp-address { align-self: center; }
.nlp-legal { margin: 0; font-size: 12px; color: #64748b; text-align: center; line-height: 1.5; }
.nlp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* A narrow page (a phone, a narrow frame): the ground beside the card folds into a band over it. */
@container (max-width: 560px) {
    .nlp-side .nlp-in { flex-direction: column; }
    .nlp-side .nlp-art { flex: 0 0 140px; }
    .nlp-art-a { width: 88px; left: 20px; top: 24px; }
    .nlp-art-b { width: 56px; right: 28px; bottom: 16px; top: auto; }
    .nlp-art-c, .nlp-ground-brand .nlp-art > .nlp-art-c { width: 24px; right: 104px; top: 24px; }
    .nlp-main { align-items: flex-start; padding: 24px 16px; }
    .nlp-card { padding: 24px; }
    .nlp-side .nlp-card { padding: 4px; }
    .nlp-title { font-size: 22px; }
}
/* Inside a site's frame: the card alone, no ground, no page height. */
.nlp-embed .nlp-in { min-height: 0; background: transparent !important; }
.nlp-embed .nlp-main { padding: 2px; background: transparent; }
.nlp-embed .nlp-card { max-width: none; padding: 24px; border: 1px solid #e2e8f0; box-shadow: none; }
/* The settings window's and the Inscription lane's live preview: the page drawn in a frame of its own height. */
.nlp-preview, .nlp-phone { border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--border), 0 12px 32px -18px rgba(0, 0, 0, .35); }
.nlp-preview .nlp-in, .nlp-phone .nlp-in { min-height: 560px; }
.nlp-preview .nlp-main, .nlp-phone .nlp-main { padding: 32px 20px; }

/* ══ The sign-up page's settings window (boards 2-4): chapters, the chapter's rows, the page drawn live. ══ */
.nlpw-tilefoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nlpw-tilefoot .nlv-btn { height: 30px; }
.nlpw .bf-modal-card.nlpw-card { width: min(1240px, calc(100vw - 48px)); height: min(780px, calc(100vh - 48px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.nlpw-card > .documents-incassist-head { flex: none; padding: 16px 16px 14px 24px; border-bottom: 1px solid var(--border); }
.nlpw-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.nlpw-mark { display: inline-flex; flex: none; }
.nlpw-mark svg { width: 18px; height: 18px; }
.nlpw-of { min-width: 0; padding-left: 10px; border-left: 1px solid var(--border); font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.nlpw-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 200px 420px minmax(0, 1fr); }
.nlpw-chs { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: color-mix(in srgb, var(--text) 2%, var(--surface)); }
.nlpw-ch { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; }
.nlpw-ch > svg { flex: none; width: 16px; height: 16px; color: var(--text-muted); }
.nlpw-ch:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.nlpw-ch.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); font-weight: 600; }
.nlpw-ch.is-on > svg { color: var(--text); }
.nlpw-pane { min-height: 0; overflow-y: auto; padding: 4px 24px 24px; border-right: 1px solid var(--border); }
.nlpw-pane .nl3-set-row { grid-template-columns: 24px 96px minmax(0, 1fr); }
.nlpw-pane .nl3-set-v input[type="text"], .nlpw-pane .nl3-set-v input[type="url"] { max-width: none; }
.nlpw-pane .nl3-set-row.nlpw-wide { grid-template-columns: 24px minmax(0, 1fr); row-gap: 8px; }
.nlpw-wide .nl3-set-v { grid-column: 2; justify-content: stretch; }
.nlpw-note { margin: -2px 0 4px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.nlpw-q { margin: 20px 0 12px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.nlpw-opts, .nlpw-sws { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.nlpw-sws { gap: 6px; }
.nlpw-opts .nlv-opt { min-width: 64px; }
.nlpw-opts .nlv-opt.is-on { background: color-mix(in srgb, var(--text) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--text); }
.nlpw-sw { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.nlpw-sw.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.nlpw-logo { display: inline-flex; width: 34px; height: 34px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; background: var(--surface); }
.nlpw-logo.is-wide { width: 56px; }
.nlpw-logo img { width: 100%; height: 100%; object-fit: cover; }
.nlpw-mini { position: relative; display: block; width: 44px; height: 30px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); }
.nlpw-mini > i { position: absolute; display: block; border-radius: 2px; }
.nlpw-mini.is-plain > i, .nlpw-mini.is-brand > i, .nlpw-mini.is-image > i { left: 13px; top: 8px; width: 18px; height: 14px; }
.nlpw-mini.is-plain > i { background: color-mix(in srgb, var(--text) 18%, transparent); }
.nlpw-mini.is-brand { background: var(--text); border-color: var(--text); }
.nlpw-mini.is-brand > i, .nlpw-mini.is-image > i { background: #ffffff; }
.nlpw-mini.is-image { background: linear-gradient(135deg, #b9d4ff, #4d8ff0 60%, #1f5fc8); border-color: #4d8ff0; }
.nlpw-mini.is-center > i:first-child { left: 13px; top: 6px; width: 18px; height: 18px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.nlpw-mini.is-center > i:last-child { display: none; }
.nlpw-mini.is-side > i:first-child { left: 0; top: 0; width: 20px; height: 100%; border-radius: 0; background: var(--text); }
.nlpw-mini.is-side > i:last-child { left: 26px; top: 8px; width: 12px; height: 14px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.nlpw-fixed { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; }
.nlpw-fixed svg { width: 12px; height: 12px; }
.nlpw-more { display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px 38px; border-bottom: 1px solid var(--border); }
.nlpw-more[hidden] { display: none; }
.nlpw-more input { width: 100%; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; }
.nlpw-delay { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; }
.nlpw-delay[hidden] { display: none; }
.nlpw-delay-k { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.nlpw-code { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.nlpw-code[hidden] { display: none; }
.nlpw-code pre { align-self: stretch; margin: 0; font-family: "Cascadia Mono", ui-monospace, monospace; font-size: 12px; color: var(--text); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.nlpw-code .nlv-btn { height: 30px; }
.nlpw-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.nlpw-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text); line-height: 1.3; }
.nlpw-chip button { display: inline-flex; padding: 2px; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.nlpw-chip svg { width: 12px; height: 12px; }
.nlpw-any { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nlpw-any svg { width: 14px; height: 14px; }
.nlpw-addsite { display: flex; gap: 8px; }
.nlpw-addsite input { flex: 1 1 auto; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; }
.nlpw-addsite .nlv-btn { height: 32px; }
.nlpw-prev { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--text) 3%, var(--bg)); }
.nlpw-prevbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--border); }
/* The appearance window's preview bar (the approved sketch "Newsletter · Une seule apparence"): WHAT is shown - every page, then
   every e-mail - FOR which newsletter, then the device as its glyph alone (its word in the tooltip). */
.nlpw-picks { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.nlpw-allnl { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; box-sizing: border-box; border: 1px dashed var(--border-strong); border-radius: 8px;
    font-size: 13px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; }
.nlpw-allnl svg { width: 14px; height: 14px; flex: none; }
.nlpw-prevbar .bf-segmented-btn.nlpw-dev { width: 36px; justify-content: center; padding: 0; }
.nlpw-states { flex: none; display: flex; justify-content: center; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.nlpw-states[hidden] { display: none; }
.nlpw-mailbox { height: 100%; min-height: 520px; }
.nlpw-mailbox[hidden] { display: none; }
.nlpw-mail { display: block; width: 100%; height: 100%; min-height: 520px; border: 1px solid var(--border); border-radius: 12px; background: #ffffff; color-scheme: light; }
.nlpw-stage.is-phone .nlpw-mailbox { max-width: 390px; margin: 0 auto; }
/* What each newsletter keeps of its own: its colour, or the space's. */
.nlpw-own .bf-segmented-btn { display: inline-flex; align-items: center; gap: 6px; }
.nlpw-own-g { display: inline-flex; }
.nlpw-own-g svg, .nlpw-own .nl3-set-g svg { width: 14px; height: 14px; }
/* Intégrer: which form, then where. */
.nlpw-under { padding: 0 0 4px 52px; }
.nlpw-where { display: flex; flex-direction: column; gap: 8px; }
.nlpw-where .bf-segmented { align-self: flex-start; }
.nlpw-where-line { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nlpw-where-line[hidden] { display: none; }
.nlpw-prevbar .bf-segmented-btn { display: inline-flex; align-items: center; gap: 6px; }
.nlpw-prevbar .bf-segmented-btn svg { width: 14px; height: 14px; }
.nlpw-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.nlpw-stage.is-phone .nlpw-stage-in { max-width: 360px; margin: 0 auto; }
@media (max-width: 1100px) {
    .nlpw-body { grid-template-columns: 180px minmax(0, 1fr); }
    .nlpw-prev { display: none; }
}
@media (max-width: 720px) {
    .nlpw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .nlpw-chs { flex-direction: row; padding: 8px 12px; overflow-x: auto; }
    .nlpw-pane { border-right: 0; padding: 4px 16px 20px; }
}
.hm-door { max-width: 560px; padding: 0; border: 0; background: none; box-shadow: none; }

/* Tagged links (quick win 3): the settings switch's code chip, the composer's line under an address, the report's notes. */
.nl3-utm { font-family: var(--mono); font-size: 11px; line-height: 1.4; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); white-space: nowrap; }
.nlv-insp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--text-muted); min-width: 0; }
.nlv-insp-tags[hidden] { display: none; }
.nlv-insp-tags > svg { flex: none; width: 13px; height: 13px; }
.nlv-insp-tags > span { white-space: nowrap; }
.nlv-insp-tags code { font-family: var(--mono); font-size: 11px; line-height: 1.4; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; }
.nlv-tagged { margin-left: 8px; }
.nlv-ownlink { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.nlv-ownlink svg { width: 12px; height: 12px; flex: none; }

/* Why a person left (quick win 2): one optional question on the unsubscribe page, four one-tap answers. */
.nlp-why { display: flex; flex-direction: column; gap: 10px; }
.nlp-why-q { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4; }
.nlp-why-q span { font-size: 12px; font-weight: 500; color: #64748b; }
.nlp-reasons { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.nlp-reason { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: var(--nlp-btn-radius); background: #ffffff; color: #0f172a; font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
.nlp-reason > svg { flex: none; color: #64748b; }
.nlp-reason:hover { background: #f8fafc; }
.nlp-reason:focus-visible { outline: 2px solid var(--nlp-accent); outline-offset: 2px; }
.nlp-reason.is-on { border-color: var(--nlp-accent); box-shadow: inset 0 0 0 1px var(--nlp-accent); font-weight: 600; }
.nlp-reason-ok { margin-left: auto; display: none; color: #15803d; }
.nlp-reason.is-on .nlp-reason-ok { display: inline-flex; }
.nlp-why-thanks { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #64748b; line-height: 1.4; }
.nlp-why-thanks[hidden] { display: none; }
.nlp-why-thanks svg { color: #15803d; }
/* The report's Partis opens on why: each reason a door with its figure and its bar, two by two. */
.nlv-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 18px 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlv-why-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; column-gap: 10px; align-items: center; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.nlv-why-cell:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); }
.nlv-why-cell.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlv-why-w { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.35; }
.nlv-why-w > svg { flex: none; color: var(--text-muted); }
.nlv-why-w > svg.bf-smark { color: inherit; }
.nlv-why-w > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlv-why-cell b { font-size: 16px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.nlv-why-cell .nlv-bar { grid-column: 1 / -1; }
.nlv-why-cell.is-quiet .nlv-why-w, .nlv-why-cell.is-quiet b { color: var(--text-muted); }

/* À confirmer (quick win 1): what the reminder did and when each request ends, then ONE fold for the requests that ended. */
.nl3-sgrid.is-one-state.is-pending { grid-template-columns: 32px minmax(0, 480px) 56px 56px 80px 80px minmax(0, 1fr) 32px; }
.nl3-sgrid.is-pick.is-one-state.is-pending { grid-template-columns: 18px 32px minmax(0, 480px) 56px 56px 80px 80px minmax(0, 1fr) 32px; }
.nl3-rem { color: var(--text-muted); }
.nl3-rem svg { width: 18px; height: 18px; }
.nl3-srow2 .nlv-since.is-soon { color: var(--text); font-weight: 600; }
.nl3-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 24px; box-sizing: border-box; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; }
.nl3-fold:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nl3-fold-c, .nl3-fold-g { display: inline-flex; color: var(--text-muted); }
.nl3-fold-c svg { transition: transform .15s ease; }
.nl3-fold[aria-expanded="false"] .nl3-fold-c svg { transform: rotate(-90deg); }
.nl3-fold b { font-weight: 600; }
.nl3-fold-n { font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nl3-fold-l { margin-left: 8px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nlv-tbl.is-folded .nl3-srow2.is-ended { display: none; }
.nl3-srow2.is-ended .nl3-pn a, .nl3-srow2.is-ended .nl3-pn > span { color: var(--text-muted); }
@container nlv-tbl (max-width: 720px) {
    .nl3-sgrid.is-one-state.is-pending { grid-template-columns: 32px minmax(0, 1fr) 32px; }
    .nl3-sgrid.is-pick.is-one-state.is-pending { grid-template-columns: 18px 32px minmax(0, 1fr) 32px; }
    .nl3-srow2 > .nl3-rem { display: none; }
    .nl3-fold-l { display: none; }
}
/* The settings' reminder row: its eye beside its switch; the request's end as a standing fact. */
.nl3-set-sw { display: inline-flex; align-items: center; cursor: pointer; }
.nl3-fact { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.4; color: var(--text); white-space: nowrap; }

/* A new confirmation link left (ticket #788): the envelope, in the page accent. */
.nlp-mail { color: var(--nlp-accent); }

/* THE SUMMARY's one paint (owner, 2026-11-02: "ZERO CLS is allowed"): a new reading is laid out unseen over the one that
   stands, in the same cell, and replaces it in one swap once its e-mail has drawn. */
[data-nl-recap].is-stacking { display: grid; }
[data-nl-recap].is-stacking > * { grid-area: 1 / 1; min-width: 0; }
.nl-recap-layer.is-staging { visibility: hidden; }
.nl-recap-layer { height: 100%; min-height: 0; }
[data-nl-recap].is-stacking { grid-template-rows: minmax(0, 1fr); }

/* ── Sending from the list (the approved sketch "Newsletter · Envoyer depuis la liste", owner 2026-11-02) ──
   The campaigns' rows share ONE set of columns: each row is a subgrid of the list, so the verb column holds its widest
   row (Send + Edit) on every row and no cell ever leaves its head - rows that were separate grids sized their last
   track row by row and a ready row's two verbs pushed its audience and sending cells left. Under the fold width the
   list is a column again and every row keeps its own phone grid.
   The width is read on the list's card (a container cannot restyle itself, and the table is the fold's own container). */
.nlv-camps-host { container-type: inline-size; container-name: nlv-camps-host; }
@container nlv-camps-host (min-width: 1001px) {
    .nlv-camps { display: grid; grid-template-columns: minmax(200px, 2.6fr) minmax(120px, 1.1fr) minmax(150px, 1.2fr) 76px 56px 56px auto; column-gap: 24px; }
    .nlv-camps > .nlv-grid { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

/* THE send window: the house frame, one width, its body a column with real air. */
.bf-modal-card.nls-card { width: min(560px, calc(100vw - 32px)); padding: 20px; gap: 16px; }
.nls-card .documents-incassist-head { align-items: center; }
.nls-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* The message as the inbox shows it: who, the subject, the preheader - the sender's mark leading. */
.nls-inbox { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.nls-inbox-logo { grid-row: 1 / span 3; align-self: start; width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.nls-inbox-logo img { width: 36px; height: 36px; display: block; object-fit: contain; background: var(--surface); }
.nls-inbox-from { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nls-inbox-time { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.nls-inbox-subj { grid-column: 2 / span 2; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nls-inbox-pre { grid-column: 2 / span 2; font-size: 13px; line-height: 1.4; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nls-inbox-pre:empty { display: none; }
/* Who and from: the recap's own fact rows, standing facts, in ONE bordered group. */
.nls-facts { border: 1px solid var(--border); border-radius: 12px; }
.nls-facts .nlv-fact3 { grid-template-columns: 18px 56px minmax(0, 1fr); min-height: 48px; }
/* When: two answers side by side, the day and the hour unfolding under the pair. */
.nls-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nls-when .bf-assist-choice { padding: 10px 12px; }
.nls-when .bf-assist-choice-glyph { width: 28px; height: 28px; }
.nls-at { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nls-at[hidden] { display: none; }
.nls-at .bf-dp-field { display: inline-block; }
/* The day and the hour stand on ONE height, set here for the row's every control. */
.nls-at .bf-dp-field-btn, .nls-at .bf-select-btn { box-sizing: border-box; height: 32px; min-height: 32px; }
.nls-at .bf-dp-field-btn { width: auto; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.nls-at-tz { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
/* Ready: ONE line - its road sign and its words; what passed or what else rides the tooltip. */
.nls-ready { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--text) 4%, var(--surface)); font-size: 13px; line-height: 1.4; color: var(--text); }
.nls-ready > svg { flex: 0 0 auto; width: 18px; height: 18px; }
.nls-ready b { font-weight: 600; min-width: 0; }
.nls-ready span { color: var(--text-muted); white-space: nowrap; }
.nls-error { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
.nls-error[hidden] { display: none; }
/* The foot: one short line of what happens, then Cancel and the verb in ink, ONE height. */
.nls-card .documents-incassist-foot { gap: 8px; padding-top: 4px; }
.nls-foot-line { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.nls-card .documents-incassist-foot .nlv-btn { height: 32px; }
/* A pressed verb waiting on the server says it took the press: dimmed, the progress cursor, no second press. */
[data-nl-send-ready][aria-busy="true"], .nls-card [data-nl-sendw-go][aria-busy="true"] { opacity: .7; cursor: progress; }
/* The archive's answer: the fact, then its switch at the row's end. */
.nls-facts .nlv-fact3.nls-arch { grid-template-columns: 18px 56px minmax(0, 1fr) auto; cursor: pointer; }
.nls-arch-sw { display: inline-flex; align-items: center; }
@media (max-width: 600px) { .nls-facts .nlv-fact3.nls-arch { grid-template-columns: 18px minmax(0, 1fr) auto; } }
/* A live row: the bar, its figure and ONE pause on one line. */
.nlv-when > .nls-live { display: flex; align-items: center; gap: 10px; overflow: visible; }
.nls-live .nlv-bar { flex: 1 1 auto; min-width: 48px; }
.nls-live-f { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nls-live .nlv-ibtn { flex: 0 0 auto; }
/* A phone: the window is a sheet from the bottom, the When answers stacked, the verb across. */
@media (max-width: 600px) {
    .bf-modal-card.nls-card { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: calc(100vh - 48px); border-radius: 16px 16px 0 0; padding: 16px; animation: none; }
    .nls-when { grid-template-columns: 1fr; }
    .nls-facts .nlv-fact3 { grid-template-columns: 18px minmax(0, 1fr); }
    .nls-card .documents-incassist-foot { flex-wrap: wrap; }
    .nls-foot-line { flex-basis: 100%; }
    .nls-card .documents-incassist-foot .nlv-ink { flex: 1 1 auto; justify-content: center; }
}

/* ── One campaign's report v4 (the approved sketch "Newsletter · Campaign report v2", 2026-11-02) ──
   The head stands pinned and the body takes the room the page has: the people's rows are the ONE scroller (their heads
   outside it, with the same gutter), beside them the links and the first 48 hours. Calm: a state is its mark (details in
   its tooltip), quiet verbs are glyphs, no figure said twice. Narrow or short screens read it as one scrolling page. */
.nlr-page { box-sizing: border-box; }
.nlr-head { flex: none; padding: 14px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.nlr-title { display: flex; align-items: baseline; gap: 12px; min-height: 32px; }
.nlr-title > .nlv-name { align-self: baseline; }
.nlr-title > .nlv-state { display: inline-block; white-space: nowrap; cursor: default; }
.nlr-title > .nlv-state > svg { vertical-align: -3px; margin-right: 6px; }
.nlr-title > .nlv-verbs { align-self: center; }
.nlr-title .nlv-verbs > .nlv-ibtn, .nlr-title .nlv-verbs > .nlv-btn { height: 32px; }
.nlr-strip { display: flex; align-items: stretch; gap: 8px; padding: 8px 12px; margin: 0 -20px; border-top: 1px solid var(--border); }
.nlr-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
a.nlr-tile:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); text-decoration: none; }
.nlr-tile.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlr-tile .nlv-tile-f b { font-size: 22px; }
.nlr-tile .nlv-bar { height: 4px; }
.nlr-tile-w { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; white-space: nowrap; min-width: 0; }
.nlr-tile-w > span { overflow: hidden; text-overflow: ellipsis; }
.nlr-tile-w svg { width: 15px; height: 15px; flex: none; }
.nlr-est { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nlr-health { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 8px 0 16px; border-left: 1px solid var(--border); }
.nlr-fact { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 13px; line-height: 1.3; }
.nlr-fact svg { width: 14px; height: 14px; flex: none; }
.nlr-fact b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
a.nlr-fact:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); text-decoration: none; }
.nlr-fact.is-on { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.nlr-fact.is-red svg { color: var(--danger, #b42318); }

.nlr-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.nlr-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nlr-people { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.nlr-people .nlv-card-head { flex: none; gap: 12px; }
.nlr-people .nlv-card-head h2 b { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 500; margin-left: 8px; }
.nlr-head-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nlr-head-end .nlv-btn, .nlr-head-end .nlv-ibtn, .nlr-head-end .bf-segmented { height: 30px; }
.nlr-head-end .nlv-ibtn { width: 30px; }
.nlr-head-end .bf-segmented-btn { text-decoration: none; white-space: nowrap; }
.nlr-scope { display: flex; align-items: center; gap: 4px; height: 24px; padding-left: 12px; border-left: 1px solid var(--border); }
.nlr-x { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); }
.nlr-x:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.nlr-x svg { width: 12px; height: 12px; }
.nlr-cols, .nlr-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 100px 100px 64px 24px; column-gap: 16px; align-items: center; padding: 0 20px 0 18px; }
.nlr-cols.is-counts, .nlr-row.is-counts { grid-template-columns: 28px minmax(0, 1fr) 160px 128px 24px; }
.nlr-cols { flex: none; height: 36px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); line-height: 1.3; overflow-y: hidden; scrollbar-gutter: stable; }
.nlr-cols .is-num { text-align: right; }
.nlr-rows { scrollbar-gutter: stable; }
.nlr-row { min-height: 48px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlr-row:last-child { border-bottom: 0; }
.nlr-row .contact-avatar { width: 28px; height: 28px; font-size: 12px; }
.nlr-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nlr-who > a, .nlr-who > b { font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nlr-who > a:hover { text-decoration: underline; }
.nlr-mark { display: inline-flex; flex: none; }
.nlr-mark svg { width: 14px; height: 14px; }
.nlr-at { font-size: 13px; line-height: 1.4; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.nlr-at.is-none { color: var(--border-strong); }
.nlr-row .nlv-ps { min-width: 0; overflow: hidden; }
.nlr-ranks { display: flex; gap: 6px; justify-content: flex-end; }
.nlr-rank { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; border: 1px solid var(--border); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--text); }
.nlr-rank.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }

.nlr-links { overflow: hidden; }
.nlr-tagged { display: inline-flex; color: var(--text-muted); }
.nlr-tagged svg { width: 14px; height: 14px; }
.nlr-lkx { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding-right: 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlr-lkx:last-child { border-bottom: 0; }
.nlr-lkx.is-on { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nlr-lk { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) 64px 32px; column-gap: 12px; align-items: center; min-height: 56px; padding: 8px 0 8px 18px; box-sizing: border-box; color: var(--text); text-decoration: none; }
a.nlr-lk:hover { color: var(--text); text-decoration: none; }
.nlr-lkx:has(> a.nlr-lk:hover):not(.is-on) { background: color-mix(in srgb, var(--text) 3%, transparent); }
.nlr-lk-w { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nlr-lk-w b { font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlr-lk-w .nlv-bar { height: 4px; }
.nlr-pile { display: flex; align-items: center; justify-content: flex-end; }
.nlr-pile .contact-avatar { width: 22px; height: 22px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.nlr-pile .contact-avatar + .contact-avatar { margin-left: -6px; }
.nlr-lk-f { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.nlr-lk-end { flex: 0 0 60px; display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.nlr-lk-end .nlv-ibtn { width: 28px; height: 28px; }
.nlr-lk-go { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--border-strong); }
.nlr-lkx:has(> a.nlr-lk:hover) .nlr-lk-go { color: var(--text); }
.nlr-lk-go svg { width: 14px; height: 14px; }
.nlr-lk-full { flex: 0 0 100%; box-sizing: border-box; padding: 0 0 14px 50px; margin-top: -4px; font-size: 12px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; user-select: text; }

.nlr-time { display: flex; flex-direction: column; overflow: hidden; }
.nlr-time .nlv-card-head { flex: none; }
.nlr-legend { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--text-muted); }
.nlr-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.nlr-legend svg { width: 14px; height: 14px; }
.nlr-legend i { width: 10px; height: 10px; border-radius: 4px; display: inline-block; }
.nlr-sw-open, .nlr-bar .o { background: color-mix(in srgb, #0060df 28%, var(--surface)); }
.nlr-sw-click, .nlr-bar .c { background: #0060df; }
.nlr-chart { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 16px; }
.nlr-bars { height: 96px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; align-items: end; }
.nlr-bars.is-down { height: 40px; align-items: start; }
.nlr-bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.nlr-bars.is-down .nlr-bar { justify-content: flex-start; }
.nlr-bar i { display: block; border-radius: 2px; min-height: 2px; }
.nlr-base { height: 1px; background: var(--border); }
.nlr-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; }

/* The room the page has: pinned head, two columns, the people's rows as THE scroller - from a desk-sized window. */
@media (min-width: 1280px) and (min-height: 700px) {
    .app-module-main:has(> .app-page.nlr-host) { overflow: hidden; }
    .app-page.nlr-host { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
    /* Its top and bottom edges stand where the context panel's do (owner, 2026-11-02: "align top and bottom limit with the
       left panel"): the same inset from the frame. */
    .nlr-host > .nlr-page { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 16px; padding-top: var(--app-pane-inset-y); padding-bottom: var(--app-pane-inset-y); }
    .nlr-body { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    .nlr-people { min-height: 0; }
    .nlr-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .nlr-side { min-height: 0; }
    .nlr-time { flex: 1 1 auto; min-height: 0; }
    .nlr-chart { flex: 1 1 auto; min-height: 0; }
    .nlr-bars { flex: 1 1 auto; height: auto; min-height: 40px; }
    .nlr-bars.is-down { flex: 0 0 40px; }
}
@media (max-width: 720px) {
    .nlr-strip { flex-wrap: wrap; }
    .nlr-strip > .nlv-chev { display: none; }
    .nlr-tile { flex: 1 1 40%; }
    .nlr-health { flex-direction: row; border-left: 0; padding: 0; flex: 1 1 100%; }
    .nlr-cols, .nlr-row { grid-template-columns: 28px minmax(0, 1fr) 84px 84px 24px; padding: 0 12px; }
    .nlr-cols > :nth-child(5), .nlr-row > .nlr-ranks { display: none; }
    .nlr-cols.is-counts, .nlr-row.is-counts { grid-template-columns: 28px minmax(0, 1fr) 96px 24px; }
    .nlr-cols.is-counts > :nth-child(4), .nlr-row.is-counts > .nlr-at { display: none; }
    .nlr-title { flex-wrap: wrap; row-gap: 8px; }
}

/* The message: ONE window, ONE scroller; the e-mail drawn at its full height before it shows. */
.nlr-msg-card { width: min(920px, calc(100vw - 32px)); height: calc(100vh - 64px); height: calc(100dvh - 64px); display: flex; flex-direction: column; padding: 0; box-sizing: border-box; overflow: hidden; }
.nlr-msg-head { flex: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border); }
.nlr-msg-head h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.nlr-msg-head h3 svg { width: 16px; height: 16px; }
.nlr-msg-head .bf-segmented { margin-left: auto; height: 32px; }
.nlr-msg-head .bf-modal-close { position: static; margin-left: auto; }
.nlr-msg-head .bf-segmented + .bf-modal-close { margin-left: 0; }
.nlr-msg-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: color-mix(in srgb, var(--text) 5%, var(--surface)); padding: 24px 16px 32px; box-sizing: border-box; }
.nlr-frame { display: block; width: 100%; max-width: 680px; height: 0; margin: 0 auto; border: 0; border-radius: 8px; background: transparent; visibility: hidden; }
.nlr-frame.is-ready { visibility: visible; }

/* ── A newsletter's home, calm (the approved sketch "Newsletter · Campaign report v2", boards 6-7, 2026-11-02) ──
   Whether it can send is ONE mark beside its name (the details its tooltip); the last 30 days are four figures; what is
   being written or leaves stands in its own card with its verbs; each campaign that left is ONE door to its report. */
.nlv-ready { display: inline-flex; flex: none; cursor: default; }
.nlv-ready svg { width: 18px; height: 18px; }
.nlv-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; padding: 8px 12px 10px; margin: 0 -20px; border-top: 1px solid var(--border); }
.nlv-pulse-p { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-radius: 10px; min-width: 0; color: var(--text); text-decoration: none; }
a.nlv-pulse-p:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); text-decoration: none; }
.nlv-pulse-w { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; white-space: nowrap; min-width: 0; }
.nlv-pulse-w > span { overflow: hidden; text-overflow: ellipsis; }
.nlv-pulse-w svg { width: 15px; height: 15px; flex: none; }
.nlv-pulse-f { display: flex; align-items: baseline; gap: 8px; line-height: 1.3; }
.nlv-pulse-f b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nlv-pulse-up { font-size: 12px; font-weight: 600; color: var(--success-fg, #15803d); font-variant-numeric: tabular-nums; }
.nlv-pulse-p .nlv-bar { height: 4px; }

/* What is in progress: the shared table, four columns (no figure before a campaign leaves). */
@container nlv-camps-host (min-width: 761px) {
    .nlv-camps.is-wait { display: grid; grid-template-columns: minmax(200px, 2.6fr) minmax(120px, 1.1fr) minmax(150px, 1.2fr) auto; column-gap: 24px; }
    .nlv-camps.is-wait > .nlv-grid { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

/* What left: each row a door to its report, its rates as bars. */
.nlv-sent-host { container-type: inline-size; container-name: nlv-sent-host; }
.nlv-srow { display: grid; grid-template-columns: minmax(0, 1fr) 88px 88px 148px 148px 48px 16px; column-gap: 28px; align-items: center; padding: 0 18px 0 20px; min-height: 52px; box-sizing: border-box;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); color: var(--text); text-decoration: none; }
.nlv-srow:last-child { border-bottom: 0; }
a.nlv-srow:hover { background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); text-decoration: none; }
.nlv-shead { min-height: 36px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); line-height: 1.3; }
/* The head's cells wear their columns' classes, so a fold hides a head and its cells together. */
.nlv-shead > * { font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.3; }
.nlv-shead > .nlv-srow-aud, .nlv-shead > .nlv-srow-left { text-align: right; justify-content: flex-end; }
.nlv-shead > .nlv-srow-bar { display: block; }
.nlv-srow-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nlv-srow-subj { font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nlv-srow-when { font-size: 13px; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlv-srow-aud { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.4; }
.nlv-srow-aud svg { width: 14px; height: 14px; flex: none; }
/* A figure stands 40px from the bar after it (the probe's figure-to-word rule). */
.nlv-srow > .nlv-srow-aud { padding-right: 12px; }
.nlv-srow-bar { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; column-gap: 10px; min-width: 0; }
.nlv-srow-bar .nlv-bar { height: 4px; }
.nlv-srow-bar b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.4; }
.nlv-srow-left { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.4; }
.nlv-srow-go { display: inline-flex; color: var(--border-strong); }
a.nlv-srow:hover .nlv-srow-go { color: var(--text); }
@container nlv-sent-host (max-width: 900px) {
    .nlv-srow { grid-template-columns: minmax(0, 1fr) 72px 120px 16px; }
    .nlv-srow > .nlv-srow-aud, .nlv-srow > .nlv-srow-bar:nth-child(4), .nlv-srow > .nlv-srow-left { display: none; }
}
@container nlv-sent-host (max-width: 560px) {
    .nlv-srow { grid-template-columns: minmax(0, 1fr) 72px 16px; column-gap: 24px; padding: 0 14px 0 16px; }
    .nlv-srow > .nlv-srow-bar { display: none; }
}

/* Finding and sorting in a campaign's list (the approved sketch, boards 8-10): the top bar's words said in the list head
   as a chip with its cross and "n / N", the matches marked in the names; every column head a sort, its arrow's slot
   always standing so nothing moves on hover. */
.nlr-of { font-size: 13px; color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.nlr-find { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: 14px; font-size: 13px; line-height: 1.3; color: var(--text); white-space: nowrap; max-width: 220px; box-sizing: border-box; }
.nlr-find > span { overflow: hidden; text-overflow: ellipsis; }
.nlr-find > svg { width: 13px; height: 13px; color: var(--text-muted); flex: none; }
.nlr-find .nlr-x { width: 20px; height: 20px; flex: none; }
mark.nlr-hit { background: color-mix(in srgb, #facc15 40%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; }
.nlr-cols > span { display: flex; min-width: 0; }
.nlr-cols > span.is-num { justify-content: flex-end; }
.nlr-sort { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px; margin: 0 -4px; border-radius: 6px; font-size: 12px; line-height: 1.3; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.nlr-sort:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); text-decoration: none; }
.nlr-sort.is-on { color: var(--text); font-weight: 600; }
.nlr-arrow { width: 12px; height: 12px; flex: none; opacity: 0; }
.nlr-sort:hover .nlr-arrow { opacity: .45; }
.nlr-sort.is-on .nlr-arrow { opacity: 1; }

/* Clicks set apart because a mail scanner made them: one quiet mark in the links' head, said by its tooltip. */
.nlr-scanned { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--text-muted); cursor: default; }
.nlr-scanned svg { width: 14px; height: 14px; flex: none; }
.nlr-scanned b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nlr-scanned + .nlr-tagged { margin-left: 0; }

/* A person's history with this newsletter, unfolded under their row (quick win 5): the row is its door, its chevron says
   so; the history is THE renderer of the contact's and the member's pages. */
.nlr-row[data-nl-person] { cursor: pointer; }
.nlr-row[data-nl-person]:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.nlr-row.is-open { background: color-mix(in srgb, var(--text) 5%, transparent); border-bottom-color: transparent; }
.nlr-open { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--border-strong); cursor: pointer; }
.nlr-open svg { width: 14px; height: 14px; transition: transform .15s ease; }
.nlr-row:hover .nlr-open, .nlr-row.is-open .nlr-open { color: var(--text); }
.nlr-row.is-open .nlr-open svg { transform: rotate(90deg); }
.nlr-hist { padding: 2px 20px 14px 62px; background: color-mix(in srgb, var(--text) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nlr-hist[aria-busy="true"] { min-height: 48px; }

/* ── The online pages (the approved sketch "Newsletter · Version en ligne"): the message online, the public copy, the archive,
   in the newsletter's frame (.nlp and its accent, the public pages' own light palette). A calm bar - the mark, then only what
   can act - and the message as it left, or the issues as cards by month. */
.nlo-page { min-height: 100vh; background: #f4f6f9; color: #0f172a; }
.nlo-page *, .nlo-page *::before, .nlo-page *::after { box-sizing: border-box; }
.nlo-page.is-embed { min-height: 0; background: transparent; }
.nlo-band { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; background: #0f172a; color: #e2e8f0;
    font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; }
.nlo-band svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nlo-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 24px; background: #ffffff; border-bottom: 1px solid #e5e7eb; }
.nlo-mark { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.nlo-mark-g { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--nlp-accent); }
.nlo-mark-g svg { width: 24px; height: 24px; }
.nlo-logo { flex: 0 0 auto; width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.nlo-mark-w { display: flex; flex-direction: column; min-width: 0; }
.nlo-mark-w b { font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlo-mark-w span { font-size: 12px; color: #64748b; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlo-sp { flex: 1 1 auto; }
.nlo-btn { flex: 0 0 auto; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e2e8f0; border-radius: var(--nlp-btn-radius);
    background: #ffffff; color: #0f172a; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; }
.nlo-btn:hover { border-color: #94a3b8; color: #0f172a; }
.nlo-btn svg { width: 15px; height: 15px; }
.nlo-btn.is-on { background: color-mix(in srgb, #0f172a 6%, #ffffff); border-color: #0f172a; }
.nlo-btn.nlo-go { background: var(--nlp-accent); border-color: var(--nlp-accent); color: var(--nlp-on-accent); font-weight: 600; }
.nlo-share { display: inline-flex; }
.nlo-barwrap { position: relative; z-index: 3; }
.nlo-pop { position: absolute; top: calc(100% + 8px); right: 24px; z-index: 5; width: 380px; max-width: calc(100vw - 32px); padding: 16px; display: flex; flex-direction: column; gap: 12px;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28); }
.nlo-pop[hidden] { display: none; }
.nlo-pop-h { font-size: 14px; font-weight: 600; line-height: 1.35; }
.nlo-addr { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.nlo-addr code { flex: 1 1 auto; min-width: 0; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlo-addr .nlo-btn { height: 28px; padding: 0 10px; }
.nlo-og { display: flex; flex-direction: column; padding: 8px; border: 1px solid #e2e8f0; border-radius: 12px; }
.nlo-og img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 6px; }
.nlo-og-b { display: flex; flex-direction: column; gap: 3px; padding: 10px 4px 2px; min-width: 0; }
.nlo-og-b small { font-size: 11px; color: #64748b; line-height: 1.35; }
.nlo-og-b b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.nlo-og-b span { font-size: 12px; color: #64748b; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nlo-pop-line { font-size: 12px; color: #64748b; line-height: 1.4; }
.nlo-msg { padding: 8px 0 40px; }

/* The archive: a head, then the issues grouped by month, each a card - its message drawn small, its date, its words. */
.nlo-wrap { max-width: 1080px; margin: 0 auto; padding: 36px 24px 64px; }
.nlo-page.is-embed .nlo-wrap { padding: 16px 8px; }
.nlo-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.nlo-head h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; }
.nlo-count { font-size: 14px; color: #64748b; line-height: 1.4; }
.nlo-seg { margin-top: 16px; }
.nlo-month { margin: 32px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; line-height: 1.35; }
.nlo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.nlo-card { display: flex; flex-direction: column; min-width: 0; padding: 8px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; color: inherit; text-decoration: none; }
.nlo-card:hover { border-color: #94a3b8; color: inherit; }
.nlo-thumb { display: block; height: 190px; overflow: hidden; border-radius: 8px; background: #eef1f5; }
/* The message itself, drawn small: its frame is zoomed (its layout box shrinks with it), never scaled over its box. */
.nlo-thumb iframe { display: block; width: 652px; height: 413px; border: 0; zoom: .46; pointer-events: none; }
.nlo-card-b { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px 8px; min-width: 0; }
.nlo-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #64748b; line-height: 1.35; min-width: 0; }
.nlo-nl { display: inline-flex; align-items: center; gap: 6px; color: #0f172a; font-weight: 500; }
.nlo-nl svg { width: 13px; height: 13px; }
.nlo-subj { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nlo-pre { font-size: 13px; color: #64748b; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* An archive with nothing yet, or kept private: a bare glyph, one title, one line, the verb. */
.nlo-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 72px 16px; text-align: center; }
.nlo-empty > svg { width: 36px; height: 36px; color: #94a3b8; }
.nlo-empty h2 { margin: 6px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.nlo-empty p { margin: 0 0 8px; font-size: 14px; color: #64748b; line-height: 1.45; }
/* A message no longer online: its glyph above the door's own title; its one door a link that reads as the verb. */
.nlo-gone-g { display: block; color: #94a3b8; }
.nlo-gone-g svg { width: 28px; height: 28px; }
.nlp-card a.nlp-go { display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 600px) {
    .nlo-bar { padding: 0 12px; gap: 8px; }
    .nlo-pop { right: 12px; }
    .nlo-bar .nlo-w { display: none; }
    .nlo-bar .nlo-btn:not(.nlo-go) { width: 36px; padding: 0; }
    .nlo-wrap { padding: 24px 16px 48px; }
    .nlo-grid { grid-template-columns: 1fr; }
}

/* The Appearance window: where "view online" stands, four tiny e-mails - the card, and where the line is. */
.nlpw-mini.is-vo { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.nlpw-mini.is-vo > i.vo-card { left: 10px; top: 9px; width: 24px; height: 18px; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.nlpw-mini.is-vo > i.vo-line { height: 2px; border-radius: 1px; background: var(--text); }
.nlpw-mini.is-vo-top > i.vo-line { left: 13px; top: 4px; width: 18px; }
.nlpw-mini.is-vo-head > i.vo-line { left: 24px; top: 12px; width: 8px; }
.nlpw-mini.is-vo-foot > i.vo-line { left: 14px; top: 22px; width: 16px; }
.nlpw-wide .nlpw-opts.nlpw-online { width: 100%; flex-wrap: nowrap; }
.nlpw-arch-off { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.nlpw-arch-off svg { width: 14px; height: 14px; flex: 0 0 auto; }