/* ============================================================
   Newsletter Dashboard — scoped styles
   Selector prefix: .newsletter-dashboard / .nd-*
   ============================================================ */

.newsletter-dashboard {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #1f2937;
    background: #f4f6fa;
    min-height: 100%;
    font-size: 16px;
    line-height: 1.5;
}

.newsletter-dashboard * {
    box-sizing: border-box;
}

/* ---- Color tokens (scoped) ---- */
.newsletter-dashboard {
    --nd-pink: #ff80cc;
    --nd-hot-pink: #ff41b4;
    --nd-dark-pink: #d61b8a;
    --nd-ink: #1f2937;
    --nd-ink-mute: #6b7280;
    --nd-line: #e5e7eb;
    --nd-line-strong: #d1d5db;
    --nd-surface: #ffffff;
    --nd-shell: #f4f6fa;
    --nd-accent-blue: #2563eb;
    --nd-green: #16a34a;
    --nd-amber: #d97706;
    --nd-red: #dc2626;
    --nd-auto-bg: #eef2ff;
    --nd-auto-fg: #4338ca;
    --nd-manual-bg: #fdf2f8;
    --nd-manual-fg: #be185d;
}

/* ---- Header bar ---- */
.nd-header-bar {
    background: #fff;
    border-bottom: 1px solid var(--nd-line);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.nd-header-bar__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nd-header-bar__title {
    font-weight: 800;
    color: var(--nd-hot-pink);
    font-size: 18px;
    letter-spacing: -0.3px;
}

.nd-header-bar__town {
    background: #f9fafb;
    border: 1px solid var(--nd-line);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 14px;
    color: var(--nd-ink-mute);
}

.nd-header-bar__right {
    margin-left: auto;
}

.nd-header-bar__new-badge {
    background: var(--nd-hot-pink);
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ---- Shell ---- */
.nd-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .nd-shell {
        grid-template-columns: 1fr;
    }
}

/* ---- Left: Weeks ---- */
.nd-weeks {
    background: var(--nd-surface);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 18px;
    height: fit-content;
}

.nd-weeks__heading {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--nd-ink);
    margin: 0 0 4px;
    text-transform: uppercase;
}

.nd-weeks__sub {
    font-size: 16px;
    color: var(--nd-ink-mute);
    margin-bottom: 14px;
}

.nd-weeks__group-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #2563eb;
    text-transform: uppercase;
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-weeks__group-label.muted {
    color: var(--nd-ink-mute);
}

.nd-weeks__future-help {
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin: -2px 0 8px;
    line-height: 1.45;
}

.nd-weeks__empty {
    font-size: 14px;
    color: var(--nd-ink-mute);
    padding: 8px 0;
}

.nd-plan-future-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--nd-hot-pink);
    color: var(--nd-hot-pink);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-family: inherit;
}

.nd-plan-future-btn:hover {
    background: var(--nd-hot-pink);
    color: #fff;
}

/* Week card */
.nd-week-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--nd-line);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.nd-week-card:hover {
    border-color: var(--nd-hot-pink);
}

.nd-week-card.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.3);
}

.nd-week-card__date-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.nd-week-card__dow,
.nd-week-card__mon {
    font-size: 14px;
    font-weight: 700;
    color: var(--nd-ink-mute);
    letter-spacing: 0.5px;
}

.nd-week-card__day {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--nd-ink);
}

.nd-week-card__year {
    font-size: 14px;
    color: var(--nd-ink-mute);
}

.nd-week-card__meta {
    flex: 1;
    min-width: 0;
}

.nd-week-card__meta-line {
    font-size: 14px;
    color: var(--nd-ink-mute);
}

/* Status pill */
.nd-status-pill {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.nd-status-pill.pill-scheduled {
    background: #dbeafe;
    color: #1d4ed8;
}

.nd-status-pill.pill-sent {
    background: #d1fae5;
    color: #065f46;
}

.nd-status-pill.pill-draft {
    background: #fef3c7;
    color: #92400e;
}

.nd-status-pill.pill-future {
    background: #f3f4f6;
    color: #4b5563;
}

.nd-status-pill.pill-locked {
    background: #fee2e2;
    color: #991b1b;
}

/* ---- Right: Detail panel ---- */
.nd-detail {
    background: var(--nd-surface);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 20px 26px;
    min-height: 400px;
}

.nd-detail__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--nd-line);
    margin-bottom: 18px;
}

.nd-detail__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
}

.nd-detail__range {
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-top: 2px;
}

.nd-detail__id {
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-top: 4px;
}

.nd-detail__delete {
    appearance: none;
    background: transparent;
    border: 0;
    margin-left: 10px;
    padding: 2px 6px;
    color: var(--nd-red);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
}
.nd-detail__delete:hover:not([disabled]) {
    background: #fee2e2;
}
.nd-detail__delete[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
.nd-detail__delete .fa {
    margin-right: 4px;
}

.nd-detail__id code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    color: var(--nd-ink);
    user-select: all;
}

.nd-detail__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Buttons — keep md-button native, just tighten and add primary pink */
.newsletter-dashboard .nd-btn {
    text-transform: none;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.newsletter-dashboard .nd-btn--primary {
    background-color: var(--nd-hot-pink) !important;
    color: #fff !important;
}

.newsletter-dashboard .nd-btn--primary:hover:not([disabled]) {
    background-color: var(--nd-dark-pink) !important;
}

/* Disabled state — applies to both the Material disabled attr and
   AngularJS's ng-disabled. Without this the cap-disabled buttons
   still look interactive. */
.newsletter-dashboard .nd-btn[disabled],
.newsletter-dashboard .nd-btn.md-button[disabled],
.newsletter-dashboard .nd-btn--primary[disabled] {
    background-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 1; /* avoid Material's double-fade */
    box-shadow: none !important;
}
.newsletter-dashboard .nd-btn[disabled]:hover,
.newsletter-dashboard .nd-btn--primary[disabled]:hover {
    background-color: #e5e7eb !important;
}

.newsletter-dashboard .nd-btn--sm {
    font-size: 14px;
    line-height: 32px;
    min-height: 32px;
    padding: 0 12px;
}

.newsletter-dashboard .nd-btn--danger {
    color: var(--nd-red) !important;
}

/* ---- Preview modal toolbar + iframe loader ---- */
.nd-preview-toolbar h2,
.nd-preview-toolbar .md-button,
.nd-preview-toolbar md-icon,
.nd-preview-toolbar i {
    color: #fff !important;
}
.nd-preview-content {
    position: relative;
    padding: 0 !important;
    background: #fff;
}
.nd-preview-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255,255,255,0.9);
    color: var(--nd-ink-mute);
    font-size: 16px;
    font-weight: 600;
    z-index: 2;
    pointer-events: none;
}
.nd-preview-spinner .fa-spinner {
    font-size: 22px;
    color: var(--nd-hot-pink);
}

/* Ghost button — outlined, low visual weight. Used when the same row has
   another primary action (e.g. Send Test gets ghosted when Preview Final
   is primary in the scheduled/sent state). */
.newsletter-dashboard .nd-btn--ghost {
    background-color: transparent !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}
.newsletter-dashboard .nd-btn--ghost:hover:not([disabled]) {
    background-color: #f3f4f6 !important;
    color: var(--nd-ink) !important;
}

/* ---- Re-sync banner (content drift since schedule) ---- */
.nd-resync-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
}

/* Sent → read-only banner (neutral slate, distinct from the amber resync) */
.nd-readonly-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    margin-bottom: 16px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    font-size: 16px;
    line-height: 1.45;
}
.nd-readonly-banner .fa-lock {
    font-size: 16px;
    flex-shrink: 0;
}
.nd-resync-banner__icon {
    font-size: 20px;
    flex-shrink: 0;
}
.nd-resync-banner__body {
    flex: 1;
    font-size: 16px;
    line-height: 1.45;
}
.nd-resync-banner__body strong {
    color: #78350f;
}
.nd-resync-banner__action {
    flex-shrink: 0;
}

/* ---- Status row ---- */
/* ---- Send statistics panel ---------------------------------------- */
.nd-stats-panel {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.nd-stats-panel--pending {
    background: #fef9f3;
    border-color: #fcd34d;
}

.nd-stats-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.nd-stats-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #065f46;
    text-transform: uppercase;
}

.nd-stats-panel--pending .nd-stats-title {
    color: #92400e;
}

.nd-stats-meta {
    font-size: 14px;
    color: var(--nd-ink-mute);
    flex: 1;
}

.nd-stats-refresh {
    margin-left: auto;
    flex-shrink: 0;
}

.nd-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    padding: 8px 0;
}

.nd-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
}

.nd-stat__label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--nd-ink-mute);
    text-transform: uppercase;
}

.nd-stat__value {
    font-size: 20px;
    font-weight: 800;
    color: var(--nd-ink);
}

.nd-stat__sub {
    font-size: 14px;
    color: #065f46;
    font-weight: 600;
}

.nd-stats-foot {
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-top: 6px;
}

/* ----- Top clicked links (collapsible) ----- */
.nd-links {
    border-top: 1px solid #bbf7d0;
    margin-top: 6px;
    padding-top: 8px;
}

.nd-links-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 6px 2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #065f46;
    text-align: left;
}

.nd-links-toggle:hover {
    color: #047857;
}

.nd-links-toggle .fa {
    width: 12px;
    font-size: 15px;
}

.nd-links-hint {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nd-ink-mute);
}

.nd-links-body {
    padding: 6px 0 2px;
}

.nd-links-state {
    font-size: 14px;
    color: var(--nd-ink-mute);
    padding: 10px 4px;
}

.nd-links-state--error {
    color: #b91c1c;
}

.nd-links-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    font-size: 14px;
}

.nd-links-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--nd-ink-mute);
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.nd-links-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.nd-links-table tr:last-child td {
    border-bottom: 0;
}

.nd-links-rank {
    width: 32px;
    text-align: center;
    color: var(--nd-ink-mute);
    font-weight: 700;
}

.nd-links-num {
    width: 72px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--nd-ink);
}

.nd-links-target {
    max-width: 0;
    width: 100%;
}

.nd-links-name {
    display: block;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.nd-links-name:hover {
    text-decoration: underline;
}

.nd-links-url {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--nd-ink-mute);
    word-break: break-all;
}

.nd-stats-pending-body {
    font-size: 16px;
    color: #92400e;
    padding: 8px 0;
}

.nd-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 20px;
}

@media (max-width: 720px) {
    .nd-status-row {
        grid-template-columns: 1fr;
    }
}

.nd-status-cell__label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--nd-ink-mute);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.nd-status-cell__value {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-status-cell__value md-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
}

.nd-status-cell__value.scheduled {
    color: var(--nd-accent-blue);
}

.nd-status-cell__value.unsched {
    color: var(--nd-amber);
}

.nd-status-cell__value.locked {
    color: var(--nd-red);
}

.nd-status-cell__value.sent {
    color: var(--nd-green);
}

.nd-status-cell__value.pending {
    color: var(--nd-ink-mute);
}

.nd-status-cell__fallback-note {
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-top: 4px;
    font-weight: 400;
}

.nd-status-cell__fallback-note strong {
    color: var(--nd-ink);
    font-weight: 700;
}

.nd-status-cell__fallback-note--warning {
    color: var(--nd-red);
    font-weight: 600;
}

/* ---- Sections ---- */
/* Each section sits in its own light card so the boundary is obvious
   at a glance, replacing the earlier border-bottom-only treatment that
   let neighbouring sections visually bleed together. */
.nd-section {
    background: #fafbfc;
    border: 1px solid var(--nd-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 18px 22px;
    margin-bottom: 14px;
}

.nd-section:last-child {
    margin-bottom: 0;
}

.nd-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.nd-section__title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--nd-ink-mute);
    text-transform: uppercase;
}

.nd-section__count {
    font-size: 14px;
    color: var(--nd-ink-mute);
    font-weight: 700;
}

.nd-section__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* Mode badges */
.nd-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
}

.nd-mode-auto {
    background: var(--nd-auto-bg);
    color: var(--nd-auto-fg);
}

.nd-mode-manual {
    background: var(--nd-manual-bg);
    color: var(--nd-manual-fg);
}

.nd-mode-readonly {
    background: #f3f4f6;
    color: #4b5563;
}

/* Intro display */
.nd-intro__label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--nd-ink-mute);
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 4px;
}

.nd-intro__label:first-child {
    margin-top: 0;
}

.nd-intro__subject {
    font-size: 17px;
    font-weight: 700;
    color: var(--nd-ink);
    margin-bottom: 4px;
    line-height: 1.3;
}

.nd-intro__body {
    color: var(--nd-ink-mute);
    font-size: 16px;
    max-width: 720px;
}

.nd-intro__body p {
    margin: 0 0 8px;
}

/* List rows (scoops, locals) */
.nd-list-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px dashed var(--nd-line);
}

.nd-list-row:first-of-type {
    border-top: none;
}

.nd-list-row__thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: #f3f4f6 center/cover no-repeat;
    flex-shrink: 0;
}

.nd-list-row__body {
    flex: 1;
    min-width: 0;
}

.nd-list-row__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--nd-ink);
    margin-bottom: 2px;
}

.nd-list-row__sub {
    font-size: 14px;
    color: var(--nd-ink-mute);
    word-break: break-word;
}

.nd-list-row__actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.nd-list-row:hover .nd-list-row__actions,
.nd-list-row:focus-within .nd-list-row__actions {
    opacity: 1;
}

/* Sortable scoop list (drag & drop) */
.nd-dnd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-list-row--sortable {
    cursor: grab;
}

.nd-list-row--sortable:active {
    cursor: grabbing;
}

.nd-list-row__handle {
    flex-shrink: 0;
    align-self: center;
    padding: 2px 4px;
    color: var(--nd-ink-mute);
    cursor: grab;
}

.nd-list-row--sortable.dndDragging {
    opacity: 0.5;
}

.nd-list-row--sortable.dndDraggingSource {
    display: none;
}

.nd-dnd-list .dndPlaceholder {
    display: block;
    border: 1px dashed var(--nd-line-strong);
    border-radius: 6px;
    background: #f9fafb;
    min-height: 44px;
    margin: 6px 0;
    list-style: none;
}

/* Auto note */
.nd-auto-note {
    background: #f9fafb;
    border: 1px dashed var(--nd-line-strong);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 16px;
    color: var(--nd-ink-mute);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nd-auto-note__icon {
    color: var(--nd-auto-fg);
}

/* ---- Picks list (read-only manual preview) ---- */
.nd-picks-list {
    background: var(--nd-manual-bg);
    border: 1px solid #fbcfe8;
    border-radius: 8px;
    padding: 12px 14px;
}

.nd-picks-list.nd-picks-list--nested {
    margin: 0 0 4px 0;
    padding: 10px 14px;
    background: #fdf4ff;
    border-color: #f5d0fe;
}

.nd-picks-help {
    font-size: 14px;
    color: var(--nd-manual-fg);
    font-weight: 600;
    margin-bottom: 8px;
}

.nd-picks-loading {
    font-size: 14px;
    color: var(--nd-ink-mute);
    padding: 4px 0;
}

.nd-picks {
    list-style: decimal inside;
    padding: 0;
    margin: 0;
}

.nd-picks.nd-picks--two-col {
    columns: 2;
    column-gap: 18px;
}

.nd-picks li {
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.4;
    break-inside: avoid;
}

.nd-pick-title {
    font-weight: 700;
    color: var(--nd-ink);
}

.nd-pick-meta {
    display: block;
    margin-left: 1.4em;
    font-size: 14px;
    color: var(--nd-ink-mute);
    font-weight: 400;
}

.nd-hq-backfill-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 10px 12px;
    background: #fef9f3;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 14px;
    color: #92400e;
}

.nd-hq-backfill-note__icon {
    font-size: 16px;
}

/* Events */
.nd-events-groups {
    display: grid;
    gap: 8px;
}

.nd-events-group-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 6px;
    gap: 12px;
    flex-wrap: wrap;
}

.nd-events-group-row__name {
    font-weight: 700;
    font-size: 16px;
}

.nd-events-group-row__sub {
    font-size: 14px;
    color: var(--nd-ink-mute);
    flex: 1;
}

/* Partnerships */
.nd-info-note {
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-partnership-row {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fef9f3;
    border: 1px solid #fde68a;
    border-radius: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.nd-partnership-row__body {
    flex: 1;
}

.nd-partnership-row__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.nd-partnership-row__sub {
    font-size: 14px;
    color: var(--nd-ink-mute);
}

/* Toggle (Publisher Bio) */
.nd-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.nd-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.nd-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.nd-toggle.is-on {
    background: var(--nd-hot-pink);
}

.nd-toggle.is-on::after {
    transform: translateX(20px);
}

.nd-toggle.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.nd-toggle-label {
    font-size: 16px;
}

.nd-toggle-label__help {
    display: block;
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-top: 2px;
}

/* Empty / generic */
.nd-empty {
    color: var(--nd-ink-mute);
    font-size: 14px;
    padding: 8px 0;
}

.nd-empty--centered {
    text-align: center;
    padding: 40px 20px;
}

.nd-empty--centered h2 {
    margin: 0 0 6px;
    font-weight: 800;
    color: var(--nd-ink);
}

/* ----- Modals ----- */
.nd-modal md-toolbar {
    background-color: #ff41b4;
    color: #fff;
}

.nd-modal md-toolbar h2 {
    color: #fff;
    font-weight: 700;
}

.nd-modal__row {
    padding: 6px 0 14px;
    color: var(--nd-ink, #1f2330);
    font-size: 16px;
}

.nd-modal__field-label {
    font-weight: 600;
    font-size: 14px;
    margin: 8px 0 4px;
    color: var(--nd-ink, #1f2330);
}

/* One form field: label above, boxed control, optional counter below. */
.nd-modal__field {
    margin: 0 0 16px;
}
.nd-modal__field .nd-modal__field-label {
    margin: 0 0 6px;
}

/* Boxed inputs for modal form fields. Material's floating-label fields render
   as light gray text with no visible input area, so publishers couldn't tell
   where to type. Same specificity trick as the chooser search input below:
   md-dialog renders outside .newsletter-dashboard, so route through .nd-modal
   and beat the global Material reset with !important. Literal colors, not
   var(--nd-*): the tokens are scoped to .newsletter-dashboard and don't reach
   the dialog. */
.nd-modal input.nd-modal__input,
.nd-modal input.nd-modal__input[type="text"] {
    width: 100%;
    padding: 9px 13px;
    border: 1px solid silver !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    height: auto;
    color: #1f2937;
}
.nd-modal input.nd-modal__input:focus {
    border-color: #ff41b4 !important;
    outline: none;
}
.nd-modal input.nd-modal__input::placeholder {
    color: #a0a5b1;
}

/* Send-date dropdown gets the same boxed look. */
.nd-modal md-select.nd-modal__input {
    margin: 0;
}
.nd-modal md-select.nd-modal__input .md-select-value {
    border: 1px solid silver !important;
    border-radius: 8px;
    background: #fff;
    padding: 9px 13px;
    min-height: 0;
    color: #1f2937;
}
.nd-modal md-select.nd-modal__input:not([disabled]):focus .md-select-value {
    border-color: #ff41b4 !important;
}

.nd-modal__req {
    color: #df1818;
}

.nd-modal__warning,
.nd-modal__note,
.nd-modal__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.4;
}

.nd-modal__warning {
    background-color: #fff4d6;
    border: 1px solid #f0c674;
    color: #7a5300;
}

.nd-modal__note {
    background-color: #eaf3ff;
    border: 1px solid #b4d3ff;
    color: #234a8a;
}

.nd-modal__hint {
    background-color: #f6f6f8;
    border: 1px solid #e2e3ea;
    color: #555a6b;
}
/* Character counters: plain right-aligned text. The gray pill variant reads
   as a disabled input next to the boxed fields. Declared before --warn and
   --error so over-limit counters still get the colored pill treatment. */
.nd-modal__hint--counter {
    background: none;
    border: none;
    padding: 0 2px;
    margin: 4px 0 0;
    justify-content: flex-end;
    font-size: 12.5px;
    color: #6b7280;
}
.nd-modal__hint--warn {
    background-color: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
.nd-modal__hint--error {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
    font-weight: 600;
}

.nd-modal__lock-reason {
    font-size: 14px;
    color: #b35900;
    padding: 0 8px;
    align-self: center;
}

/* ============================================================
   Chooser modals (Articles + Events) — modern scoped styling
   ============================================================ */

/* Auto / Manual segmented control — pill style, breathing room below */
.nd-chooser .nd-segment {
    display: inline-flex;
    background: #f1f2f6;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    margin: 4px 0 20px;
}
.nd-chooser .nd-segment__btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nd-ink-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.nd-chooser .nd-segment__btn.is-active {
    background: #fff;
    color: var(--nd-hot-pink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.nd-chooser .nd-segment__btn.is-disabled,
.nd-chooser .nd-segment__btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bucket tabs (events). Styled like folder tabs so it's obvious they
   are clickable, not section labels — a light gray inactive fill, a
   hover-darken, and a white "lifted" active state with the pink
   underline so the selected tab visually connects to the panel
   below it. */
.nd-chooser .nd-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--nd-line);
    margin-bottom: 16px !important;
    padding-left: 4px;
}
.nd-chooser .nd-tab {
    appearance: none;
    background: #f3f4f6;
    border: 1px solid var(--nd-line);
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 9px 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--nd-ink-mute);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    font-family: inherit;
}
.nd-chooser .nd-tab:hover {
    background: #e5e7eb;
    color: var(--nd-ink);
}
.nd-chooser .nd-tab.is-active {
    background: #fff;
    color: var(--nd-hot-pink);
    border-color: var(--nd-line-strong);
    border-bottom-color: var(--nd-hot-pink);
    /* Lift the active tab above neighbouring tabs so it visibly "pops"
       from the row. z-index lets the shadow paint over the tab next door
       instead of being clipped underneath. */
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1),
                -1px 0 4px rgba(0, 0, 0, 0.05),
                1px 0 4px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

/* Two-pane card-list chooser (matches the design prototype) */
.nd-chooser .nd-chooser2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
    /* Definite height so the inner lists can scroll (flex + min-height:0).
       Both columns share this height, so they bottom-align and the Selected
       list is tall enough for ~9 picks. */
    height: 520px;
}
@media (max-width: 760px) {
    .nd-chooser .nd-chooser2 {
        grid-template-columns: 1fr;
        height: auto;
    }
    .nd-chooser .nd-chooser2__list {
        flex: none;
        height: 320px;
    }
}
/* Both sides are equal-height flex columns; the list fills the remaining
   space so the left (search + list + help) and right (list only) columns
   bottom-align and the Selected list is tall enough to show ~9 picks. */
.nd-chooser2__side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.nd-chooser2__side h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--nd-ink-mute);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nd-chooser2__count {
    font-weight: 700;
    color: var(--nd-ink-mute);
    text-transform: none;
    letter-spacing: 0;
}
.nd-chooser2__search {
    margin-bottom: 10px;
}
/* High specificity through the dialog-root .nd-chooser class — the bare
   input sits inside md-dialog (outside .newsletter-dashboard) where a
   global/Material reset out-specifies a plain ".nd-chooser2__search input"
   even with !important. Going through .nd-chooser + [type] wins. */
.nd-chooser .nd-chooser2__search input,
.nd-chooser .nd-chooser2__search input[type="text"] {
    width: 100%;
    padding: 9px 13px;
    border: 1px solid silver !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    height: auto;
}
.nd-chooser .nd-chooser2__search input:focus {
    border-color: var(--nd-hot-pink) !important;
    outline: none;
}
.nd-chooser2__list {
    border: 1px solid var(--nd-line-strong);
    border-radius: 10px;
    flex: 1 1 auto;
    min-height: 0; /* lets the flex child shrink so overflow-y actually scrolls */
    overflow-y: auto;
    background: #f4f5f8;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Every row is a discrete white card so items (and the search box above)
   are easy to tell apart. */
.nd-chooser2__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 8px;
    background: #fff;
    border: 1px solid var(--nd-line-strong);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    cursor: grab;
    line-height: 1.35;
}
.nd-chooser2__item:hover {
    border-color: var(--nd-hot-pink);
    background: #fffafd;
}
/* Draft rows in the article chooser get a pale amber tint so the boundary
   to published items is obvious at a glance. */
.nd-chooser2__item.is-draft {
    background: #fff8d6;
    border-color: #ead977;
}
.nd-chooser2__item.is-draft:hover {
    background: #fff5c5;
    border-color: var(--nd-hot-pink);
}
.nd-chooser2__group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
    padding: 10px 16px 4px;
    cursor: pointer;
    font-family: inherit;
}
.nd-chooser2__group-head:hover {
    color: var(--nd-hot-pink);
}
.nd-chooser2__group-chev {
    font-size: 10px;
    width: 10px;
    text-align: center;
    color: #9ca3af;
    transition: transform 120ms ease;
}
.nd-chooser2__group-head:hover .nd-chooser2__group-chev {
    color: var(--nd-hot-pink);
}
.nd-chooser2__group-count {
    color: #9ca3af;
    font-weight: 600;
    margin-left: 4px;
}
/* dnd-list applies dndDragover to the list while a drag is happening and
   dndPlaceholder to the ghost row marking where the drop will land. Make
   both very obvious so manual reordering does not feel like dropping into
   the void. */
.nd-chooser2__list.dndDragover {
    background: #fef3f7;
    box-shadow: inset 0 0 0 2px var(--nd-hot-pink);
}
.nd-chooser2__list .dndPlaceholder {
    background: #fef3f7;
    border: 2px dashed var(--nd-hot-pink);
    border-radius: 8px;
    margin: 8px;
    min-height: 44px;
    list-style: none;
}
.nd-chooser2__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
    margin-top: 6px;
}
.nd-chooser2__dot.is-pink {
    background: var(--nd-hot-pink);
}
.nd-chooser2__item.is-selected .nd-chooser2__dot {
    background: var(--nd-hot-pink);
}
.nd-chooser2__body {
    flex: 1;
    min-width: 0;
}
.nd-chooser2__title {
    display: block;
    font-weight: 700;
    color: var(--nd-ink);
}
.nd-chooser2__title .orange {
    color: #e8770e;
    font-size: 8px;
    vertical-align: middle;
}

/* Inline yodel event badges shown to the right of the title. Order in
   the markup is star → HQ → sponsored so the publisher reads the
   editorial signals first and the paid-promo cue last. */
.nd-chooser2__badge-star {
    color: #f59e0b;
    font-size: 14px;
    margin-left: 6px;
    vertical-align: -1px;
}
.nd-chooser2__badge-hq {
    /* Intentional exception to the 14px floor. Keeps the pill compact
       enough to sit inline with the surrounding icons without breaking
       the row height. Height matches the star icon. */
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    background: #2563eb;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.nd-chooser2__badge-sponsored {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: -2px;
}

/* Legend above the Featured tab's two-pane chooser. Reuses the badge
   classes so the swatches in the key are visually identical to the
   marks rendered next to each event title. */
.nd-chooser2__legend {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin: 0 0 12px;
    background: #f9fafb;
    border: 1px solid var(--nd-line);
    border-radius: 6px;
    font-size: 14px;
    color: var(--nd-ink-mute);
}
.nd-chooser2__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Drop the inline-spacing the badges carry when next to a title; in the
   legend the badge sits at the start of the item so the left margin is
   already handled by the legend's flex gap. */
.nd-chooser2__legend .nd-chooser2__badge-star,
.nd-chooser2__legend .nd-chooser2__badge-hq,
.nd-chooser2__legend .nd-chooser2__badge-sponsored {
    margin-left: 0;
}

/* HQ auto-fill panel above the Featured chooser. Lists the events HQ
   is reserving for the week so the publisher knows exactly which
   featured slots are spoken for and how many they have left. */
.nd-chooser__hq-panel {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 14px;
    font-size: 14px;
    color: #1f2937;
}
.nd-chooser__hq-head {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}
.nd-chooser__hq-head .nd-chooser2__badge-hq {
    margin-left: 0;
    flex-shrink: 0;
}
.nd-chooser__hq-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.nd-chooser__hq-list li {
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 6px;
    line-height: 1.35;
}
.nd-chooser__hq-list li:last-child {
    margin-bottom: 0;
}
.nd-chooser__hq-title {
    display: block;
    font-weight: 700;
    color: var(--nd-ink);
}
.nd-chooser__hq-meta {
    display: block;
    font-size: 14px;
    color: var(--nd-ink-mute);
}
.nd-chooser2__meta {
    display: block;
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-top: 1px;
}
.nd-chooser2__check {
    color: var(--nd-green);
    flex-shrink: 0;
    margin-top: 4px;
}
.nd-chooser2__remove {
    color: #9ca3af;
    flex-shrink: 0;
    margin-top: 4px;
    cursor: pointer;
}
.nd-chooser2__remove:hover {
    color: var(--nd-red);
}
.nd-chooser2__empty-row {
    padding: 20px 14px;
    text-align: center;
    color: var(--nd-ink-mute);
    font-size: 14px;
}
.nd-chooser2__more {
    padding: 10px;
    text-align: center;
}
.nd-chooser2__placeholder {
    padding: 40px 24px;
    text-align: center;
    color: var(--nd-ink-mute);
    font-size: 14px;
    line-height: 1.5;
    cursor: default;
}
.nd-chooser2__placeholder strong {
    display: block;
    color: var(--nd-ink);
    margin-bottom: 4px;
}
.nd-chooser2__help {
    font-size: 14px;
    color: var(--nd-ink-mute);
    margin-top: 6px;
}

/* Auto mode: dim the available pane (it's not interactive while auto) */
.nd-chooser2__side--dim .nd-chooser2__list,
.nd-chooser2__side--dim .nd-chooser2__search,
.nd-chooser2__side--dim .nd-chooser2__help {
    opacity: 0.45;
    pointer-events: none;
}

/* "Auto mode is on" placeholder inside the Selected pane */
.nd-chooser2__auto-msg {
    padding: 36px 24px;
    text-align: center;
    color: var(--nd-ink-mute);
    font-size: 14px;
    line-height: 1.55;
}
.nd-chooser2__auto-msg .fa-magic {
    display: block;
    font-size: 22px;
    color: var(--nd-auto-fg);
    margin-bottom: 10px;
}
.nd-chooser2__auto-msg strong {
    display: block;
    color: var(--nd-ink);
    margin-bottom: 4px;
}