/* stylelint-disable */

/* ============================================================
   BASE SELECTORS — Support both .tiptap.ProseMirror and .ProseMirror/.editor-shared
   This ensures styles work regardless of Tiptap class structure
============================================================ */

/* ============================================================
   DEDICATION — EDITOR VIEW (v1.0 — Quiet, Personal)
   Amir & Mixel — 2025
============================================================ */

/* Support both .tiptap.ProseMirror and .ProseMirror/.editor-shared selectors */
.tiptap.ProseMirror .nf-dedication,
.ProseMirror .nf-dedication,
.editor-shared .nf-dedication {
  /* Match reader vertical rhythm + column; label in header = no ::before here */
  margin: 5rem auto 3.75rem;
  max-width: 560px;
  text-align: center;
  position: relative; /* Ensure header positioning context */
  padding: 1.5rem 1.25rem;
  
  /* Subtle background — quieter than epigraph */
  background: #fafaf9;
  border: 1px dotted rgba(229, 227, 223, 0.6); /* Dotted border for front-matter (lighter, more subtle) */
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .nf-dedication:hover,
.ProseMirror .nf-dedication:hover,
.editor-shared .nf-dedication:hover {
  border-color: rgba(212, 209, 204, 0.8); /* Slightly more visible on hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Paragraphs inside dedication */
.tiptap.ProseMirror .nf-dedication p,
.ProseMirror .nf-dedication p,
.editor-shared .nf-dedication p {
  margin: 0.5rem 0;

  /* Match reader “elegant minimal” (preview); not epigraph */
  font-family: var(--nfb-font-family);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--nfb-text-muted);
  font-weight: 400;
  text-align: center;
  text-justify: auto;
  hyphens: none;

  outline: none;
  transition: color 0.2s ease;
}

/* Placeholder for empty paragraphs */
.tiptap.ProseMirror .nf-dedication p:empty::before,
.ProseMirror .nf-dedication p:empty::before,
.editor-shared .nf-dedication p:empty::before {
  content: "Dedication text…";
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 1.05rem;
}

/* Focus state */
.tiptap.ProseMirror .nf-dedication p:focus,
.ProseMirror .nf-dedication p:focus,
.editor-shared .nf-dedication p:focus {
  color: var(--nfb-text);
}

/* ============================================================
   CLOSING NOTE — EDITOR VIEW (optional end reflection / prayer)
============================================================ */

.tiptap.ProseMirror .nf-closing-note,
.ProseMirror .nf-closing-note,
.editor-shared .nf-closing-note {
  clear: both;
  margin: 3rem auto 2.75rem;
  max-width: 560px;
  text-align: center;
  position: relative;
  padding: 1.35rem 1.25rem 1.5rem;
  background: linear-gradient(180deg, #faf9f7 0%, #f7f6f3 100%);
  border: 1px solid rgba(220, 215, 205, 0.85);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tiptap.ProseMirror .nf-closing-note:hover,
.ProseMirror .nf-closing-note:hover,
.editor-shared .nf-closing-note:hover {
  border-color: rgba(190, 183, 170, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tiptap.ProseMirror .nf-closing-note .nfb-section-subhint,
.ProseMirror .nf-closing-note .nfb-section-subhint,
.editor-shared .nf-closing-note .nfb-section-subhint {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  color: #64748b;
  letter-spacing: 0.01em;
}

.tiptap.ProseMirror .nf-closing-note .nf-closing-note-preset-select,
.ProseMirror .nf-closing-note .nf-closing-note-preset-select,
.editor-shared .nf-closing-note .nf-closing-note-preset-select {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  max-width: 11rem;
}

/* Editor chrome: where to type (not serialized to HTML) */
.tiptap.ProseMirror .nf-closing-note-body-wrap,
.ProseMirror .nf-closing-note-body-wrap,
.editor-shared .nf-closing-note-body-wrap {
  margin-top: 0.65rem;
  padding: 0.65rem 0.85rem 0.85rem;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.95);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.tiptap.ProseMirror .nf-closing-note-body-wrap:focus-within,
.ProseMirror .nf-closing-note-body-wrap:focus-within,
.editor-shared .nf-closing-note-body-wrap:focus-within {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(248, 250, 252, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 2px rgba(59, 130, 246, 0.12);
}

.tiptap.ProseMirror .nf-closing-note-write-hint,
.ProseMirror .nf-closing-note-write-hint,
.editor-shared .nf-closing-note-write-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.28rem;
  margin-bottom: 0.55rem;
  padding: 0.2rem 0.35rem 0.45rem;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  line-height: 1.35;
}

.tiptap.ProseMirror .nf-closing-note-write-hint:hover,
.ProseMirror .nf-closing-note-write-hint:hover,
.editor-shared .nf-closing-note-write-hint:hover {
  background: rgba(241, 245, 249, 0.9);
}

.tiptap.ProseMirror .nf-closing-note-write-hint__title,
.ProseMirror .nf-closing-note-write-hint__title,
.editor-shared .nf-closing-note-write-hint__title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
}

.tiptap.ProseMirror .nf-closing-note-write-hint__detail,
.ProseMirror .nf-closing-note-write-hint__detail,
.editor-shared .nf-closing-note-write-hint__detail {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  max-width: 26rem;
}

.tiptap.ProseMirror .nf-closing-note-write-hint__detail strong,
.ProseMirror .nf-closing-note-write-hint__detail strong,
.editor-shared .nf-closing-note-write-hint__detail strong {
  color: #334155;
  font-weight: 700;
}

.tiptap.ProseMirror .nf-closing-note-content,
.ProseMirror .nf-closing-note-content,
.editor-shared .nf-closing-note-content {
  min-height: 4.75rem;
  padding: 0.6rem 0.75rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.tiptap.ProseMirror .nf-closing-note-content p,
.ProseMirror .nf-closing-note-content p,
.editor-shared .nf-closing-note-content p {
  margin: 0.5rem 0;
  font-family: var(--nfb-font-family);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.75;
  letter-spacing: 0.012em;
  color: var(--nfb-text-muted);
  font-weight: 400;
  text-align: center;
  outline: none;
}

.tiptap.ProseMirror .nf-closing-note-content p:empty::before,
.ProseMirror .nf-closing-note-content p:empty::before,
.editor-shared .nf-closing-note-content p:empty::before {
  content: "Click here, then type or paste your closing lines…";
  color: #94a3b8;
  pointer-events: none;
  font-style: italic;
}

.tiptap.ProseMirror .nf-closing-note-content p:focus,
.ProseMirror .nf-closing-note-content p:focus,
.editor-shared .nf-closing-note-content p:focus {
  color: var(--nfb-text);
}

/* ============================================================
   EPIGRAPH — EDITOR VIEW (v2.0 — Modern & Subtle)
   Amir & Mixel — 2025
============================================================ */

/* Support both .tiptap.ProseMirror and .ProseMirror/.editor-shared selectors */
.tiptap.ProseMirror blockquote.nf-epigraph,
.ProseMirror blockquote.nf-epigraph,
.editor-shared blockquote.nf-epigraph {
  margin: 2.5rem auto;
  max-width: 580px;
  text-align: center;
  padding: 1.25rem 1.5rem 1.5rem; /* Padding to contain header inside dashed box */
  position: relative; /* Ensure header positioning context */
  
  /* Subtle background and border to match dedication style */
  background: #fafaf9;
  border: 1px dotted rgba(229, 227, 223, 0.6); /* Dotted border for front-matter (lighter, more subtle) */
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

/* ================= QUOTE FIELD (PRIMARY) ================= */

.tiptap.ProseMirror .epigraph-quote-field,
.ProseMirror .epigraph-quote-field,
.editor-shared .epigraph-quote-field {
  min-height: 2.5em;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0; /* Remove top margin to keep inside container */

  /* Modern subtle background */
  background: #fdfcf9;
  border: 1px dashed #d6d3c8;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  /* Typography */
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #374151;
  font-weight: 500;
  letter-spacing: 0.02em;

  outline: none;
  position: relative;
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .epigraph-quote-field:hover,
.ProseMirror .epigraph-quote-field:hover,
.editor-shared .epigraph-quote-field:hover {
  border-color: #c4b5a0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Focus state */
.tiptap.ProseMirror .epigraph-quote-field:focus,
.ProseMirror .epigraph-quote-field:focus,
.editor-shared .epigraph-quote-field:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

/* Placeholder */
.tiptap.ProseMirror .epigraph-quote-field:empty::before,
.ProseMirror .epigraph-quote-field:empty::before,
.editor-shared .epigraph-quote-field:empty::before {
  content: "Epigraph quote…";
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 1.05rem;
}

/* Auto book quotes — prominent */
.tiptap.ProseMirror .epigraph-quote-field:not(:empty)::before,
.tiptap.ProseMirror .epigraph-quote-field:not(:empty)::after {
  font-size: 1.6em;
  font-weight: 600;
  color: #374151;
  opacity: 1;
}

.tiptap.ProseMirror .epigraph-quote-field:not(:empty)::before {
  content: "\201C";
  margin-right: 0.15em; /* Consistent spacing with closing quote */
}

.tiptap.ProseMirror .epigraph-quote-field:not(:empty)::after {
  content: "\201D";
  margin-left: 0.15em; /* Inline spacing - follows text flow, works for any number of lines */
  /* No position: absolute - navodnici su dio inline flow-a teksta */
}

/* ================= AUTHOR FIELD (SECONDARY) ================= */

.tiptap.ProseMirror .epigraph-author-field,
.ProseMirror .epigraph-author-field,
.editor-shared .epigraph-author-field {
  min-height: 1.75em;
  padding: 0.6rem 1.25rem;

  /* Modern subtle background — different from quote */
  background: #f0f4f8;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  /* Typography */
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475569;
  font-weight: 500;

  text-align: right;
  outline: none;
  position: relative;
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .epigraph-author-field:hover,
.ProseMirror .epigraph-author-field:hover,
.editor-shared .epigraph-author-field:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Focus state */
.tiptap.ProseMirror .epigraph-author-field:focus,
.ProseMirror .epigraph-author-field:focus,
.editor-shared .epigraph-author-field:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

/* Placeholder */
.tiptap.ProseMirror .epigraph-author-field:empty::before,
.ProseMirror .epigraph-author-field:empty::before,
.editor-shared .epigraph-author-field:empty::before {
  content: "Author (optional)";
  color: #cbd5e1;
  pointer-events: none;
  font-size: 0.875rem;
}

/* Auto dash — subtler */
.tiptap.ProseMirror .epigraph-author-field:not(:empty)::before {
  content: "— ";
  color: #94a3b8;
  opacity: 0.8;
}

/* ============================================================
   EPIGRAPH — EDIT BUTTON (EDITOR ONLY)
   Amir & Mixel — 2025
============================================================ */

/* REMOVED: Old ::after Edit button - now using NodeView header with delete button */

/* Hover state for epigraph container */
.tiptap.ProseMirror blockquote.nf-epigraph:hover,
.ProseMirror blockquote.nf-epigraph:hover,
.editor-shared blockquote.nf-epigraph:hover {
  border-color: rgba(212, 209, 204, 0.8); /* Slightly more visible on hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Subtle hover feedback for fields */
.tiptap.ProseMirror blockquote.nf-epigraph:hover .epigraph-quote-field,
.tiptap.ProseMirror blockquote.nf-epigraph:hover .epigraph-author-field {
  border-color: #cbd5e1;
}

/* Section label inside epigraph - ensure it's inside the box */
.tiptap.ProseMirror blockquote.nf-epigraph .nfb-section-label,
.ProseMirror blockquote.nf-epigraph .nfb-section-label,
.editor-shared blockquote.nf-epigraph .nfb-section-label {
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}

/* Ref Quote header */
.tiptap.ProseMirror blockquote.nf-ref-quote .nfb-section-label,
.ProseMirror blockquote.nf-ref-quote .nfb-section-label,
.editor-shared blockquote.nf-ref-quote .nfb-section-label {
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}

/* ============================================================
   EPIGRAPH — SHARED TYPOGRAPHY (EDITOR + PREVIEW)
   Amir & Mixel — 2025
============================================================ */

blockquote.nf-epigraph {
  margin: 2.5rem auto;
  max-width: 580px;
  text-align: center;
  padding: 0;
}

/* Quote typography (shared) */
blockquote.nf-epigraph .epigraph-quote-field {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #374151;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Book quotes (shared) */
blockquote.nf-epigraph .epigraph-quote-field::before,
blockquote.nf-epigraph .epigraph-quote-field::after {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.6em;
  font-weight: 600;
  color: #374151;
  opacity: 1;
}

blockquote.nf-epigraph .epigraph-quote-field::before {
  content: "\201C";
  margin-right: 0.15em; /* Consistent spacing with closing quote */
}

blockquote.nf-epigraph .epigraph-quote-field::after {
  content: "\201D";
  margin-left: 0.15em; /* Inline spacing - follows text flow, works for any number of lines */
  /* No position: absolute - navodnici su dio inline flow-a teksta */
}

/* Author typography (shared) */
blockquote.nf-epigraph .epigraph-author-field {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475569;
  font-weight: 500;
  text-align: right;
}

/* Dash before author (shared) */
blockquote.nf-epigraph .epigraph-author-field::before {
  content: "— ";
  color: #94a3b8;
  opacity: 0.8;
}

/* ============================================================
   EPIGRAPH — PREVIEW VIEW (Modern & Elegant)
   Amir & Mixel — 2025
============================================================ */

/* Epigraph block (preview only) — matching editor spacing */
blockquote.nf-epigraph {
  margin: 2.5rem auto;
  max-width: 580px;
  text-align: center;
  padding: 0;

  background: none;
  border: none;
  box-shadow: none;
}

/* ================= QUOTE (Preview) ================= */

blockquote.nf-epigraph .epigraph-quote-field {
  display: block;

  /* No editor styling */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 0.75rem 0;

  /* Typography — matching editor */
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #374151;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Book quotes — prominent like editor */
blockquote.nf-epigraph .epigraph-quote-field::before {
  content: "\201C";
  font-size: 1.6em;
  font-weight: 600;
  color: #374151;
  opacity: 1;
  margin-right: 0.15em; /* Consistent spacing with closing quote */
  vertical-align: -0.1em;
}

blockquote.nf-epigraph .epigraph-quote-field::after {
  content: "\201D";
  font-size: 1.6em;
  font-weight: 600;
  color: #374151;
  opacity: 1;
  margin-left: 0.15em; /* Inline spacing - follows text flow, works for any number of lines */
  vertical-align: -0.1em;
  /* No position: absolute - navodnici su dio inline flow-a teksta */
}

/* ================= AUTHOR (Preview) ================= */

blockquote.nf-epigraph .epigraph-author-field {
  display: block;

  /* No editor styling */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;

  /* Typography — matching editor */
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475569;
  text-align: right;
  font-weight: 500;
}

/* Dash before author — subtle like editor */
blockquote.nf-epigraph .epigraph-author-field::before {
  content: "— ";
  color: #94a3b8;
  opacity: 0.8;
}


/* ============================================================
   PARAGRAPH — CORE TYPOGRAPHY (EDITOR + PREVIEW)
   NFB Core Typography v1.1
   Amir & Mixel — 2025
============================================================ */

/* Base paragraph */
p {
  margin: 0 0 1.1rem 0;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 1.05rem;
  line-height: 1.65;

  color: #1f2937; /* dark gray, not pure black */
  text-align: justify;

  hyphens: auto;
}

/* Lead paragraph — only top-level body copy, never list rows (li > p or task li > div > p) */
p.lead,
.tiptap.ProseMirror > p:first-of-type:not(.nfb-headline):not(.nfb-badge):not(.article-series-kicker),
.ProseMirror > p:first-of-type:not(.nfb-headline):not(.nfb-badge):not(.article-series-kicker),
.editor-shared > p:first-of-type:not(.nfb-headline):not(.nfb-badge):not(.article-series-kicker),
.nfb-article .article-body > p:first-of-type:not(.nfb-headline):not(.nfb-badge):not(.article-series-kicker),
.nfb-article > p:first-of-type:not(.nfb-headline):not(.nfb-badge):not(.article-series-kicker) {
  font-size: 1.14rem;   /* ~ +8–9% */
  line-height: 1.7;
  font-style: italic;
}


/* ============================================================
   KEY POINTS — FINAL STYLES (Editor + Preview)
   Clean • Simple • Epigraph-style
   NFB Core Typography v1.1
   Amir & Mixel — 2025
============================================================ */

/* =========================
   BLOCK WRAPPER (Shared)
========================= */

.nf-key-points {
  max-width: 640px;
  margin: 2.5rem auto 2.75rem;
  padding: 0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Subtle sky tint — scan block, not data / callout blue */
  --nf-kp-surface: #f3f8fb;
  --nf-kp-surface-mid: #f0f5fa;
  --nf-kp-border: #c4d4e5;
  --nf-kp-border-hover: #b3c5d9;
  --nf-kp-rule: #d5e4f1;
  --nf-kp-bullet: #6d8eb0;
  --nf-kp-title: #3a4d60;
  --nf-kp-shadow: 0 1px 2px rgba(55, 95, 130, 0.07);
}

/* =========================
   HEADER (Shared)
========================= */

.nf-key-points__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.nf-key-points__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nf-kp-title, #3a4d60);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================
   CONTENT (Shared)
========================= */

.nf-key-points__content {
  margin-top: 0.45rem;
}

/* Row wrapper (editor node view): field + per-item remove */
.tiptap.ProseMirror .nf-key-point-item__row,
.ProseMirror .nf-key-point-item__row,
.editor-shared .nf-key-point-item__row {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--nf-kp-rule, #d5e4f1);
}

.tiptap.ProseMirror .nf-key-points__content > .nf-key-point-item__row:last-child,
.ProseMirror .nf-key-points__content > .nf-key-point-item__row:last-child,
.editor-shared .nf-key-points__content > .nf-key-point-item__row:last-child {
  border-bottom: none;
  padding-bottom: 0.15rem;
}

.tiptap.ProseMirror .nf-key-point-item__row .nf-key-point-item,
.ProseMirror .nf-key-point-item__row .nf-key-point-item,
.editor-shared .nf-key-point-item__row .nf-key-point-item {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.tiptap.ProseMirror .nf-key-point-item__controls,
.ProseMirror .nf-key-point-item__controls,
.editor-shared .nf-key-point-item__controls {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.1rem;
  padding-left: 0.1rem;
}

.tiptap.ProseMirror .nf-key-point-item__move,
.ProseMirror .nf-key-point-item__move,
.editor-shared .nf-key-point-item__move {
  width: 1.65rem;
  height: 1.35rem;
  padding: 0;
  line-height: 1;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid var(--nf-kp-rule, #d5e4f1);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tiptap.ProseMirror .nf-key-point-item__move:hover:not(:disabled),
.ProseMirror .nf-key-point-item__move:hover:not(:disabled),
.editor-shared .nf-key-point-item__move:hover:not(:disabled) {
  color: #334155;
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.tiptap.ProseMirror .nf-key-point-item__move:disabled,
.ProseMirror .nf-key-point-item__move:disabled,
.editor-shared .nf-key-point-item__move:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tiptap.ProseMirror .nf-key-point-item__remove,
.ProseMirror .nf-key-point-item__remove,
.editor-shared .nf-key-point-item__remove {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
  color: #94a3b8;
  background: #ffffff;
  border: 1px dashed var(--nf-kp-rule, #d5e4f1);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tiptap.ProseMirror .nf-key-point-item__remove:hover:not(:disabled),
.ProseMirror .nf-key-point-item__remove:hover:not(:disabled),
.editor-shared .nf-key-point-item__remove:hover:not(:disabled) {
  color: #ef4444;
  border-color: #fecaca;
  background: #fff1f2;
}

.tiptap.ProseMirror .nf-key-point-item__remove:disabled,
.ProseMirror .nf-key-point-item__remove:disabled,
.editor-shared .nf-key-point-item__remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tiptap.ProseMirror .nf-key-points__footer,
.ProseMirror .nf-key-points__footer,
.editor-shared .nf-key-points__footer {
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--nf-kp-rule, #d5e4f1);
}

.tiptap.ProseMirror .nf-key-points__add-btn,
.ProseMirror .nf-key-points__add-btn,
.editor-shared .nf-key-points__add-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tiptap.ProseMirror .nf-key-points__add-btn:hover:not(:disabled),
.ProseMirror .nf-key-points__add-btn:hover:not(:disabled),
.editor-shared .nf-key-points__add-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #1e293b;
}

.tiptap.ProseMirror .nf-key-points__add-btn:disabled,
.ProseMirror .nf-key-points__add-btn:disabled,
.editor-shared .nf-key-points__add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   EDITOR VIEW
============================================================ */

.tiptap.ProseMirror .nf-key-points,
.ProseMirror .nf-key-points,
.editor-shared .nf-key-points {
  max-width: 640px;
  padding: 0.85rem 1rem 0.75rem;

  background: linear-gradient(
    180deg,
    var(--nf-kp-surface, #f3f8fb) 0%,
    var(--nf-kp-surface-mid, #f0f5fa) 100%
  );
  border: 1px solid var(--nf-kp-border, #c4d4e5);
  border-radius: 8px;
  box-shadow: var(--nf-kp-shadow, 0 1px 2px rgba(55, 95, 130, 0.07));
}

/* Editor title */
.tiptap.ProseMirror .nf-key-points__title,
.ProseMirror .nf-key-points__title,
.editor-shared .nf-key-points__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nf-kp-title, #3a4d60);
}

/* Individual key point — compact list row (no per-item “card”) */
.tiptap.ProseMirror .nf-key-points__content .nf-key-point-item,
.ProseMirror .nf-key-points__content .nf-key-point-item,
.editor-shared .nf-key-points__content .nf-key-point-item {
  position: relative;
  margin: 0;
  padding: 0.1rem 0.15rem 0.1rem 1.05rem;
  min-height: 1.35em;

  background: transparent;
  border: none;
  border-radius: 0;

  font-size: 0.9375rem;
  line-height: 1.45;
  color: #334155;
  transition: color 0.15s ease, background 0.15s ease;
}

/* Bullet — small, tight to text (Bloomberg-style scan) */
.tiptap.ProseMirror .nf-key-points__content .nf-key-point-item::before,
.ProseMirror .nf-key-points__content .nf-key-point-item::before,
.editor-shared .nf-key-points__content .nf-key-point-item::before {
  content: "•";
  position: absolute;
  left: 0.05rem;
  top: 0.12em;
  color: var(--nf-kp-bullet, #6d8eb0);
  font-weight: 700;
  font-size: 0.65rem;
  line-height: 1.45;
}

/* ✏️ Placeholder — editor only */
.tiptap.ProseMirror .nf-key-points__content .nf-key-point-item:empty::after,
.ProseMirror .nf-key-points__content .nf-key-point-item:empty::after,
.editor-shared .nf-key-points__content .nf-key-point-item:empty::after {
  content: "Write a key point…";
  position: absolute;
  left: 1.05rem;
  top: 0.1rem;
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Support for nodes that contain only a br tag (ProseMirror empty state) */
.tiptap.ProseMirror .nf-key-points__content .nf-key-point-item:has(br:only-child)::after,
.ProseMirror .nf-key-points__content .nf-key-point-item:has(br:only-child)::after,
.editor-shared .nf-key-points__content .nf-key-point-item:has(br:only-child)::after {
  content: "Write a key point…";
  position: absolute;
  left: 1.05rem;
  top: 0.1rem;
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.45;
}


/* Focus hint — ring only, no box border on row */
.tiptap.ProseMirror .nf-key-points__content .nf-key-point-item:focus,
.ProseMirror .nf-key-points__content .nf-key-point-item:focus,
.editor-shared .nf-key-points__content .nf-key-point-item:focus {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(100, 140, 175, 0.32);
}

/* Hover — minimal tint on the editable cell */
.tiptap.ProseMirror .nf-key-points__content .nf-key-point-item:hover,
.ProseMirror .nf-key-points__content .nf-key-point-item:hover,
.editor-shared .nf-key-points__content .nf-key-point-item:hover {
  background: rgba(230, 240, 248, 0.55);
  border-radius: 4px;
}

/* Block hover — no lift; keeps compact editorial feel */
.tiptap.ProseMirror .nf-key-points:hover,
.ProseMirror .nf-key-points:hover,
.editor-shared .nf-key-points:hover {
  border-color: var(--nf-kp-border-hover, #b3c5d9);
  box-shadow: 0 1px 3px rgba(55, 95, 130, 0.1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ============================================================
   PREVIEW VIEW
============================================================ */

/* Preview key points block — clean, professional */
.is-preview .nf-key-points,
.editor-shared.is-preview .nf-key-points {
  max-width: 640px;
  margin: 2.5rem auto 2.75rem;
  padding: 0.9rem 1rem 0.75rem;

  background: linear-gradient(
    180deg,
    var(--nf-kp-surface, #f3f8fb) 0%,
    var(--nf-kp-surface-mid, #f0f5fa) 100%
  );
  border: 1px solid var(--nf-kp-border, #c4d4e5);
  border-radius: 8px;
  box-shadow: var(--nf-kp-shadow, 0 1px 2px rgba(55, 95, 130, 0.07));
}

/* Preview header */
.is-preview .nf-key-points__header,
.editor-shared.is-preview .nf-key-points__header {
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nf-kp-rule, #d5e4f1);
}

.is-preview .nf-key-points__title,
.editor-shared.is-preview .nf-key-points__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nf-kp-title, #3a4d60);
}

/* Preview content */
.is-preview .nf-key-points__content,
.editor-shared.is-preview .nf-key-points__content {
  margin-top: 0;
}

/* Preview key point items — compact list (matches editor density) */
.is-preview .nf-key-points__content .nf-key-point-item,
.editor-shared.is-preview .nf-key-points__content .nf-key-point-item {
  position: relative;
  margin: 0;
  padding: 0.4rem 0 0.4rem 1.05rem;
  border-bottom: 1px solid var(--nf-kp-rule, #d5e4f1);

  background: none;
  border-left: none;
  border-right: none;
  border-top: none;

  font-size: 0.9375rem;
  line-height: 1.45;
  color: #334155;
}

.is-preview .nf-key-points__content .nf-key-point-item:last-child,
.editor-shared.is-preview .nf-key-points__content .nf-key-point-item:last-child {
  border-bottom: none;
  padding-bottom: 0.15rem;
}

/* Hide empty key point items in preview (only show key points with content) */
.is-preview .nf-key-points__content .nf-key-point-item:empty,
.editor-shared.is-preview .nf-key-points__content .nf-key-point-item:empty,
.is-preview .nf-key-points__content .nf-key-point-item:has(br:only-child),
.editor-shared.is-preview .nf-key-points__content .nf-key-point-item:has(br:only-child) {
  display: none;
}

/* Bullet marker in preview */
.is-preview .nf-key-points__content .nf-key-point-item::before,
.editor-shared.is-preview .nf-key-points__content .nf-key-point-item::before {
  content: "•";
  position: absolute;
  left: 0.05rem;
  top: 0.55rem;
  color: var(--nf-kp-bullet, #6d8eb0);
  font-weight: 700;
  font-size: 0.65rem;
  line-height: 1;
}

/* ============================================================
   HEADLINE — editorial “attention line” (not H2/H3 structure)
   Editor: .nfb-headline-block shell (label + delete) — not in saved HTML
============================================================ */

/* Editor shell — jasna granica bloka; više zraka iznad nego ispod */
.tiptap.ProseMirror .nfb-headline-block,
.ProseMirror .nfb-headline-block,
.editor-shared .nfb-headline-block {
  max-width: 38rem;
  margin: 2.95rem auto 1.55rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5rem 0.9rem 0.85rem;
  border: 1px dotted rgba(148, 163, 184, 0.5);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.75);
  box-sizing: border-box;
}

.tiptap.ProseMirror .nfb-headline-block .nfb-section-label,
.ProseMirror .nfb-headline-block .nfb-section-label,
.editor-shared .nfb-headline-block .nfb-section-label {
  margin-bottom: 0.45rem;
}

/* Tipografija (editor: unutar bloka; preview: samostalan <p>) */
.tiptap.ProseMirror .nfb-headline-block p.nfb-headline,
.ProseMirror .nfb-headline-block p.nfb-headline,
.editor-shared .nfb-headline-block p.nfb-headline,
.is-preview p.nfb-headline,
.editor-shared.is-preview p.nfb-headline {
  max-width: none;
  margin: 0;
  padding: 0;

  font-family: var(--nfb-font-family, Georgia, "Times New Roman", serif);
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--nfb-text, #1f2937);

  text-align: center;
  text-wrap: balance;
  hyphens: none;
  text-justify: auto;
}

.is-preview p.nfb-headline,
.editor-shared.is-preview p.nfb-headline {
  max-width: 38rem;
  margin: 2.95rem auto 1.55rem;
}

.tiptap.ProseMirror .nfb-headline-block p.nfb-headline:focus,
.ProseMirror .nfb-headline-block p.nfb-headline:focus,
.editor-shared .nfb-headline-block p.nfb-headline:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35);
  border-radius: 4px;
}

/* ============================================================
   BADGE — kratka kontekst oznaka (nije callout)
   Editor: .nfb-badge-block + header; saved HTML: samo p.nfb-badge
============================================================ */

.tiptap.ProseMirror .nfb-badge-block,
.ProseMirror .nfb-badge-block,
.editor-shared .nfb-badge-block {
  max-width: 38rem;
  margin: 1.5rem auto 0.5rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0.45rem 0.75rem 0.55rem;
  border: 1px dotted rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tiptap.ProseMirror .nfb-badge-block .nfb-section-label,
.ProseMirror .nfb-badge-block .nfb-section-label,
.editor-shared .nfb-badge-block .nfb-section-label {
  margin-bottom: 0.35rem;
}

.nfb-badge-kind-select {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nfb-text, #1f2937);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  background: #fff;
  max-width: 11rem;
}

/* Pill (editor unwrapped node + preview / article) */
.tiptap.ProseMirror .nfb-badge-block p.nfb-badge,
.ProseMirror .nfb-badge-block p.nfb-badge,
.editor-shared .nfb-badge-block p.nfb-badge,
.is-preview p.nfb-badge,
.editor-shared.is-preview p.nfb-badge {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0.28rem 0.75rem;
  box-sizing: border-box;

  font-family: var(--nfb-font-ui, system-ui, sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  border: 1px solid transparent;

  --nfb-badge-bg: #f1f5f9;
  --nfb-badge-fg: #475569;
  --nfb-badge-border: #e2e8f0;
  background: var(--nfb-badge-bg);
  color: var(--nfb-badge-fg);
  border-color: var(--nfb-badge-border);
}

.nfb-badge--tip {
  --nfb-badge-bg: #eff6ff;
  --nfb-badge-fg: #1d4ed8;
  --nfb-badge-border: #bfdbfe;
}
.nfb-badge--important {
  --nfb-badge-bg: #fffbeb;
  --nfb-badge-fg: #b45309;
  --nfb-badge-border: #fde68a;
}
.nfb-badge--warning {
  --nfb-badge-bg: #fff7ed;
  --nfb-badge-fg: #c2410c;
  --nfb-badge-border: #fed7aa;
}
.nfb-badge--mistake {
  --nfb-badge-bg: #fef2f2;
  --nfb-badge-fg: #b91c1c;
  --nfb-badge-border: #fecaca;
}
.nfb-badge--truth {
  --nfb-badge-bg: #f0fdfa;
  --nfb-badge-fg: #0f766e;
  --nfb-badge-border: #99f6e4;
}
.nfb-badge--note {
  --nfb-badge-bg: #f8fafc;
  --nfb-badge-fg: #64748b;
  --nfb-badge-border: #e2e8f0;
}
.nfb-badge--example {
  --nfb-badge-bg: #f5f3ff;
  --nfb-badge-fg: #5b21b6;
  --nfb-badge-border: #ddd6fe;
}
.nfb-badge--key {
  --nfb-badge-bg: #eef2ff;
  --nfb-badge-fg: #3730a3;
  --nfb-badge-border: #c7d2fe;
}
.nfb-badge--bonus {
  --nfb-badge-bg: #f0fdf4;
  --nfb-badge-fg: #15803d;
  --nfb-badge-border: #bbf7d0;
}
.nfb-badge--myth {
  --nfb-badge-bg: #faf5ff;
  --nfb-badge-fg: #7e22ce;
  --nfb-badge-border: #e9d5ff;
}

.tiptap.ProseMirror .nfb-badge-block > p.nfb-badge,
.ProseMirror .nfb-badge-block > p.nfb-badge,
.editor-shared .nfb-badge-block > p.nfb-badge {
  align-self: center;
}

.tiptap.ProseMirror .nfb-badge-block > p.nfb-badge.nfb-badge--align-left,
.ProseMirror .nfb-badge-block > p.nfb-badge.nfb-badge--align-left,
.editor-shared .nfb-badge-block > p.nfb-badge.nfb-badge--align-left {
  align-self: flex-start;
}

.is-preview p.nfb-badge,
.editor-shared.is-preview p.nfb-badge {
  margin: 1.5rem auto 0.5rem;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.is-preview p.nfb-badge.nfb-badge--align-left,
.editor-shared.is-preview p.nfb-badge.nfb-badge--align-left {
  margin-left: 0;
  margin-right: auto;
}

/* ============================================================
   BUTTON (CTA) — block-level link; editor chrome + saved .nfb-button-row
============================================================ */

.tiptap.ProseMirror .nfb-button-block .nfb-section-label,
.ProseMirror .nfb-button-block .nfb-section-label,
.editor-shared .nfb-button-block .nfb-section-label {
  pointer-events: auto;
  margin-bottom: 0.25rem;
}

.tiptap.ProseMirror .nfb-button-block,
.ProseMirror .nfb-button-block,
.editor-shared .nfb-button-block {
  max-width: 38rem;
  margin: 2.5rem auto 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0.45rem 0.75rem 0.65rem;
  border: 1px dotted rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.nfb-button-input--invalid {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
}

/* Published / preview: wrapper + anchor */
.is-preview .nfb-button-row,
.editor-shared.is-preview .nfb-button-row,
.nfb-article .nfb-button-row {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 38rem;
  margin: 2.5rem auto 2rem;
  box-sizing: border-box;
}

.is-preview .nfb-button-row[data-button-align="left"],
.is-preview .nfb-button-row.nfb-button-row--align-left,
.editor-shared.is-preview .nfb-button-row[data-button-align="left"],
.editor-shared.is-preview .nfb-button-row.nfb-button-row--align-left,
.nfb-article .nfb-button-row[data-button-align="left"],
.nfb-article .nfb-button-row.nfb-button-row--align-left {
  justify-content: flex-start;
}

.tiptap.ProseMirror .nfb-button-preview-wrap[data-button-align="left"],
.ProseMirror .nfb-button-preview-wrap[data-button-align="left"],
.editor-shared .nfb-button-preview-wrap[data-button-align="left"] {
  justify-content: flex-start;
}

.tiptap.ProseMirror .nfb-button-preview-wrap[data-button-align="center"],
.ProseMirror .nfb-button-preview-wrap[data-button-align="center"],
.editor-shared .nfb-button-preview-wrap[data-button-align="center"] {
  justify-content: center;
}

a.nfb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.55rem 1.35rem;
  font-family: var(--nfb-font-ui, system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, opacity 0.15s ease;
}

a.nfb-button--primary {
  background: #e87a61;
  color: #fff;
  border-width: 2px;
  border-color: #e87a61;
  box-shadow: 0 2px 8px rgba(232, 122, 97, 0.35);
}

a.nfb-button--primary:hover {
  background: #d96a52;
  border-color: #d96a52;
  color: #fff;
}

a.nfb-button--secondary {
  background: #f8fafc;
  color: #64748b;
  border-width: 1px;
  border-style: solid;
  border-color: #e2e8f0;
  box-shadow: none;
}

a.nfb-button--secondary:hover {
  border-color: #cbd5e1;
  color: #475569;
  background: #f1f5f9;
}

a.nfb-button--placeholder,
a.nfb-button[data-nfb-button-placeholder="1"] {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   QUOTE (CLASSIC) — EDITOR VIEW (v1.0)
   Traditional, book-style quote for citations and references
   Amir & Mixel — 2025
============================================================ */

/* Support both .tiptap.ProseMirror and .ProseMirror/.editor-shared selectors */
.tiptap.ProseMirror blockquote.nfb-quote-classic,
.ProseMirror blockquote.nfb-quote-classic,
.editor-shared blockquote.nfb-quote-classic {
  margin: 2.5rem auto;
  max-width: 580px;
  padding: 0;
  border: none;
  background: none;
}

/* Editor node view: label + inner content wrapper (not present in saved HTML) */
.tiptap.ProseMirror blockquote.nfb-quote-classic .nfb-section-label,
.ProseMirror blockquote.nfb-quote-classic .nfb-section-label,
.editor-shared blockquote.nfb-quote-classic .nfb-section-label {
  margin-bottom: 0.2rem !important;
  margin-top: 0 !important;
}

/* Tighter header row: title + Delete align to quote body without extra gap */
.tiptap.ProseMirror blockquote.nfb-quote-classic .nfb-section-label .nfb-section-title,
.ProseMirror blockquote.nfb-quote-classic .nfb-section-label .nfb-section-title,
.editor-shared blockquote.nfb-quote-classic .nfb-section-label .nfb-section-title {
  margin-bottom: 0 !important;
}

.tiptap.ProseMirror blockquote.nfb-quote-classic .nfb-quote-classic__content,
.ProseMirror blockquote.nfb-quote-classic .nfb-quote-classic__content,
.editor-shared blockquote.nfb-quote-classic .nfb-quote-classic__content {
  display: block;
}

.tiptap.ProseMirror blockquote.nfb-quote-classic .nfb-quote-classic__content > p:first-child,
.ProseMirror blockquote.nfb-quote-classic .nfb-quote-classic__content > p:first-child,
.editor-shared blockquote.nfb-quote-classic .nfb-quote-classic__content > p:first-child {
  margin-top: 0 !important;
}

/* Quote field — neutral, book-like style */
.tiptap.ProseMirror .classic-quote-field,
.ProseMirror .classic-quote-field,
.editor-shared .classic-quote-field {
  min-height: 2.5em;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.5rem;

  /* Modern subtle background */
  background: #fdfcf9;
  border: 1px dashed #d6d3c8;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  /* Typography */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #374151;
  font-weight: 400;
  text-align: left;

  outline: none;
  position: relative;
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .classic-quote-field:hover,
.ProseMirror .classic-quote-field:hover,
.editor-shared .classic-quote-field:hover {
  border-color: #c4b5a0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Focus state */
.tiptap.ProseMirror .classic-quote-field:focus,
.ProseMirror .classic-quote-field:focus,
.editor-shared .classic-quote-field:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

/* Classic quote quotation marks */
.tiptap.ProseMirror .classic-quote-field:not(:empty)::before,
.ProseMirror .classic-quote-field:not(:empty)::before,
.editor-shared .classic-quote-field:not(:empty)::before {
  content: "\201C";
  margin-right: 0.15em;
  font-size: 1.4em;
  font-weight: 600;
  color: #374151;
}

.tiptap.ProseMirror .classic-quote-field:not(:empty)::after,
.ProseMirror .classic-quote-field:not(:empty)::after,
.editor-shared .classic-quote-field:not(:empty)::after {
  content: "\201D";
  margin-left: 0.15em;
  font-size: 1.4em;
  font-weight: 600;
  color: #374151;
}

/* Author field */
.tiptap.ProseMirror .classic-author-field,
.ProseMirror .classic-author-field,
.editor-shared .classic-author-field {
  min-height: 1.75em;
  padding: 0.6rem 1.25rem;

  /* Modern subtle background — different from quote */
  background: #f0f4f8;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  /* Typography */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475569;
  font-weight: 500;
  text-align: right;

  outline: none;
  position: relative;
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .classic-author-field:hover,
.ProseMirror .classic-author-field:hover,
.editor-shared .classic-author-field:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Focus state */
.tiptap.ProseMirror .classic-author-field:focus,
.ProseMirror .classic-author-field:focus,
.editor-shared .classic-author-field:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

/* Dash before author */
.tiptap.ProseMirror .classic-author-field:not(:empty)::before,
.ProseMirror .classic-author-field:not(:empty)::before,
.editor-shared .classic-author-field:not(:empty)::before {
  content: "— ";
  color: #94a3b8;
  opacity: 0.8;
}

/* Placeholders */
.tiptap.ProseMirror .classic-quote-field:empty::before,
.ProseMirror .classic-quote-field:empty::before,
.editor-shared .classic-quote-field:empty::before {
  content: "Classic quote text…";
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 1.05rem;
}

.tiptap.ProseMirror .classic-author-field:empty::before,
.ProseMirror .classic-author-field:empty::before,
.editor-shared .classic-author-field:empty::before {
  content: "Author (optional)";
  color: #cbd5e1;
  pointer-events: none;
  font-size: 0.875rem;
}

/* ============================================================
   QUOTE (MODERN) — EDITOR VIEW (v1.0)
   Editorial quote: same hue family as stat coral (#e87a61), lower weight
   Stat / data = strong coral; quote = muted coral + warm neutral surface
   Amir & Mixel — 2025
============================================================ */

/* Support both .tiptap.ProseMirror and .ProseMirror/.editor-shared selectors */
.tiptap.ProseMirror blockquote.nfb-quote-modern,
.ProseMirror blockquote.nfb-quote-modern,
.editor-shared blockquote.nfb-quote-modern {
  --nfb-quote-modern-accent: #c4897a;
  --nfb-quote-modern-surface: #faf6f4;
  --nfb-quote-modern-focus-ring: rgba(196, 137, 122, 0.2);

  margin: 3.5rem auto;
  max-width: 600px;
  position: relative;
  /* Left inset clears border + decorative opening mark (~2.5rem from left:1.25rem) */
  padding: 2rem 2.5rem 2rem 3.5rem;
  border-left: 3px solid var(--nfb-quote-modern-accent);
  background: var(--nfb-quote-modern-surface);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Anchor: single large opening mark (block-level “start” of the quote) */
.tiptap.ProseMirror blockquote.nfb-quote-modern::before,
.ProseMirror blockquote.nfb-quote-modern::before,
.editor-shared blockquote.nfb-quote-modern::before {
  content: "\201C";
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  font-size: 2.5rem;
  line-height: 1;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 600;
  color: var(--nfb-quote-modern-accent, var(--nfb-ornament-quote, #a87362));
  opacity: var(--nfb-ornament-quote-opacity, 0.28);
  pointer-events: none;
  z-index: 0;
}

/* Editor chrome: sit decorative mark below the section label row */
.tiptap.ProseMirror blockquote.nfb-quote-modern:has(.nfb-section-label)::before,
.ProseMirror blockquote.nfb-quote-modern:has(.nfb-section-label)::before,
.editor-shared blockquote.nfb-quote-modern:has(.nfb-section-label)::before {
  top: 3rem;
}

/* Editor node view: label + inner content wrapper (not present in saved HTML) */
.tiptap.ProseMirror blockquote.nfb-quote-modern .nfb-section-label,
.ProseMirror blockquote.nfb-quote-modern .nfb-section-label,
.editor-shared blockquote.nfb-quote-modern .nfb-section-label {
  position: relative;
  z-index: 1;
  margin-bottom: 0.2rem !important;
  margin-top: 0 !important;
}

.tiptap.ProseMirror blockquote.nfb-quote-modern .nfb-section-label .nfb-section-title,
.ProseMirror blockquote.nfb-quote-modern .nfb-section-label .nfb-section-title,
.editor-shared blockquote.nfb-quote-modern .nfb-section-label .nfb-section-title {
  margin-bottom: 0 !important;
}

.tiptap.ProseMirror blockquote.nfb-quote-modern .nfb-quote-modern__content,
.ProseMirror blockquote.nfb-quote-modern .nfb-quote-modern__content,
.editor-shared blockquote.nfb-quote-modern .nfb-quote-modern__content {
  display: block;
}

.tiptap.ProseMirror blockquote.nfb-quote-modern .nfb-quote-modern__content > p:first-child,
.ProseMirror blockquote.nfb-quote-modern .nfb-quote-modern__content > p:first-child,
.editor-shared blockquote.nfb-quote-modern .nfb-quote-modern__content > p:first-child {
  margin-top: 0 !important;
}

/* System serif + italic — narrative quote vs stat sans (no webfont) */
.tiptap.ProseMirror blockquote.nfb-quote-modern p,
.ProseMirror blockquote.nfb-quote-modern p,
.editor-shared blockquote.nfb-quote-modern p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.75;
}

.tiptap.ProseMirror blockquote.nfb-quote-modern p.modern-author-field,
.ProseMirror blockquote.nfb-quote-modern p.modern-author-field,
.editor-shared blockquote.nfb-quote-modern p.modern-author-field {
  font-style: normal;
}

/* Quote field — stronger visual presence */
.tiptap.ProseMirror .modern-quote-field,
.ProseMirror .modern-quote-field,
.editor-shared .modern-quote-field {
  min-height: 3em;
  padding: 1.5rem 1.75rem 1.5rem 2rem;
  margin: 0 0 1rem 0;

  /* Stronger visual background */
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

  /* Size / color (family + rhythm from blockquote p rules above) */
  font-size: 1.05rem;
  color: #1e293b;
  text-align: left;

  outline: none;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .modern-quote-field:hover,
.ProseMirror .modern-quote-field:hover,
.editor-shared .modern-quote-field:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Focus state */
.tiptap.ProseMirror .modern-quote-field:focus,
.ProseMirror .modern-quote-field:focus,
.editor-shared .modern-quote-field:focus {
  border-color: var(--nfb-quote-modern-accent, #c4897a);
  box-shadow: 0 0 0 3px var(--nfb-quote-modern-focus-ring, rgba(196, 137, 122, 0.2));
}

/* Opening/closing marks: blockquote::before only (no inline “smart quotes” on text) */

/* Author field — subtle */
.tiptap.ProseMirror .modern-author-field,
.ProseMirror .modern-author-field,
.editor-shared .modern-author-field {
  min-height: 1.75em;
  padding: 0.6rem 1.25rem;
  margin: 0;

  /* Subtle background — different from quote */
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  font-size: 0.875rem;
  color: #94a3b8;
  text-align: right;
  letter-spacing: 0.01em;
  opacity: 0.72;

  outline: none;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .modern-author-field:hover,
.ProseMirror .modern-author-field:hover,
.editor-shared .modern-author-field:hover {
  opacity: 0.9;
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Focus state */
.tiptap.ProseMirror .modern-author-field:focus,
.ProseMirror .modern-author-field:focus,
.editor-shared .modern-author-field:focus {
  opacity: 1;
  border-color: var(--nfb-quote-modern-accent, #c4897a);
  box-shadow: 0 0 0 3px var(--nfb-quote-modern-focus-ring, rgba(196, 137, 122, 0.2));
}

/* Dash before author */
.tiptap.ProseMirror .modern-author-field:not(:empty)::before,
.ProseMirror .modern-author-field:not(:empty)::before,
.editor-shared .modern-author-field:not(:empty)::before {
  content: "— ";
  color: #cbd5e1;
}

/* Placeholders */
.tiptap.ProseMirror .modern-quote-field:empty::before,
.ProseMirror .modern-quote-field:empty::before,
.editor-shared .modern-quote-field:empty::before {
  content: "Modern quote text…";
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 1.05rem;
}

.tiptap.ProseMirror .modern-author-field:empty::before,
.ProseMirror .modern-author-field:empty::before,
.editor-shared .modern-author-field:empty::before {
  content: "Author (optional)";
  color: #cbd5e1;
  pointer-events: none;
  font-size: 0.875rem;
}

/* ============================================================
   PULLQUOTE (SIMPLE) — EDITOR VIEW
   Quiet aside: italic serif only — no hairline, no left bar (not exported)
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .pullquote.pullquote-simple,
.ProseMirror .pullquote.pullquote-simple,
.editor-shared .pullquote.pullquote-simple {
  margin: 2.5rem auto;
  max-width: 500px;
  padding: 1.25rem 1.5rem;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tiptap.ProseMirror .pullquote.pullquote-simple .nfb-section-label,
.ProseMirror .pullquote.pullquote-simple .nfb-section-label,
.editor-shared .pullquote.pullquote-simple .nfb-section-label {
  position: relative;
  z-index: 1;
  margin-bottom: 0.2rem !important;
  margin-top: 0 !important;
}

.tiptap.ProseMirror .pullquote.pullquote-simple .nfb-section-label .nfb-section-title,
.ProseMirror .pullquote.pullquote-simple .nfb-section-label .nfb-section-title,
.editor-shared .pullquote.pullquote-simple .nfb-section-label .nfb-section-title {
  margin-bottom: 0 !important;
}

.tiptap.ProseMirror .pullquote.pullquote-simple .nfb-pullquote-simple__content,
.ProseMirror .pullquote.pullquote-simple .nfb-pullquote-simple__content,
.editor-shared .pullquote.pullquote-simple .nfb-pullquote-simple__content {
  display: block;
}

.tiptap.ProseMirror .pullquote.pullquote-simple .nfb-pullquote-simple__content > p:first-child,
.ProseMirror .pullquote.pullquote-simple .nfb-pullquote-simple__content > p:first-child,
.editor-shared .pullquote.pullquote-simple .nfb-pullquote-simple__content > p:first-child {
  margin-top: 0 !important;
}

.tiptap.ProseMirror .pullquote-simple .pullquote-text-field,
.ProseMirror .pullquote-simple .pullquote-text-field,
.editor-shared .pullquote-simple .pullquote-text-field {
  min-height: 2.5em;
  padding: 1.1rem 1.35rem 1.35rem;
  margin: 0;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.68;
  font-weight: 400;
  color: #64748b;
  letter-spacing: 0.01em;
  text-align: left;
  hyphens: none;

  outline: none;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tiptap.ProseMirror .pullquote-simple .pullquote-text-field:hover,
.ProseMirror .pullquote-simple .pullquote-text-field:hover,
.editor-shared .pullquote-simple .pullquote-text-field:hover {
  border-color: #94a3b8;
}

.tiptap.ProseMirror .pullquote-simple .pullquote-text-field:focus,
.ProseMirror .pullquote-simple .pullquote-text-field:focus,
.editor-shared .pullquote-simple .pullquote-text-field:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

.tiptap.ProseMirror .pullquote-simple .pullquote-text-field:empty::before,
.ProseMirror .pullquote-simple .pullquote-text-field:empty::before,
.editor-shared .pullquote-simple .pullquote-text-field:empty::before {
  content: "Pullquote text (highlight from your article)…";
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 1.1rem;
}

/* ============================================================
   PULLQUOTE (MODERN) — EDITOR VIEW
   Statement block: bold sans, ornament only — no left bar
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .pullquote.pullquote-modern,
.ProseMirror .pullquote.pullquote-modern,
.editor-shared .pullquote.pullquote-modern {
  --nfb-quote-modern-accent: #c4897a;
  margin: 2.75rem auto;
  max-width: 620px;
  padding: 1.5rem 1.75rem;
  background: #faf6f4;
  border: 1px dashed #e8d9d4;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.tiptap.ProseMirror .pullquote.pullquote-modern .nfb-section-label,
.ProseMirror .pullquote.pullquote-modern .nfb-section-label,
.editor-shared .pullquote.pullquote-modern .nfb-section-label {
  position: relative;
  z-index: 1;
  margin-bottom: 0.2rem !important;
  margin-top: 0 !important;
}

.tiptap.ProseMirror .pullquote.pullquote-modern .nfb-section-label .nfb-section-title,
.ProseMirror .pullquote.pullquote-modern .nfb-section-label .nfb-section-title,
.editor-shared .pullquote.pullquote-modern .nfb-section-label .nfb-section-title {
  margin-bottom: 0 !important;
}

.tiptap.ProseMirror .pullquote.pullquote-modern .nfb-pullquote-modern__content,
.ProseMirror .pullquote.pullquote-modern .nfb-pullquote-modern__content,
.editor-shared .pullquote.pullquote-modern .nfb-pullquote-modern__content {
  display: block;
}

.tiptap.ProseMirror .pullquote.pullquote-modern .nfb-pullquote-modern__content::before,
.ProseMirror .pullquote.pullquote-modern .nfb-pullquote-modern__content::before,
.editor-shared .pullquote.pullquote-modern .nfb-pullquote-modern__content::before {
  content: "\201C";
  display: block;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  color: var(--nfb-quote-modern-accent, var(--nfb-ornament-pullquote, #a87362));
  opacity: var(--nfb-ornament-pullquote-opacity, 0.34);
  margin: 0 0 0.65rem;
  pointer-events: none;
}

.tiptap.ProseMirror .pullquote.pullquote-modern .nfb-pullquote-modern__content > p:first-child,
.ProseMirror .pullquote.pullquote-modern .nfb-pullquote-modern__content > p:first-child,
.editor-shared .pullquote.pullquote-modern .nfb-pullquote-modern__content > p:first-child {
  margin-top: 0 !important;
}

.tiptap.ProseMirror .pullquote-modern .pullquote-text-field,
.ProseMirror .pullquote-modern .pullquote-text-field,
.editor-shared .pullquote-modern .pullquote-text-field {
  min-height: 2.75em;
  padding: 1.35rem 1.5rem 1.65rem;
  margin: 0;
  background: #ffffff;
  border: 1px dashed #e8d9d4;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-style: normal;
  font-size: 1.38rem;
  line-height: 1.42;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  hyphens: none;
  text-align-last: center;

  outline: none;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tiptap.ProseMirror .pullquote-modern .pullquote-text-field:hover,
.ProseMirror .pullquote-modern .pullquote-text-field:hover,
.editor-shared .pullquote-modern .pullquote-text-field:hover {
  border-color: #d4c4bf;
}

.tiptap.ProseMirror .pullquote-modern .pullquote-text-field:focus,
.ProseMirror .pullquote-modern .pullquote-text-field:focus,
.editor-shared .pullquote-modern .pullquote-text-field:focus {
  border-color: #c4b4ae;
  box-shadow: 0 0 0 3px rgba(196, 137, 122, 0.15);
}

.tiptap.ProseMirror .pullquote-modern .pullquote-text-field:empty::before,
.ProseMirror .pullquote-modern .pullquote-text-field:empty::before,
.editor-shared .pullquote-modern .pullquote-text-field:empty::before {
  content: "Pullquote text (highlight from your article)…";
  color: #cbd5e1;
  pointer-events: none;
  font-style: normal;
  font-size: 1.38rem;
  font-weight: 600;
}

/* ============================================================
   PULLQUOTE — READER / PREVIEW (.nfb-article)
   No side borders — modern: ornament; simple: type only
   Amir & Mixel — 2025
============================================================ */

.nfb-article .pullquote.pullquote-simple,
.nfb-article .article-body .pullquote.pullquote-simple {
  margin: 2.5rem auto;
  max-width: 500px;
  padding: 0;
}

.nfb-article .pullquote.pullquote-simple > p,
.nfb-article .article-body .pullquote.pullquote-simple > p,
.nfb-article .pullquote-simple .pullquote-text-field {
  padding: 0 0.25rem 0 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
  color: #64748b !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-justify: auto !important;
  hyphens: none !important;
}

.nfb-article .pullquote.pullquote-modern,
.nfb-article .article-body .pullquote.pullquote-modern {
  --nfb-quote-modern-accent: #c4897a;
  margin: 3rem auto;
  max-width: 620px;
  padding: 0;
}

.nfb-article .pullquote.pullquote-modern::before,
.nfb-article .article-body .pullquote.pullquote-modern::before {
  content: "\201C";
  display: block;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  color: var(--nfb-quote-modern-accent, var(--nfb-ornament-pullquote, #a87362));
  opacity: var(--nfb-ornament-pullquote-opacity, 0.34);
  margin: 0 0 0.65rem;
  pointer-events: none;
}

.nfb-article .pullquote.pullquote-modern > p,
.nfb-article .article-body .pullquote.pullquote-modern > p,
.nfb-article .pullquote-modern .pullquote-text-field {
  padding: 0.35rem 1rem 0.5rem;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-style: normal !important;
  font-size: 1.38rem !important;
  line-height: 1.42 !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  text-align-last: center !important;
  text-wrap: balance;
  text-justify: auto !important;
  hyphens: none !important;
}

/* ============================================================
   VERSE — EDITOR VIEW (v1.0)
   Poetry / structured text - form carries meaning
   Amir & Mixel — 2025
============================================================ */

/* Support both .tiptap.ProseMirror and .ProseMirror/.editor-shared selectors */
.tiptap.ProseMirror .nfb-verse,
.ProseMirror .nfb-verse,
.editor-shared .nfb-verse {
  margin: 2.5rem auto;
  max-width: 500px;
  padding: 1.25rem 1.5rem;
  background: #fffbf5;
  border: 1px dashed #e8e2d9;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tiptap.ProseMirror .nfb-verse .nfb-section-label,
.ProseMirror .nfb-verse .nfb-section-label,
.editor-shared .nfb-verse .nfb-section-label {
  position: relative;
  z-index: 1;
  margin-bottom: 0.35rem !important;
  margin-top: 0 !important;
}

.tiptap.ProseMirror .nfb-verse .nfb-section-label .nfb-section-title,
.ProseMirror .nfb-verse .nfb-section-label .nfb-section-title,
.editor-shared .nfb-verse .nfb-section-label .nfb-section-title {
  margin-bottom: 0 !important;
}

.tiptap.ProseMirror .nfb-verse .nfb-verse__content,
.ProseMirror .nfb-verse .nfb-verse__content,
.editor-shared .nfb-verse .nfb-verse__content {
  display: block;
}

.tiptap.ProseMirror .nfb-verse .nfb-verse__content > p:first-child,
.ProseMirror .nfb-verse .nfb-verse__content > p:first-child,
.editor-shared .nfb-verse .nfb-verse__content > p:first-child {
  margin-top: 0 !important;
}

/* Verse line */
.tiptap.ProseMirror .nfb-verse .verse-line,
.ProseMirror .nfb-verse .verse-line,
.editor-shared .nfb-verse .verse-line {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 1.75em;
  padding: 0.5rem 1rem;
  /* Clear vertical rhythm between stanzas (empty lines stay visible) */
  margin: 0.5rem 0;

  /* Modern subtle background — warm, like dedication/epigraph */
  background: #fef7ed;
  border: 1px dashed #d6d3c8;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);

  /* Typography */
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.8;
  color: #1f2937;
  font-weight: 400;
  text-align: left;

  outline: none;
  position: relative;
  transition: all 0.2s ease;
}

/* Hover state */
.tiptap.ProseMirror .nfb-verse .verse-line:hover,
.ProseMirror .nfb-verse .verse-line:hover,
.editor-shared .nfb-verse .verse-line:hover {
  border-color: #c4b5a0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Focus state */
.tiptap.ProseMirror .nfb-verse .verse-line:focus,
.ProseMirror .nfb-verse .verse-line:focus,
.editor-shared .nfb-verse .verse-line:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

/* Placeholder */
.tiptap.ProseMirror .nfb-verse .verse-line:empty::before,
.ProseMirror .nfb-verse .verse-line:empty::before,
.editor-shared .nfb-verse .verse-line:empty::before {
  content: "Verse line…";
  color: #cbd5e1;
  pointer-events: none;
  font-style: italic;
  font-size: 1rem;
}

/*
  Stanza gap: PM empty paragraphs are usually <p><br class="ProseMirror-trailingBreak"></p>,
  not :empty — give them real height + extra vertical margin so a blank line reads as a break.
*/
.tiptap.ProseMirror .nfb-verse .verse-line:is(:empty, :has(> br:only-child)),
.ProseMirror .nfb-verse .verse-line:is(:empty, :has(> br:only-child)),
.editor-shared .nfb-verse .verse-line:is(:empty, :has(> br:only-child)) {
  min-height: 2.5em;
  margin-top: 0.85rem;
  margin-bottom: 0.85rem;
}

/* ============================================================
   TOGGLE — collapsible block (editor div + <details> in article)
   Notion-like: light shell, strong header hover, ▶ + rotate = open
============================================================ */

.tiptap.ProseMirror .nfb-toggle.nfb-toggle--editor,
.ProseMirror .nfb-toggle.nfb-toggle--editor,
.editor-shared .nfb-toggle.nfb-toggle--editor {
  margin: 0.5rem 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.tiptap.ProseMirror .nfb-toggle__header,
.ProseMirror .nfb-toggle__header,
.editor-shared .nfb-toggle__header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.4rem 0.45rem 0.25rem;
  margin: 0 -0.25rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.18s ease;
}

/* Cijeli red reaguje — jasniji “klikabilno” signal od callouta */
.tiptap.ProseMirror .nfb-toggle__header:hover,
.ProseMirror .nfb-toggle__header:hover,
.editor-shared .nfb-toggle__header:hover {
  background: rgba(241, 245, 249, 0.95);
}

.tiptap.ProseMirror .nfb-toggle__header:focus-within,
.ProseMirror .nfb-toggle__header:focus-within,
.editor-shared .nfb-toggle__header:focus-within {
  background: rgba(248, 250, 252, 0.95);
}

.tiptap.ProseMirror .nfb-toggle__chevron,
.ProseMirror .nfb-toggle__chevron,
.editor-shared .nfb-toggle__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  color: #1e293b;
  transform: rotate(0deg);
  transform-origin: center center;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.18s ease;
  user-select: none;
  cursor: pointer;
}

.tiptap.ProseMirror .nfb-toggle__header:hover .nfb-toggle__chevron,
.ProseMirror .nfb-toggle__header:hover .nfb-toggle__chevron,
.editor-shared .nfb-toggle__header:hover .nfb-toggle__chevron {
  color: #020617;
}

.tiptap.ProseMirror .nfb-toggle--open .nfb-toggle__chevron,
.ProseMirror .nfb-toggle--open .nfb-toggle__chevron,
.editor-shared .nfb-toggle--open .nfb-toggle__chevron {
  transform: rotate(90deg);
  color: #0f172a;
}

.tiptap.ProseMirror .nfb-toggle__title-field,
.ProseMirror .nfb-toggle__title-field,
.editor-shared .nfb-toggle__title-field {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  outline: none;
  border: none;
  background: transparent;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  margin: 0;
}

.tiptap.ProseMirror .nfb-toggle__title-field:focus,
.ProseMirror .nfb-toggle__title-field:focus,
.editor-shared .nfb-toggle__title-field:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  background: rgba(255, 255, 255, 0.9);
}

.tiptap.ProseMirror .nfb-toggle__title-field::placeholder,
.ProseMirror .nfb-toggle__title-field::placeholder,
.editor-shared .nfb-toggle__title-field::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.tiptap.ProseMirror .nfb-toggle__body,
.ProseMirror .nfb-toggle__body,
.editor-shared .nfb-toggle__body {
  margin-top: 7px;
  padding: 0 0 0.4rem 22px;
  border-top: none;
}

/* Tighter body copy than default ProseMirror paragraph gaps */
.tiptap.ProseMirror .nfb-toggle__body > p,
.ProseMirror .nfb-toggle__body > p,
.editor-shared .nfb-toggle__body > p {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  line-height: 1.45;
}

.tiptap.ProseMirror .nfb-toggle__body > p:first-child,
.ProseMirror .nfb-toggle__body > p:first-child,
.editor-shared .nfb-toggle__body > p:first-child {
  margin-top: 0;
}

.tiptap.ProseMirror .nfb-toggle__body > p:last-child,
.ProseMirror .nfb-toggle__body > p:last-child,
.editor-shared .nfb-toggle__body > p:last-child {
  margin-bottom: 0;
}

.tiptap.ProseMirror .nfb-toggle__body[hidden],
.ProseMirror .nfb-toggle__body[hidden],
.editor-shared .nfb-toggle__body[hidden] {
  display: none !important;
}

/* Published / preview: native <details> — bez duplih linija, isti ▶ + rotacija */
.nfb-toggle:not(.nfb-toggle--editor) {
  margin: 0.5rem 0;
  border-radius: 0;
  border: none;
  background: transparent;
  padding: 0 0 0.25rem;
  overflow: visible;
}

.nfb-toggle:not(.nfb-toggle--editor) > summary.nfb-toggle__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 0.35rem 0.45rem 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  user-select: none;
  border-radius: 8px;
  transition: background-color 0.18s ease, color 0.15s ease;
}

.nfb-toggle:not(.nfb-toggle--editor) > summary.nfb-toggle__summary:hover {
  background: rgba(241, 245, 249, 0.95);
  color: #020617;
}

.nfb-toggle:not(.nfb-toggle--editor) > summary.nfb-toggle__summary::-webkit-details-marker {
  display: none;
}

.nfb-toggle:not(.nfb-toggle--editor) > summary.nfb-toggle__summary::before {
  content: "▶";
  flex-shrink: 0;
  width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  color: #1e293b;
  transform: rotate(0deg);
  transform-origin: center center;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.18s ease;
}

.nfb-toggle:not(.nfb-toggle--editor) > summary.nfb-toggle__summary:hover::before {
  color: #020617;
}

.nfb-toggle:not(.nfb-toggle--editor)[open] > summary.nfb-toggle__summary::before {
  transform: rotate(90deg);
  color: #0f172a;
}

.nfb-toggle:not(.nfb-toggle--editor) > .nfb-toggle__body {
  margin-top: 7px;
  padding: 0 0 0.4rem 22px;
  border-top: none;
}

.nfb-toggle:not(.nfb-toggle--editor) > .nfb-toggle__body > p {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  line-height: 1.45;
}

.nfb-toggle:not(.nfb-toggle--editor) > .nfb-toggle__body > p:first-child {
  margin-top: 0;
}

.nfb-toggle:not(.nfb-toggle--editor) > .nfb-toggle__body > p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   CALLOUT — editor + .editor-shared / .nfb-callout (preview)
   All types share the same block layout (label row + indented body).
============================================================ */

/* ============================================================
   CALLOUT LAYOUT — editor (header + content) & preview (label + content)
============================================================ */

.tiptap.ProseMirror .nfb-callout,
.ProseMirror .nfb-callout,
.editor-shared .nfb-callout,
.nfb-callout {
  display: flex;
  flex-direction: column;
  margin: 0.75rem 0;
  padding: 1em 1.25em;
  border-radius: 6px;
  border-left: 3px solid;
}

/* Editor-only: label row + type select + delete */
.tiptap.ProseMirror .nfb-callout-header,
.ProseMirror .nfb-callout-header,
.editor-shared .nfb-callout-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.tiptap.ProseMirror .nfb-callout-controls,
.ProseMirror .nfb-callout-controls,
.editor-shared .nfb-callout-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.tiptap.ProseMirror .nfb-callout-type-select,
.ProseMirror .nfb-callout-type-select,
.editor-shared .nfb-callout-type-select {
  font-size: 0.7rem;
  font-weight: 600;
  max-width: 12.5rem;
  cursor: pointer;
}

.tiptap.ProseMirror .nfb-callout-delete-btn,
.ProseMirror .nfb-callout-delete-btn,
.editor-shared .nfb-callout-delete-btn {
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff;
  color: #ef4444;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.tiptap.ProseMirror .nfb-callout-delete-btn:hover,
.ProseMirror .nfb-callout-delete-btn:hover,
.editor-shared .nfb-callout-delete-btn:hover {
  opacity: 1;
}

/* LABEL — Title Case in markup; no all-caps */
.tiptap.ProseMirror .nfb-callout .callout-label,
.ProseMirror .nfb-callout .callout-label,
.editor-shared .nfb-callout .callout-label,
.nfb-callout .callout-label {
  font-size: 0.75rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0.02em;
  user-select: none;
  cursor: default;
}

.tiptap.ProseMirror .nfb-callout > .callout-label,
.ProseMirror .nfb-callout > .callout-label,
.editor-shared .nfb-callout > .callout-label,
.nfb-callout > .callout-label {
  margin-bottom: 0.35rem;
  pointer-events: none;
}

.tiptap.ProseMirror .nfb-callout-header .callout-label,
.ProseMirror .nfb-callout-header .callout-label,
.editor-shared .nfb-callout-header .callout-label {
  flex: 1;
  min-width: 5rem;
  margin-bottom: 0;
  pointer-events: none;
}

/* Informational family — calmer label */
.tiptap.ProseMirror .nfb-callout.nfb-callout--info .callout-label,
.ProseMirror .nfb-callout.nfb-callout--info .callout-label,
.editor-shared .nfb-callout.nfb-callout--info .callout-label,
.nfb-callout.nfb-callout--info .callout-label {
  font-weight: 600;
  letter-spacing: 0.025em;
  opacity: 0.92;
}

/* Emphasis family — stronger label */
.tiptap.ProseMirror .nfb-callout.nfb-callout--emphasis .callout-label,
.ProseMirror .nfb-callout.nfb-callout--emphasis .callout-label,
.editor-shared .nfb-callout.nfb-callout--emphasis .callout-label,
.nfb-callout.nfb-callout--emphasis .callout-label {
  font-weight: 700;
  letter-spacing: 0.035em;
  opacity: 1;
}

/* Important = must-not-miss */
.tiptap.ProseMirror .nfb-callout.important,
.ProseMirror .nfb-callout.important,
.editor-shared .nfb-callout.important,
.nfb-callout.important {
  border-left-width: 4px;
}

.tiptap.ProseMirror .nfb-callout.important .callout-label,
.ProseMirror .nfb-callout.important .callout-label,
.editor-shared .nfb-callout.important .callout-label,
.nfb-callout.important .callout-label {
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Highlight = editorial pull-out, warmer — less “alarm” than Important */
.tiptap.ProseMirror .nfb-callout.highlight,
.ProseMirror .nfb-callout.highlight,
.editor-shared .nfb-callout.highlight,
.nfb-callout.highlight {
  border-left-width: 3px;
  background: #fffbf0;
}

.tiptap.ProseMirror .nfb-callout.highlight .callout-label,
.ProseMirror .nfb-callout.highlight .callout-label,
.editor-shared .nfb-callout.highlight .callout-label,
.nfb-callout.highlight .callout-label {
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* CONTENT — 15px = Key Points row (see nfb-content-shared .nf-key-point-item); beats .ProseMirror p 17px base */
.tiptap.ProseMirror .nfb-callout .callout-content,
.ProseMirror .nfb-callout .callout-content,
.editor-shared .nfb-callout .callout-content,
.nfb-callout .callout-content {
  padding-left: 1.35rem; /* 👈 INDENT (ključna stavka) */
  font-size: 15px;
  line-height: 1.45;
  color: #334155;
  font-family: var(--nfb-font-family);
}

.tiptap.ProseMirror .nfb-callout .callout-content p,
.ProseMirror .nfb-callout .callout-content p,
.editor-shared .nfb-callout .callout-content p,
.nfb-callout .callout-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #334155;
  font-family: var(--nfb-font-family);
}

.tiptap.ProseMirror .nfb-callout .callout-content strong,
.ProseMirror .nfb-callout .callout-content strong,
.editor-shared .nfb-callout .callout-content strong,
.nfb-callout .callout-content strong {
  font-weight: 600;
  color: #1e293b;
}

/* Type-specific colors (editor only) - distinct colors, label matches border */
.tiptap.ProseMirror .nfb-callout.tip,
.ProseMirror .nfb-callout.tip,
.editor-shared .nfb-callout.tip,
.nfb-callout.tip {
  border-left-color: #22c55e; /* Green */
  background: #f0fdf4;
}

.tiptap.ProseMirror .nfb-callout.tip .callout-label,
.ProseMirror .nfb-callout.tip .callout-label,
.editor-shared .nfb-callout.tip .callout-label,
.nfb-callout.tip .callout-label {
  color: #22c55e; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.note,
.ProseMirror .nfb-callout.note,
.editor-shared .nfb-callout.note,
.nfb-callout.note {
  border-left: 3px solid #3b82f6; /* Blue */
  background: #eff6ff;
}

.tiptap.ProseMirror .nfb-callout.note .callout-label,
.ProseMirror .nfb-callout.note .callout-label,
.editor-shared .nfb-callout.note .callout-label,
.nfb-callout.note .callout-label {
  color: #3b82f6; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.warning,
.ProseMirror .nfb-callout.warning,
.editor-shared .nfb-callout.warning,
.nfb-callout.warning {
  border-left-color: #f59e0b; /* Orange */
  background: #fffbeb;
}

.tiptap.ProseMirror .nfb-callout.warning .callout-label,
.ProseMirror .nfb-callout.warning .callout-label,
.editor-shared .nfb-callout.warning .callout-label,
.nfb-callout.warning .callout-label {
  color: #f59e0b; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.important,
.ProseMirror .nfb-callout.important,
.editor-shared .nfb-callout.important,
.nfb-callout.important {
  border-left-color: #ef4444; /* Red */
  background: #fef2f2;
}

.tiptap.ProseMirror .nfb-callout.important .callout-label,
.ProseMirror .nfb-callout.important .callout-label,
.editor-shared .nfb-callout.important .callout-label,
.nfb-callout.important .callout-label {
  color: #ef4444; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.question,
.ProseMirror .nfb-callout.question,
.editor-shared .nfb-callout.question,
.nfb-callout.question {
  border-left-color: #9333ea; /* Purple (changed from #8b5cf6) */
  background: #faf5ff;
}

.tiptap.ProseMirror .nfb-callout.question .callout-label,
.ProseMirror .nfb-callout.question .callout-label,
.editor-shared .nfb-callout.question .callout-label,
.nfb-callout.question .callout-label {
  color: #9333ea; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.highlight,
.ProseMirror .nfb-callout.highlight,
.editor-shared .nfb-callout.highlight,
.nfb-callout.highlight {
  border-left-color: #eab308;
  background: #fffbf0; /* warmer editorial surface (matches emphasis tuning above) */
}

.tiptap.ProseMirror .nfb-callout.highlight .callout-label,
.ProseMirror .nfb-callout.highlight .callout-label,
.editor-shared .nfb-callout.highlight .callout-label,
.nfb-callout.highlight .callout-label {
  color: #eab308; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.update,
.ProseMirror .nfb-callout.update,
.editor-shared .nfb-callout.update,
.nfb-callout.update {
  border-left-color: #0891b2; /* Cyan (changed from #06b6d4) */
  background: #ecfeff;
}

.tiptap.ProseMirror .nfb-callout.update .callout-label,
.ProseMirror .nfb-callout.update .callout-label,
.editor-shared .nfb-callout.update .callout-label,
.nfb-callout.update .callout-label {
  color: #0891b2; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.example,
.ProseMirror .nfb-callout.example,
.editor-shared .nfb-callout.example,
.nfb-callout.example {
  border-left-color: #059669; /* Emerald (changed from #10b981) */
  background: #f0fdf4;
}

.tiptap.ProseMirror .nfb-callout.example .callout-label,
.ProseMirror .nfb-callout.example .callout-label,
.editor-shared .nfb-callout.example .callout-label,
.nfb-callout.example .callout-label {
  color: #059669; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.data,
.ProseMirror .nfb-callout.data,
.editor-shared .nfb-callout.data,
.nfb-callout.data {
  border-left-color: #6366f1; /* Indigo */
  background: #eef2ff;
}

.tiptap.ProseMirror .nfb-callout.data .callout-label,
.ProseMirror .nfb-callout.data .callout-label,
.editor-shared .nfb-callout.data .callout-label,
.nfb-callout.data .callout-label {
  color: #6366f1; /* Same as border */
}

.tiptap.ProseMirror .nfb-callout.reflection,
.ProseMirror .nfb-callout.reflection,
.editor-shared .nfb-callout.reflection,
.nfb-callout.reflection {
  border-left-color: #c026d3; /* Fuchsia (changed from #a855f7) */
  background: #faf5ff;
}

.tiptap.ProseMirror .nfb-callout.reflection .callout-label,
.ProseMirror .nfb-callout.reflection .callout-label,
.editor-shared .nfb-callout.reflection .callout-label,
.nfb-callout.reflection .callout-label {
  color: #c026d3; /* Same as border */
}

/* ============================================================
   EXPLAINER — EDITOR VIEW (FINAL)
============================================================ */

.tiptap .nfb-explainer {
  margin: 3rem auto;
  max-width: 720px;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-left: 2px solid #cbd5e1;
  border-radius: 10px;
  box-sizing: border-box;
}

/* LABEL — isti rem kao Footnotes / Glossary naslovi */
.tiptap .nfb-explainer .explainer-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 0.75rem;
  user-select: none;
  pointer-events: none;
}

/* CONTENT — isto kao footnotes/glossary; .ProseMirror p inače vuče --nfb-font-size-base */
.tiptap .nfb-explainer .explainer-content {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #475569;
}

.tiptap .nfb-explainer .explainer-content p,
.tiptap.ProseMirror .nfb-explainer .explainer-content p,
.ProseMirror .nfb-explainer .explainer-content p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #475569;
}

.tiptap .nfb-explainer .explainer-content p + p {
  margin-top: 0.75rem;
}

/* ============================================================
   FOOTNOTES — EDITOR VIEW (FINAL)
============================================================ */

/* Superscript marker in text (editor) */
.tiptap .nfb-footnote-ref {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: super;
  color: #64748b;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.tiptap .nfb-footnote-ref:hover {
  color: #3b82f6;
}

/* Footnotes section (editor) */
.tiptap .nfb-footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

/* Override with section wrapper styles (from section labels section) */
.tiptap.ProseMirror .nfb-footnotes {
  max-width: 720px;
  margin: 2rem auto;
}

.tiptap .nfb-footnotes h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.tiptap .nfb-footnotes-list {
  padding-left: 1.25rem;
  margin: 0;
}

.tiptap .nfb-footnotes-list li {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #475569;
}

/* Footnote body: items are <li><p>…</p> — p inherits --nfb-font-size-base unless overridden */
.tiptap .nfb-footnotes-list li p,
.tiptap.ProseMirror .nfb-footnotes-list li p,
.ProseMirror .nfb-footnotes-list li p,
.nfb-article .nfb-footnotes-list li p {
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Inline Reference (editor) - Editorial style */
.tiptap .nfb-inline-ref {
  font-size: 0.9em;
  color: #475569; /* slate-600 - more visible, still editorial */
  font-weight: 500; /* subtle weight for better visibility */
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 0.25em;
  background: rgba(0, 0, 0, 0.04); /* micro background - editorial style */
  border-radius: 4px;
}

.tiptap .nfb-inline-ref {
  position: relative; /* Required for absolute positioning of tooltip */
  display: inline;
}

.tiptap .nfb-inline-ref:hover {
  color: #047857; /* emerald-700 - source-like, not link-blue */
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(4, 120, 87, 0.4);
  background: rgba(4, 120, 87, 0.08);
  border-radius: 4px;
}

/* Editor: jedinstveni tamni tooltip (ref, appendix note, inline def placeholder) — isti tokeni kao toolbar */
.tiptap .nfb-inline-ref[data-tooltip]:hover::after,
.tiptap.ProseMirror .nfb-inline-ref[data-tooltip]:hover::after,
.ProseMirror .nfb-inline-ref[data-tooltip]:hover::after,
.tiptap .nfb-appendix-note[data-tooltip]:hover::after,
.tiptap.ProseMirror .nfb-appendix-note[data-tooltip]:hover::after,
.ProseMirror .nfb-appendix-note[data-tooltip]:hover::after,
.tiptap .nfb-inline-def[data-tooltip]:not([data-definition]):hover::after,
.tiptap.ProseMirror .nfb-inline-def[data-tooltip]:not([data-definition]):hover::after,
.ProseMirror .nfb-inline-def[data-tooltip]:not([data-definition]):hover::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: 0.5rem !important;
  padding: 10px 12px !important;
  background: var(--nfb-tooltip-bg, #111827) !important;
  color: var(--nfb-tooltip-text, #f9fafb) !important;
  border: 1px solid var(--nfb-tooltip-border, #1f2937) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border-radius: var(--nfb-tooltip-radius, 8px) !important;
  white-space: nowrap !important;
  box-shadow: var(--nfb-tooltip-shadow, 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25)) !important;
  z-index: var(--nfb-z-tooltip, 3000) !important;
  pointer-events: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  display: block !important;
  opacity: 1 !important;
  animation: none !important;
  text-align: left !important;
}

.tiptap .nfb-inline-ref[data-tooltip]:hover::before,
.tiptap.ProseMirror .nfb-inline-ref[data-tooltip]:hover::before,
.ProseMirror .nfb-inline-ref[data-tooltip]:hover::before,
.tiptap .nfb-appendix-note[data-tooltip]:hover::before,
.tiptap.ProseMirror .nfb-appendix-note[data-tooltip]:hover::before,
.ProseMirror .nfb-appendix-note[data-tooltip]:hover::before,
.tiptap .nfb-inline-def[data-tooltip]:not([data-definition]):hover::before,
.tiptap.ProseMirror .nfb-inline-def[data-tooltip]:not([data-definition]):hover::before,
.ProseMirror .nfb-inline-def[data-tooltip]:not([data-definition]):hover::before,
.tiptap .nfb-inline-def[data-definition]:hover::before,
.tiptap.ProseMirror .nfb-inline-def[data-definition]:hover::before,
.ProseMirror .nfb-inline-def[data-definition]:hover::before {
  content: '' !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: 0.25rem !important;
  border: 6px solid transparent !important;
  border-top-color: var(--nfb-tooltip-bg, #111827) !important;
  z-index: calc(var(--nfb-z-tooltip, 3000) + 1) !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
}

/* Appendix Note (editor) - Inline marker that references Appendix section */
.tiptap .nfb-appendix-note,
.ProseMirror .nfb-appendix-note,
.editor-shared .nfb-appendix-note {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #16a34a; /* Green accent — distinguishes appendix marker in flow */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 0.25em;
  background: rgba(22, 163, 74, 0.08); /* Light green background */
  border-radius: 4px;
  user-select: none;
  position: relative; /* Required for absolute positioning of tooltip */
  display: inline;
}

.tiptap .nfb-appendix-note:hover,
.ProseMirror .nfb-appendix-note:hover,
.editor-shared .nfb-appendix-note:hover {
  color: #15803d; /* Darker green on hover */
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(22, 163, 74, 0.4);
  background: rgba(22, 163, 74, 0.12);
  border-radius: 4px;
}

/* References section (editor) */
.tiptap .nfb-references {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

/* Override with section wrapper styles (from section labels section) */
.tiptap.ProseMirror .nfb-references {
  max-width: 720px;
  margin: 2rem auto;
}

.tiptap .nfb-references h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.tiptap .nfb-references-list {
  padding-left: 1.25rem;
  margin: 0;
}

.tiptap .nfb-references-list li {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #475569;
}

.tiptap .nfb-references-list li .reference-url {
  color: #3b82f6;
  text-decoration: underline;
  margin-left: 0.5rem;
}

.tiptap .nfb-references-list li .reference-id {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-left: 0.5rem;
  font-family: monospace;
}

/* Further Reading + Sources — end-matter scale (match Footnotes / Glossary) */
.tiptap .nfb-references[data-title="Further Reading"],
.tiptap .nfb-references[data-title="Sources"] {
  margin-top: 3rem;
  padding-top: 1.5rem;
}

.tiptap .nfb-references[data-title="Further Reading"] h2,
.tiptap.ProseMirror .nfb-references[data-title="Further Reading"] h2,
.tiptap .nfb-references[data-title="Sources"] h2,
.tiptap.ProseMirror .nfb-references[data-title="Sources"] h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.tiptap .nfb-references[data-title="Further Reading"] .nfb-references-list li,
.tiptap .nfb-references[data-title="Sources"] .nfb-references-list li {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.65;
}

.tiptap .nfb-references[data-title="Further Reading"] .nfb-references-list li p,
.tiptap.ProseMirror .nfb-references[data-title="Further Reading"] .nfb-references-list li p,
.ProseMirror .nfb-references[data-title="Further Reading"] .nfb-references-list li p,
.tiptap .nfb-references[data-title="Sources"] .nfb-references-list li p,
.tiptap.ProseMirror .nfb-references[data-title="Sources"] .nfb-references-list li p,
.ProseMirror .nfb-references[data-title="Sources"] .nfb-references-list li p {
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Appendix section (editor) — isti ritam kao Footnotes / Glossary */
.tiptap .nfb-appendix {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

/* Override with section wrapper styles (from section labels section) */
.tiptap.ProseMirror .nfb-appendix {
  max-width: 720px;
  margin: 2rem auto;
}

.tiptap .nfb-appendix h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.tiptap .nfb-appendix-list {
  padding-left: 1.25rem;
  margin: 0;
}

.tiptap .nfb-appendix-list li {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #475569;
}

/* ============================================================
   APPENDIX ITEM FIELDS — STRUCTURED FORM (EDITOR ONLY)
   Fixed structure with placeholders for Title, Author, Publication, URL, Notes
   Amir & Mixel — 2025
============================================================ */

/* Title Field */
.tiptap.ProseMirror .appendix-title-field,
.ProseMirror .appendix-title-field,
.editor-shared .appendix-title-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.65;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .appendix-title-field:hover,
.ProseMirror .appendix-title-field:hover,
.editor-shared .appendix-title-field:hover {
  border-color: #94a3b8;
}

.tiptap.ProseMirror .appendix-title-field:focus,
.ProseMirror .appendix-title-field:focus,
.editor-shared .appendix-title-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
}

/* Title Field Placeholder - handle both empty and br-only cases */
.tiptap.ProseMirror p.appendix-title-field:empty::before,
.ProseMirror p.appendix-title-field:empty::before,
.editor-shared p.appendix-title-field:empty::before,
.tiptap.ProseMirror p.appendix-title-field:has(br:only-child)::before,
.ProseMirror p.appendix-title-field:has(br:only-child)::before,
.editor-shared p.appendix-title-field:has(br:only-child)::before {
  content: "Appendix title (e.g. name of the document or book)" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Author/Source Field */
.tiptap.ProseMirror .appendix-author-field,
.ProseMirror .appendix-author-field,
.editor-shared .appendix-author-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.5;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .appendix-author-field:hover,
.ProseMirror .appendix-author-field:hover,
.editor-shared .appendix-author-field:hover {
  border-color: #94a3b8;
}

.tiptap.ProseMirror .appendix-author-field:focus,
.ProseMirror .appendix-author-field:focus,
.editor-shared .appendix-author-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
}

/* Author Field Placeholder */
.tiptap.ProseMirror p.appendix-author-field:empty::before,
.ProseMirror p.appendix-author-field:empty::before,
.editor-shared p.appendix-author-field:empty::before,
.tiptap.ProseMirror p.appendix-author-field:has(br:only-child)::before,
.ProseMirror p.appendix-author-field:has(br:only-child)::before,
.editor-shared p.appendix-author-field:has(br:only-child)::before {
  content: "Author or source (person, organization, court, publisher)" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Publication Info Field (Optional) */
.tiptap.ProseMirror .appendix-publication-field,
.ProseMirror .appendix-publication-field,
.editor-shared .appendix-publication-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.875rem;
  font-weight: 400;
  color: #475569;
  line-height: 1.5;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .appendix-publication-field:hover,
.ProseMirror .appendix-publication-field:hover,
.editor-shared .appendix-publication-field:hover {
  border-color: #94a3b8;
}

.tiptap.ProseMirror .appendix-publication-field:focus,
.ProseMirror .appendix-publication-field:focus,
.editor-shared .appendix-publication-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
}

/* Publication Field Placeholder */
.tiptap.ProseMirror p.appendix-publication-field:empty::before,
.ProseMirror p.appendix-publication-field:empty::before,
.editor-shared p.appendix-publication-field:empty::before,
.tiptap.ProseMirror p.appendix-publication-field:has(br:only-child)::before,
.ProseMirror p.appendix-publication-field:has(br:only-child)::before,
.editor-shared p.appendix-publication-field:has(br:only-child)::before {
  content: "Publication details (year, edition, version — optional)" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* URL Field */
.tiptap.ProseMirror .appendix-url-field,
.ProseMirror .appendix-url-field,
.editor-shared .appendix-url-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.875rem;
  font-weight: 400;
  color: #475569;
  line-height: 1.5;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .appendix-url-field:hover,
.ProseMirror .appendix-url-field:hover,
.editor-shared .appendix-url-field:hover {
  border-color: #94a3b8;
}

.tiptap.ProseMirror .appendix-url-field:focus,
.ProseMirror .appendix-url-field:focus,
.editor-shared .appendix-url-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
}

/* URL Field Placeholder */
.tiptap.ProseMirror p.appendix-url-field:empty::before,
.ProseMirror p.appendix-url-field:empty::before,
.editor-shared p.appendix-url-field:empty::before,
.tiptap.ProseMirror p.appendix-url-field:has(br:only-child)::before,
.ProseMirror p.appendix-url-field:has(br:only-child)::before,
.editor-shared p.appendix-url-field:has(br:only-child)::before {
  content: "URL to online version (if available)" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Notes/Explanation Field (Most Important) */
.tiptap.ProseMirror .appendix-notes-field,
.ProseMirror .appendix-notes-field,
.editor-shared .appendix-notes-field {
  min-height: 2em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  
  background: #f1f5f9;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  
  font-size: 0.875rem;
  font-weight: 400;
  color: #475569;
  line-height: 1.6;
  font-style: italic;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .appendix-notes-field:hover,
.ProseMirror .appendix-notes-field:hover,
.editor-shared .appendix-notes-field:hover {
  border-color: #64748b;
}

.tiptap.ProseMirror .appendix-notes-field:focus,
.ProseMirror .appendix-notes-field:focus,
.editor-shared .appendix-notes-field:focus {
  border-color: #475569;
  box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.1);
}

/* Notes Field Placeholder */
.tiptap.ProseMirror p.appendix-notes-field:empty::before,
.ProseMirror p.appendix-notes-field:empty::before,
.editor-shared p.appendix-notes-field:empty::before,
.tiptap.ProseMirror p.appendix-notes-field:has(br:only-child)::before,
.ProseMirror p.appendix-notes-field:has(br:only-child)::before,
.editor-shared p.appendix-notes-field:has(br:only-child)::before {
  content: "Why this appendix is included and how it relates to the article" !important;
  color: #94a3b8 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Appendix item delete button (editor) */
.tiptap .nfb-appendix-item-delete-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.875rem;
  color: #ef4444;
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
}

.tiptap .nfb-appendix-item:hover .nfb-appendix-item-delete-btn {
  opacity: 1;
}

/* Appendix "Add item" button (editor only) */
.tiptap .nfb-appendix-add-btn,
.ProseMirror .nfb-appendix-add-btn,
.editor-shared .nfb-appendix-add-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  pointer-events: auto;
  text-align: center;
}

.tiptap .nfb-appendix-add-btn:hover,
.ProseMirror .nfb-appendix-add-btn:hover,
.editor-shared .nfb-appendix-add-btn:hover {
  border-color: #94a3b8;
  color: #475569;
  background: #f8fafc;
}

/* Inline Definition (editor) — chip = inline reference :hover (teal + mint). Scoped by .tiptap (only live editor root). */
.tiptap .nfb-inline-def {
  font-size: 0.9em;
  color: #047857; /* emerald-700 — parity with .tiptap .nfb-inline-ref:hover */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(4, 120, 87, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 0.25em;
  background: rgba(4, 120, 87, 0.08);
  border-radius: 4px;
  position: relative;
  display: inline;
}

.tiptap .nfb-inline-def:hover {
  color: #065f46;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(6, 95, 70, 0.5);
  background: rgba(4, 120, 87, 0.12);
  border-radius: 4px;
}

/* Definition tooltip (editor) — same tokenized card as toolbar + inline ref */
.tiptap .nfb-inline-def[data-definition]:hover::after,
.tiptap.ProseMirror .nfb-inline-def[data-definition]:hover::after,
.ProseMirror .nfb-inline-def[data-definition]:hover::after {
  content: attr(data-definition) !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: 0.5rem !important;
  padding: 10px 12px !important;
  background: var(--nfb-tooltip-bg, #111827) !important;
  color: var(--nfb-tooltip-text, #f9fafb) !important;
  border: 1px solid var(--nfb-tooltip-border, #1f2937) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border-radius: var(--nfb-tooltip-radius, 8px) !important;
  white-space: pre-wrap !important;
  max-width: min(320px, 88vw) !important;
  width: max-content !important;
  box-shadow: var(--nfb-tooltip-shadow, 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25)) !important;
  z-index: var(--nfb-z-tooltip, 3000) !important;
  pointer-events: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  display: block !important;
  opacity: 1 !important;
  word-wrap: break-word !important;
  text-align: left !important;
}

/* Editor: definition + secondary line (“Click to edit…”) — shell kao gore, samo content */
.tiptap .nfb-inline-def[data-definition][data-tooltip]:hover::after,
.tiptap.ProseMirror .nfb-inline-def[data-definition][data-tooltip]:hover::after,
.ProseMirror .nfb-inline-def[data-definition][data-tooltip]:hover::after {
  content: attr(data-definition) "\A\A" attr(data-tooltip) !important;
}

/* Glossary section (editor) — same rhythm + title scale as Footnotes */
.tiptap .nfb-glossary {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

/* Override with section wrapper styles (from section labels section) */
.tiptap.ProseMirror .nfb-glossary {
  max-width: 720px;
  margin: 2rem auto;
}

.tiptap .nfb-glossary h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

/* Override nfb-content-shared .tiptap.ProseMirror h2 (1.65rem) for end-matter sections */
.tiptap.ProseMirror .nfb-footnotes h2,
.tiptap.ProseMirror .nfb-glossary h2,
.tiptap.ProseMirror .nfb-appendix h2,
.tiptap.ProseMirror .nfb-references[data-title="Further Reading"] h2,
.tiptap.ProseMirror .nfb-references[data-title="Sources"] h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.tiptap .nfb-glossary-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.tiptap .nfb-glossary-item {
  margin-bottom: 0.75rem; /* Match footnotes spacing - kompaktnije */
}

.tiptap .nfb-glossary-item dt {
  font-weight: 600;
  font-size: 0.875rem;
  color: #0f172a;
  margin-bottom: 0;
}

.tiptap .nfb-glossary-item dd {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #64748b;
  margin-left: 1.5rem;
  margin-bottom: 0;
  margin-top: 0;
}

/* Style paragraphs inside glossary item (for editor view) */
.tiptap .nfb-glossary-item > p:first-child {
  font-weight: 600;
  font-size: 0.875rem;
  color: #0f172a;
  margin-bottom: 0;
}

.tiptap .nfb-glossary-item > p:nth-child(2) {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #64748b;
  margin-left: 1.5rem;
  margin-bottom: 0;
  margin-top: 0;
}

/* ============================================================
   PREVIEW STYLES (Article / Public View)
   These styles apply to published articles, not the editor
============================================================ */

/* Inline Reference (preview) - Editorial style */
.nfb-article .nfb-inline-ref,
.editor-shared .nfb-inline-ref {
  font-size: 0.9em;
  color: #475569; /* slate-600 - editorial */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0 0.25em;
  background: rgba(0, 0, 0, 0.04); /* micro background */
  border-radius: 4px;
  position: relative; /* article.css mint tooltips */
  display: inline;
}

.nfb-article .nfb-inline-ref:hover,
.editor-shared .nfb-inline-ref:hover {
  color: #047857; /* emerald-700 */
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(4, 120, 87, 0.4);
  background: rgba(4, 120, 87, 0.08);
  border-radius: 4px;
}

/* Inline Definition (preview / non-editor): chip styles */
/* :has(.ProseMirror) omits the live TipTap surface so .tiptap rules are not overridden (same specificity). */
.nfb-article .nfb-inline-def,
.editor-shared:not(:has(.ProseMirror)) .nfb-inline-def,
body .nfb-inline-def,
.nfb-inline-def {
  font-size: 0.9em;
  color: #475569; /* slate-600 - editorial */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: help; /* Indicates there's additional info on hover */
  transition: all 0.2s ease;
  padding: 0 0.25em;
  background: rgba(0, 0, 0, 0.04); /* micro background */
  border-radius: 4px;
  position: relative;
  display: inline;
}

.nfb-article .nfb-inline-def:hover,
.editor-shared:not(:has(.ProseMirror)) .nfb-inline-def:hover,
body .nfb-inline-def:hover,
.nfb-inline-def:hover {
  color: #059669; /* emerald-600 - slightly lighter green */
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(5, 150, 105, 0.4);
  background: rgba(5, 150, 105, 0.08);
  border-radius: 4px;
}

/* Editor only: extra punch if preview/base rules win — .editor-shared wraps EditorContent; ProseMirror is nested. */
.editor-shared .ProseMirror .nfb-inline-def,
.editor-shared.ProseMirror .nfb-inline-def {
  cursor: pointer;
  color: #047857;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(4, 120, 87, 0.4);
  background: rgba(4, 120, 87, 0.08);
  border-radius: 4px;
  position: relative;
  display: inline;
}

.editor-shared .ProseMirror .nfb-inline-def:hover,
.editor-shared.ProseMirror .nfb-inline-def:hover {
  color: #065f46;
  text-decoration: underline;
  text-decoration-color: rgba(6, 95, 70, 0.5);
  background: rgba(4, 120, 87, 0.12);
  border-radius: 4px;
}

/* Reader (.nfb-article) mint tooltips — jedan izvor u ../../../article/article.css */

/* References section (preview) */
/* Footnotes section (preview) */
.nfb-article .nfb-footnotes,
.editor-shared .nfb-footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.nfb-article .nfb-footnotes h2,
.editor-shared .nfb-footnotes h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.nfb-article .nfb-references,
.editor-shared .nfb-references {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

.nfb-article .nfb-references h2,
.editor-shared .nfb-references h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 1.5rem 0;
}

.nfb-article .nfb-references-list,
.editor-shared .nfb-references-list {
  padding-left: 1.25rem;
  margin: 0;
}

.nfb-article .nfb-references-list li,
.editor-shared .nfb-references-list li {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #475569;
}

/* Further Reading + Sources — compact end-matter (Footnotes / Glossary parity) */
.nfb-article .nfb-references[data-title="Further Reading"],
.editor-shared .nfb-references[data-title="Further Reading"],
.nfb-article .nfb-references[data-title="Sources"],
.editor-shared .nfb-references[data-title="Sources"] {
  margin-top: 3rem;
  padding-top: 1.5rem;
}

.nfb-article .nfb-references[data-title="Further Reading"] h2,
.editor-shared .nfb-references[data-title="Further Reading"] h2,
.nfb-article .nfb-references[data-title="Sources"] h2,
.editor-shared .nfb-references[data-title="Sources"] h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.nfb-article .nfb-references[data-title="Further Reading"] .nfb-references-list li,
.editor-shared .nfb-references[data-title="Further Reading"] .nfb-references-list li,
.nfb-article .nfb-references[data-title="Sources"] .nfb-references-list li,
.editor-shared .nfb-references[data-title="Sources"] .nfb-references-list li {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.65;
}

.nfb-article .nfb-references[data-title="Further Reading"] .nfb-references-list li p,
.editor-shared .nfb-references[data-title="Further Reading"] .nfb-references-list li p,
.nfb-article .nfb-references[data-title="Sources"] .nfb-references-list li p,
.editor-shared .nfb-references[data-title="Sources"] .nfb-references-list li p {
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Glossary section (preview) — same title + spacing as Footnotes (not References 1.25rem) */
.nfb-article .nfb-glossary,
.editor-shared .nfb-glossary {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.nfb-article .nfb-glossary h2,
.editor-shared .nfb-glossary h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
}

.nfb-article .nfb-glossary-list,
.editor-shared .nfb-glossary-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.nfb-article .nfb-glossary-item,
.editor-shared .nfb-glossary-item {
  margin-bottom: 0.75rem;
}

.nfb-article .nfb-glossary-item dt,
.editor-shared .nfb-glossary-item dt {
  font-weight: 600;
  font-size: 0.875rem;
  color: #0f172a;
  margin-bottom: 0;
}

.nfb-article .nfb-glossary-item dd,
.editor-shared .nfb-glossary-item dd {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #64748b;
  margin-left: 1.5rem;
  margin-bottom: 0;
}

/* Appendix section (preview) */
.nfb-article .nfb-appendix,
.editor-shared .nfb-appendix {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.nfb-article .nfb-appendix h2,
.editor-shared .nfb-appendix h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a; /* Ista skala kao Footnotes / Glossary */
  margin: 0 0 0.75rem 0;
}

.nfb-article .nfb-appendix-list,
.editor-shared .nfb-appendix-list {
  padding-left: 1.25rem;
  margin: 0;
}

.nfb-article .nfb-appendix-list li,
.editor-shared .nfb-appendix-list li {
  margin-bottom: 0.75rem; /* Match footnotes spacing */
  font-size: 0.875rem;
  line-height: 1.65;
  color: #475569;
}

/* Appendix list paragraphs — explicit size (shared `.nfb-article p` / `.editor-shared p` uses base font) */
.nfb-article .nfb-appendix-list li p,
.nfb-article .nfb-appendix-list li.nfb-appendix-item p,
.editor-shared .nfb-appendix-list li p,
.editor-shared .nfb-appendix-list li.nfb-appendix-item p,
.nfb-article .nfb-appendix-item p,
.editor-shared .nfb-appendix-item p {
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Appendix item fields (preview) - style the 5 structured paragraphs */
.nfb-article .nfb-appendix-list li p.appendix-title-field,
.editor-shared .nfb-appendix-list li p.appendix-title-field,
.nfb-article .nfb-appendix-item p.appendix-title-field,
.editor-shared .nfb-appendix-item p.appendix-title-field {
  font-weight: 600;
  font-size: 0.875rem;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.nfb-article .nfb-appendix-list li p.appendix-author-field,
.editor-shared .nfb-appendix-list li p.appendix-author-field,
.nfb-article .nfb-appendix-list li p.appendix-publication-field,
.editor-shared .nfb-appendix-list li p.appendix-publication-field,
.nfb-article .nfb-appendix-list li p.appendix-url-field,
.editor-shared .nfb-appendix-list li p.appendix-url-field,
.nfb-article .nfb-appendix-item p.appendix-author-field,
.editor-shared .nfb-appendix-item p.appendix-author-field,
.nfb-article .nfb-appendix-item p.appendix-publication-field,
.editor-shared .nfb-appendix-item p.appendix-publication-field,
.nfb-article .nfb-appendix-item p.appendix-url-field,
.editor-shared .nfb-appendix-item p.appendix-url-field {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #64748b;
  margin-bottom: 0.25rem;
  margin-left: 1.25rem; /* Indent like glossary definitions */
}

.nfb-article .nfb-appendix-list li p.appendix-notes-field,
.editor-shared .nfb-appendix-list li p.appendix-notes-field,
.nfb-article .nfb-appendix-item p.appendix-notes-field,
.editor-shared .nfb-appendix-item p.appendix-notes-field {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #475569;
  margin-top: 0.5rem;
  margin-bottom: 0;
  margin-left: 1.25rem; /* Indent like glossary definitions */
  font-style: italic; /* Slight emphasis for notes */
}

/* ============================================================
   SECTION LABELS — STATIC VISUAL HEADERS (EDITOR ONLY)
   Always-visible labels/guides for sections (like keypoints)
   Amir & Mixel — 2025
============================================================ */

/* =====================================================
   SECTION WRAPPER — THE BOX (header + lista + caret)
   Box goes on section, not on header
===================================================== */
.tiptap.ProseMirror .nfb-footnotes,
.tiptap.ProseMirror .nfb-glossary,
.tiptap.ProseMirror .nfb-references,
.tiptap.ProseMirror .nfb-appendix,
.ProseMirror .nfb-footnotes,
.ProseMirror .nfb-glossary,
.ProseMirror .nfb-references,
.ProseMirror .nfb-appendix,
.editor-shared .nfb-footnotes,
.editor-shared .nfb-glossary,
.editor-shared .nfb-references,
.editor-shared .nfb-appendix {
  max-width: 720px;
  margin: 2rem auto;
  padding: 1rem 1.25rem;
  border: 1px dashed #94a3b8;
  border-radius: 10px;
  background: #f8fafc;
}

/* HEADER SADA JE SAMO TEKST (BEZ BOXA) */
.tiptap .nfb-section-label,
.ProseMirror .nfb-section-label,
.editor-shared .nfb-section-label,
.tiptap.ProseMirror .nfb-section-label {
  margin: 0 0 0.5rem 0 !important; /* Reduced spacing - kompaktnije kao Key Points */
  padding: 0 !important; /* No padding - section has padding */
  pointer-events: none !important;
  user-select: none !important;
  display: block !important;
}

/* Section label title */
.tiptap .nfb-section-label .nfb-section-title,
.ProseMirror .nfb-section-label .nfb-section-title,
.editor-shared .nfb-section-label .nfb-section-title,
.tiptap.ProseMirror .nfb-section-label .nfb-section-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 0.25rem !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  display: block !important;
}

/* Section label hint */
.tiptap .nfb-section-label .nfb-section-hint,
.ProseMirror .nfb-section-label .nfb-section-hint,
.editor-shared .nfb-section-label .nfb-section-hint,
.tiptap.ProseMirror .nfb-section-label .nfb-section-hint {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin-bottom: 0.25rem !important; /* Reduced spacing between hint and list */
  display: block !important;
}

/* Badge block: Type / Align selects + Delete (overrides pointer-events:none on .nfb-section-label) */
.tiptap.ProseMirror .nfb-badge-block .nfb-section-label,
.ProseMirror .nfb-badge-block .nfb-section-label,
.editor-shared .nfb-badge-block .nfb-section-label {
  pointer-events: auto !important;
  user-select: auto !important;
}

/* Closing note: label dropdown + buttons live inside .nfb-section-label — must receive clicks */
.tiptap.ProseMirror .nf-closing-note .nfb-section-label,
.ProseMirror .nf-closing-note .nfb-section-label,
.editor-shared .nf-closing-note .nfb-section-label {
  pointer-events: auto !important;
  user-select: auto !important;
}

.tiptap.ProseMirror .nf-closing-note .nf-closing-note-preset-select,
.ProseMirror .nf-closing-note .nf-closing-note-preset-select,
.editor-shared .nf-closing-note .nf-closing-note-preset-select {
  pointer-events: auto !important;
}

/* LISTA — BLAGO UVUČENA, ALI UNUTAR BOXA */
.tiptap.ProseMirror .nfb-footnotes-list,
.tiptap.ProseMirror .nfb-glossary-list,
.tiptap.ProseMirror .nfb-references-list,
.tiptap.ProseMirror .nfb-appendix-list,
.ProseMirror .nfb-footnotes-list,
.ProseMirror .nfb-glossary-list,
.ProseMirror .nfb-references-list,
.ProseMirror .nfb-appendix-list,
.editor-shared .nfb-footnotes-list,
.editor-shared .nfb-glossary-list,
.editor-shared .nfb-references-list,
.editor-shared .nfb-appendix-list {
  margin: 0 !important;
  margin-top: 0 !important; /* Kill browser default top margin - KLJUČNO za kompaktnost */
  padding-left: 1.25rem !important; /* normalan list indent */
}

/* Hide section labels in preview/article view */
.nfb-article .nfb-section-label,
body .nfb-section-label {
  display: none !important;
}

/* ============================================================
   REF QUOTE — EDITOR VIEW (v1.0 — Citation with source)
   Editorial / book-like style
   Bridge between narrative and References section
============================================================ */

/* Quote Field */
.tiptap.ProseMirror .ref-quote-field,
.ProseMirror .ref-quote-field,
.editor-shared .ref-quote-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #1f2937;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .ref-quote-field:hover,
.ProseMirror .ref-quote-field:hover,
.editor-shared .ref-quote-field:hover {
  border-color: #94a3b8;
  color: #111827;
}

.tiptap.ProseMirror .ref-quote-field:focus,
.ProseMirror .ref-quote-field:focus,
.editor-shared .ref-quote-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
  outline: none;
}

/* Placeholder for quote field */
.tiptap.ProseMirror p.ref-quote-field:empty::before,
.ProseMirror p.ref-quote-field:empty::before,
.editor-shared p.ref-quote-field:empty::before,
.tiptap.ProseMirror p.ref-quote-field:has(br:only-child)::before,
.ProseMirror p.ref-quote-field:has(br:only-child)::before,
.editor-shared p.ref-quote-field:has(br:only-child)::before {
  content: "Insert referenced quote here…" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-style: italic;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Author Field */
.tiptap.ProseMirror .ref-quote-author-field,
.ProseMirror .ref-quote-author-field,
.editor-shared .ref-quote-author-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .ref-quote-author-field:hover,
.ProseMirror .ref-quote-author-field:hover,
.editor-shared .ref-quote-author-field:hover {
  border-color: #94a3b8;
  color: #334155;
}

.tiptap.ProseMirror .ref-quote-author-field:focus,
.ProseMirror .ref-quote-author-field:focus,
.editor-shared .ref-quote-author-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
  outline: none;
}

/* Placeholder for author field */
.tiptap.ProseMirror p.ref-quote-author-field:empty::before,
.ProseMirror p.ref-quote-author-field:empty::before,
.editor-shared p.ref-quote-author-field:empty::before,
.tiptap.ProseMirror p.ref-quote-author-field:has(br:only-child)::before,
.ProseMirror p.ref-quote-author-field:has(br:only-child)::before,
.editor-shared p.ref-quote-author-field:has(br:only-child)::before {
  content: "Author name" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Source Field */
.tiptap.ProseMirror .ref-quote-source-field,
.ProseMirror .ref-quote-source-field,
.editor-shared .ref-quote-source-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .ref-quote-source-field:hover,
.ProseMirror .ref-quote-source-field:hover,
.editor-shared .ref-quote-source-field:hover {
  border-color: #94a3b8;
  color: #334155;
}

.tiptap.ProseMirror .ref-quote-source-field:focus,
.ProseMirror .ref-quote-source-field:focus,
.editor-shared .ref-quote-source-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
  outline: none;
}

/* Placeholder for source field */
.tiptap.ProseMirror p.ref-quote-source-field:empty::before,
.ProseMirror p.ref-quote-source-field:empty::before,
.editor-shared p.ref-quote-source-field:empty::before,
.tiptap.ProseMirror p.ref-quote-source-field:has(br:only-child)::before,
.ProseMirror p.ref-quote-source-field:has(br:only-child)::before,
.editor-shared p.ref-quote-source-field:has(br:only-child)::before {
  content: "Source / Work name" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Year Field */
.tiptap.ProseMirror .ref-quote-year-field,
.ProseMirror .ref-quote-year-field,
.editor-shared .ref-quote-year-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .ref-quote-year-field:hover,
.ProseMirror .ref-quote-year-field:hover,
.editor-shared .ref-quote-year-field:hover {
  border-color: #94a3b8;
  color: #334155;
}

.tiptap.ProseMirror .ref-quote-year-field:focus,
.ProseMirror .ref-quote-year-field:focus,
.editor-shared .ref-quote-year-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
  outline: none;
}

/* Placeholder for year field */
.tiptap.ProseMirror p.ref-quote-year-field:empty::before,
.ProseMirror p.ref-quote-year-field:empty::before,
.editor-shared p.ref-quote-year-field:empty::before,
.tiptap.ProseMirror p.ref-quote-year-field:has(br:only-child)::before,
.ProseMirror p.ref-quote-year-field:has(br:only-child)::before,
.editor-shared p.ref-quote-year-field:has(br:only-child)::before {
  content: "Year" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* ============================================================
   FIGURE — EDITOR VIEW (v1.0 — Image with caption and credit)
   Editorial / academic style
   Part of narrative, not decoration
============================================================ */

/* Figure Image Wrapper */
.tiptap.ProseMirror .nf-figure-image-wrapper,
.ProseMirror .nf-figure-image-wrapper,
.editor-shared .nf-figure-image-wrapper {
  margin-bottom: 0.75rem;
}

.tiptap.ProseMirror .nf-figure-image,
.ProseMirror .nf-figure-image,
.editor-shared .nf-figure-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Caption Field — mint dashed field (parity with Image block) */
.tiptap.ProseMirror .figure-caption-field,
.ProseMirror .figure-caption-field,
.editor-shared .figure-caption-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;

  background: #fafdfb;
  border: 1.5px dashed rgba(21, 128, 61, 0.35);
  border-radius: 8px;

  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;

  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.tiptap.ProseMirror .figure-caption-field:hover,
.ProseMirror .figure-caption-field:hover,
.editor-shared .figure-caption-field:hover {
  border-color: rgba(21, 128, 61, 0.5);
  background: rgba(22, 163, 74, 0.04);
  color: #0f172a;
}

.tiptap.ProseMirror .figure-caption-field:focus,
.ProseMirror .figure-caption-field:focus,
.editor-shared .figure-caption-field:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  outline: none;
}

/* Placeholder for caption field */
.tiptap.ProseMirror p.figure-caption-field:empty::before,
.ProseMirror p.figure-caption-field:empty::before,
.editor-shared p.figure-caption-field:empty::before,
.tiptap.ProseMirror p.figure-caption-field:has(br:only-child)::before,
.ProseMirror p.figure-caption-field:has(br:only-child)::before,
.editor-shared p.figure-caption-field:has(br:only-child)::before,
/* Sidebar context — ensure placeholders work inside sidebars */
.tiptap.ProseMirror .nf-sidebar p.figure-caption-field:empty::before,
.ProseMirror .nf-sidebar p.figure-caption-field:empty::before,
.editor-shared .nf-sidebar p.figure-caption-field:empty::before,
.tiptap.ProseMirror .nf-sidebar p.figure-caption-field:has(br:only-child)::before,
.ProseMirror .nf-sidebar p.figure-caption-field:has(br:only-child)::before,
.editor-shared .nf-sidebar p.figure-caption-field:has(br:only-child)::before {
  content: "Describe the image…" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Credit Field */
.tiptap.ProseMirror .figure-credit-field,
.ProseMirror .figure-credit-field,
.editor-shared .figure-credit-field {
  min-height: 1.5em;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  font-size: 0.85rem;
  line-height: 1.4;
  color: #64748b;
  opacity: 0.65;
  
  outline: none;
  transition: all 0.2s ease;
}

.tiptap.ProseMirror .figure-credit-field:hover,
.ProseMirror .figure-credit-field:hover,
.editor-shared .figure-credit-field:hover {
  border-color: #94a3b8;
  color: #475569;
  opacity: 0.85;
}

.tiptap.ProseMirror .figure-credit-field:focus,
.ProseMirror .figure-credit-field:focus,
.editor-shared .figure-credit-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
  outline: none;
}

/* Placeholder for credit field */
.tiptap.ProseMirror p.figure-credit-field:empty::before,
.ProseMirror p.figure-credit-field:empty::before,
.editor-shared p.figure-credit-field:empty::before,
.tiptap.ProseMirror p.figure-credit-field:has(br:only-child)::before,
.ProseMirror p.figure-credit-field:has(br:only-child)::before,
.editor-shared p.figure-credit-field:has(br:only-child)::before,
/* Sidebar context — ensure placeholders work inside sidebars */
.tiptap.ProseMirror .nf-sidebar p.figure-credit-field:empty::before,
.ProseMirror .nf-sidebar p.figure-credit-field:empty::before,
.editor-shared .nf-sidebar p.figure-credit-field:empty::before,
.tiptap.ProseMirror .nf-sidebar p.figure-credit-field:has(br:only-child)::before,
.ProseMirror .nf-sidebar p.figure-credit-field:has(br:only-child)::before,
.editor-shared .nf-sidebar p.figure-credit-field:has(br:only-child)::before {
  content: "Photo: Author / Source (optional)" !important;
  color: #cbd5e1 !important;
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Figure — mint header / actions (parity with Image block node view) */
.tiptap.ProseMirror .nf-figure__header,
.ProseMirror .nf-figure__header,
.editor-shared .nf-figure__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(21, 128, 61, 0.22);
}

.tiptap.ProseMirror .nf-figure__header .nf-figure__header-content,
.ProseMirror .nf-figure__header .nf-figure__header-content,
.editor-shared .nf-figure__header .nf-figure__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tiptap.ProseMirror .nf-figure__title,
.ProseMirror .nf-figure__title,
.editor-shared .nf-figure__title {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #15803d;
  opacity: 1;
}

.tiptap.ProseMirror .nf-figure__actions,
.ProseMirror .nf-figure__actions,
.editor-shared .nf-figure__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Hover-only chrome (no inline opacity JS) — opacity:0 can make hits unreliable cross-browser */
.tiptap.ProseMirror .nf-figure .nf-figure__btn--edit,
.ProseMirror .nf-figure .nf-figure__btn--edit,
.editor-shared .nf-figure .nf-figure__btn--edit {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #15803d;
  background: #fff;
  border: 1.5px solid rgba(21, 128, 61, 0.45);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.15s ease,
    border-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.tiptap.ProseMirror .nf-figure:hover .nf-figure__btn--edit,
.ProseMirror .nf-figure:hover .nf-figure__btn--edit,
.editor-shared .nf-figure:hover .nf-figure__btn--edit {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tiptap.ProseMirror .nf-figure .nf-figure__btn--edit:hover,
.ProseMirror .nf-figure .nf-figure__btn--edit:hover,
.editor-shared .nf-figure .nf-figure__btn--edit:hover {
  background: rgba(22, 163, 74, 0.08);
  border-color: #15803d;
}

.tiptap.ProseMirror .nf-figure .nf-figure__btn--delete,
.ProseMirror .nf-figure .nf-figure__btn--delete,
.editor-shared .nf-figure .nf-figure__btn--delete {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ef4444;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tiptap.ProseMirror .nf-figure:hover .nf-figure__btn--delete,
.ProseMirror .nf-figure:hover .nf-figure__btn--delete,
.editor-shared .nf-figure:hover .nf-figure__btn--delete {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tiptap.ProseMirror .nf-figure .nf-figure__change-img,
.ProseMirror .nf-figure .nf-figure__change-img,
.editor-shared .nf-figure .nf-figure__change-img,
.tiptap.ProseMirror .nf-figure .nf-figure__add-img,
.ProseMirror .nf-figure .nf-figure__add-img,
.editor-shared .nf-figure .nf-figure__add-img {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: rgba(22, 163, 74, 0.06);
  border: 1.5px dashed rgba(21, 128, 61, 0.38);
  border-radius: 10px;
  color: #14532d;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.tiptap.ProseMirror .nf-figure .nf-figure__change-img:hover,
.ProseMirror .nf-figure .nf-figure__change-img:hover,
.editor-shared .nf-figure .nf-figure__change-img:hover,
.tiptap.ProseMirror .nf-figure .nf-figure__add-img:hover,
.ProseMirror .nf-figure .nf-figure__add-img:hover,
.editor-shared .nf-figure .nf-figure__add-img:hover {
  background: rgba(22, 163, 74, 0.12);
  border-color: #15803d;
  color: #052e16;
}

/* Photo credit row — outside ProseMirror body (cannot be deleted as a block) */
.tiptap.ProseMirror .nf-figure-credit-row,
.ProseMirror .nf-figure-credit-row,
.editor-shared .nf-figure-credit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(21, 128, 61, 0.2);
}

.tiptap.ProseMirror .nf-figure-credit-pair,
.ProseMirror .nf-figure-credit-pair,
.editor-shared .nf-figure-credit-pair {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 120px;
}

.tiptap.ProseMirror .nf-figure-credit-fixed,
.ProseMirror .nf-figure-credit-fixed,
.editor-shared .nf-figure-credit-fixed {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
  user-select: none;
}

.tiptap.ProseMirror .nf-figure-credit-slash,
.ProseMirror .nf-figure-credit-slash,
.editor-shared .nf-figure-credit-slash {
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.tiptap.ProseMirror .nf-figure-credit-input,
.ProseMirror .nf-figure-credit-input,
.editor-shared .nf-figure-credit-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
  border-radius: 8px;
  border: 1.5px solid rgba(21, 128, 61, 0.32);
  background: #fff;
  color: #0f172a;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tiptap.ProseMirror .nf-figure-credit-input:focus,
.ProseMirror .nf-figure-credit-input:focus,
.editor-shared .nf-figure-credit-input:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.tiptap.ProseMirror .nf-figure-credit-input::placeholder,
.ProseMirror .nf-figure-credit-input::placeholder,
.editor-shared .nf-figure-credit-input::placeholder {
  color: #94a3b8;
}

.tiptap.ProseMirror .nf-figure-credit-url-row,
.ProseMirror .nf-figure-credit-url-row,
.editor-shared .nf-figure-credit-url-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
  flex-basis: 100%;
  margin-top: 0.45rem;
}

.tiptap.ProseMirror .nf-figure-credit-url-label,
.ProseMirror .nf-figure-credit-url-label,
.editor-shared .nf-figure-credit-url-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

/* ============================================================
   INFOBOX — EDITOR VIEW (v1.0 — Informational block)
   Summary, explanation, or clarification
   Editorial / book-like style
============================================================ */

/* Infobox container */
.tiptap.ProseMirror .nf-infobox,
.ProseMirror .nf-infobox,
.editor-shared .nf-infobox {
  max-width: 720px;
  margin: 3.5rem auto;
  padding: 1.5rem 1.75rem;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fafafa;
}

/* Infobox content wrapper */
.tiptap.ProseMirror .nf-infobox-content,
.ProseMirror .nf-infobox-content,
.editor-shared .nf-infobox-content {
  margin: 0;
  padding: 0;
}

/* Title field (heading h4) */
.tiptap.ProseMirror .nf-infobox h4,
.ProseMirror .nf-infobox h4,
.editor-shared .nf-infobox h4,
.tiptap.ProseMirror .nf-infobox .infobox-title-field,
.ProseMirror .nf-infobox .infobox-title-field,
.editor-shared .nf-infobox .infobox-title-field {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  padding: 0.5rem 0.75rem;
  min-height: 1.5em;
  
  /* Visual field styling */
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  outline: none;
  transition: all 0.2s ease;
  display: block;
}

.tiptap.ProseMirror .nf-infobox h4:hover,
.ProseMirror .nf-infobox h4:hover,
.editor-shared .nf-infobox h4:hover,
.tiptap.ProseMirror .nf-infobox .infobox-title-field:hover,
.ProseMirror .nf-infobox .infobox-title-field:hover,
.editor-shared .nf-infobox .infobox-title-field:hover {
  border-color: #94a3b8;
  color: #334155;
}

.tiptap.ProseMirror .nf-infobox h4:focus,
.ProseMirror .nf-infobox h4:focus,
.editor-shared .nf-infobox h4:focus,
.tiptap.ProseMirror .nf-infobox .infobox-title-field:focus,
.ProseMirror .nf-infobox .infobox-title-field:focus,
.editor-shared .nf-infobox .infobox-title-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
  outline: none;
}

/* Content field (paragraph) */
.tiptap.ProseMirror .nf-infobox p,
.ProseMirror .nf-infobox p,
.editor-shared .nf-infobox p,
.tiptap.ProseMirror .nf-infobox .infobox-content-field,
.ProseMirror .nf-infobox .infobox-content-field,
.editor-shared .nf-infobox .infobox-content-field {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  min-height: 1.5em;
  color: #374151;
  line-height: 1.6;
  
  /* Visual field styling */
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  
  outline: none;
  transition: all 0.2s ease;
  display: block;
}

.tiptap.ProseMirror .nf-infobox p:hover,
.ProseMirror .nf-infobox p:hover,
.editor-shared .nf-infobox p:hover,
.tiptap.ProseMirror .nf-infobox .infobox-content-field:hover,
.ProseMirror .nf-infobox .infobox-content-field:hover,
.editor-shared .nf-infobox .infobox-content-field:hover {
  border-color: #94a3b8;
  color: #334155;
}

.tiptap.ProseMirror .nf-infobox p:focus,
.ProseMirror .nf-infobox p:focus,
.editor-shared .nf-infobox p:focus,
.tiptap.ProseMirror .nf-infobox .infobox-content-field:focus,
.ProseMirror .nf-infobox .infobox-content-field:focus,
.editor-shared .nf-infobox .infobox-content-field:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.1);
  outline: none;
}

/* Placeholder for title field */
.tiptap.ProseMirror h4.infobox-title-field:empty::before,
.ProseMirror h4.infobox-title-field:empty::before,
.editor-shared h4.infobox-title-field:empty::before,
.tiptap.ProseMirror h4.infobox-title-field:has(br:only-child)::before,
.ProseMirror h4.infobox-title-field:has(br:only-child)::before,
.editor-shared h4.infobox-title-field:has(br:only-child)::before {
  content: "Infobox title (what is this about?)" !important;
  color: #94a3b8 !important; /* Darker blue-gray for title */
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Placeholder for content field */
.tiptap.ProseMirror p.infobox-content-field:empty::before,
.ProseMirror p.infobox-content-field:empty::before,
.editor-shared p.infobox-content-field:empty::before,
.tiptap.ProseMirror p.infobox-content-field:has(br:only-child)::before,
.ProseMirror p.infobox-content-field:has(br:only-child)::before,
.editor-shared p.infobox-content-field:has(br:only-child)::before {
  content: "Explain the key idea, context, or clarification here…" !important;
  color: #cbd5e1 !important; /* Lighter gray for content */
  pointer-events: none;
  font-weight: 400;
  float: left;
  height: 0;
}

/* Hover state */
.tiptap.ProseMirror .nf-infobox:hover,
.ProseMirror .nf-infobox:hover,
.editor-shared .nf-infobox:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

/* ============================================================
   INFOBOX v2.0 — NEW STRUCTURE (Basic / Quick Facts, Position, Image)
============================================================ */

/* Base Infobox with new classes */
.tiptap.ProseMirror .nfb-infobox,
.ProseMirror .nfb-infobox,
.editor-shared .nfb-infobox,
.nfb-article .nfb-infobox,
.nfb-infobox {
  max-width: 720px;
  margin: 3.5rem auto;
  padding: 1.5rem 1.75rem;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fafafa;
  transition: all 0.2s ease;
}

/* Position: Inline (default) */
.tiptap.ProseMirror .nfb-infobox--pos-inline,
.ProseMirror .nfb-infobox--pos-inline,
.editor-shared .nfb-infobox--pos-inline,
.nfb-article .nfb-infobox--pos-inline {
  max-width: 720px;
  margin: 3.5rem auto;
}

/* Infobox alignment */
.tiptap.ProseMirror .nfb-infobox.align-left,
.ProseMirror .nfb-infobox.align-left,
.editor-shared .nfb-infobox.align-left,
.nfb-article .nfb-infobox.align-left {
  margin-left: 0;
  margin-right: auto;
}

.tiptap.ProseMirror .nfb-infobox.align-center,
.ProseMirror .nfb-infobox.align-center,
.editor-shared .nfb-infobox.align-center,
.nfb-article .nfb-infobox.align-center {
  margin-left: auto;
  margin-right: auto;
}

.tiptap.ProseMirror .nfb-infobox.align-right,
.ProseMirror .nfb-infobox.align-right,
.editor-shared .nfb-infobox.align-right,
.nfb-article .nfb-infobox.align-right {
  margin-left: auto;
  margin-right: 0;
}

/* Position: Sidebar Left */
.tiptap.ProseMirror .nfb-infobox--pos-sidebar-left,
.ProseMirror .nfb-infobox--pos-sidebar-left,
.editor-shared .nfb-infobox--pos-sidebar-left {
  float: left !important;
  clear: left !important;
  width: 260px !important;
  max-width: 260px !important;
  margin: 0 2rem 1.25rem 0 !important;
  contain: none !important;
  box-sizing: border-box;
  /* Prevent text from entering the box - shape-margin adds gap so text doesn't overlap */
  shape-outside: inset(0) !important;
  shape-margin: 1rem !important;
}

.nfb-article .nfb-infobox--pos-sidebar-left {
  float: left !important;
  clear: left !important;
  width: 260px !important;
  max-width: 260px !important;
  margin: 0 2rem 1.25rem 0 !important;
  box-sizing: border-box;
  shape-outside: inset(0) !important;
  shape-margin: 1rem !important;
}

/* Position: Sidebar Right */
.tiptap.ProseMirror .nfb-infobox--pos-sidebar-right,
.ProseMirror .nfb-infobox--pos-sidebar-right,
.editor-shared .nfb-infobox--pos-sidebar-right {
  float: right !important;
  clear: right !important;
  width: 260px !important;
  max-width: 260px !important;
  margin: 0 0 1.25rem 2rem !important;
  contain: none !important;
  box-sizing: border-box;
  shape-outside: inset(0) !important;
  shape-margin: 1rem !important;
}

.nfb-article .nfb-infobox--pos-sidebar-right {
  float: right !important;
  clear: right !important;
  width: 260px !important;
  max-width: 260px !important;
  margin: 0 0 1.25rem 2rem !important;
  box-sizing: border-box;
  shape-outside: inset(0) !important;
  shape-margin: 1rem !important;
}

/* Mobile: Sidebar infoboxes become inline (float off)
   Breakpoint 720px: article 680px wide, sidebar 260px would make text too narrow */
@media (max-width: 720px) {
  .tiptap.ProseMirror .nfb-infobox--pos-sidebar-left,
  .ProseMirror .nfb-infobox--pos-sidebar-left,
  .editor-shared .nfb-infobox--pos-sidebar-left,
  .tiptap.ProseMirror .nfb-infobox--pos-sidebar-right,
  .ProseMirror .nfb-infobox--pos-sidebar-right,
  .editor-shared .nfb-infobox--pos-sidebar-right,
  .nfb-article .nfb-infobox--pos-sidebar-left,
  .nfb-article .nfb-infobox--pos-sidebar-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 !important;
  }
}

/* Paragraph after sidebar infobox: allow wrap (clear: none) + top margin so first line doesn't overlap infobox */
.tiptap.ProseMirror .nfb-infobox--pos-sidebar-left + p,
.ProseMirror .nfb-infobox--pos-sidebar-left + p,
.editor-shared .nfb-infobox--pos-sidebar-left + p,
.tiptap.ProseMirror .nfb-infobox--pos-sidebar-right + p,
.ProseMirror .nfb-infobox--pos-sidebar-right + p,
.editor-shared .nfb-infobox--pos-sidebar-right + p {
  clear: none !important;
  margin-top: 1.25rem !important; /* Prevent first line from overlapping infobox top */
}

/* Add clearfix after sidebar infoboxes */
.tiptap.ProseMirror .nfb-infobox--pos-sidebar-left::after,
.ProseMirror .nfb-infobox--pos-sidebar-left::after,
.editor-shared .nfb-infobox--pos-sidebar-left::after,
.tiptap.ProseMirror .nfb-infobox--pos-sidebar-right::after,
.ProseMirror .nfb-infobox--pos-sidebar-right::after,
.editor-shared .nfb-infobox--pos-sidebar-right::after {
  content: '';
  display: table;
  clear: both;
}

/* Image wrapper */
.tiptap.ProseMirror .nfb-infobox .nf-infobox-image,
.ProseMirror .nfb-infobox .nf-infobox-image,
.editor-shared .nfb-infobox .nf-infobox-image,
.nfb-article .nfb-infobox .nf-infobox-image {
  margin-bottom: 0.75rem;
}

.tiptap.ProseMirror .nfb-infobox .nf-infobox-image img,
.ProseMirror .nfb-infobox .nf-infobox-image img,
.editor-shared .nfb-infobox .nf-infobox-image img,
.nfb-article .nfb-infobox .nf-infobox-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Image caption */
.tiptap.ProseMirror .nfb-infobox .nf-infobox-caption,
.ProseMirror .nfb-infobox .nf-infobox-caption,
.editor-shared .nfb-infobox .nf-infobox-caption,
.nfb-article .nfb-infobox .nf-infobox-caption {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Header (icon + title) */
.tiptap.ProseMirror .nfb-infobox .nf-infobox-header,
.ProseMirror .nfb-infobox .nf-infobox-header,
.editor-shared .nfb-infobox .nf-infobox-header,
.nfb-article .nfb-infobox .nf-infobox-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  color: #1f2937;
}

/* Quick Facts list */
.tiptap.ProseMirror .nfb-infobox .nf-infobox-facts,
.ProseMirror .nfb-infobox .nf-infobox-facts,
.editor-shared .nfb-infobox .nf-infobox-facts,
.nfb-article .nfb-infobox .nf-infobox-facts,
.nfb-article ul.nf-infobox-facts,
body .nfb-article .nfb-infobox .nf-infobox-facts,
html body .nfb-article .nfb-infobox ul.nf-infobox-facts,
html body .nfb-article ul.nf-infobox-facts {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important; /* Override global ul padding in article preview */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
}

.tiptap.ProseMirror .nfb-infobox .nf-infobox-fact,
.ProseMirror .nfb-infobox .nf-infobox-fact,
.editor-shared .nfb-infobox .nf-infobox-fact,
.nfb-article .nfb-infobox .nf-infobox-fact,
.nfb-article li.nf-infobox-fact,
body .nfb-article .nfb-infobox .nf-infobox-fact,
html body .nfb-article .nfb-infobox li.nf-infobox-fact,
html body .nfb-article li.nf-infobox-fact {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important; /* Override global li margin in article preview */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  line-height: 1.5 !important; /* Override global li line-height */
}

/* Content wrapper (for Basic type) */
.tiptap.ProseMirror .nfb-infobox .nf-infobox-content,
.ProseMirror .nfb-infobox .nf-infobox-content,
.editor-shared .nfb-infobox .nf-infobox-content,
.nfb-article .nfb-infobox .nf-infobox-content {
  margin: 0;
  padding: 0;
}

/* Paragraphs inside infobox content (for Basic type) */
.tiptap.ProseMirror .nfb-infobox .nf-infobox-content p,
.ProseMirror .nfb-infobox .nf-infobox-content p,
.editor-shared .nfb-infobox .nf-infobox-content p,
.nfb-article .nfb-infobox .nf-infobox-content p {
  margin: 0.5rem 0;
  line-height: 1.6;
  color: #374151;
  font-size: 1rem;
}

.nfb-article .nfb-infobox .nf-infobox-content p:first-child {
  margin-top: 0;
}

.nfb-article .nfb-infobox .nf-infobox-content p:last-child {
  margin-bottom: 0;
}

/* Quick Facts fact icon and text styling */
.nfb-article .nfb-infobox .nf-infobox-fact-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.nfb-article .nfb-infobox .nf-infobox-fact-text {
  flex: 1;
  color: #374151;
  line-height: 1.5;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

/* ============================================================
   INFOBOX TOOLBAR & BUTTONS — CSS Classes (replaces inline styles)
============================================================ */

/* Toolbar container */
.tiptap.ProseMirror .nfb-infobox .nfb-infobox__toolbar,
.ProseMirror .nfb-infobox .nfb-infobox__toolbar,
.editor-shared .nfb-infobox .nfb-infobox__toolbar {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-width: 100%;
}

/* Header content */
.tiptap.ProseMirror .nfb-infobox .nfb-infobox__header-content,
.ProseMirror .nfb-infobox .nfb-infobox__header-content,
.editor-shared .nfb-infobox .nfb-infobox__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  flex-wrap: wrap;
  pointer-events: none;
}

/* Section label (header container) */
.tiptap.ProseMirror .nfb-infobox .nfb-section-label,
.ProseMirror .nfb-infobox .nfb-section-label,
.editor-shared .nfb-infobox .nfb-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  user-select: none;
  pointer-events: none;
}

/* Section title label */
.tiptap.ProseMirror .nfb-infobox .nfb-section-title,
.ProseMirror .nfb-infobox .nfb-section-title,
.editor-shared .nfb-infobox .nfb-section-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 0;
  user-select: none;
  pointer-events: none;
}

/* Base button styles */
.tiptap.ProseMirror .nfb-infobox .nfb-infobox__btn,
.ProseMirror .nfb-infobox .nfb-infobox__btn,
.editor-shared .nfb-infobox .nfb-infobox__btn {
  font-weight: 600;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(2px);
  transition: all 0.2s ease;
  white-space: nowrap;
  pointer-events: auto;
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
}

/* Edit button */
.tiptap.ProseMirror .nfb-infobox .nfb-section-edit-btn,
.ProseMirror .nfb-infobox .nfb-section-edit-btn,
.editor-shared .nfb-infobox .nfb-section-edit-btn {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3b82f6;
  border: 1px solid #bfdbfe;
  padding: 0.3rem 0.5rem;
}

/* Delete button */
.tiptap.ProseMirror .nfb-infobox .nfb-section-delete-btn,
.ProseMirror .nfb-infobox .nfb-section-delete-btn,
.editor-shared .nfb-infobox .nfb-section-delete-btn {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ef4444;
  border: 1px solid #fecaca;
  padding: 0.3rem 0.5rem;
}

/* Move buttons (Up, Down, To Cursor) */
.tiptap.ProseMirror .nfb-infobox .nfb-section-move-up-btn,
.tiptap.ProseMirror .nfb-infobox .nfb-section-move-down-btn,
.tiptap.ProseMirror .nfb-infobox .nfb-section-move-to-cursor-btn,
.ProseMirror .nfb-infobox .nfb-section-move-up-btn,
.ProseMirror .nfb-infobox .nfb-section-move-down-btn,
.ProseMirror .nfb-infobox .nfb-section-move-to-cursor-btn,
.editor-shared .nfb-infobox .nfb-section-move-up-btn,
.editor-shared .nfb-infobox .nfb-section-move-down-btn,
.editor-shared .nfb-infobox .nfb-section-move-to-cursor-btn {
  font-size: 0.85rem;
  color: #6b7280;
  border: 1px solid #d1d5db;
  padding: 0.3rem 0.4rem;
  line-height: 1;
}

/* Disabled state for move buttons */
.tiptap.ProseMirror .nfb-infobox .nfb-section-move-up-btn:disabled,
.tiptap.ProseMirror .nfb-infobox .nfb-section-move-down-btn:disabled,
.ProseMirror .nfb-infobox .nfb-section-move-up-btn:disabled,
.ProseMirror .nfb-infobox .nfb-section-move-down-btn:disabled,
.editor-shared .nfb-infobox .nfb-section-move-up-btn:disabled,
.editor-shared .nfb-infobox .nfb-section-move-down-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* Touch device support - buttons always visible */
@media (hover: none) {
  .tiptap.ProseMirror .nfb-infobox .nfb-infobox__btn,
  .ProseMirror .nfb-infobox .nfb-infobox__btn,
  .editor-shared .nfb-infobox .nfb-infobox__btn {
    opacity: 1;
  }
  
  .tiptap.ProseMirror .nfb-infobox .nfb-section-move-up-btn:disabled,
  .tiptap.ProseMirror .nfb-infobox .nfb-section-move-down-btn:disabled,
  .ProseMirror .nfb-infobox .nfb-section-move-up-btn:disabled,
  .ProseMirror .nfb-infobox .nfb-section-move-down-btn:disabled,
  .editor-shared .nfb-infobox .nfb-section-move-up-btn:disabled,
  .editor-shared .nfb-infobox .nfb-section-move-down-btn:disabled {
    opacity: 0.4;
  }
}

/* Quick Facts fact text styling (backward compatibility) */
.nfb-article .nfb-infobox .nf-infobox-fact span:last-child {
  color: #374151;
  line-height: 1.5;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

/* Hide section label (Infobox header) in article preview */
.nfb-article .nfb-infobox .nfb-section-label,
body .nfb-infobox .nfb-section-label {
  display: none !important;
}

/* Ensure infobox header icon is visible in article preview */
.nfb-article .nfb-infobox .nf-infobox-header span:first-child,
.nfb-article .nfb-infobox .nf-infobox-header-icon {
  font-size: 1.25rem !important;
  display: inline-block !important;
}

/* Ensure infobox header title is visible in article preview */
.nfb-article .nfb-infobox .nf-infobox-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #1f2937 !important;
}

/* Hover state */
.tiptap.ProseMirror .nfb-infobox:hover,
.ProseMirror .nfb-infobox:hover,
.editor-shared .nfb-infobox:hover,
.nfb-article .nfb-infobox:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

/* ============================================================
   INFOBOX THEME CLASSES (Optional - for visual presets)
   These classes change colors/styling but NOT structure
   Can be added via data-theme attribute or CSS class
============================================================ */

/* Theme: Info (Blue) */
.tiptap.ProseMirror .nfb-infobox--theme-info,
.ProseMirror .nfb-infobox--theme-info,
.editor-shared .nfb-infobox--theme-info,
.nfb-article .nfb-infobox--theme-info {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  border-style: solid !important;
}

.tiptap.ProseMirror .nfb-infobox--theme-info .nf-infobox-header,
.ProseMirror .nfb-infobox--theme-info .nf-infobox-header,
.editor-shared .nfb-infobox--theme-info .nf-infobox-header,
.nfb-article .nfb-infobox--theme-info .nf-infobox-header {
  color: #0c4a6e !important;
}

/* Theme: Tip (Green) */
.tiptap.ProseMirror .nfb-infobox--theme-tip,
.ProseMirror .nfb-infobox--theme-tip,
.editor-shared .nfb-infobox--theme-tip,
.nfb-article .nfb-infobox--theme-tip {
  background: #f0fdf4 !important;
  border-color: #4ade80 !important;
  border-style: solid !important;
}

.tiptap.ProseMirror .nfb-infobox--theme-tip .nf-infobox-header,
.ProseMirror .nfb-infobox--theme-tip .nf-infobox-header,
.editor-shared .nfb-infobox--theme-tip .nf-infobox-header,
.nfb-article .nfb-infobox--theme-tip .nf-infobox-header {
  color: #14532d !important;
}

/* Theme: Warning (Orange) */
.tiptap.ProseMirror .nfb-infobox--theme-warning,
.ProseMirror .nfb-infobox--theme-warning,
.editor-shared .nfb-infobox--theme-warning,
.nfb-article .nfb-infobox--theme-warning {
  background: #fff7ed !important;
  border-color: #fb923c !important;
  border-style: solid !important;
}

.tiptap.ProseMirror .nfb-infobox--theme-warning .nf-infobox-header,
.ProseMirror .nfb-infobox--theme-warning .nf-infobox-header,
.editor-shared .nfb-infobox--theme-warning .nf-infobox-header,
.nfb-article .nfb-infobox--theme-warning .nf-infobox-header {
  color: #78350f !important;
}

/* Theme: Important (Red) */
.tiptap.ProseMirror .nfb-infobox--theme-important,
.ProseMirror .nfb-infobox--theme-important,
.editor-shared .nfb-infobox--theme-important,
.nfb-article .nfb-infobox--theme-important {
  background: #fef2f2 !important;
  border-color: #f87171 !important;
  border-style: solid !important;
}

.tiptap.ProseMirror .nfb-infobox--theme-important .nf-infobox-header,
.ProseMirror .nfb-infobox--theme-important .nf-infobox-header,
.editor-shared .nfb-infobox--theme-important .nf-infobox-header,
.nfb-article .nfb-infobox--theme-important .nf-infobox-header {
  color: #7f1d1d !important;
}

/* Theme: Did You Know (Yellow) */
.tiptap.ProseMirror .nfb-infobox--theme-didyouknow,
.ProseMirror .nfb-infobox--theme-didyouknow,
.editor-shared .nfb-infobox--theme-didyouknow,
.nfb-article .nfb-infobox--theme-didyouknow {
  background: #fefce8 !important;
  border-color: #eab308 !important;
  border-style: solid !important;
}

.tiptap.ProseMirror .nfb-infobox--theme-didyouknow .nf-infobox-header,
.ProseMirror .nfb-infobox--theme-didyouknow .nf-infobox-header,
.editor-shared .nfb-infobox--theme-didyouknow .nf-infobox-header,
.nfb-article .nfb-infobox--theme-didyouknow .nf-infobox-header {
  color: #713f12 !important;
}

/* Theme: Data (Purple) */
.tiptap.ProseMirror .nfb-infobox--theme-data,
.ProseMirror .nfb-infobox--theme-data,
.editor-shared .nfb-infobox--theme-data,
.nfb-article .nfb-infobox--theme-data {
  background: #faf5ff !important;
  border-color: #a78bfa !important;
  border-style: solid !important;
}

.tiptap.ProseMirror .nfb-infobox--theme-data .nf-infobox-header,
.ProseMirror .nfb-infobox--theme-data .nf-infobox-header,
.editor-shared .nfb-infobox--theme-data .nf-infobox-header,
.nfb-article .nfb-infobox--theme-data .nf-infobox-header {
  color: #581c87 !important;
}

/* Theme: Update (Teal) */
.tiptap.ProseMirror .nfb-infobox--theme-update,
.ProseMirror .nfb-infobox--theme-update,
.editor-shared .nfb-infobox--theme-update,
.nfb-article .nfb-infobox--theme-update {
  background: #f0fdfa !important;
  border-color: #2dd4bf !important;
  border-style: solid !important;
}

.tiptap.ProseMirror .nfb-infobox--theme-update .nf-infobox-header,
.ProseMirror .nfb-infobox--theme-update .nf-infobox-header,
.editor-shared .nfb-infobox--theme-update .nf-infobox-header,
.nfb-article .nfb-infobox--theme-update .nf-infobox-header {
  color: #134e4a !important;
}

/* ============================================================
   EDITORIAL SIDEBAR LAYOUT (Float-based, like Medium/NYT)
   Text flows around sidebars naturally
============================================================ */

/* LEFT SIDEBAR */
.tiptap.ProseMirror .nf-sidebar--left,
.ProseMirror .nf-sidebar--left,
.editor-shared .nf-sidebar--left {
  float: left !important;
  width: 260px !important;
  margin: 0 2rem 1.25rem 0 !important;
  contain: none !important; /* ✅ allow float + negative margins */
  box-sizing: border-box;
  max-width: 260px !important; /* Override old 300px rule */
}

/* RIGHT SIDEBAR */
.tiptap.ProseMirror .nf-sidebar--right,
.ProseMirror .nf-sidebar--right,
.editor-shared .nf-sidebar--right {
  float: right !important;
  width: 260px !important;
  margin: 0 0 1.25rem 2rem !important;
  contain: none !important; /* ✅ allow float + negative margins */
  box-sizing: border-box;
  max-width: 260px !important; /* Override old 300px rule */
}

/* NO clear: both — allows text to wrap around sidebar (editorial flow) */

/* ============================================================
   SIDEBAR LEFT / RIGHT — EDITOR VIEW (v1.0 — Floating contextual block)
   Contextual content that floats left/right
   Text flows around it on desktop, becomes normal block on mobile
   NOTE: This is OLD float-based approach. Grid layout (above) is preferred.
============================================================ */

/* Sidebar container (editor) - default styles (ONLY when NOT inside Grid layout) */
/* Note: Float-based layout rules (above) override width/margin for .nf-sidebar--left and .nf-sidebar--right */
.tiptap.ProseMirror .nf-sidebar:not(.nfb-layout .nf-sidebar):not(.nf-sidebar--left):not(.nf-sidebar--right),
.ProseMirror .nf-sidebar:not(.nfb-layout .nf-sidebar):not(.nf-sidebar--left):not(.nf-sidebar--right),
.editor-shared .nf-sidebar:not(.nfb-layout .nf-sidebar):not(.nf-sidebar--left):not(.nf-sidebar--right) {
  max-width: 300px;
  width: 300px;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fafafa;
  vertical-align: top;
  /* Define shape for text flow - prevents text from entering sidebar */
  shape-outside: inset(0);
  shape-margin: 0;
}

/* Sidebar inside layout section — allow float for text wrap */
.tiptap.ProseMirror .nfb-layout .nf-sidebar--left,
.ProseMirror .nfb-layout .nf-sidebar--left,
.editor-shared .nfb-layout .nf-sidebar--left {
  float: left !important;
  width: 280px !important;
  max-width: 320px !important;
  margin: 0.25rem 1.25rem 1rem 0 !important;
  margin-left: 0 !important; /* ✅ NO negative margin - stay within container */
  box-sizing: border-box;
}

/* Sidebar right inside layout section */
.tiptap.ProseMirror .nfb-layout .nf-sidebar--right,
.ProseMirror .nfb-layout .nf-sidebar--right,
.editor-shared .nfb-layout .nf-sidebar--right {
  float: right !important;
  width: 280px !important;
  max-width: 320px !important;
  margin: 0.25rem 0 1rem 1.25rem !important;
  box-sizing: border-box;
}

/* Sidebar Left — ensure it floats left and text flows around it (when NOT inside layout section) */
/* NOTE: Negative margin removed from editor - only use in preview if needed */
.tiptap.ProseMirror .nf-sidebar--left,
.ProseMirror .nf-sidebar--left,
.editor-shared .nf-sidebar--left {
  float: left !important;
  clear: none !important; /* CRITICAL: clear goes on elements AFTER sidebar, not on sidebar itself */
  width: 300px !important;
  max-width: 300px !important;
  margin-left: 0 !important; /* ✅ NO negative margin in editor - stay within container */
  margin-right: 2rem !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  box-sizing: border-box;
}

/* Negative margin only in preview (if .article-preview wrapper exists) */
.article-preview .nf-sidebar--left,
body.preview .nf-sidebar--left {
  margin-left: -320px !important; /* Editorial style: pull sidebar out of text column (preview only) */
}

/* Sidebar right in preview - ensure it floats right */
.article-preview .nf-sidebar--right,
body.preview .nf-sidebar--right {
  float: right !important;
  margin-right: 0 !important;
  margin-left: 2rem !important;
}

/* Ensure paragraphs and text flow around sidebar (don't clear floats) */
.tiptap.ProseMirror p:not(.nf-sidebar p),
.ProseMirror p:not(.nf-sidebar p),
.editor-shared p:not(.nf-sidebar p),
.nfb-layout p,
.nfb-layout__main p,
.nfb-layout-main p {
  clear: none !important;
}

/* Old sidebar rules removed - replaced by float-based layout above */

/* Sidebar content wrapper (for Figure and other blocks - below placeholder) */
.tiptap.ProseMirror .nf-sidebar-content,
.ProseMirror .nf-sidebar-content,
.editor-shared .nf-sidebar-content {
  margin: 0;
  padding: 0.5rem;
  margin-top: 0.5rem; /* Space between placeholder and content */
  min-height: 3rem; /* Allow clicking to insert Figure */
  position: relative;
  cursor: text;
  text-align: justify;
}

/* Removed conflicting ::before rule that blocked clicks */

/* Sidebar content (paragraphs, images, etc.) */
.tiptap.ProseMirror .nf-sidebar p,
.ProseMirror .nf-sidebar p,
.editor-shared .nf-sidebar p,
.tiptap.ProseMirror .nf-sidebar img,
.ProseMirror .nf-sidebar img,
.editor-shared .nf-sidebar img {
  margin: 0 !important; /* ✅ Remove all margins for paragraphs in sidebar */
  padding: 0;
}

.tiptap.ProseMirror .nf-sidebar p:first-child,
.ProseMirror .nf-sidebar p:first-child,
.editor-shared .nf-sidebar p:first-child {
  margin-top: 0 !important;
}

/* ✅ Precise: paragraphs in sidebar content wrapper also have no margins */
.tiptap.ProseMirror .nf-sidebar .nf-sidebar-content p,
.ProseMirror .nf-sidebar .nf-sidebar-content p,
.editor-shared .nf-sidebar .nf-sidebar-content p {
  margin: 0 !important;
}

/* Figure node inside sidebar — ensure stable positioning */
.tiptap.ProseMirror .nf-sidebar .nf-figure,
.ProseMirror .nf-sidebar .nf-figure,
.editor-shared .nf-sidebar .nf-figure {
  position: relative;
  clear: both;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  min-height: 0;
}

/* Figure header inside sidebar */
.tiptap.ProseMirror .nf-sidebar .nf-figure .nfb-section-label,
.ProseMirror .nf-sidebar .nf-figure .nfb-section-label,
.editor-shared .nf-sidebar .nf-figure .nfb-section-label {
  position: relative;
  top: 0;
  margin-top: 0;
}

/* Sidebar content DOM - THIS IS THE EDITABLE AREA */
.tiptap.ProseMirror .nf-sidebar-content,
.ProseMirror .nf-sidebar-content,
.editor-shared .nf-sidebar-content {
  /* Dashed border - always visible */
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  min-height: 3rem;
  
  /* Transitions */
  transition: all 0.2s ease;
  outline: none;
  position: relative;
  text-align: justify;
}

.tiptap.ProseMirror .nf-sidebar-content:hover,
.ProseMirror .nf-sidebar-content:hover,
.editor-shared .nf-sidebar-content:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1);
}

/* Placeholder text (CSS ::before pseudo-element - shown when empty) */
.tiptap.ProseMirror .nf-sidebar-content:empty::before,
.ProseMirror .nf-sidebar-content:empty::before,
.editor-shared .nf-sidebar-content:empty::before {
  content: "Add contextual content (image, note, list, callout)…";
  color: #cbd5e1;
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  pointer-events: auto; /* Changed from none to auto to make it clickable */
  user-select: none;
  cursor: text; /* Show text cursor on hover */
}

/* Preview / article: hide editor-only placeholder node and empty-state hint */
.article-preview .nf-sidebar [data-sidebar-placeholder],
body.preview .nf-sidebar [data-sidebar-placeholder],
.is-preview .nf-sidebar [data-sidebar-placeholder],
.article-body .nf-sidebar [data-sidebar-placeholder],
.nfb-article .nf-sidebar [data-sidebar-placeholder],
.article-preview .nf-sidebar .nf-sidebar-placeholder,
body.preview .nf-sidebar .nf-sidebar-placeholder,
.is-preview .nf-sidebar .nf-sidebar-placeholder,
.article-body .nf-sidebar .nf-sidebar-placeholder,
.nfb-article .nf-sidebar .nf-sidebar-placeholder {
  display: none !important;
}

.article-preview .nf-sidebar .nf-sidebar-content:empty::before,
body.preview .nf-sidebar .nf-sidebar-content:empty::before,
.is-preview .nf-sidebar .nf-sidebar-content:empty::before,
.article-body .nf-sidebar .nf-sidebar-content:empty::before,
.nfb-article .nf-sidebar .nf-sidebar-content:empty::before {
  content: none !important;
}

/* Published / preview: sidebar body text justified (matches editor) */
.article-preview .nf-sidebar .nf-sidebar-content,
body.preview .nf-sidebar .nf-sidebar-content,
.is-preview .nf-sidebar .nf-sidebar-content,
.article-body .nf-sidebar .nf-sidebar-content,
.nfb-article .nf-sidebar .nf-sidebar-content {
  text-align: justify;
}

/* -----------------------------------------------------------------
   SIDEBAR — compact “secondary” rhythm: figure, headings, callouts
   Figure must stay inside column width (no wide/full bleed in sidebar)
------------------------------------------------------------------ */
.tiptap.ProseMirror .nf-sidebar .nf-figure,
.ProseMirror .nf-sidebar .nf-figure,
.editor-shared .nf-sidebar .nf-figure,
.article-body .nf-sidebar .nf-figure,
.is-preview .nf-sidebar .nf-figure,
.article-preview .nf-sidebar .nf-figure,
body.preview .nf-sidebar .nf-figure,
.nfb-article .nf-sidebar .nf-figure {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  margin-top: 0.65rem !important;
  margin-bottom: 0.65rem !important;
  float: none !important;
  clear: both;
}

.tiptap.ProseMirror .nf-sidebar .nf-figure.nf-figure--wide,
.ProseMirror .nf-sidebar .nf-figure.nf-figure--wide,
.editor-shared .nf-sidebar .nf-figure.nf-figure--wide,
.article-body .nf-sidebar .nf-figure.nf-figure--wide,
.is-preview .nf-sidebar .nf-figure.nf-figure--wide,
.nfb-article .nf-sidebar .nf-figure.nf-figure--wide,
.tiptap.ProseMirror .nf-sidebar .nf-figure.nf-figure--full,
.ProseMirror .nf-sidebar .nf-figure.nf-figure--full,
.editor-shared .nf-sidebar .nf-figure.nf-figure--full,
.article-body .nf-sidebar .nf-figure.nf-figure--full,
.is-preview .nf-sidebar .nf-figure.nf-figure--full,
.nfb-article .nf-sidebar .nf-figure.nf-figure--full {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.tiptap.ProseMirror .nf-sidebar .nf-figure img,
.ProseMirror .nf-sidebar .nf-figure img,
.editor-shared .nf-sidebar .nf-figure img,
.article-body .nf-sidebar .nf-figure img,
.nfb-article .nf-sidebar .nf-figure img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

.tiptap.ProseMirror .nf-sidebar .nf-figure .figure-caption-field,
.ProseMirror .nf-sidebar .nf-figure .figure-caption-field,
.editor-shared .nf-sidebar .nf-figure .figure-caption-field,
.article-body .nf-sidebar .nf-figure .figure-caption-field,
.nfb-article .nf-sidebar .nf-figure .figure-caption-field,
.tiptap.ProseMirror .nf-sidebar .nf-figure .figure-credit-field,
.ProseMirror .nf-sidebar .nf-figure .figure-credit-field,
.editor-shared .nf-sidebar .nf-figure .figure-credit-field,
.article-body .nf-sidebar .nf-figure .figure-credit-field,
.nfb-article .nf-sidebar .nf-figure .figure-credit-field,
.tiptap.ProseMirror .nf-sidebar .nf-figure .nf-figure-credit-row,
.ProseMirror .nf-sidebar .nf-figure .nf-figure-credit-row,
.editor-shared .nf-sidebar .nf-figure .nf-figure-credit-row,
.article-body .nf-sidebar .nf-figure .nf-figure-credit-row,
.nfb-article .nf-sidebar .nf-figure .nf-figure-credit-row {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
  margin-top: 0.35rem !important;
}

.tiptap.ProseMirror .nf-sidebar .nf-figure .nf-figure-credit-input,
.ProseMirror .nf-sidebar .nf-figure .nf-figure-credit-input,
.editor-shared .nf-sidebar .nf-figure .nf-figure-credit-input {
  font-size: 0.75rem !important;
}

/* Media / embed discipline if anything slips into HTML */
.nf-sidebar img,
.nf-sidebar video,
.nf-sidebar iframe,
.nf-sidebar table {
  max-width: 100% !important;
}

/* Headings in sidebar: mini labels, not article titles */
.tiptap.ProseMirror .nf-sidebar h1,
.ProseMirror .nf-sidebar h1,
.editor-shared .nf-sidebar h1,
.nfb-article .nf-sidebar h1,
.article-body .nf-sidebar h1 {
  font-size: 1.05rem !important;
}
.tiptap.ProseMirror .nf-sidebar h2,
.ProseMirror .nf-sidebar h2,
.editor-shared .nf-sidebar h2,
.nfb-article .nf-sidebar h2,
.article-body .nf-sidebar h2 {
  font-size: 0.98rem !important;
}
.tiptap.ProseMirror .nf-sidebar h3,
.ProseMirror .nf-sidebar h3,
.editor-shared .nf-sidebar h3,
.nfb-article .nf-sidebar h3,
.article-body .nf-sidebar h3 {
  font-size: 0.92rem !important;
}
.tiptap.ProseMirror .nf-sidebar h4,
.ProseMirror .nf-sidebar h4,
.editor-shared .nf-sidebar h4,
.nfb-article .nf-sidebar h4,
.article-body .nf-sidebar h4,
.tiptap.ProseMirror .nf-sidebar h5,
.ProseMirror .nf-sidebar h5,
.editor-shared .nf-sidebar h5,
.nfb-article .nf-sidebar h5,
.article-body .nf-sidebar h5,
.tiptap.ProseMirror .nf-sidebar h6,
.ProseMirror .nf-sidebar h6,
.editor-shared .nf-sidebar h6,
.nfb-article .nf-sidebar h6,
.article-body .nf-sidebar h6 {
  font-size: 0.86rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.3 !important;
}

/* Callout: slightly tighter inside narrow sidebar */
.tiptap.ProseMirror .nf-sidebar .nfb-callout,
.ProseMirror .nf-sidebar .nfb-callout,
.editor-shared .nf-sidebar .nfb-callout,
.nfb-article .nf-sidebar .nfb-callout,
.article-body .nf-sidebar .nfb-callout {
  padding: 0.45rem 0.55rem !important;
  margin-top: 0.45rem !important;
  margin-bottom: 0.45rem !important;
}

/* Lists: slightly tighter in sidebar */
.tiptap.ProseMirror .nf-sidebar .nfb-list,
.ProseMirror .nf-sidebar .nfb-list,
.editor-shared .nf-sidebar .nfb-list {
  margin-top: 0.35rem !important;
  margin-bottom: 0.35rem !important;
}

/* Placeholder for paragraph inside sidebar */
.tiptap.ProseMirror .nf-sidebar p:empty::before,
.ProseMirror .nf-sidebar p:empty::before,
.editor-shared .nf-sidebar p:empty::before,
.tiptap.ProseMirror .nf-sidebar p:has(br:only-child)::before,
.ProseMirror .nf-sidebar p:has(br:only-child)::before,
.editor-shared .nf-sidebar p:has(br:only-child)::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  font-style: italic;
  font-size: 0.9rem;
  pointer-events: none;
  user-select: none;
  font-weight: 400;
  float: left;
}

/* Make paragraph clickable even when empty (for placeholder) */
.tiptap.ProseMirror .nf-sidebar p:empty,
.ProseMirror .nf-sidebar p:empty,
.editor-shared .nf-sidebar p:empty,
.tiptap.ProseMirror .nf-sidebar p:has(br:only-child),
.ProseMirror .nf-sidebar p:has(br:only-child),
.editor-shared .nf-sidebar p:has(br:only-child) {
  cursor: text;
  min-height: 1.5em;
}

/* Placeholder text on hover */
.tiptap.ProseMirror .nf-sidebar-content:hover:empty::before,
.ProseMirror .nf-sidebar-content:hover:empty::before,
.editor-shared .nf-sidebar-content:hover:empty::before {
  color: #94a3b8;
}

/* Hover state */
.tiptap.ProseMirror .nf-sidebar:hover,
.ProseMirror .nf-sidebar:hover,
.editor-shared .nf-sidebar:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

/* Sidebar text placeholder */
.tiptap.ProseMirror .nf-sidebar p.sidebar-text-placeholder:empty::before,
.ProseMirror .nf-sidebar p.sidebar-text-placeholder:empty::before,
.editor-shared .nf-sidebar p.sidebar-text-placeholder:empty::before,
.tiptap.ProseMirror .nf-sidebar p.sidebar-text-placeholder:has(br:only-child)::before,
.ProseMirror .nf-sidebar p.sidebar-text-placeholder:has(br:only-child)::before,
.editor-shared .nf-sidebar p.sidebar-text-placeholder:has(br:only-child)::before {
  content: "Start typing your text here…" !important;
  color: #94a3b8 !important;
  font-style: italic;
  font-size: 0.9rem;
  pointer-events: none;
  user-select: none;
  font-weight: 400;
  float: left;
}

/* Sidebar figure placeholder - visually distinct */
.tiptap.ProseMirror .nf-sidebar p.sidebar-figure-placeholder:empty::before,
.ProseMirror .nf-sidebar p.sidebar-figure-placeholder:empty::before,
.editor-shared .nf-sidebar p.sidebar-figure-placeholder:empty::before,
.tiptap.ProseMirror .nf-sidebar p.sidebar-figure-placeholder:has(br:only-child)::before,
.ProseMirror .nf-sidebar p.sidebar-figure-placeholder:has(br:only-child)::before,
.editor-shared .nf-sidebar p.sidebar-figure-placeholder:has(br:only-child)::before {
  content: "Click here to insert Figure…" !important;
  color: #3b82f6 !important;
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
  display: block;
  padding: 0.75rem;
  border: 2px dashed #3b82f6;
  border-radius: 6px;
  background: #eff6ff;
  text-align: center;
  margin: 0.5rem 0;
}

.tiptap.ProseMirror .nf-sidebar p.sidebar-figure-placeholder:hover:empty::before,
.ProseMirror .nf-sidebar p.sidebar-figure-placeholder:hover:empty::before,
.editor-shared .nf-sidebar p.sidebar-figure-placeholder:hover:empty::before {
  border-color: #2563eb;
  background: #dbeafe;
  color: #2563eb;
}

/* ============================================================
   LAYOUT FLEX ORDER — Ensure sidebar appears before layoutMain visually
   This fixes sidebar appearing at the end of text
============================================================ */

/* ============================================================
   LAYOUT SECTION — Float-based text wrap (not flex)
   Sidebar floats left, text flows around it naturally
============================================================ */

section.nfb-layout,
.nfb-layout {
  /* NO flex layout - let float do its job for text wrap */
  display: block;
  overflow: visible; /* Allow sidebar to extend if needed */
}

/* Layout main - allow text to flow around sidebar */
.nfb-layout__main,
.nfb-layout-main {
  display: block;
  width: auto; /* Don't force full width */
  clear: none !important; /* Allow text to flow around sidebar */
  overflow: visible;
}

/* Sidebar left – float wrap */
.nf-sidebar--left {
  float: left !important;
  width: 280px !important;
  max-width: 320px !important;
  margin: 0.25rem 1.25rem 1rem 0 !important;
  margin-left: 0 !important; /* ✅ NO negative margin - stay within container */
  box-sizing: border-box;
  clear: none !important; /* Don't clear - allow text to flow */
}

/* Ensure layoutMain content flows around sidebar */
.nfb-layout .nfb-layout__main,
.nfb-layout .nfb-layout-main {
  display: block !important;
  width: auto !important;
  clear: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Clear float poslije cijelog layout-a da se layout ne raspadne */
.nfb-layout::after {
  content: "";
  display: block;
  clear: both;
}

/* Na mobitelu: bez float, full width */
@media (max-width: 900px) {
  .nf-sidebar--left {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 1rem 0;
  }
}

/* ============================================================
   LAYOUT: FLOAT WRAP (FINAL) — Pobijedi sve druge pravila
   Ovaj blok ide na kraj da ima najveću specifičnost
============================================================ */

/* Layout section — block flow (not flex) */
section.nfb-layout,
.nfb-layout {
  display: block !important;
  overflow: visible !important;
}

/* Layout main — allow text to flow around sidebar */
.nfb-layout__main,
.nfb-layout-main {
  display: block !important;
  width: auto !important;
  clear: none !important;
  overflow: visible !important;
}

/* Sidebar left — float wrap (FINAL) - applies to ALL sidebars in layout */
.nfb-layout .nf-sidebar--left,
section.nfb-layout .nf-sidebar--left,
.nfb-layout .nf-sidebar--left:first-of-type,
.nfb-layout .nf-sidebar--left:last-of-type,
.nfb-layout .nf-sidebar--left:nth-of-type(2),
.nfb-layout .nf-sidebar--left:nth-of-type(n) {
  float: left !important;
  width: clamp(240px, 28%, 300px) !important;
  max-width: 300px !important;
  margin: 0.25rem 1.25rem 1rem 0 !important;
  margin-left: 0 !important; /* ✅ NO negative margin - stay within container */
  box-sizing: border-box;
  clear: none !important;
}

/* Clear float poslije cijelog layout-a */
.nfb-layout::after {
  content: "";
  display: block;
  clear: both;
}

/* Mobile: stack sidebar below */
@media (max-width: 900px) {
  .nfb-layout .nf-sidebar--left {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1rem 0 !important;
  }
}

/* ============================================================
   TABLE — EDITOR VIEW (v1.0)
   Editorial / book-like style with variants
============================================================ */

/* Base table wrapper */
.tiptap.ProseMirror .nf-table-wrap,
.ProseMirror .nf-table-wrap,
.editor-shared .nf-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}

/* Base table styles */
.tiptap.ProseMirror table.nf-table,
.ProseMirror table.nf-table,
.editor-shared table.nf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 1rem 0;
  font-size: 0.95rem;
}

.tiptap.ProseMirror table.nf-table th,
.tiptap.ProseMirror table.nf-table td,
.ProseMirror table.nf-table th,
.ProseMirror table.nf-table td,
.editor-shared table.nf-table th,
.editor-shared table.nf-table td {
  padding: 0.75rem 0.875rem;
  vertical-align: top;
  word-break: break-word;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px dashed rgba(203, 213, 225, 0.5) !important;
}

/* Make header row visually obvious with modern, soft gradient */
.tiptap.ProseMirror table.nf-table th,
.ProseMirror table.nf-table th,
.editor-shared table.nf-table th {
  font-weight: 600;
  color: #6b21a8 !important;
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.95), rgba(221, 214, 254, 0.95));
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.6px;
  vertical-align: middle;
  padding: 0.625rem 0.875rem;
  line-height: 1.4;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(90, 44, 160, 0.15);
}

/* Body row hover - subtle interactivity */
.tiptap.ProseMirror table.nf-table tbody tr:hover td,
.ProseMirror table.nf-table tbody tr:hover td,
.editor-shared table.nf-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease;
}

/* Zebra rows - subtle depth for data tables */
.tiptap.ProseMirror table.nf-table tbody tr:nth-child(even) td,
.ProseMirror table.nf-table tbody tr:nth-child(even) td,
.editor-shared table.nf-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}

/* Rounded corners on first row header */
.tiptap.ProseMirror table.nf-table tr:first-child th:first-child,
.ProseMirror table.nf-table tr:first-child th:first-child,
.editor-shared table.nf-table tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

.tiptap.ProseMirror table.nf-table tr:first-child th:last-child,
.ProseMirror table.nf-table tr:first-child th:last-child,
.editor-shared table.nf-table tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

/* Default variant — Standard table with subtle borders */
.tiptap.ProseMirror table.nf-table[data-variant="default"] th,
.tiptap.ProseMirror table.nf-table[data-variant="default"] td,
.ProseMirror table.nf-table[data-variant="default"] th,
.ProseMirror table.nf-table[data-variant="default"] td,
.editor-shared table.nf-table[data-variant="default"] th,
.editor-shared table.nf-table[data-variant="default"] td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px dashed rgba(203, 213, 225, 0.5) !important;
}

.tiptap.ProseMirror table.nf-table[data-variant="default"] tbody tr:last-child td,
.ProseMirror table.nf-table[data-variant="default"] tbody tr:last-child td,
.editor-shared table.nf-table[data-variant="default"] tbody tr:last-child td {
  border-bottom: none !important;
}

/* Remove borders from all variants last row */
.tiptap.ProseMirror table.nf-table tbody tr:last-child td,
.ProseMirror table.nf-table tbody tr:last-child td,
.editor-shared table.nf-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Default variant header - ljubičasta (purple) gradient background */
.tiptap.ProseMirror table.nf-table[data-variant="default"] th,
.ProseMirror table.nf-table[data-variant="default"] th,
.editor-shared table.nf-table[data-variant="default"] th {
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.95), rgba(221, 214, 254, 0.95));
  color: #6b21a8 !important;
  text-align: center;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(90, 44, 160, 0.15);
}

.tiptap.ProseMirror table.nf-table[data-variant="default"] tbody tr:nth-child(even) td,
.ProseMirror table.nf-table[data-variant="default"] tbody tr:nth-child(even) td,
.editor-shared table.nf-table[data-variant="default"] tbody tr:nth-child(even) td {
  background: rgba(237, 233, 254, 0.25);
}

.tiptap.ProseMirror table.nf-table[data-variant="default"] tbody tr:hover td,
.ProseMirror table.nf-table[data-variant="default"] tbody tr:hover td,
.editor-shared table.nf-table[data-variant="default"] tbody tr:hover td {
  background: rgba(237, 233, 254, 0.35);
}

/* Borderless variant — Clean table without borders (but show borders in editor) */
.tiptap.ProseMirror table.nf-table[data-variant="borderless"] th,
.tiptap.ProseMirror table.nf-table[data-variant="borderless"] td,
.ProseMirror table.nf-table[data-variant="borderless"] th,
.ProseMirror table.nf-table[data-variant="borderless"] td,
.editor-shared table.nf-table[data-variant="borderless"] th,
.editor-shared table.nf-table[data-variant="borderless"] td {
  border: 1px solid rgba(203, 213, 225, 0.3) !important;
}

/* Borderless variant header - narandžasta (orange) gradient background */
.tiptap.ProseMirror table.nf-table[data-variant="borderless"] th,
.ProseMirror table.nf-table[data-variant="borderless"] th,
.editor-shared table.nf-table[data-variant="borderless"] th {
  background: linear-gradient(135deg, rgba(255, 237, 213, 0.95), rgba(254, 215, 170, 0.95));
  color: #c2410c !important;
  text-align: left;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(194, 65, 12, 0.15);
}

.tiptap.ProseMirror table.nf-table[data-variant="borderless"] tbody tr:nth-child(even) td,
.ProseMirror table.nf-table[data-variant="borderless"] tbody tr:nth-child(even) td,
.editor-shared table.nf-table[data-variant="borderless"] tbody tr:nth-child(even) td {
  background: rgba(255, 237, 213, 0.25);
}

.tiptap.ProseMirror table.nf-table[data-variant="borderless"] tbody tr:hover td,
.ProseMirror table.nf-table[data-variant="borderless"] tbody tr:hover td,
.editor-shared table.nf-table[data-variant="borderless"] tbody tr:hover td {
  background: rgba(255, 237, 213, 0.35);
}

.tiptap.ProseMirror table.nf-table[data-variant="borderless"] tr:first-child th,
.ProseMirror table.nf-table[data-variant="borderless"] tr:first-child th,
.editor-shared table.nf-table[data-variant="borderless"] tr:first-child th {
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(194, 65, 12, 0.15);
}

/* Aqua variant — Aqua-styled table */
.tiptap.ProseMirror table.nf-table[data-variant="aqua"] th,
.tiptap.ProseMirror table.nf-table[data-variant="aqua"] td,
.ProseMirror table.nf-table[data-variant="aqua"] th,
.ProseMirror table.nf-table[data-variant="aqua"] td,
.editor-shared table.nf-table[data-variant="aqua"] th,
.editor-shared table.nf-table[data-variant="aqua"] td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px dashed rgba(203, 213, 225, 0.5) !important;
}

/* Aqua variant header - plava (blue) gradient background */
.tiptap.ProseMirror table.nf-table[data-variant="aqua"] th,
.ProseMirror table.nf-table[data-variant="aqua"] th,
.editor-shared table.nf-table[data-variant="aqua"] th {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(191, 219, 254, 0.95));
  color: #0c4a6e !important;
  text-align: left;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(12, 74, 110, 0.15);
}

.tiptap.ProseMirror table.nf-table[data-variant="aqua"] tbody tr:nth-child(even) td,
.ProseMirror table.nf-table[data-variant="aqua"] tbody tr:nth-child(even) td,
.editor-shared table.nf-table[data-variant="aqua"] tbody tr:nth-child(even) td {
  background: rgba(224, 242, 254, 0.4);
}

.tiptap.ProseMirror table.nf-table[data-variant="aqua"] tbody tr:hover td,
.ProseMirror table.nf-table[data-variant="aqua"] tbody tr:hover td,
.editor-shared table.nf-table[data-variant="aqua"] tbody tr:hover td {
  background: rgba(224, 242, 254, 0.5);
}

/* Green variant — Green-styled table */
.tiptap.ProseMirror table.nf-table[data-variant="green"] th,
.tiptap.ProseMirror table.nf-table[data-variant="green"] td,
.ProseMirror table.nf-table[data-variant="green"] th,
.ProseMirror table.nf-table[data-variant="green"] td,
.editor-shared table.nf-table[data-variant="green"] th,
.editor-shared table.nf-table[data-variant="green"] td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px dashed rgba(203, 213, 225, 0.5) !important;
}

/* Green variant header - zelena (green) gradient background */
.tiptap.ProseMirror table.nf-table[data-variant="green"] th,
.ProseMirror table.nf-table[data-variant="green"] th,
.editor-shared table.nf-table[data-variant="green"] th {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.95), rgba(187, 247, 208, 0.95));
  color: #14532d !important;
  text-align: center;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(20, 83, 45, 0.15);
}

.tiptap.ProseMirror table.nf-table[data-variant="green"] tbody tr:nth-child(even) td,
.ProseMirror table.nf-table[data-variant="green"] tbody tr:nth-child(even) td,
.editor-shared table.nf-table[data-variant="green"] tbody tr:nth-child(even) td {
  background: rgba(220, 252, 231, 0.4);
}

.tiptap.ProseMirror table.nf-table[data-variant="green"] tbody tr:hover td,
.ProseMirror table.nf-table[data-variant="green"] tbody tr:hover td,
.editor-shared table.nf-table[data-variant="green"] tbody tr:hover td {
  background: rgba(220, 252, 231, 0.5);
}

/* Red variant — Red-styled table */
.tiptap.ProseMirror table.nf-table[data-variant="red"] th,
.tiptap.ProseMirror table.nf-table[data-variant="red"] td,
.ProseMirror table.nf-table[data-variant="red"] th,
.ProseMirror table.nf-table[data-variant="red"] td,
.editor-shared table.nf-table[data-variant="red"] th,
.editor-shared table.nf-table[data-variant="red"] td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px dashed rgba(203, 213, 225, 0.5) !important;
}

/* Red variant header - crvena (red) gradient background */
.tiptap.ProseMirror table.nf-table[data-variant="red"] th,
.ProseMirror table.nf-table[data-variant="red"] th,
.editor-shared table.nf-table[data-variant="red"] th {
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.95), rgba(254, 202, 202, 0.95));
  color: #7f1d1d !important;
  text-align: center;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(127, 29, 29, 0.15);
}

.tiptap.ProseMirror table.nf-table[data-variant="red"] tbody tr:nth-child(even) td,
.ProseMirror table.nf-table[data-variant="red"] tbody tr:nth-child(even) td,
.editor-shared table.nf-table[data-variant="red"] tbody tr:nth-child(even) td {
  background: rgba(254, 226, 226, 0.4);
}

.tiptap.ProseMirror table.nf-table[data-variant="red"] tbody tr:hover td,
.ProseMirror table.nf-table[data-variant="red"] tbody tr:hover td,
.editor-shared table.nf-table[data-variant="red"] tbody tr:hover td {
  background: rgba(254, 226, 226, 0.5);
}

/* ============================================================
   NFB TABLE STYLES — Publishing-focused variants
   Step 1: 3 publishing styles + accent palette
============================================================ */

/* Base NFB table class (always present) — rounded shell, soft shadow, accent-tinted grid via --nfb-table-border */
.tiptap.ProseMirror table.nfb-table,
.ProseMirror table.nfb-table,
.editor-shared table.nfb-table,
.nfb-article table.nfb-table {
  width: 100%;
  table-layout: fixed;
  margin: 1rem 0;
  font-size: 0.95rem;
  --nfb-table-border: rgba(15, 23, 42, 0.08);
  --nfb-table-radius: 12px;
  --nfb-table-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.07);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--nfb-table-border);
  border-radius: var(--nfb-table-radius);
  overflow: hidden;
  box-shadow: var(--nfb-table-shadow);
  background: #fff;
}

.tiptap.ProseMirror table.nfb-table th,
.tiptap.ProseMirror table.nfb-table td,
.ProseMirror table.nfb-table th,
.ProseMirror table.nfb-table td,
.editor-shared table.nfb-table th,
.editor-shared table.nfb-table td,
.nfb-article table.nfb-table th,
.nfb-article table.nfb-table td {
  padding: 0.75rem 0.875rem;
  vertical-align: top;
  word-break: break-word;
  line-height: 1.4;
  font-family: var(--nfb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
  border: none;
  border-right: 1px solid var(--nfb-table-border);
  border-bottom: 1px solid var(--nfb-table-border);
}

.tiptap.ProseMirror table.nfb-table thead th:last-child,
.tiptap.ProseMirror table.nfb-table tbody td:last-child,
.tiptap.ProseMirror table.nfb-table tbody th:last-child,
.ProseMirror table.nfb-table thead th:last-child,
.ProseMirror table.nfb-table tbody td:last-child,
.ProseMirror table.nfb-table tbody th:last-child,
.editor-shared table.nfb-table thead th:last-child,
.editor-shared table.nfb-table tbody td:last-child,
.editor-shared table.nfb-table tbody th:last-child,
.nfb-article table.nfb-table thead th:last-child,
.nfb-article table.nfb-table tbody td:last-child,
.nfb-article table.nfb-table tbody th:last-child {
  border-right: none;
}

.tiptap.ProseMirror table.nfb-table tbody tr:last-child td,
.tiptap.ProseMirror table.nfb-table tbody tr:last-child th,
.ProseMirror table.nfb-table tbody tr:last-child td,
.ProseMirror table.nfb-table tbody tr:last-child th,
.editor-shared table.nfb-table tbody tr:last-child td,
.editor-shared table.nfb-table tbody tr:last-child th,
.nfb-article table.nfb-table tbody tr:last-child td,
.nfb-article table.nfb-table tbody tr:last-child th {
  border-bottom: none;
}

/* Tables without tbody (edge case): still close the bottom grid */
.tiptap.ProseMirror table.nfb-table > tr:last-child > td,
.tiptap.ProseMirror table.nfb-table > tr:last-child > th,
.ProseMirror table.nfb-table > tr:last-child > td,
.ProseMirror table.nfb-table > tr:last-child > th,
.editor-shared table.nfb-table > tr:last-child > td,
.editor-shared table.nfb-table > tr:last-child > th,
.nfb-article table.nfb-table > tr:last-child > td,
.nfb-article table.nfb-table > tr:last-child > th {
  border-bottom: none;
}

/* Normal cell typography: paragraphs only (no Verse); keep rows compact */
.tiptap.ProseMirror table.nfb-table th > p,
.tiptap.ProseMirror table.nfb-table td > p,
.ProseMirror table.nfb-table th > p,
.ProseMirror table.nfb-table td > p,
.editor-shared table.nfb-table th > p,
.editor-shared table.nfb-table td > p {
  margin: 0;
}

.tiptap.ProseMirror table.nfb-table th > p + p,
.tiptap.ProseMirror table.nfb-table td > p + p,
.ProseMirror table.nfb-table th > p + p,
.ProseMirror table.nfb-table td > p + p,
.editor-shared table.nfb-table th > p + p,
.editor-shared table.nfb-table td > p + p {
  margin-top: 0.5rem;
}

/* Per-accent grid tint (same family as stat-block themed borders) */
.tiptap.ProseMirror table.nfb-table.nfb-accent-default,
.ProseMirror table.nfb-table.nfb-accent-default,
.editor-shared table.nfb-table.nfb-accent-default,
.nfb-article table.nfb-table.nfb-accent-default {
  --nfb-table-border: rgba(91, 33, 182, 0.12);
  --nfb-table-body-tint: rgba(245, 243, 255, 0.52);
  --nfb-table-body-zebra: rgba(237, 233, 254, 0.44);
  --nfb-table-body-hover: rgba(221, 214, 254, 0.34);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-mint,
.ProseMirror table.nfb-table.nfb-accent-mint,
.editor-shared table.nfb-table.nfb-accent-mint,
.nfb-article table.nfb-table.nfb-accent-mint {
  --nfb-table-border: rgba(20, 83, 45, 0.12);
  --nfb-table-body-tint: rgba(240, 253, 244, 0.48);
  --nfb-table-body-zebra: rgba(220, 252, 231, 0.4);
  --nfb-table-body-hover: rgba(209, 250, 229, 0.38);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-lavender,
.ProseMirror table.nfb-table.nfb-accent-lavender,
.editor-shared table.nfb-table.nfb-accent-lavender,
.nfb-article table.nfb-table.nfb-accent-lavender {
  --nfb-table-border: rgba(107, 33, 168, 0.12);
  --nfb-table-body-tint: rgba(250, 245, 255, 0.52);
  --nfb-table-body-zebra: rgba(243, 232, 255, 0.42);
  --nfb-table-body-hover: rgba(233, 213, 255, 0.34);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-sand,
.ProseMirror table.nfb-table.nfb-accent-sand,
.editor-shared table.nfb-table.nfb-accent-sand,
.nfb-article table.nfb-table.nfb-accent-sand {
  --nfb-table-border: rgba(194, 65, 12, 0.14);
  --nfb-table-body-tint: rgba(255, 250, 245, 0.52);
  --nfb-table-body-zebra: rgba(255, 237, 213, 0.4);
  --nfb-table-body-hover: rgba(254, 215, 170, 0.32);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-sky,
.ProseMirror table.nfb-table.nfb-accent-sky,
.editor-shared table.nfb-table.nfb-accent-sky,
.nfb-article table.nfb-table.nfb-accent-sky {
  --nfb-table-border: rgba(12, 74, 110, 0.12);
  --nfb-table-body-tint: rgba(239, 246, 255, 0.52);
  --nfb-table-body-zebra: rgba(219, 234, 254, 0.4);
  --nfb-table-body-hover: rgba(191, 219, 254, 0.34);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-slate,
.ProseMirror table.nfb-table.nfb-accent-slate,
.editor-shared table.nfb-table.nfb-accent-slate,
.nfb-article table.nfb-table.nfb-accent-slate {
  --nfb-table-border: rgba(71, 85, 105, 0.14);
  --nfb-table-body-tint: rgba(248, 250, 252, 0.58);
  --nfb-table-body-zebra: rgba(241, 245, 249, 0.48);
  --nfb-table-body-hover: rgba(226, 232, 240, 0.4);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-forest,
.ProseMirror table.nfb-table.nfb-accent-forest,
.editor-shared table.nfb-table.nfb-accent-forest,
.nfb-article table.nfb-table.nfb-accent-forest {
  --nfb-table-border: rgba(22, 101, 52, 0.13);
  --nfb-table-body-tint: rgba(236, 253, 242, 0.5);
  --nfb-table-body-zebra: rgba(209, 250, 229, 0.42);
  --nfb-table-body-hover: rgba(187, 247, 208, 0.3);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-olive,
.ProseMirror table.nfb-table.nfb-accent-olive,
.editor-shared table.nfb-table.nfb-accent-olive,
.nfb-article table.nfb-table.nfb-accent-olive {
  --nfb-table-border: rgba(113, 63, 18, 0.14);
  --nfb-table-body-tint: rgba(254, 252, 245, 0.55);
  --nfb-table-body-zebra: rgba(254, 249, 232, 0.44);
  --nfb-table-body-hover: rgba(250, 245, 200, 0.36);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-amber,
.ProseMirror table.nfb-table.nfb-accent-amber,
.editor-shared table.nfb-table.nfb-accent-amber,
.nfb-article table.nfb-table.nfb-accent-amber {
  --nfb-table-border: rgba(146, 64, 14, 0.14);
  --nfb-table-body-tint: rgba(255, 251, 240, 0.54);
  --nfb-table-body-zebra: rgba(254, 243, 199, 0.42);
  --nfb-table-body-hover: rgba(253, 230, 138, 0.34);
}

.tiptap.ProseMirror table.nfb-table.nfb-accent-clay,
.ProseMirror table.nfb-table.nfb-accent-clay,
.editor-shared table.nfb-table.nfb-accent-clay,
.nfb-article table.nfb-table.nfb-accent-clay {
  --nfb-table-border: rgba(153, 27, 27, 0.12);
  --nfb-table-body-tint: rgba(255, 248, 248, 0.52);
  --nfb-table-body-zebra: rgba(254, 242, 242, 0.42);
  --nfb-table-body-hover: rgba(254, 226, 226, 0.34);
}

/* ============================================================
   STYLE VARIANTS
============================================================ */

/* Editorial (default) — Rich, magazine-style */
.tiptap.ProseMirror table.nfb-table--editorial th,
.ProseMirror table.nfb-table--editorial th,
.editor-shared table.nfb-table--editorial th,
.nfb-article table.nfb-table--editorial th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.6px;
  vertical-align: middle;
  padding: 0.625rem 0.875rem;
  line-height: 1.4;
  text-align: center;
}

.tiptap.ProseMirror table.nfb-table--editorial tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--editorial tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--editorial tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--editorial tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}

.tiptap.ProseMirror table.nfb-table--editorial tbody tr:hover td,
.ProseMirror table.nfb-table--editorial tbody tr:hover td,
.editor-shared table.nfb-table--editorial tbody tr:hover td,
.nfb-article table.nfb-table--editorial tbody tr:hover td {
  background: rgba(0, 0, 0, 0.025);
}

/* Compact — Dense, spec/comparison style */
.tiptap.ProseMirror table.nfb-table--compact th,
.ProseMirror table.nfb-table--compact th,
.editor-shared table.nfb-table--compact th,
.nfb-article table.nfb-table--compact th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  padding: 0.5rem 0.75rem;
  line-height: 1.3;
  text-align: left;
}

.tiptap.ProseMirror table.nfb-table--compact td,
.ProseMirror table.nfb-table--compact td,
.editor-shared table.nfb-table--compact td,
.nfb-article table.nfb-table--compact td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.tiptap.ProseMirror table.nfb-table--compact tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--compact tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--compact tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--compact tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.01);
}

/* Plain — Minimal, print-friendly (horizontal rules only; accent only tints the outer frame slightly) */
.tiptap.ProseMirror table.nfb-table--plain,
.ProseMirror table.nfb-table--plain,
.editor-shared table.nfb-table--plain,
.nfb-article table.nfb-table--plain {
  --nfb-table-shadow: none;
  box-shadow: none;
  --nfb-table-radius: 10px;
}

.tiptap.ProseMirror table.nfb-table--plain th,
.ProseMirror table.nfb-table--plain th,
.editor-shared table.nfb-table--plain th,
.nfb-article table.nfb-table--plain th {
  font-weight: 500;
  text-transform: none;
  font-size: 0.95rem;
  letter-spacing: normal;
  vertical-align: middle;
  padding: 0.625rem 0.875rem;
  line-height: 1.4;
  text-align: left;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important; /* Override accent colors */
}

.tiptap.ProseMirror table.nfb-table--plain th,
.tiptap.ProseMirror table.nfb-table--plain td,
.ProseMirror table.nfb-table--plain th,
.ProseMirror table.nfb-table--plain td,
.editor-shared table.nfb-table--plain th,
.editor-shared table.nfb-table--plain td,
.nfb-article table.nfb-table--plain th,
.nfb-article table.nfb-table--plain td {
  border-right: none !important;
  border-bottom: 1px solid var(--nfb-table-border) !important;
}

.tiptap.ProseMirror table.nfb-table--plain tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--plain tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--plain tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--plain tbody tr:nth-child(even) td {
  background: transparent;
}

/* Plain style overrides all accent colors - accent has no effect on plain */
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-default th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-mint th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-lavender th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-sand th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-sky th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-slate th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-forest th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-olive th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-amber th,
.tiptap.ProseMirror table.nfb-table--plain.nfb-accent-clay th,
.ProseMirror table.nfb-table--plain.nfb-accent-default th,
.ProseMirror table.nfb-table--plain.nfb-accent-mint th,
.ProseMirror table.nfb-table--plain.nfb-accent-lavender th,
.ProseMirror table.nfb-table--plain.nfb-accent-sand th,
.ProseMirror table.nfb-table--plain.nfb-accent-sky th,
.ProseMirror table.nfb-table--plain.nfb-accent-slate th,
.ProseMirror table.nfb-table--plain.nfb-accent-forest th,
.ProseMirror table.nfb-table--plain.nfb-accent-olive th,
.ProseMirror table.nfb-table--plain.nfb-accent-amber th,
.ProseMirror table.nfb-table--plain.nfb-accent-clay th,
.editor-shared table.nfb-table--plain.nfb-accent-default th,
.editor-shared table.nfb-table--plain.nfb-accent-mint th,
.editor-shared table.nfb-table--plain.nfb-accent-lavender th,
.editor-shared table.nfb-table--plain.nfb-accent-sand th,
.editor-shared table.nfb-table--plain.nfb-accent-sky th,
.editor-shared table.nfb-table--plain.nfb-accent-slate th,
.editor-shared table.nfb-table--plain.nfb-accent-forest th,
.editor-shared table.nfb-table--plain.nfb-accent-olive th,
.editor-shared table.nfb-table--plain.nfb-accent-amber th,
.editor-shared table.nfb-table--plain.nfb-accent-clay th,
.nfb-article table.nfb-table--plain.nfb-accent-default th,
.nfb-article table.nfb-table--plain.nfb-accent-mint th,
.nfb-article table.nfb-table--plain.nfb-accent-lavender th,
.nfb-article table.nfb-table--plain.nfb-accent-sand th,
.nfb-article table.nfb-table--plain.nfb-accent-sky th,
.nfb-article table.nfb-table--plain.nfb-accent-slate th,
.nfb-article table.nfb-table--plain.nfb-accent-forest th,
.nfb-article table.nfb-table--plain.nfb-accent-olive th,
.nfb-article table.nfb-table--plain.nfb-accent-amber th,
.nfb-article table.nfb-table--plain.nfb-accent-clay th {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Comparison — For comparisons, X vs Y, plans, options */
.tiptap.ProseMirror table.nfb-table--comparison th,
.ProseMirror table.nfb-table--comparison th,
.editor-shared table.nfb-table--comparison th,
.nfb-article table.nfb-table--comparison th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.7px;
  vertical-align: middle;
  padding: 0.75rem 0.875rem;
  line-height: 1.3;
  border-bottom: 2px solid var(--nfb-table-border);
  text-align: center;
}

.tiptap.ProseMirror table.nfb-table--comparison td,
.ProseMirror table.nfb-table--comparison td,
.editor-shared table.nfb-table--comparison td,
.nfb-article table.nfb-table--comparison td {
  padding: 0.75rem 0.875rem;
}

/* Bold first column for easier scanning */
.tiptap.ProseMirror table.nfb-table--comparison td:first-child,
.ProseMirror table.nfb-table--comparison td:first-child,
.editor-shared table.nfb-table--comparison td:first-child,
.nfb-article table.nfb-table--comparison td:first-child {
  font-weight: 600;
  color: #1f2937;
}

.tiptap.ProseMirror table.nfb-table--comparison tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--comparison tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--comparison tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--comparison tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}

.tiptap.ProseMirror table.nfb-table--comparison tbody tr:hover td,
.ProseMirror table.nfb-table--comparison tbody tr:hover td,
.editor-shared table.nfb-table--comparison tbody tr:hover td,
.nfb-article table.nfb-table--comparison tbody tr:hover td {
  background: rgba(0, 0, 0, 0.035);
}

/* Callout — For info boxes, rules, summaries, warnings */
.tiptap.ProseMirror table.nfb-table--callout,
.ProseMirror table.nfb-table--callout,
.editor-shared table.nfb-table--callout,
.nfb-article table.nfb-table--callout {
  --nfb-table-radius: 11px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid var(--nfb-table-border);
  border-radius: var(--nfb-table-radius);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  padding: 0.5rem;
}

.tiptap.ProseMirror table.nfb-table--callout th,
.ProseMirror table.nfb-table--callout th,
.editor-shared table.nfb-table--callout th,
.nfb-article table.nfb-table--callout th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.6px;
  vertical-align: middle;
  padding: 0.75rem 0.875rem;
  line-height: 1.4;
  border-bottom: 2px solid var(--nfb-table-border);
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px 6px 0 0;
}

/* Note: Accent classes automatically override callout header background via higher specificity */
/* Accent affects only header background, not the callout table background (which stays gray) */

.tiptap.ProseMirror table.nfb-table--callout td,
.ProseMirror table.nfb-table--callout td,
.editor-shared table.nfb-table--callout td,
.nfb-article table.nfb-table--callout td {
  padding: 0.75rem 0.875rem;
  background: rgba(255, 255, 255, 0.4);
}

.tiptap.ProseMirror table.nfb-table--callout tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--callout tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--callout tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--callout tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.5);
}

.tiptap.ProseMirror table.nfb-table--callout tbody tr:hover td,
.ProseMirror table.nfb-table--callout tbody tr:hover td,
.editor-shared table.nfb-table--callout tbody tr:hover td,
.nfb-article table.nfb-table--callout tbody tr:hover td {
  background: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   ACCENT-TINTED BODY — all accents (tokens above); Plain & Callout stay neutral
============================================================ */
.tiptap.ProseMirror table.nfb-table:not(.nfb-table--plain):not(.nfb-table--callout) tbody td,
.ProseMirror table.nfb-table:not(.nfb-table--plain):not(.nfb-table--callout) tbody td,
.editor-shared table.nfb-table:not(.nfb-table--plain):not(.nfb-table--callout) tbody td,
.nfb-article table.nfb-table:not(.nfb-table--plain):not(.nfb-table--callout) tbody td {
  background: var(--nfb-table-body-tint, #fff);
}

.tiptap.ProseMirror table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td {
  background: var(--nfb-table-body-zebra, rgba(0, 0, 0, 0.015));
}

.tiptap.ProseMirror table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td,
.ProseMirror table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td,
.editor-shared table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td,
.nfb-article table.nfb-table--editorial:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td {
  background: var(--nfb-table-body-hover, rgba(0, 0, 0, 0.025));
}

.tiptap.ProseMirror table.nfb-table--compact:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--compact:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--compact:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--compact:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td {
  background: var(--nfb-table-body-zebra, rgba(0, 0, 0, 0.01));
}

.tiptap.ProseMirror table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.ProseMirror table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.editor-shared table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td,
.nfb-article table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:nth-child(even) td {
  background: var(--nfb-table-body-zebra, rgba(0, 0, 0, 0.02));
}

.tiptap.ProseMirror table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td,
.ProseMirror table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td,
.editor-shared table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td,
.nfb-article table.nfb-table--comparison:not(.nfb-table--plain):not(.nfb-table--callout) tbody tr:hover td {
  background: var(--nfb-table-body-hover, rgba(0, 0, 0, 0.035));
}

/* ============================================================
   CELL ALIGNMENT (data-align) — beats style-variant th defaults; paragraphs use inherit (see nfb-content-shared)
============================================================ */
.tiptap.ProseMirror table.nfb-table td[data-align="left"],
.ProseMirror table.nfb-table th[data-align="left"],
.editor-shared table.nfb-table td[data-align="left"],
.editor-shared table.nfb-table th[data-align="left"],
.nfb-article table.nfb-table td[data-align="left"],
.nfb-article table.nfb-table th[data-align="left"] {
  text-align: left;
}
.tiptap.ProseMirror table.nfb-table td[data-align="center"],
.ProseMirror table.nfb-table th[data-align="center"],
.editor-shared table.nfb-table td[data-align="center"],
.editor-shared table.nfb-table th[data-align="center"],
.nfb-article table.nfb-table td[data-align="center"],
.nfb-article table.nfb-table th[data-align="center"] {
  text-align: center;
}
.tiptap.ProseMirror table.nfb-table td[data-align="right"],
.ProseMirror table.nfb-table th[data-align="right"],
.editor-shared table.nfb-table td[data-align="right"],
.editor-shared table.nfb-table th[data-align="right"],
.nfb-article table.nfb-table td[data-align="right"],
.nfb-article table.nfb-table th[data-align="right"] {
  text-align: right;
}

/* ============================================================
   TABLE CAPTION & SOURCE (NodeView footer + preview)
============================================================ */
.nfb-table-footer {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  color: #64748b;
}
.nfb-table-footer input {
  width: 100%;
}

/* Table caption & source — preview (article view) */
.nfb-table-preview-wrap {
  margin: 1rem 0;
}
.nfb-table-preview-wrap .nfb-table-caption {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0.5rem 0 0.25rem;
  font-style: italic;
  text-align: center;
}
.nfb-table-preview-wrap .nfb-table-source {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0 0 0.5rem;
  text-align: right;
}

/* ============================================================
   ACCENT PALETTE (affects header background + shadow only)
============================================================ */

/* Default accent — Purple (NFB brand) */
.tiptap.ProseMirror table.nfb-accent-default th,
.ProseMirror table.nfb-accent-default th,
.editor-shared table.nfb-accent-default th,
.nfb-article table.nfb-accent-default th {
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.95), rgba(221, 214, 254, 0.95));
  color: #6b21a8 !important;
  box-shadow: inset 0 -1px 0 rgba(90, 44, 160, 0.15);
}

/* Mint accent — Fresh, light green */
.tiptap.ProseMirror table.nfb-accent-mint th,
.ProseMirror table.nfb-accent-mint th,
.editor-shared table.nfb-accent-mint th,
.nfb-article table.nfb-accent-mint th {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.95), rgba(187, 247, 208, 0.95));
  color: #14532d !important;
  box-shadow: inset 0 -1px 0 rgba(20, 83, 45, 0.15);
}

/* Lavender accent — Soft purple */
.tiptap.ProseMirror table.nfb-accent-lavender th,
.ProseMirror table.nfb-accent-lavender th,
.editor-shared table.nfb-accent-lavender th,
.nfb-article table.nfb-accent-lavender th {
  background: linear-gradient(135deg, rgba(243, 232, 255, 0.95), rgba(233, 213, 255, 0.95));
  color: #6b21a8 !important;
  box-shadow: inset 0 -1px 0 rgba(107, 33, 168, 0.15);
}

/* Sand accent — Warm beige */
.tiptap.ProseMirror table.nfb-accent-sand th,
.ProseMirror table.nfb-accent-sand th,
.editor-shared table.nfb-accent-sand th {
  background: linear-gradient(135deg, rgba(255, 237, 213, 0.95), rgba(254, 215, 170, 0.95));
  color: #c2410c !important;
  box-shadow: inset 0 -1px 0 rgba(194, 65, 12, 0.15);
}

/* Sky accent — Light blue */
.tiptap.ProseMirror table.nfb-accent-sky th,
.ProseMirror table.nfb-accent-sky th,
.editor-shared table.nfb-accent-sky th,
.nfb-article table.nfb-accent-sky th {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(191, 219, 254, 0.95));
  color: #0c4a6e !important;
  box-shadow: inset 0 -1px 0 rgba(12, 74, 110, 0.15);
}

/* Slate accent — Neutral gray */
.tiptap.ProseMirror table.nfb-accent-slate th,
.ProseMirror table.nfb-accent-slate th,
.editor-shared table.nfb-accent-slate th,
.nfb-article table.nfb-accent-slate th {
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.95));
  color: #475569 !important;
  box-shadow: inset 0 -1px 0 rgba(71, 85, 105, 0.15);
}

/* Forest accent — Deep green (natural, positive) */
.tiptap.ProseMirror table.nfb-accent-forest th,
.ProseMirror table.nfb-accent-forest th,
.editor-shared table.nfb-accent-forest th,
.nfb-article table.nfb-accent-forest th {
  background: linear-gradient(135deg, rgba(187, 247, 208, 0.95), rgba(134, 239, 172, 0.95));
  color: #166534 !important;
  box-shadow: inset 0 -1px 0 rgba(22, 101, 52, 0.15);
}

/* Olive accent — Earthy green-yellow (natural, warm) */
.tiptap.ProseMirror table.nfb-accent-olive th,
.ProseMirror table.nfb-accent-olive th,
.editor-shared table.nfb-accent-olive th,
.nfb-article table.nfb-accent-olive th {
  background: linear-gradient(135deg, rgba(254, 252, 232, 0.95), rgba(250, 245, 200, 0.95));
  color: #713f12 !important;
  box-shadow: inset 0 -1px 0 rgba(113, 63, 18, 0.15);
}

/* Amber accent — Warm yellow-orange (editorial, warm) */
.tiptap.ProseMirror table.nfb-accent-amber th,
.ProseMirror table.nfb-accent-amber th,
.editor-shared table.nfb-accent-amber th,
.nfb-article table.nfb-accent-amber th {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.95), rgba(253, 230, 138, 0.95));
  color: #92400e !important;
  box-shadow: inset 0 -1px 0 rgba(146, 64, 14, 0.15);
}

/* Clay accent — Earthy red-brown (warm, editorial) */
.tiptap.ProseMirror table.nfb-accent-clay th,
.ProseMirror table.nfb-accent-clay th,
.editor-shared table.nfb-accent-clay th,
.nfb-article table.nfb-accent-clay th {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(254, 226, 226, 0.95));
  color: #991b1b !important;
  box-shadow: inset 0 -1px 0 rgba(153, 27, 27, 0.15);
}

/* ProseMirror cell selection highlight (editor only) */
.ProseMirror .selectedCell {
  outline: 2px solid rgba(20, 83, 45, 0.35);
  outline-offset: -2px;
}

/* ============================================================
   EMBED BLOCK — External content embed
============================================================ */

/* Embed container */
.tiptap.ProseMirror .nf-embed,
.ProseMirror .nf-embed,
.editor-shared .nf-embed,
.nfb-article .nf-embed {
  margin: var(--nfb-space-xl) 0;
  position: relative;
  /* BFC: later floated sidebar infoboxes won’t paint “under” this block */
  display: flow-root;
}

/*
 * Sidebar infobox (float) + full-width embed:
 * - Preceding embed immediately before a floated infobox must leave lane for the float
 * - Following embeds must clear floats so they stack below instead of colliding
 */
.tiptap.ProseMirror .nf-embed:has(+ .nfb-infobox--pos-sidebar-right),
.ProseMirror .nf-embed:has(+ .nfb-infobox--pos-sidebar-right),
.editor-shared .nf-embed:has(+ .nfb-infobox--pos-sidebar-right),
.nfb-article .nf-embed:has(+ .nfb-infobox--pos-sidebar-right) {
  max-width: calc(100% - 300px);
  margin-left: 0;
  margin-right: auto;
}

.tiptap.ProseMirror .nf-embed:has(+ .nfb-infobox--pos-sidebar-left),
.ProseMirror .nf-embed:has(+ .nfb-infobox--pos-sidebar-left),
.editor-shared .nf-embed:has(+ .nfb-infobox--pos-sidebar-left),
.nfb-article .nf-embed:has(+ .nfb-infobox--pos-sidebar-left) {
  max-width: calc(100% - 300px);
  margin-left: auto;
  margin-right: 0;
}

.tiptap.ProseMirror .nfb-infobox--pos-sidebar-left ~ .nf-embed,
.ProseMirror .nfb-infobox--pos-sidebar-left ~ .nf-embed,
.editor-shared .nfb-infobox--pos-sidebar-left ~ .nf-embed,
.nfb-article .nfb-infobox--pos-sidebar-left ~ .nf-embed,
.tiptap.ProseMirror .nfb-infobox--pos-sidebar-right ~ .nf-embed,
.ProseMirror .nfb-infobox--pos-sidebar-right ~ .nf-embed,
.editor-shared .nfb-infobox--pos-sidebar-right ~ .nf-embed,
.nfb-article .nfb-infobox--pos-sidebar-right ~ .nf-embed {
  clear: both;
}

/* Responsive wrapper for iframe embeds */
.tiptap.ProseMirror .nf-embed .embed-responsive,
.ProseMirror .nf-embed .embed-responsive,
.editor-shared .nf-embed .embed-responsive,
.nfb-article .nf-embed .embed-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 default */
  height: 0;
  overflow: hidden;
  border-radius: var(--nfb-radius-md);
  background: #000;
}

.tiptap.ProseMirror .nf-embed .embed-responsive[style*="aspect-ratio: 4:3"],
.ProseMirror .nf-embed .embed-responsive[style*="aspect-ratio: 4:3"],
.editor-shared .nf-embed .embed-responsive[style*="aspect-ratio: 4:3"],
.nfb-article .nf-embed .embed-responsive[style*="aspect-ratio: 4:3"] {
  padding-bottom: 75%; /* 4:3 */
}

.tiptap.ProseMirror .nf-embed .embed-responsive[style*="aspect-ratio: auto"],
.ProseMirror .nf-embed .embed-responsive[style*="aspect-ratio: auto"],
.editor-shared .nf-embed .embed-responsive[style*="aspect-ratio: auto"],
.nfb-article .nf-embed .embed-responsive[style*="aspect-ratio: auto"] {
  padding-bottom: 0;
  height: auto;
}

/* Iframe */
/* YouTube Fallback */
.tiptap.ProseMirror .nf-embed .embed-video-fallback,
.tiptap.ProseMirror .nf-embed .embed-youtube-fallback,
.ProseMirror .nf-embed .embed-video-fallback,
.ProseMirror .nf-embed .embed-youtube-fallback,
.editor-shared .nf-embed .embed-video-fallback,
.editor-shared .nf-embed .embed-youtube-fallback,
.nfb-article .nf-embed .embed-video-fallback,
.nfb-article .nf-embed .embed-youtube-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: white;
  text-align: center;
  padding: 2rem;
  border-radius: 8px;
  z-index: 1;
}

.tiptap.ProseMirror .nf-embed .embed-video-fallback a,
.tiptap.ProseMirror .nf-embed .embed-youtube-fallback a,
.ProseMirror .nf-embed .embed-video-fallback a,
.ProseMirror .nf-embed .embed-youtube-fallback a,
.editor-shared .nf-embed .embed-video-fallback a,
.editor-shared .nf-embed .embed-youtube-fallback a,
.nfb-article .nf-embed .embed-video-fallback a,
.nfb-article .nf-embed .embed-youtube-fallback a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #ff0000;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  margin-top: 0.5rem;
  transition: background 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-video-fallback a:hover,
.tiptap.ProseMirror .nf-embed .embed-youtube-fallback a:hover,
.ProseMirror .nf-embed .embed-video-fallback a:hover,
.ProseMirror .nf-embed .embed-youtube-fallback a:hover,
.editor-shared .nf-embed .embed-video-fallback a:hover,
.editor-shared .nf-embed .embed-youtube-fallback a:hover,
.nfb-article .nf-embed .embed-video-fallback a:hover,
.nfb-article .nf-embed .embed-youtube-fallback a:hover {
  background: #cc0000;
}

/* Google Docs Fallback */
.tiptap.ProseMirror .nf-embed .embed-google-docs-fallback,
.ProseMirror .nf-embed .embed-google-docs-fallback,
.editor-shared .nf-embed .embed-google-docs-fallback,
.nfb-article .nf-embed .embed-google-docs-fallback,
.nf-embed .embed-google-docs-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(66, 133, 244, 0.2);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}

.tiptap.ProseMirror .nf-embed .embed-google-docs-fallback a,
.ProseMirror .nf-embed .embed-google-docs-fallback a,
.editor-shared .nf-embed .embed-google-docs-fallback a,
.nfb-article .nf-embed .embed-google-docs-fallback a,
.nf-embed .embed-google-docs-fallback a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #4285f4;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: background 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-google-docs-fallback a:hover,
.ProseMirror .nf-embed .embed-google-docs-fallback a:hover,
.editor-shared .nf-embed .embed-google-docs-fallback a:hover,
.nfb-article .nf-embed .embed-google-docs-fallback a:hover,
.nf-embed .embed-google-docs-fallback a:hover {
  background: #3367d6;
}

.tiptap.ProseMirror .nf-embed .embed-iframe,
.ProseMirror .nf-embed .embed-iframe,
.editor-shared .nf-embed .embed-iframe,
.nfb-article .nf-embed .embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Embed metadata (below iframe) */
.tiptap.ProseMirror .nf-embed .embed-meta,
.ProseMirror .nf-embed .embed-meta,
.editor-shared .nf-embed .embed-meta {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.875rem;
  color: #6b7280;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  line-height: 1.5;
}

.nfb-article .nf-embed .embed-meta {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.8125rem;
  color: #6b7280;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  line-height: 1.5;
}

.tiptap.ProseMirror .nf-embed .embed-open-link,
.ProseMirror .nf-embed .embed-open-link,
.editor-shared .nf-embed .embed-open-link {
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: text-decoration 0.2s;
}

.nfb-article .nf-embed .embed-open-link {
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: text-decoration 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-open-link:hover,
.ProseMirror .nf-embed .embed-open-link:hover,
.editor-shared .nf-embed .embed-open-link:hover,
.nfb-article .nf-embed .embed-open-link:hover {
  text-decoration: underline;
}

.tiptap.ProseMirror .nf-embed .embed-meta-separator,
.ProseMirror .nf-embed .embed-meta-separator,
.editor-shared .nf-embed .embed-meta-separator,
.nfb-article .nf-embed .embed-meta-separator {
  color: #e5e7eb;
  margin: 0;
  user-select: none;
}

.tiptap.ProseMirror .nf-embed .embed-meta-label,
.ProseMirror .nf-embed .embed-meta-label,
.editor-shared .nf-embed .embed-meta-label {
  font-size: 0.875rem;
  color: #9ca3af;
  font-weight: 500;
}

.nfb-article .nf-embed .embed-meta-label {
  font-size: 0.8125rem;
  color: #9ca3af;
  font-weight: 500;
}

.tiptap.ProseMirror .nf-embed .embed-display-title,
.ProseMirror .nf-embed .embed-display-title,
.editor-shared .nf-embed .embed-display-title {
  font-weight: 600;
  color: #111827;
  font-size: 0.875rem;
}

.nfb-article .nf-embed .embed-display-title {
  font-weight: 600;
  color: #111827;
  font-size: 0.8125rem;
}

.tiptap.ProseMirror .nf-embed .embed-source-name,
.ProseMirror .nf-embed .embed-source-name,
.editor-shared .nf-embed .embed-source-name {
  font-size: 0.875rem;
  color: #6b7280;
}

.nfb-article .nf-embed .embed-source-name {
  font-size: 0.8125rem;
  color: #6b7280;
}

/* Standalone selectors for article preview (in case .nfb-article wrapper is not used) */
.nf-embed .embed-meta {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.8125rem;
  color: #6b7280;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  line-height: 1.5;
}

.nf-embed .embed-open-link {
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: text-decoration 0.2s;
}

.nf-embed .embed-open-link:hover {
  text-decoration: underline;
}

.nf-embed .embed-meta-separator {
  color: #e5e7eb;
  margin: 0;
  user-select: none;
}

.nf-embed .embed-meta-label {
  font-size: 0.8125rem;
  color: #9ca3af;
  font-weight: 500;
}

.nf-embed .embed-display-title {
  font-weight: 600;
  color: #111827;
  font-size: 0.8125rem;
}

.nf-embed .embed-source-name {
  font-size: 0.8125rem;
  color: #6b7280;
}

/* Standalone selectors for Map Card (in case .nfb-article wrapper is not used) */
.nf-embed .embed-map-card {
  border-color: rgba(66, 133, 244, 0.2);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.nf-embed .embed-map-card:hover {
  border-color: rgba(66, 133, 244, 0.4);
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
}

.nf-embed .embed-map-label {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nf-embed .embed-map-button {
  display: inline-block !important;
  padding: 0.5rem 1rem !important;
  background: #4285f4 !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  width: fit-content !important;
  transition: background 0.2s;
  margin-top: 0 !important;
}

.nf-embed .embed-map-card .embed-link-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nf-embed .embed-map-card:hover .embed-map-button {
  background: #3367d6;
}

/* Link preview card */
.tiptap.ProseMirror .nf-embed .embed-link-card,
.ProseMirror .nf-embed .embed-link-card,
.editor-shared .nf-embed .embed-link-card,
.nfb-article .nf-embed .embed-link-card {
  padding: var(--nfb-space-lg);
  border: var(--nfb-border-width-thin) var(--nfb-border-style-solid) var(--nfb-border);
  border-radius: var(--nfb-radius-lg);
  background: var(--nfb-bg);
  transition: all var(--nfb-transition-fast);
}

.tiptap.ProseMirror .nf-embed .embed-link-card:hover,
.ProseMirror .nf-embed .embed-link-card:hover,
.editor-shared .nf-embed .embed-link-card:hover,
.nfb-article .nf-embed .embed-link-card:hover {
  border-color: var(--nfb-border-dark);
  box-shadow: var(--nfb-shadow-sm);
}

/* Link Card - specific styles for external links (provider === 'link') */
.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-label,
.ProseMirror .nf-embed .embed-link-card .embed-link-label,
.editor-shared .nf-embed .embed-link-card .embed-link-label,
.nfb-article .nf-embed .embed-link-card .embed-link-label,
.nf-embed .embed-link-card .embed-link-label {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-host,
.ProseMirror .nf-embed .embed-link-card .embed-link-host,
.editor-shared .nf-embed .embed-link-card .embed-link-host,
.nfb-article .nf-embed .embed-link-card .embed-link-host,
.nf-embed .embed-link-card .embed-link-host {
  /* No flex on parent - let inline-flex span handle alignment */
}

.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-host img,
.ProseMirror .nf-embed .embed-link-card .embed-link-host img,
.editor-shared .nf-embed .embed-link-card .embed-link-host img,
.nfb-article .nf-embed .embed-link-card .embed-link-host img,
.nf-embed .embed-link-card .embed-link-host img {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-host,
.ProseMirror .nf-embed .embed-link-card .embed-link-host,
.editor-shared .nf-embed .embed-link-card .embed-link-host,
.nfb-article .nf-embed .embed-link-card .embed-link-host,
.nf-embed .embed-link-card .embed-link-host {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 4px;
  color: #1f2937;
  text-align: left !important;
}

.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-url,
.ProseMirror .nf-embed .embed-link-card .embed-link-url,
.editor-shared .nf-embed .embed-link-card .embed-link-url,
.nfb-article .nf-embed .embed-link-card .embed-link-url,
.nf-embed .embed-link-card .embed-link-url {
  font-size: 13px;
  opacity: 0.75;
  word-break: break-word;
  margin-bottom: 12px;
  color: #6b7280;
}

.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-button,
.ProseMirror .nf-embed .embed-link-card .embed-link-button,
.editor-shared .nf-embed .embed-link-card .embed-link-button,
.nfb-article .nf-embed .embed-link-card .embed-link-button,
.nf-embed .embed-link-card .embed-link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: background 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-button:hover,
.ProseMirror .nf-embed .embed-link-card .embed-link-button:hover,
.editor-shared .nf-embed .embed-link-card .embed-link-button:hover,
.nfb-article .nf-embed .embed-link-card .embed-link-button:hover,
.nf-embed .embed-link-card .embed-link-button:hover {
  background: #333;
}

/* Link Card Actions Container */
.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-actions,
.ProseMirror .nf-embed .embed-link-card .embed-link-actions,
.editor-shared .nf-embed .embed-link-card .embed-link-actions,
.nfb-article .nf-embed .embed-link-card .embed-link-actions,
.nf-embed .embed-link-card .embed-link-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Link Card Copy Button (Ghost style) */
.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-copy,
.ProseMirror .nf-embed .embed-link-card .embed-link-copy,
.editor-shared .nf-embed .embed-link-card .embed-link-copy,
.nfb-article .nf-embed .embed-link-card .embed-link-copy,
.nf-embed .embed-link-card .embed-link-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #ddd;
  color: #555;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-link-card .embed-link-copy:hover,
.ProseMirror .nf-embed .embed-link-card .embed-link-copy:hover,
.editor-shared .nf-embed .embed-link-card .embed-link-copy:hover,
.nfb-article .nf-embed .embed-link-card .embed-link-copy:hover,
.nf-embed .embed-link-card .embed-link-copy:hover {
  border-color: #999;
  color: #333;
}

/* Link Card hover effect (only for provider === 'link', not maps) */
.tiptap.ProseMirror .nf-embed[data-provider="link"] .embed-link-card:hover,
.ProseMirror .nf-embed[data-provider="link"] .embed-link-card:hover,
.editor-shared .nf-embed[data-provider="link"] .embed-link-card:hover,
.nfb-article .nf-embed[data-provider="link"] .embed-link-card:hover,
.nf-embed[data-provider="link"] .embed-link-card:hover {
  border-color: #111 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.tiptap.ProseMirror .nf-embed .embed-link,
.ProseMirror .nf-embed .embed-link,
.editor-shared .nf-embed .embed-link,
.nfb-article .nf-embed .embed-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tiptap.ProseMirror .nf-embed .embed-link-content,
.ProseMirror .nf-embed .embed-link-content,
.editor-shared .nf-embed .embed-link-content,
.nfb-article .nf-embed .embed-link-content {
  display: flex;
  flex-direction: column;
  gap: var(--nfb-space-xs);
}

.tiptap.ProseMirror .nf-embed .embed-link-domain,
.ProseMirror .nf-embed .embed-link-domain,
.editor-shared .nf-embed .embed-link-domain,
.nfb-article .nf-embed .embed-link-domain {
  font-weight: var(--nfb-font-weight-semibold);
  color: var(--nfb-text);
  font-size: var(--nfb-font-size-base);
}

.tiptap.ProseMirror .nf-embed .embed-link-url,
.ProseMirror .nf-embed .embed-link-url,
.editor-shared .nf-embed .embed-link-url,
.nfb-article .nf-embed .embed-link-url {
  font-size: var(--nfb-font-size-sm);
  color: var(--nfb-text-muted);
  word-break: break-all;
}

/* Map Card - V1.1: Special styling for Google Maps */
.tiptap.ProseMirror .nf-embed .embed-map-card,
.ProseMirror .nf-embed .embed-map-card,
.editor-shared .nf-embed .embed-map-card,
.nfb-article .nf-embed .embed-map-card {
  border-color: rgba(66, 133, 244, 0.2);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.tiptap.ProseMirror .nf-embed .embed-map-card:hover,
.ProseMirror .nf-embed .embed-map-card:hover,
.editor-shared .nf-embed .embed-map-card:hover,
.nfb-article .nf-embed .embed-map-card:hover {
  border-color: rgba(66, 133, 244, 0.4);
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
}

.tiptap.ProseMirror .nf-embed .embed-map-label,
.ProseMirror .nf-embed .embed-map-label,
.editor-shared .nf-embed .embed-map-label,
.nfb-article .nf-embed .embed-map-label {
  font-weight: var(--nfb-font-weight-semibold);
  color: var(--nfb-text);
  font-size: var(--nfb-font-size-base);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tiptap.ProseMirror .nf-embed .embed-map-button,
.ProseMirror .nf-embed .embed-map-button,
.editor-shared .nf-embed .embed-map-button,
.nfb-article .nf-embed .embed-map-button {
  display: inline-block !important;
  padding: 0.5rem 1rem !important;
  background: #4285f4 !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: var(--nfb-font-size-sm) !important;
  width: fit-content !important;
  transition: background 0.2s;
  margin-top: 0 !important;
}

/* Ensure embed-link-content has proper spacing for Map Card */
.tiptap.ProseMirror .nf-embed .embed-map-card .embed-link-content,
.ProseMirror .nf-embed .embed-map-card .embed-link-content,
.editor-shared .nf-embed .embed-map-card .embed-link-content,
.nfb-article .nf-embed .embed-map-card .embed-link-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tiptap.ProseMirror .nf-embed .embed-map-card:hover .embed-map-button,
.ProseMirror .nf-embed .embed-map-card:hover .embed-map-button,
.editor-shared .nf-embed .embed-map-card:hover .embed-map-button,
.nfb-article .nf-embed .embed-map-card:hover .embed-map-button {
  background: #3367d6 !important;
}

/* Additional selectors for article preview (higher specificity) */
.nfb-article .nf-embed .embed-map-card .embed-link .embed-map-button,
.nfb-article .nf-embed .embed-map-button,
article .nf-embed .embed-map-button,
[class*="article"] .nf-embed .embed-map-button {
  display: inline-block !important;
  padding: 0.5rem 1rem !important;
  background: #4285f4 !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  width: fit-content !important;
  margin-top: 0 !important;
}

/* Document Card - V1.1: Special styling for PDF documents */
.tiptap.ProseMirror .nf-embed .embed-document-card,
.ProseMirror .nf-embed .embed-document-card,
.editor-shared .nf-embed .embed-document-card,
.nfb-article .nf-embed .embed-document-card {
  border-color: rgba(220, 38, 38, 0.2);
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-document-card:hover,
.ProseMirror .nf-embed .embed-document-card:hover,
.editor-shared .nf-embed .embed-document-card:hover,
.nfb-article .nf-embed .embed-document-card:hover {
  border-color: #e53935;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nf-embed .embed-document-card:hover,
.ProseMirror .nf-embed .embed-document-card:hover,
.editor-shared .nf-embed .embed-document-card:hover,
.nfb-article .nf-embed .embed-document-card:hover {
  border-color: #e53935;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-document-label,
.ProseMirror .nf-embed .embed-document-label,
.editor-shared .nf-embed .embed-document-label,
.nfb-article .nf-embed .embed-document-label {
  font-weight: var(--nfb-font-weight-semibold);
  color: var(--nfb-text);
  font-size: var(--nfb-font-size-base);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.tiptap.ProseMirror .nf-embed .embed-document-filename,
.ProseMirror .nf-embed .embed-document-filename,
.editor-shared .nf-embed .embed-document-filename,
.nfb-article .nf-embed .embed-document-filename {
  font-size: var(--nfb-font-size-sm);
  color: var(--nfb-text-muted);
  word-break: break-word;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tiptap.ProseMirror .nf-embed .embed-document-badge,
.ProseMirror .nf-embed .embed-document-badge,
.editor-shared .nf-embed .embed-document-badge,
.nfb-article .nf-embed .embed-document-badge {
  background: #e53935;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.tiptap.ProseMirror .nf-embed .embed-document-meta,
.ProseMirror .nf-embed .embed-document-meta,
.editor-shared .nf-embed .embed-document-meta,
.nfb-article .nf-embed .embed-document-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: var(--nfb-font-size-sm);
  color: var(--nfb-text-muted);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.tiptap.ProseMirror .nf-embed .embed-document-meta-item,
.ProseMirror .nf-embed .embed-document-meta-item,
.editor-shared .nf-embed .embed-document-meta-item,
.nfb-article .nf-embed .embed-document-meta-item {
  display: inline-flex;
  align-items: center;
}

.tiptap.ProseMirror .nf-embed .embed-document-meta-label,
.ProseMirror .nf-embed .embed-document-meta-label,
.editor-shared .nf-embed .embed-document-meta-label,
.nfb-article .nf-embed .embed-document-meta-label {
  font-weight: 500;
  color: var(--nfb-text);
  margin-right: 0.25rem;
}

.tiptap.ProseMirror .nf-embed .embed-document-meta-separator,
.ProseMirror .nf-embed .embed-document-meta-separator,
.editor-shared .nf-embed .embed-document-meta-separator,
.nfb-article .nf-embed .embed-document-meta-separator {
  color: #d1d5db;
  margin: 0 0.25rem;
}

.tiptap.ProseMirror .nf-embed .embed-document-actions,
.ProseMirror .nf-embed .embed-document-actions,
.editor-shared .nf-embed .embed-document-actions,
.nfb-article .nf-embed .embed-document-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0;
}

.tiptap.ProseMirror .nf-embed .embed-document-button,
.ProseMirror .nf-embed .embed-document-button,
.editor-shared .nf-embed .embed-document-button,
.nfb-article .nf-embed .embed-document-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 6px;
  font-weight: 500;
  font-size: var(--nfb-font-size-sm);
  text-decoration: none;
  transition: background 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-document-view,
.ProseMirror .nf-embed .embed-document-view,
.editor-shared .nf-embed .embed-document-view,
.nfb-article .nf-embed .embed-document-view {
  background: #dc2626 !important;
}

.tiptap.ProseMirror .nf-embed .embed-document-view:hover,
.ProseMirror .nf-embed .embed-document-view:hover,
.editor-shared .nf-embed .embed-document-view:hover,
.nfb-article .nf-embed .embed-document-view:hover {
  background: #b91c1c !important;
}

.tiptap.ProseMirror .nf-embed .embed-document-download,
.ProseMirror .nf-embed .embed-document-download,
.editor-shared .nf-embed .embed-document-download,
.nfb-article .nf-embed .embed-document-download {
  background: #6b7280 !important;
}

.tiptap.ProseMirror .nf-embed .embed-document-download:hover,
.ProseMirror .nf-embed .embed-document-download:hover,
.editor-shared .nf-embed .embed-document-download:hover,
.nfb-article .nf-embed .embed-document-download:hover {
  background: #4b5563 !important;
}

.tiptap.ProseMirror .nf-embed .embed-document-card .embed-link-content,
.ProseMirror .nf-embed .embed-document-card .embed-link-content,
.editor-shared .nf-embed .embed-document-card .embed-link-content,
.nfb-article .nf-embed .embed-document-card .embed-link-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Standalone selectors for Document Card (in case .nfb-article wrapper is not used) */
.nf-embed .embed-document-card {
  border-color: rgba(220, 38, 38, 0.2);
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.nf-embed .embed-document-card:hover {
  border-color: #e53935 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nf-embed .embed-document-label {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nf-embed .embed-document-filename {
  font-size: 0.875rem;
  color: #6b7280;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nf-embed .embed-document-badge {
  background: #e53935;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.nf-embed .embed-document-card:hover {
  border-color: #e53935 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Google Docs Card Styles */
.tiptap.ProseMirror .nf-embed .embed-google-doc-card,
.ProseMirror .nf-embed .embed-google-doc-card,
.editor-shared .nf-embed .embed-google-doc-card,
.nfb-article .nf-embed .embed-google-doc-card {
  border-color: rgba(66, 133, 244, 0.2);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tiptap.ProseMirror .nf-embed .embed-google-doc-card:hover,
.ProseMirror .nf-embed .embed-google-doc-card:hover,
.editor-shared .nf-embed .embed-google-doc-card:hover,
.nfb-article .nf-embed .embed-google-doc-card:hover {
  border-color: #4285f4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Standalone selectors for Google Docs Card */
.nf-embed .embed-google-doc-card {
  border-color: rgba(66, 133, 244, 0.2);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.nf-embed .embed-google-doc-card:hover {
  border-color: #4285f4 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nf-embed .embed-document-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 0.25rem;
}

.nf-embed .embed-document-meta-item {
  display: inline-flex;
  align-items: center;
}

.nf-embed .embed-document-meta-label {
  font-weight: 500;
  color: #374151;
  margin-right: 0.25rem;
}

.nf-embed .embed-document-meta-separator {
  color: #d1d5db;
  margin: 0 0.25rem;
}

.nf-embed .embed-document-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0;
}

.nf-embed .embed-document-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.2s;
}

.nf-embed .embed-document-view {
  background: #dc2626 !important;
  color: white !important;
}

.nf-embed .embed-document-view:hover {
  background: #b91c1c !important;
}

.nf-embed .embed-document-download {
  background: #6b7280 !important;
  color: white !important;
}

.nf-embed .embed-document-download:hover {
  background: #4b5563 !important;
}

.nf-embed .embed-document-card .embed-link-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Additional selectors for article preview (higher specificity) */
.nfb-article .nf-embed .embed-document-card,
article .nf-embed .embed-document-card,
[class*="article"] .nf-embed .embed-document-card {
  border-color: rgba(220, 38, 38, 0.2) !important;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  padding: 1rem !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
  border-radius: 8px !important;
}

.nfb-article .nf-embed .embed-document-card:hover,
article .nf-embed .embed-document-card:hover,
[class*="article"] .nf-embed .embed-document-card:hover {
  border-color: rgba(220, 38, 38, 0.4) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15) !important;
}

.nfb-article .nf-embed .embed-document-button,
article .nf-embed .embed-document-button,
[class*="article"] .nf-embed .embed-document-button {
  display: inline-block !important;
  padding: 0.5rem 1rem !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}

.nfb-article .nf-embed .embed-document-view,
article .nf-embed .embed-document-view,
[class*="article"] .nf-embed .embed-document-view {
  background: #dc2626 !important;
  color: white !important;
}

.nfb-article .nf-embed .embed-document-view:hover,
article .nf-embed .embed-document-view:hover,
[class*="article"] .nf-embed .embed-document-view:hover {
  background: #b91c1c !important;
}

.nfb-article .nf-embed .embed-document-download,
article .nf-embed .embed-document-download,
[class*="article"] .nf-embed .embed-document-download {
  background: #6b7280 !important;
  color: white !important;
}

.nfb-article .nf-embed .embed-document-download:hover,
article .nf-embed .embed-document-download:hover,
[class*="article"] .nf-embed .embed-document-download:hover {
  background: #4b5563 !important;
}

.nfb-article .nf-embed .embed-document-meta,
article .nf-embed .embed-document-meta,
[class*="article"] .nf-embed .embed-document-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  margin-top: 0.25rem !important;
}

.nfb-article .nf-embed .embed-document-meta-label,
article .nf-embed .embed-document-meta-label,
[class*="article"] .nf-embed .embed-document-meta-label {
  font-weight: 500 !important;
  color: #374151 !important;
  margin-right: 0.25rem !important;
}

.nfb-article .nf-embed .embed-document-meta-separator,
article .nf-embed .embed-document-meta-separator,
[class*="article"] .nf-embed .embed-document-meta-separator {
  color: #d1d5db !important;
  margin: 0 0.25rem !important;
}

/* Alignment */
.tiptap.ProseMirror .nf-embed[data-align="left"],
.ProseMirror .nf-embed[data-align="left"],
.editor-shared .nf-embed[data-align="left"],
.nfb-article .nf-embed[data-align="left"] {
  margin-left: 0;
  margin-right: auto;
  max-width: 50%;
}

.tiptap.ProseMirror .nf-embed[data-align="right"],
.ProseMirror .nf-embed[data-align="right"],
.editor-shared .nf-embed[data-align="right"],
.nfb-article .nf-embed[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
  max-width: 50%;
}

.tiptap.ProseMirror .nf-embed[data-align="center"],
.ProseMirror .nf-embed[data-align="center"],
.editor-shared .nf-embed[data-align="center"],
.nfb-article .nf-embed[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
}

/* YouTube embed fix for article preview - JavaScript will add origin parameter */
/* This script runs when the page loads to fix YouTube embeds in article preview */

/* Global JavaScript fix for YouTube embeds in article preview */
/* This will be executed when the page loads */

/* ============================================================
   IMAGE BLOCK — Edit modal, alignment, width, optional link
============================================================ */

/* Header (Edit, Delete) */
.nfb-image-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.nfb-image-block__title {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #15803d;
}

/* Toolbar (Left | Center | Right) — pill grupa kao Image modal */
.nfb-image-block__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  padding: 0.4rem 0.45rem;
  border-radius: 10px;
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(21, 128, 61, 0.12);
}

.nfb-image-block__btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.38rem 0.75rem;
  border: 1.5px solid rgba(21, 128, 61, 0.38);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.nfb-image-block__btn:hover {
  background: rgba(22, 163, 74, 0.08);
  border-color: #15803d;
  color: #14532d;
}

.nfb-image-block__btn--active {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border-color: rgba(21, 128, 61, 0.55);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.nfb-image-block__btn--active:hover {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  border-color: rgba(21, 128, 61, 0.65);
}

.nfb-image-block__edit-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #15803d;
  background: #fff;
  border: 1.5px solid rgba(21, 128, 61, 0.45);
  border-radius: 999px;
}

.nfb-image-block__edit-btn:hover {
  background: rgba(22, 163, 74, 0.08);
  border-color: #15803d;
}

/* Nudge up/down buttons (fine alignment, like infobox) */
.nfb-image-block__nudge-up-btn,
.nfb-image-block__nudge-down-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1.5px solid rgba(21, 128, 61, 0.35);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.nfb-image-block__nudge-up-btn:hover,
.nfb-image-block__nudge-down-btn:hover {
  background: rgba(22, 163, 74, 0.08);
  border-color: #15803d;
  color: #14532d;
}

/* Width (modal) — % na spoljašnjem bloku = % kolone; slika puni slot (izbjegava % na img u fit-content body) */
.nfb-image-block[data-width="25%"] {
  width: 25%;
  max-width: 100%;
}
.nfb-image-block[data-width="33%"] {
  width: 33.333%;
  max-width: 100%;
}
.nfb-image-block[data-width="50%"] {
  width: 50%;
  max-width: 100%;
}
.nfb-image-block[data-width="66%"] {
  width: 66.666%;
  max-width: 100%;
}
.nfb-image-block[data-width="75%"] {
  width: 75%;
  max-width: 100%;
}
.nfb-image-block[data-width="100%"] {
  width: 100%;
  max-width: 100%;
}

.nfb-image-block[data-width] .nfb-image-block__img,
.nfb-image-block[data-width] .nfb-image-block__body img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Base: responsive, border-radius, shadow */
.tiptap.ProseMirror .nfb-image-block__img,
.ProseMirror .nfb-image-block__img,
.editor-shared .nfb-image-block__img,
.nfb-article .nfb-image-block__img,
article .nfb-image-block__img,
[class*="article"] .nfb-image-block__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Body — kolona ispod toolbara; slika + caption poravnati (caption centrirano ispod slike) */
.nfb-image-block__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.nfb-image-block__body > a {
  display: block;
  align-self: stretch;
  max-width: 100%;
}

/* ============================================================
   FLOAT-BASED TEXT WRAP (magazine style)
   Left/right: text wraps around image. Center: block in middle.
============================================================ */

/* shape-margin: breathing room between image and text (magazine feel) */
.tiptap.ProseMirror .nfb-image-block.align-left,
.ProseMirror .nfb-image-block.align-left,
.editor-shared .nfb-image-block.align-left,
.nfb-article .nfb-image-block.align-left,
.tiptap.ProseMirror .nfb-image-block[data-align="left"],
.nfb-article .nfb-image-block[data-align="left"],
.tiptap.ProseMirror .nfb-image-block.align-right,
.ProseMirror .nfb-image-block.align-right,
.editor-shared .nfb-image-block.align-right,
.nfb-article .nfb-image-block.align-right,
.tiptap.ProseMirror .nfb-image-block[data-align="right"],
.nfb-article .nfb-image-block[data-align="right"] {
  shape-outside: margin-box;
  shape-margin: 12px;
}

/* Left: float left, text wraps on the right (width% uz max širinu zbog magazine flow) */
.tiptap.ProseMirror .nfb-image-block.align-left,
.ProseMirror .nfb-image-block.align-left,
.editor-shared .nfb-image-block.align-left,
.nfb-article .nfb-image-block.align-left,
article .nfb-image-block.align-left,
[class*="article"] .nfb-image-block.align-left,
.tiptap.ProseMirror .nfb-image-block[data-align="left"],
.ProseMirror .nfb-image-block[data-align="left"],
.nfb-article .nfb-image-block[data-align="left"] {
  float: left;
  margin: 0.3rem 2rem 0.5rem 0;
  max-width: min(320px, 100%);
}

/* Right: float right */
.tiptap.ProseMirror .nfb-image-block.align-right,
.ProseMirror .nfb-image-block.align-right,
.editor-shared .nfb-image-block.align-right,
.nfb-article .nfb-image-block.align-right,
article .nfb-image-block.align-right,
[class*="article"] .nfb-image-block.align-right,
.tiptap.ProseMirror .nfb-image-block[data-align="right"],
.ProseMirror .nfb-image-block[data-align="right"],
.nfb-article .nfb-image-block[data-align="right"] {
  float: right;
  margin: 0.3rem 0 0.5rem 2rem;
  max-width: min(320px, 100%);
}

/* Center: no float, block in middle */
.tiptap.ProseMirror .nfb-image-block.align-center,
.ProseMirror .nfb-image-block.align-center,
.editor-shared .nfb-image-block.align-center,
.nfb-article .nfb-image-block.align-center,
article .nfb-image-block.align-center,
[class*="article"] .nfb-image-block.align-center,
.tiptap.ProseMirror .nfb-image-block[data-align="center"],
.ProseMirror .nfb-image-block[data-align="center"],
.nfb-article .nfb-image-block[data-align="center"],
.tiptap.ProseMirror .nfb-image-block:not([data-align]),
.ProseMirror .nfb-image-block:not([data-align]),
.nfb-article .nfb-image-block:not([data-align]) {
  float: none;
  margin: 2rem auto;
  max-width: 100%;
}

/* Body alignment (for center: center the content) */
.nfb-image-block.align-center .nfb-image-block__body,
.nfb-image-block[data-align="center"] .nfb-image-block__body,
.nfb-image-block:not([data-align]) .nfb-image-block__body {
  margin-left: auto;
  margin-right: auto;
}

/* Magazine trick: small gap so text doesn't stick to floated image */
.tiptap.ProseMirror .nfb-image-block.align-left + p,
.ProseMirror .nfb-image-block.align-left + p,
.editor-shared .nfb-image-block.align-left + p,
.nfb-article .nfb-image-block.align-left + p,
article .nfb-image-block.align-left + p,
.tiptap.ProseMirror .nfb-image-block[data-align="left"] + p,
.ProseMirror .nfb-image-block[data-align="left"] + p,
.nfb-article .nfb-image-block[data-align="left"] + p,
.tiptap.ProseMirror .nfb-image-block.align-right + p,
.ProseMirror .nfb-image-block.align-right + p,
.editor-shared .nfb-image-block.align-right + p,
.nfb-article .nfb-image-block.align-right + p,
article .nfb-image-block.align-right + p,
.tiptap.ProseMirror .nfb-image-block[data-align="right"] + p,
.ProseMirror .nfb-image-block[data-align="right"] + p,
.nfb-article .nfb-image-block[data-align="right"] + p {
  margin-top: 0.25rem;
}

/* Alt + Link caption (editor and preview) — editorial style */
.nfb-image-block__caption {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.4rem;
  line-height: 1.4;
  max-width: 100%;
  font-style: italic;
}

.nfb-image-block__caption-sep {
  opacity: 0.6;
  margin: 0 0.25em;
}

.nfb-image-block__caption-link-a {
  color: #047857;
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 120, 87, 0.35);
  transition: color 0.15s, border-color 0.15s;
}

.nfb-image-block__caption-link-a:hover {
  color: #065f46;
  border-bottom-color: #065f46;
}

/* Caption uvijek pod centrom slike (ne vezati za left/right kolone) */
.nfb-image-block .nfb-image-block__caption {
  text-align: center;
  align-self: stretch;
}

/* Placeholder */
.nfb-image-block__placeholder {
  padding: 2rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

/* Mobile: clear float, center and full width for readability */
@media (max-width: 768px) {
  .nfb-image-block.align-left,
  .nfb-image-block.align-right,
  .nfb-image-block[data-align="left"],
  .nfb-image-block[data-align="right"] {
    float: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .nfb-image-block__body {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   GALLERY BLOCK — Gallery 2, Gallery 3, Masonry
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-gallery,
.ProseMirror .nfb-gallery,
.editor-shared .nfb-gallery {
  margin: 2rem 0;
  position: relative;
}

.nfb-gallery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.nfb-gallery__title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.nfb-gallery__inner {
  display: grid;
  align-items: start;
  gap: 12px;
  border-radius: 8px;
  overflow: hidden;
}

/* Gallery 2: two columns */
.nfb-gallery--two .nfb-gallery__inner {
  grid-template-columns: 1fr 1fr;
}

/* Gallery 3: three columns */
.nfb-gallery--three .nfb-gallery__inner {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Masonry: CSS columns (Pinterest-style) */
.nfb-gallery--masonry .nfb-gallery__inner {
  display: block;
  column-count: 3;
  column-gap: 1rem;
}

.nfb-gallery--masonry .nfb-gallery__item {
  break-inside: avoid;
  margin-bottom: 1rem;
  page-break-inside: avoid;
}

.nfb-gallery--masonry .nfb-gallery__item .nfb-gallery__img {
  height: auto;
  width: 100%;
}

.nfb-gallery__item {
  position: relative;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nfb-gallery__item .nfb-gallery__img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.nfb-gallery__item .nfb-gallery__img:hover {
  transform: scale(1.02);
}

.nfb-gallery__item--empty {
  border: 2px dashed #e2e8f0;
  color: #94a3b8;
  font-size: 1.5rem;
}

.nfb-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nfb-gallery__caption {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.4rem;
  line-height: 1.4;
  font-style: italic;
  text-align: center;
  text-align-last: center;
  hyphens: none;
  text-justify: auto;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.nfb-gallery__placeholder {
  padding: 2rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .nfb-gallery--two .nfb-gallery__inner,
  .nfb-gallery--three .nfb-gallery__inner {
    grid-template-columns: 1fr;
  }

  .nfb-gallery--masonry .nfb-gallery__inner {
    column-count: 1;
  }

  .nfb-gallery__item .nfb-gallery__img {
    height: 220px;
  }

  .nfb-gallery--masonry .nfb-gallery__item .nfb-gallery__img {
    height: auto;
  }
}

/* ============================================================
   CODE BLOCK — Editor & Preview
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-code-block,
.ProseMirror .nfb-code-block,
.editor-shared .nfb-code-block {
  margin: 2rem 0;
  position: relative;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Preview: no borders (user requested) */
.nfb-article .nfb-code-block {
  margin: 2rem 0;
  position: relative;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-radius: 8px;
  border: none;
}

.nfb-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

/* Preview: no header border */
.nfb-article .nfb-code-block__header {
  border-bottom: none;
}

.nfb-code-block__pre {
  margin: 0;
  padding: 0.75rem 1rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 6px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: 1px solid rgba(51, 65, 85, 0.6);
}

/* Preview: no pre border */
.nfb-article .nfb-code-block__pre {
  border: none;
}

.nfb-code-block__pre code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  color: inherit;
}

/* Preview: title header styling (renderHTML outputs header div when title exists) */
.nfb-article .nfb-code-block__header {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: 600;
  color: #64748b;
}

/* Preview: override inline code border from nfb-content-shared */
.nfb-article .nfb-code-block__pre code {
  border: none;
}

/* ============================================================
   DEV NOTE — Editor-only (not in preview)
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-dev-note,
.ProseMirror .nfb-dev-note,
.editor-shared .nfb-dev-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
}

.nfb-dev-note--note {
  background: #f0f9ff;
  border-color: #7dd3fc;
}

.nfb-dev-note--warning {
  background: #fffbeb;
  border-color: #fcd34d;
}

.nfb-dev-note--todo {
  background: #f0fdf4;
  border-color: #86efac;
}

.nfb-dev-note__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.nfb-dev-note__body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #374151;
}

/* ============================================================
   STAT BLOCKS — Brand marker (NFB)
   Global: top-right corner, editorial signature
   Used by: Stat Block, Opinion Split, future stat types
============================================================ */

.nfb-block-brand {
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* N = coral; F = blue; B = black — corner logo + footer "via NFB" */
.nfb-block-brand__n { color: #e87a61; }
.nfb-block-brand__f { color: #2563eb; }
.nfb-block-brand__b { color: #0a0a0a; }

/* ============================================================
   STAT CARD PNG EXPORT — Identical to article preview
   + subtle corner accent in NFB corner only
   Data first. Design second. Branding third.
   Amir & Mixel — 2025
============================================================ */

.nfb-stat-export-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 28px;
  background: #f8f9fb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Micro highlight line — subtle top edge (FT, Apple, Stripe style) */
.nfb-stat-export-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* Corner accent — discrete brand element in NFB corner (top-right) */
.nfb-stat-export-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: #e87a61; /* coral red — NFB recognizable */
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: 16px;
  pointer-events: none;
}

/* NFB badge stays on top of corner accent */
.nfb-stat-export-wrapper .nfb-block-brand {
  position: relative;
  z-index: 1;
}

/* NFB brand color — dots close to corner #e87a61, slightly softer so numbers lead */
.nfb-stat-export-wrapper .nfb-timeline-stats__dot,
.nfb-stat-export-wrapper .nfb-timeline-stats--neutral .nfb-timeline-stats__dot,
.nfb-stat-export-wrapper .nfb-timeline-stats--accent .nfb-timeline-stats__dot,
.nfb-stat-export-wrapper .nfb-timeline-stats--subtle .nfb-timeline-stats__dot { background: #e0907a !important; }
.nfb-stat-export-wrapper .nfb-timeline-stats__row--last .nfb-timeline-stats__dot,
.nfb-stat-export-wrapper .nfb-timeline-stats--neutral .nfb-timeline-stats__row--last .nfb-timeline-stats__dot,
.nfb-stat-export-wrapper .nfb-timeline-stats--accent .nfb-timeline-stats__row--last .nfb-timeline-stats__dot { background: #e87a61 !important; }
.nfb-stat-export-wrapper .nfb-trend-line__svg { color: #7f8e9c; }
.nfb-stat-export-wrapper .nfb-progress-meter__fill { background: #e87a61; }
.nfb-stat-export-wrapper .nfb-distribution-chart__row--max .nfb-distribution-chart__bar { background: #e87a61; }
.nfb-stat-export-wrapper .nfb-comparison-bars__bar { background: #e87a61; }
.nfb-stat-export-wrapper .nfb-percentage-bar__bar { background: #e87a61; }
.nfb-stat-export-wrapper .nfb-opinion-split__bar { background: #e87a61; }
.nfb-stat-export-wrapper .nfb-ranking-list__rank { background: #e87a61; color: #fff; }
.nfb-stat-export-wrapper .nfb-multi-stat__value { color: #e87a61; }

/* Slightly larger title for social readability */
.nfb-stat-export-wrapper .nfb-timeline-stats__title,
.nfb-stat-export-wrapper .nfb-distribution-chart__title,
.nfb-stat-export-wrapper .nfb-ranking-list__title,
.nfb-stat-export-wrapper .nfb-progress-meter__title,
.nfb-stat-export-wrapper .nfb-multi-stat__title,
.nfb-stat-export-wrapper .nfb-trend-line__title,
.nfb-stat-export-wrapper .nfb-comparison-bars__title,
.nfb-stat-export-wrapper .nfb-percentage-bar__title,
.nfb-stat-export-wrapper .nfb-opinion-split__title,
.nfb-stat-export-wrapper .nfb-stat-block__value {
  font-size: 1.5rem;
}

/* Footer separator — cleaner close */
.nfb-stat-export-wrapper .nfb-timeline-stats__footer,
.nfb-stat-export-wrapper .nfb-distribution-chart__footer,
.nfb-stat-export-wrapper .nfb-ranking-list__footer,
.nfb-stat-export-wrapper .nfb-progress-meter__footer,
.nfb-stat-export-wrapper .nfb-multi-stat__footer,
.nfb-stat-export-wrapper .nfb-trend-line__footer,
.nfb-stat-export-wrapper .nfb-comparison-bars__footer,
.nfb-stat-export-wrapper .nfb-percentage-bar__footer,
.nfb-stat-export-wrapper .nfb-opinion-split__footer,
.nfb-stat-export-wrapper .nfb-stat-block__footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================================
   STAT BLOCKS — Screenshot-ready / Share-ready
   Padding, max-width, card feel for social sharing
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-stat-block,
.ProseMirror .nfb-stat-block,
.editor-shared .nfb-stat-block,
.nfb-article .nfb-stat-block,
.tiptap.ProseMirror .nfb-opinion-split,
.ProseMirror .nfb-opinion-split,
.editor-shared .nfb-opinion-split,
.nfb-article .nfb-opinion-split,
.tiptap.ProseMirror .nfb-percentage-bar,
.ProseMirror .nfb-percentage-bar,
.editor-shared .nfb-percentage-bar,
.nfb-article .nfb-percentage-bar,
.tiptap.ProseMirror .nfb-comparison-bars,
.ProseMirror .nfb-comparison-bars,
.editor-shared .nfb-comparison-bars,
.nfb-article .nfb-comparison-bars,
.tiptap.ProseMirror .nfb-trend-line,
.ProseMirror .nfb-trend-line,
.editor-shared .nfb-trend-line,
.nfb-article .nfb-trend-line,
.tiptap.ProseMirror .nfb-multi-stat,
.ProseMirror .nfb-multi-stat,
.editor-shared .nfb-multi-stat,
.nfb-article .nfb-multi-stat,
.tiptap.ProseMirror .nfb-ranking-list,
.ProseMirror .nfb-ranking-list,
.editor-shared .nfb-ranking-list,
.nfb-article .nfb-ranking-list,
.tiptap.ProseMirror .nfb-progress-meter,
.ProseMirror .nfb-progress-meter,
.editor-shared .nfb-progress-meter,
.nfb-article .nfb-progress-meter,
.tiptap.ProseMirror .nfb-distribution-chart,
.ProseMirror .nfb-distribution-chart,
.editor-shared .nfb-distribution-chart,
.nfb-article .nfb-distribution-chart,
.tiptap.ProseMirror .nfb-timeline-stats,
.ProseMirror .nfb-timeline-stats,
.editor-shared .nfb-timeline-stats,
.nfb-article .nfb-timeline-stats {
  position: relative; /* NFB mark + ::before/::after corner accents */
  padding: 1.75rem 2rem; /* 28px 32px — screenshot-ready card feel */
  border-radius: 14px;
  max-width: 680px; /* share-safe for Twitter, Facebook, LinkedIn */
  margin-left: auto;
  margin-right: auto;
  /* Soft elevation — infographic card feel */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Micro highlight line — all stat blocks */
.tiptap.ProseMirror .nfb-stat-block::before,
.ProseMirror .nfb-stat-block::before,
.editor-shared .nfb-stat-block::before,
.nfb-article .nfb-stat-block::before,
.tiptap.ProseMirror .nfb-opinion-split::before,
.ProseMirror .nfb-opinion-split::before,
.editor-shared .nfb-opinion-split::before,
.nfb-article .nfb-opinion-split::before,
.tiptap.ProseMirror .nfb-percentage-bar::before,
.ProseMirror .nfb-percentage-bar::before,
.editor-shared .nfb-percentage-bar::before,
.nfb-article .nfb-percentage-bar::before,
.tiptap.ProseMirror .nfb-comparison-bars::before,
.ProseMirror .nfb-comparison-bars::before,
.editor-shared .nfb-comparison-bars::before,
.nfb-article .nfb-comparison-bars::before,
.tiptap.ProseMirror .nfb-trend-line::before,
.ProseMirror .nfb-trend-line::before,
.editor-shared .nfb-trend-line::before,
.nfb-article .nfb-trend-line::before,
.tiptap.ProseMirror .nfb-multi-stat::before,
.ProseMirror .nfb-multi-stat::before,
.editor-shared .nfb-multi-stat::before,
.nfb-article .nfb-multi-stat::before,
.tiptap.ProseMirror .nfb-ranking-list::before,
.ProseMirror .nfb-ranking-list::before,
.editor-shared .nfb-ranking-list::before,
.nfb-article .nfb-ranking-list::before,
.tiptap.ProseMirror .nfb-progress-meter::before,
.ProseMirror .nfb-progress-meter::before,
.editor-shared .nfb-progress-meter::before,
.nfb-article .nfb-progress-meter::before,
.tiptap.ProseMirror .nfb-distribution-chart::before,
.ProseMirror .nfb-distribution-chart::before,
.editor-shared .nfb-distribution-chart::before,
.nfb-article .nfb-distribution-chart::before,
.tiptap.ProseMirror .nfb-timeline-stats::before,
.ProseMirror .nfb-timeline-stats::before,
.editor-shared .nfb-timeline-stats::before,
.nfb-article .nfb-timeline-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

/* Article preview — micro highlight + discrete corner accent */
.nfb-article .nfb-stat-block,
.nfb-article .nfb-opinion-split,
.nfb-article .nfb-percentage-bar,
.nfb-article .nfb-comparison-bars,
.nfb-article .nfb-trend-line,
.nfb-article .nfb-multi-stat,
.nfb-article .nfb-ranking-list,
.nfb-article .nfb-progress-meter,
.nfb-article .nfb-distribution-chart,
.nfb-article .nfb-timeline-stats {
  position: relative;
}
/* Corner ribbon — editor + preview (entire stat card family) */
.tiptap.ProseMirror .nfb-stat-block::after,
.ProseMirror .nfb-stat-block::after,
.editor-shared .nfb-stat-block::after,
.nfb-article .nfb-stat-block::after,
.tiptap.ProseMirror .nfb-opinion-split::after,
.ProseMirror .nfb-opinion-split::after,
.editor-shared .nfb-opinion-split::after,
.nfb-article .nfb-opinion-split::after,
.tiptap.ProseMirror .nfb-percentage-bar::after,
.ProseMirror .nfb-percentage-bar::after,
.editor-shared .nfb-percentage-bar::after,
.nfb-article .nfb-percentage-bar::after,
.tiptap.ProseMirror .nfb-comparison-bars::after,
.ProseMirror .nfb-comparison-bars::after,
.editor-shared .nfb-comparison-bars::after,
.nfb-article .nfb-comparison-bars::after,
.tiptap.ProseMirror .nfb-trend-line::after,
.ProseMirror .nfb-trend-line::after,
.editor-shared .nfb-trend-line::after,
.nfb-article .nfb-trend-line::after,
.tiptap.ProseMirror .nfb-multi-stat::after,
.ProseMirror .nfb-multi-stat::after,
.editor-shared .nfb-multi-stat::after,
.nfb-article .nfb-multi-stat::after,
.tiptap.ProseMirror .nfb-ranking-list::after,
.ProseMirror .nfb-ranking-list::after,
.editor-shared .nfb-ranking-list::after,
.nfb-article .nfb-ranking-list::after,
.tiptap.ProseMirror .nfb-progress-meter::after,
.ProseMirror .nfb-progress-meter::after,
.editor-shared .nfb-progress-meter::after,
.nfb-article .nfb-progress-meter::after,
.tiptap.ProseMirror .nfb-distribution-chart::after,
.ProseMirror .nfb-distribution-chart::after,
.editor-shared .nfb-distribution-chart::after,
.nfb-article .nfb-distribution-chart::after,
.tiptap.ProseMirror .nfb-timeline-stats::after,
.ProseMirror .nfb-timeline-stats::after,
.editor-shared .nfb-timeline-stats::after,
.nfb-article .nfb-timeline-stats::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: #e87a61;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: 14px;
  pointer-events: none;
}
.nfb-article .nfb-block-brand {
  position: relative;
  z-index: 1;
}

.nfb-stat-block--left,
.nfb-percentage-bar--left,
.nfb-comparison-bars--left,
.nfb-trend-line--left,
.nfb-multi-stat--left,
.nfb-ranking-list--left,
.nfb-progress-meter--left,
.nfb-distribution-chart--left,
.nfb-timeline-stats--left { margin-left: 0; margin-right: auto; }
.nfb-stat-block--right,
.nfb-percentage-bar--right,
.nfb-comparison-bars--right,
.nfb-trend-line--right,
.nfb-multi-stat--right,
.nfb-ranking-list--right,
.nfb-progress-meter--right,
.nfb-distribution-chart--right,
.nfb-timeline-stats--right { margin-left: auto; margin-right: 0; }

/* via NFB branding — separator between last meta and “via”; stat block uses meta ::after only (no double bullet) */
.nfb-opinion-split__via::before,
.nfb-percentage-bar__via::before,
.nfb-comparison-bars__via::before,
.nfb-trend-line__via::before,
.nfb-multi-stat__via::before,
.nfb-ranking-list__via::before,
.nfb-progress-meter__via::before,
.nfb-distribution-chart__via::before,
.nfb-timeline-stats__via::before {
  content: " • ";
  color: inherit;
  opacity: 0.85;
}

.nfb-stat-block__footer .nfb-stat-via::before {
  content: none;
}

.nfb-footer-via__prefix,
.nfb-stat-via__prefix {
  color: inherit;
  opacity: 0.92;
}

.nfb-footer-via__brand,
.nfb-stat-via__brand {
  display: inline;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============================================================
   STAT BLOCK — Editor & Preview
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-stat-block,
.ProseMirror .nfb-stat-block,
.editor-shared .nfb-stat-block,
.nfb-article .nfb-stat-block {
  margin: 2rem 0;
  padding: 1.75rem 2rem;
  border-radius: 14px;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  position: relative;
}

.nfb-stat-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.nfb-stat-block__header-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.nfb-stat-block__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Preview: display mode (from renderHTML) — hero statistic / Big Number */
/* Title first, then number — consistent with all stat blocks (Question → Answer) */
.nfb-stat-block__value-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

/*
 * Hero headline — one line-length measure for every stat card (padding is outside 38ch).
 * border-box used to pack padding inside max-width → uneven text columns across blocks.
 */
.nfb-stat-block__label,
.nfb-opinion-split__title,
.nfb-percentage-bar__title,
.nfb-comparison-bars__title,
.nfb-trend-line__title,
.nfb-multi-stat__head-row .nfb-multi-stat__title,
.nfb-ranking-list__head-row .nfb-ranking-list__title,
.nfb-progress-meter__head-row .nfb-progress-meter__title,
.nfb-distribution-chart__head .nfb-distribution-chart__title,
.nfb-timeline-stats__head .nfb-timeline-stats__title {
  --nfb-stat-hero-line: 38ch;
  --nfb-stat-hero-pad-center: 2.75rem;
  --nfb-stat-hero-pad-corner: 4rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #334155;
  line-height: 1.4;
  max-width: var(--nfb-stat-hero-line);
  box-sizing: content-box;
  width: fit-content;
  min-width: 0;
  text-wrap: balance;
}

.nfb-stat-block__value {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.05;
  color: #111;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.nfb-stat-block__sublabel {
  font-size: 0.9375rem;
  color: #6b7280;
  font-weight: 400;
  margin-top: 0.2em;
}

/* Context badge — Poll result, Economic data, etc. */
.nfb-stat-block__context-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.7rem;
}

/* Insight layer */
.nfb-stat-block__insight {
  margin-top: 0.75rem;
}

.nfb-stat-block__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-stat-block__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #4b5563;
  line-height: 1.4;
}

/* Credibility footer — Source • Date • Sample */
.nfb-stat-block__footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e6dfd6;
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}

.nfb-stat-block__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

/* NFB brand — pinned upper-right on every stat card (same spot as Big Number), clears ribbon */
.nfb-stat-block .nfb-stat-label {
  display: block;
  margin-bottom: 0.5rem;
}

.nfb-stat-block .nfb-block-brand,
.nfb-opinion-split .nfb-block-brand,
.nfb-percentage-bar .nfb-block-brand,
.nfb-comparison-bars .nfb-block-brand,
.nfb-trend-line .nfb-block-brand,
.nfb-multi-stat .nfb-block-brand,
.nfb-ranking-list .nfb-block-brand,
.nfb-progress-meter .nfb-block-brand,
.nfb-distribution-chart .nfb-block-brand,
.nfb-timeline-stats .nfb-block-brand {
  position: absolute;
  top: 1.28rem;
  right: 3rem;
  z-index: 2;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.nfb-stat-block__icon {
  font-size: 1.5rem;
  margin-bottom: 0.65rem;
  color: #c45a42;
}

.nfb-stat-block__icon .fa-solid {
  color: inherit;
}

/* Align variants — left/right ready for float/wrap */
.nfb-stat-block--left { text-align: left; max-width: 360px; }
.nfb-stat-block--left .nfb-stat-block__value-wrap { align-items: flex-start; }
.nfb-stat-block--center { text-align: center; }
.nfb-stat-block--center .nfb-stat-block__value-wrap { align-items: center; }

.nfb-stat-block--center .nfb-stat-block__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-stat-block--right { text-align: right; max-width: 360px; margin-left: auto; }
.nfb-stat-block--right .nfb-stat-block__value-wrap { align-items: flex-end; }

/* Theme variants — chained .nfb-stat-block--* beats .ProseMirror .nfb-stat-block base */
.tiptap.ProseMirror .nfb-stat-block.nfb-stat-block--neutral,
.ProseMirror .nfb-stat-block.nfb-stat-block--neutral,
.editor-shared .nfb-stat-block.nfb-stat-block--neutral,
.nfb-article .nfb-stat-block.nfb-stat-block--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Warm accent (on-brand); avoids cold blue that fought icon + ribbon */
.tiptap.ProseMirror .nfb-stat-block.nfb-stat-block--accent,
.ProseMirror .nfb-stat-block.nfb-stat-block--accent,
.editor-shared .nfb-stat-block.nfb-stat-block--accent,
.nfb-article .nfb-stat-block.nfb-stat-block--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-stat-block.nfb-stat-block--subtle,
.ProseMirror .nfb-stat-block.nfb-stat-block--subtle,
.editor-shared .nfb-stat-block.nfb-stat-block--subtle,
.nfb-article .nfb-stat-block.nfb-stat-block--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   OPINION SPLIT — Poll / opinion results (editorial style)
   Amir & Mixel — 2025
   Mood: editorial, credible, calm, premium, non-techy
============================================================ */

.tiptap.ProseMirror .nfb-opinion-split,
.ProseMirror .nfb-opinion-split,
.editor-shared .nfb-opinion-split,
.nfb-article .nfb-opinion-split {
  position: relative;
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Icon + context badge (hero parity with stat block) */
.nfb-opinion-split__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #c45a42;
}

.nfb-opinion-split__icon .fa-solid {
  color: inherit;
}

.nfb-opinion-split__context-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.65rem;
}

/* Alignment */
.nfb-opinion-split--left {
  margin-left: 0;
  margin-right: auto;
  max-width: 680px;
  text-align: left;
}

/*
 * Center hero layout: explicit --center OR legacy / article HTML that only has
 * .nfb-opinion-split (no --left / --right). Editor always sets full modifiers;
 * preview often serves stored HTML before re-save.
 */
.nfb-opinion-split--center,
.nfb-opinion-split:not(.nfb-opinion-split--left):not(.nfb-opinion-split--right) {
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
  text-align: center;
}

.nfb-opinion-split--center .nfb-opinion-split__lead-wrap,
.nfb-opinion-split:not(.nfb-opinion-split--left):not(.nfb-opinion-split--right) .nfb-opinion-split__lead-wrap {
  align-items: center;
  text-align: center;
}

.nfb-opinion-split--center .nfb-opinion-split__insight,
.nfb-opinion-split:not(.nfb-opinion-split--left):not(.nfb-opinion-split--right) .nfb-opinion-split__insight {
  text-align: center;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.nfb-opinion-split--center .nfb-opinion-split__bars,
.nfb-opinion-split:not(.nfb-opinion-split--left):not(.nfb-opinion-split--right) .nfb-opinion-split__bars {
  text-align: left;
}

.nfb-opinion-split--right {
  margin-left: auto;
  margin-right: 0;
  max-width: 680px;
  text-align: right;
}

.nfb-opinion-split--right .nfb-opinion-split__bars {
  text-align: left;
}

/* Theme — chained classes beat base .ProseMirror .nfb-opinion-split */
.tiptap.ProseMirror .nfb-opinion-split.nfb-opinion-split--neutral,
.ProseMirror .nfb-opinion-split.nfb-opinion-split--neutral,
.editor-shared .nfb-opinion-split.nfb-opinion-split--neutral,
.nfb-article .nfb-opinion-split.nfb-opinion-split--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-opinion-split.nfb-opinion-split--accent,
.ProseMirror .nfb-opinion-split.nfb-opinion-split--accent,
.editor-shared .nfb-opinion-split.nfb-opinion-split--accent,
.nfb-article .nfb-opinion-split.nfb-opinion-split--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-opinion-split.nfb-opinion-split--subtle,
.ProseMirror .nfb-opinion-split.nfb-opinion-split--subtle,
.editor-shared .nfb-opinion-split.nfb-opinion-split--subtle,
.nfb-article .nfb-opinion-split.nfb-opinion-split--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Head row: title + brand (top-right) */
.nfb-opinion-split__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.nfb-opinion-split__head-row .nfb-opinion-split__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.nfb-opinion-split__title-spacer {
  flex: 1;
}

.tiptap.ProseMirror .nfb-opinion-split:hover,
.ProseMirror .nfb-opinion-split:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nfb-opinion-split__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.nfb-opinion-split__header-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.nfb-opinion-split__bars {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.nfb-opinion-split__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 1.2fr;
  align-items: center;
  gap: 0.85rem;
}

.nfb-opinion-split__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #4a5568;
}

.nfb-opinion-split__pct {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nfb-opinion-split__row--max .nfb-opinion-split__label {
  font-weight: 600;
  color: #2d3748;
}

.nfb-opinion-split__row--max .nfb-opinion-split__pct {
  font-weight: 700;
  color: #1a1a1a;
}

.nfb-opinion-split__bar-wrap {
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.nfb-opinion-split__bar {
  height: 100%;
  background: #7f8e9c;
  border-radius: 5px;
  min-width: 2px;
  transition: width 0.2s ease;
}

.nfb-opinion-split__row--max .nfb-opinion-split__bar {
  background: #6b7a8a;
  border-radius: 6px;
}

.nfb-opinion-split__lead-wrap {
  margin-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nfb-opinion-split__lead {
  font-size: 0.9rem;
  color: #374151;
}

.nfb-opinion-split__lead-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nfb-opinion-split__lead-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Insight layer — manual or auto-generated interpretation */
.nfb-opinion-split__insight {
  margin-top: 0.25rem;
}

.nfb-opinion-split__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-opinion-split__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #4b5563;
  line-height: 1.4;
}

.nfb-opinion-split__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e6dfd6;
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  justify-content: flex-start;
  text-align: left; /* credit line stays left under centered hero */
}

.nfb-opinion-split__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

/* ============================================================
   PERCENTAGE BAR — Category comparison (true % width bars)
   Same visual language as Opinion Split, no lead, manual insight
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-percentage-bar,
.ProseMirror .nfb-percentage-bar,
.editor-shared .nfb-percentage-bar,
.nfb-article .nfb-percentage-bar {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tiptap.ProseMirror .nfb-percentage-bar:hover,
.ProseMirror .nfb-percentage-bar:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Theme — chained beats base card fill (parity with Opinion Split / Stat block) */
.tiptap.ProseMirror .nfb-percentage-bar.nfb-percentage-bar--neutral,
.ProseMirror .nfb-percentage-bar.nfb-percentage-bar--neutral,
.editor-shared .nfb-percentage-bar.nfb-percentage-bar--neutral,
.nfb-article .nfb-percentage-bar.nfb-percentage-bar--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-percentage-bar.nfb-percentage-bar--accent,
.ProseMirror .nfb-percentage-bar.nfb-percentage-bar--accent,
.editor-shared .nfb-percentage-bar.nfb-percentage-bar--accent,
.nfb-article .nfb-percentage-bar.nfb-percentage-bar--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-percentage-bar.nfb-percentage-bar--subtle,
.ProseMirror .nfb-percentage-bar.nfb-percentage-bar--subtle,
.editor-shared .nfb-percentage-bar.nfb-percentage-bar--subtle,
.nfb-article .nfb-percentage-bar.nfb-percentage-bar--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-percentage-bar__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

/* Older saved HTML: icon/context still directly after __head — avoid a tall dead zone before the icon */
.nfb-percentage-bar__head:has(+ .nfb-percentage-bar__icon) {
  margin-bottom: 0.35rem;
}

.nfb-percentage-bar__head + .nfb-percentage-bar__icon {
  margin-top: 0;
}

.nfb-percentage-bar__head-row .nfb-percentage-bar__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.nfb-percentage-bar__title-spacer {
  flex: 1;
}

.nfb-percentage-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.nfb-percentage-bar__header-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.nfb-percentage-bar__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #c45a42;
}

.nfb-percentage-bar__icon .fa-solid {
  color: inherit;
}

.nfb-percentage-bar__icon i {
  font-size: 1.5rem;
  color: inherit;
}

.nfb-percentage-bar__context-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.65rem;
}

.nfb-percentage-bar__bars {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.nfb-percentage-bar__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 1.2fr;
  align-items: center;
  gap: 0.85rem;
}

.nfb-percentage-bar__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #4a5568;
}

.nfb-percentage-bar__pct {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nfb-percentage-bar__row--max .nfb-percentage-bar__label {
  font-weight: 600;
  color: #2d3748;
}

.nfb-percentage-bar__row--max .nfb-percentage-bar__pct {
  font-weight: 700;
  color: #1a1a1a;
}

.nfb-percentage-bar__bar-wrap {
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.nfb-percentage-bar__bar {
  height: 100%;
  background: #7f8e9c;
  border-radius: 5px;
  min-width: 2px;
  transition: width 0.2s ease;
}

.nfb-percentage-bar__row--max .nfb-percentage-bar__bar {
  background: #6b7a8a;
  border-radius: 6px;
}

.nfb-percentage-bar__insight {
  margin-top: 0.875rem;
}

.nfb-percentage-bar__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-percentage-bar__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #4b5563;
  line-height: 1.4;
}

.nfb-percentage-bar__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e6dfd6;
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}

.nfb-percentage-bar__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

.nfb-percentage-bar--left { text-align: left; max-width: 480px; }
.nfb-percentage-bar--center { text-align: center; }

.nfb-percentage-bar--center .nfb-percentage-bar__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-percentage-bar--right { text-align: right; max-width: 480px; margin-left: auto; }

.nfb-percentage-bar--neutral .nfb-percentage-bar__bar { background: #7f8e9c; }
.nfb-percentage-bar--neutral .nfb-percentage-bar__row--max .nfb-percentage-bar__bar { background: #6b7a8a; }
.nfb-percentage-bar--accent .nfb-percentage-bar__bar { background: #7f8e9c; }
.nfb-percentage-bar--accent .nfb-percentage-bar__row--max .nfb-percentage-bar__bar { background: #6b7a8a; }
.nfb-percentage-bar--subtle .nfb-percentage-bar__bar { background: #7f8e9c; }
.nfb-percentage-bar--subtle .nfb-percentage-bar__row--max .nfb-percentage-bar__bar { background: #6b7a8a; }

/* ============================================================
   COMPARISON BARS — Value comparison (relative-to-max bars)
   Author order preserved. Flexible values: $, %, number.
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-comparison-bars,
.ProseMirror .nfb-comparison-bars,
.editor-shared .nfb-comparison-bars,
.nfb-article .nfb-comparison-bars {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tiptap.ProseMirror .nfb-comparison-bars:hover,
.ProseMirror .nfb-comparison-bars:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tiptap.ProseMirror .nfb-comparison-bars.nfb-comparison-bars--neutral,
.ProseMirror .nfb-comparison-bars.nfb-comparison-bars--neutral,
.editor-shared .nfb-comparison-bars.nfb-comparison-bars--neutral,
.nfb-article .nfb-comparison-bars.nfb-comparison-bars--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-comparison-bars.nfb-comparison-bars--accent,
.ProseMirror .nfb-comparison-bars.nfb-comparison-bars--accent,
.editor-shared .nfb-comparison-bars.nfb-comparison-bars--accent,
.nfb-article .nfb-comparison-bars.nfb-comparison-bars--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-comparison-bars.nfb-comparison-bars--subtle,
.ProseMirror .nfb-comparison-bars.nfb-comparison-bars--subtle,
.editor-shared .nfb-comparison-bars.nfb-comparison-bars--subtle,
.nfb-article .nfb-comparison-bars.nfb-comparison-bars--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-comparison-bars__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.nfb-comparison-bars__head-row .nfb-comparison-bars__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.nfb-comparison-bars__title-spacer {
  flex: 1;
}

.nfb-comparison-bars__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.nfb-comparison-bars__header-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.nfb-comparison-bars__icon {
  margin-bottom: 0.5rem;
}

.nfb-comparison-bars__icon i {
  font-size: 1rem;
  color: #e87a61;
}

.nfb-comparison-bars__context-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.nfb-comparison-bars__bars {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.nfb-comparison-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 1.2fr;
  align-items: center;
  gap: 0.65rem 1.25rem; /* row gap, column gap — extra space between value and bar */
}

.nfb-comparison-bars__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #4a5568;
}

.nfb-comparison-bars__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nfb-comparison-bars__row--max .nfb-comparison-bars__label {
  font-weight: 600;
  color: #2d3748;
}

.nfb-comparison-bars__row--max .nfb-comparison-bars__value {
  font-weight: 700;
  color: #1a1a1a;
}

.nfb-comparison-bars__bar-wrap {
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.nfb-comparison-bars__bar {
  height: 100%;
  background: #7f8e9c;
  border-radius: 5px;
  min-width: 2px;
  transition: width 0.2s ease;
}

.nfb-comparison-bars__row--max .nfb-comparison-bars__bar {
  background: #6b7a8a;
  border-radius: 6px;
}

.nfb-comparison-bars__insight {
  margin-top: 0.875rem;
}

.nfb-comparison-bars__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-comparison-bars__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #4b5563;
  line-height: 1.4;
}

.nfb-comparison-bars__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e6dfd6;
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}

.nfb-comparison-bars__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

.nfb-comparison-bars--left { text-align: left; max-width: 480px; }
.nfb-comparison-bars--center { text-align: center; }

.nfb-comparison-bars--center .nfb-comparison-bars__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-comparison-bars--right { text-align: right; max-width: 480px; margin-left: auto; }

.nfb-comparison-bars--neutral .nfb-comparison-bars__bar { background: #7f8e9c; }
.nfb-comparison-bars--neutral .nfb-comparison-bars__row--max .nfb-comparison-bars__bar { background: #6b7a8a; }
.nfb-comparison-bars--accent .nfb-comparison-bars__bar { background: #7f8e9c; }
.nfb-comparison-bars--accent .nfb-comparison-bars__row--max .nfb-comparison-bars__bar { background: #6b7a8a; }
.nfb-comparison-bars--subtle .nfb-comparison-bars__bar { background: #7f8e9c; }
.nfb-comparison-bars--subtle .nfb-comparison-bars__row--max .nfb-comparison-bars__bar { background: #6b7a8a; }

/* ============================================================
   TREND LINE — Change over time (line chart)
   Last point highlighted. Min 3, max 8 points.
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-trend-line,
.ProseMirror .nfb-trend-line,
.editor-shared .nfb-trend-line,
.nfb-article .nfb-trend-line {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tiptap.ProseMirror .nfb-trend-line:hover,
.ProseMirror .nfb-trend-line:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tiptap.ProseMirror .nfb-trend-line.nfb-trend-line--neutral,
.ProseMirror .nfb-trend-line.nfb-trend-line--neutral,
.editor-shared .nfb-trend-line.nfb-trend-line--neutral,
.nfb-article .nfb-trend-line.nfb-trend-line--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-trend-line.nfb-trend-line--accent,
.ProseMirror .nfb-trend-line.nfb-trend-line--accent,
.editor-shared .nfb-trend-line.nfb-trend-line--accent,
.nfb-article .nfb-trend-line.nfb-trend-line--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-trend-line.nfb-trend-line--subtle,
.ProseMirror .nfb-trend-line.nfb-trend-line--subtle,
.editor-shared .nfb-trend-line.nfb-trend-line--subtle,
.nfb-article .nfb-trend-line.nfb-trend-line--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-trend-line--empty {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nfb-trend-line__placeholder {
  font-size: 0.9rem;
  color: #94a3b8;
}

.nfb-trend-line__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.nfb-trend-line__head-row .nfb-trend-line__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.nfb-trend-line__title-spacer {
  flex: 1;
}

.nfb-trend-line__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.nfb-trend-line__header-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.nfb-trend-line__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #c45a42;
}

.nfb-trend-line__icon .fa-solid {
  color: inherit;
}

.nfb-trend-line__icon i {
  font-size: 1.5rem;
  color: inherit;
}

.nfb-trend-line__context-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.65rem;
}

.nfb-trend-line__chart {
  margin: 0.5rem 0 0.75rem;
  position: relative;
}

.nfb-trend-line__svg {
  width: 100%;
  height: 140px;
  display: block;
  /* Match comparison bars bar fill (#7f8e9c / row--max #6b7a8a) */
  color: #7f8e9c;
}

.nfb-trend-line__grid {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.11;
  vector-effect: non-scaling-stroke;
}

.nfb-trend-line__area {
  fill: currentColor;
  opacity: 0.13;
  stroke: none;
  pointer-events: none;
}

.nfb-trend-line__path {
  stroke: currentColor;
}

.nfb-trend-line__point {
  fill: currentColor;
}

.nfb-trend-line__point--last {
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.12));
}

.nfb-trend-line__value-labels {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding: 0 0.5rem;
}

.nfb-trend-line__value-start {
  grid-column: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.nfb-trend-line__value-end {
  grid-column: -1;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nfb-trend-line__guide {
  stroke: currentColor;
}

.nfb-trend-line__labels {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding: 0 0.5rem;
}

.nfb-trend-line__label {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  min-width: 0;
}

.nfb-trend-line__insight {
  margin-top: 0.875rem;
}

.nfb-trend-line__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-trend-line__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #4b5563;
  line-height: 1.4;
}

.nfb-trend-line__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e6dfd6;
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}

.nfb-trend-line__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

.nfb-trend-line--left { text-align: left; max-width: 480px; }
.nfb-trend-line--center { text-align: center; }

.nfb-trend-line--center .nfb-trend-line__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-trend-line--right { text-align: right; max-width: 480px; margin-left: auto; }

/* Line/grid/area use currentColor — same family as comparison bar fills */
.nfb-trend-line--neutral .nfb-trend-line__svg { color: #7f8e9c; }
.nfb-trend-line--accent .nfb-trend-line__svg { color: #6b7a8a; }
.nfb-trend-line--subtle .nfb-trend-line__svg { color: #94a3b8; }

/* ============================================================
   MULTI STAT CARD — 2×2 grid, 2–6 stats, highlight option
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-multi-stat,
.ProseMirror .nfb-multi-stat,
.editor-shared .nfb-multi-stat,
.nfb-article .nfb-multi-stat {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  position: relative;
}

.tiptap.ProseMirror .nfb-multi-stat:hover,
.ProseMirror .nfb-multi-stat:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-multi-stat.nfb-multi-stat--neutral,
.ProseMirror .nfb-multi-stat.nfb-multi-stat--neutral,
.editor-shared .nfb-multi-stat.nfb-multi-stat--neutral,
.nfb-article .nfb-multi-stat.nfb-multi-stat--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-multi-stat.nfb-multi-stat--accent,
.ProseMirror .nfb-multi-stat.nfb-multi-stat--accent,
.editor-shared .nfb-multi-stat.nfb-multi-stat--accent,
.nfb-article .nfb-multi-stat.nfb-multi-stat--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-multi-stat.nfb-multi-stat--subtle,
.ProseMirror .nfb-multi-stat.nfb-multi-stat--subtle,
.editor-shared .nfb-multi-stat.nfb-multi-stat--subtle,
.nfb-article .nfb-multi-stat.nfb-multi-stat--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-multi-stat__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.125rem;
}

.nfb-multi-stat__head-row .nfb-multi-stat__title {
  flex: 0 1 auto;
  min-width: 0;
}

.nfb-multi-stat__title-spacer {
  flex: 1;
}

.nfb-multi-stat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.nfb-multi-stat__header-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.nfb-multi-stat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.125rem;
  margin-top: 0.5rem;
}

/* 5–6 stats: 3×2 grid */
.nfb-multi-stat__grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.nfb-multi-stat__grid--cols-3 .nfb-multi-stat__item--highlight {
  grid-column: span 3;
}

@media (max-width: 480px) {
  .nfb-multi-stat__grid {
    grid-template-columns: 1fr;
  }
  .nfb-multi-stat__grid--cols-3 {
    grid-template-columns: 1fr;
  }
  .nfb-multi-stat__grid--cols-3 .nfb-multi-stat__item--highlight {
    grid-column: span 1;
  }
}

.nfb-multi-stat__item {
  text-align: center;
  padding: 0.5rem 0;
}

.nfb-multi-stat__number {
  font-size: 2.125rem;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
  /* Tabular numbers — professional data alignment */
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

.nfb-multi-stat__label {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.25rem;
  line-height: 1.35;
}

/* Highlight stat — emphasis hierarchy (FT, Bloomberg style) */
.nfb-multi-stat__item--highlight {
  grid-column: span 2;
}

.nfb-multi-stat__item--highlight .nfb-multi-stat__number {
  font-size: 2.625rem;
  font-weight: 800;
  color: #111;
}

.nfb-multi-stat__item--highlight .nfb-multi-stat__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #4b5563;
}

@media (max-width: 480px) {
  .nfb-multi-stat__item--highlight {
    grid-column: span 1;
  }
}

.nfb-multi-stat__insight {
  margin-top: 1rem;
}

.nfb-multi-stat__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-multi-stat__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #374151;
  line-height: 1.45;
}

.nfb-multi-stat__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.nfb-multi-stat__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

.nfb-multi-stat--left { text-align: left; max-width: 480px; }
.nfb-multi-stat--center { text-align: center; }

.nfb-multi-stat--center .nfb-multi-stat__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-multi-stat--right { text-align: right; max-width: 480px; margin-left: auto; }

.nfb-multi-stat--neutral { background: #f8f9fb; border-color: #e7e9ef; }
.nfb-multi-stat--accent { background: #eff6ff; border-color: rgba(59, 130, 246, 0.3); }
.nfb-multi-stat--accent .nfb-multi-stat__number { color: #1e40af; }
.nfb-multi-stat--subtle { background: transparent; border-color: transparent; }

.nfb-multi-stat__paste-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

/* ============================================================
   RANKING LIST — Top N (1, 2, 3…), 3–10 items
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-ranking-list,
.ProseMirror .nfb-ranking-list,
.editor-shared .nfb-ranking-list,
.nfb-article .nfb-ranking-list {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  position: relative;
}

.tiptap.ProseMirror .nfb-ranking-list:hover,
.ProseMirror .nfb-ranking-list:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-ranking-list.nfb-ranking-list--neutral,
.ProseMirror .nfb-ranking-list.nfb-ranking-list--neutral,
.editor-shared .nfb-ranking-list.nfb-ranking-list--neutral,
.nfb-article .nfb-ranking-list.nfb-ranking-list--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-ranking-list.nfb-ranking-list--accent,
.ProseMirror .nfb-ranking-list.nfb-ranking-list--accent,
.editor-shared .nfb-ranking-list.nfb-ranking-list--accent,
.nfb-article .nfb-ranking-list.nfb-ranking-list--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-ranking-list.nfb-ranking-list--subtle,
.ProseMirror .nfb-ranking-list.nfb-ranking-list--subtle,
.editor-shared .nfb-ranking-list.nfb-ranking-list--subtle,
.nfb-article .nfb-ranking-list.nfb-ranking-list--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-ranking-list__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.nfb-ranking-list__head-row .nfb-ranking-list__title {
  flex: 0 1 auto;
  min-width: 0;
}

.nfb-ranking-list__title-spacer {
  flex: 1;
}

.nfb-ranking-list__list {
  display: flex;
  flex-direction: column;
}

.nfb-ranking-list__row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.625rem 0; /* 10px — više zraka između stavki */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9375rem;
}

.nfb-ranking-list__row:last-child {
  border-bottom: none;
}

.nfb-ranking-list__rank {
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.nfb-ranking-list__label {
  font-weight: 500;
  color: #374151;
}

.nfb-ranking-list__value {
  font-weight: 600;
  color: #111;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

/* Top 1 emphasis */
.nfb-ranking-list__row--top .nfb-ranking-list__rank {
  font-weight: 700;
  color: #1a1a1a;
}

.nfb-ranking-list__row--top .nfb-ranking-list__label {
  font-weight: 600;
  color: #111;
}

.nfb-ranking-list__row--top .nfb-ranking-list__value {
  font-weight: 700;
  color: #111;
}

.nfb-ranking-list__insight {
  margin-top: 1rem;
}

.nfb-ranking-list__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-ranking-list__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #374151;
  line-height: 1.45;
}

.nfb-ranking-list__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.nfb-ranking-list__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

.nfb-ranking-list--left { text-align: left; max-width: 480px; }
.nfb-ranking-list--center { text-align: center; }

.nfb-ranking-list--center .nfb-ranking-list__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-ranking-list--right { text-align: right; max-width: 480px; margin-left: auto; }

.nfb-ranking-list--neutral { background: #f8f9fb; border-color: #e7e9ef; }
.nfb-ranking-list--accent { background: #eff6ff; border-color: rgba(59, 130, 246, 0.3); }
.nfb-ranking-list--accent .nfb-ranking-list__value { color: #1e40af; }
.nfb-ranking-list--subtle { background: transparent; border-color: transparent; }

.nfb-ranking-list__paste-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

/* ============================================================
   PROGRESS METER — Single progress/completion (0–100%)
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-progress-meter,
.ProseMirror .nfb-progress-meter,
.editor-shared .nfb-progress-meter,
.nfb-article .nfb-progress-meter {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
  position: relative;
}

.tiptap.ProseMirror .nfb-progress-meter:hover,
.ProseMirror .nfb-progress-meter:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-progress-meter.nfb-progress-meter--neutral,
.ProseMirror .nfb-progress-meter.nfb-progress-meter--neutral,
.editor-shared .nfb-progress-meter.nfb-progress-meter--neutral,
.nfb-article .nfb-progress-meter.nfb-progress-meter--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-progress-meter.nfb-progress-meter--accent,
.ProseMirror .nfb-progress-meter.nfb-progress-meter--accent,
.editor-shared .nfb-progress-meter.nfb-progress-meter--accent,
.nfb-article .nfb-progress-meter.nfb-progress-meter--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-progress-meter.nfb-progress-meter--subtle,
.ProseMirror .nfb-progress-meter.nfb-progress-meter--subtle,
.editor-shared .nfb-progress-meter.nfb-progress-meter--subtle,
.nfb-article .nfb-progress-meter.nfb-progress-meter--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-progress-meter__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.nfb-progress-meter__head-row .nfb-progress-meter__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.nfb-progress-meter__title-spacer {
  flex: 1;
}

.nfb-progress-meter__value {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: #111;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

@media (max-width: 640px) {
  .nfb-progress-meter__value {
    font-size: 2.125rem; /* ~34px — key number as primary anchor */
  }
  .nfb-stat-block__value {
    font-size: 2.125rem; /* ~34px — key number as primary anchor */
  }
  .nfb-multi-stat__number {
    font-size: 1.5rem;
  }
  .nfb-multi-stat__item--highlight .nfb-multi-stat__number {
    font-size: 2.125rem; /* ~34px — highlighted key number */
  }
  .nfb-ranking-list__value {
    font-size: 1.125rem;
  }
  .nfb-ranking-list__row--top .nfb-ranking-list__value {
    font-size: 1.5rem; /* top rank as key number */
  }
}

.nfb-progress-meter__track {
  width: 100%;
  max-width: 420px;
  height: 12px;
  margin: 1rem auto 0;
  background: #e7e9ef;
  border-radius: 999px;
  overflow: hidden;
}

.nfb-progress-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: #4f6df5;
  transition: width 0.2s ease;
}

.nfb-progress-meter__label {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #5f6b7a;
}

.nfb-progress-meter__insight {
  margin-top: 1rem;
}

.nfb-progress-meter__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #4b5563;
}

.nfb-progress-meter__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #374151;
  line-height: 1.45;
}

.nfb-progress-meter__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.nfb-progress-meter__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
  opacity: 0.85;
  margin: 0 6px;
}

.nfb-progress-meter--left { text-align: left; max-width: 480px; }
.nfb-progress-meter--center { text-align: center; }

.nfb-progress-meter--center .nfb-progress-meter__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-progress-meter--right { text-align: right; max-width: 480px; margin-left: auto; }

.nfb-progress-meter--neutral { background: #f8f9fb; border-color: #e7e9ef; }
.nfb-progress-meter--neutral .nfb-progress-meter__fill { background: #64748b; }
.nfb-progress-meter--accent { background: #eff6ff; border-color: rgba(59, 130, 246, 0.3); }
.nfb-progress-meter--accent .nfb-progress-meter__fill { background: #4f6df5; }
.nfb-progress-meter--subtle { background: transparent; border-color: transparent; }
.nfb-progress-meter--subtle .nfb-progress-meter__fill { background: #94a3b8; }

.nfb-progress-meter__value-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

/* ============================================================
   DISTRIBUTION CHART — Category breakdown (horizontal bars)
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-distribution-chart,
.ProseMirror .nfb-distribution-chart,
.editor-shared .nfb-distribution-chart,
.nfb-article .nfb-distribution-chart {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
}

.tiptap.ProseMirror .nfb-distribution-chart:hover,
.ProseMirror .nfb-distribution-chart:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-distribution-chart.nfb-distribution-chart--neutral,
.ProseMirror .nfb-distribution-chart.nfb-distribution-chart--neutral,
.editor-shared .nfb-distribution-chart.nfb-distribution-chart--neutral,
.nfb-article .nfb-distribution-chart.nfb-distribution-chart--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-distribution-chart.nfb-distribution-chart--accent,
.ProseMirror .nfb-distribution-chart.nfb-distribution-chart--accent,
.editor-shared .nfb-distribution-chart.nfb-distribution-chart--accent,
.nfb-article .nfb-distribution-chart.nfb-distribution-chart--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-distribution-chart.nfb-distribution-chart--subtle,
.ProseMirror .nfb-distribution-chart.nfb-distribution-chart--subtle,
.editor-shared .nfb-distribution-chart.nfb-distribution-chart--subtle,
.nfb-article .nfb-distribution-chart.nfb-distribution-chart--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-distribution-chart__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.nfb-distribution-chart__head .nfb-distribution-chart__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.nfb-distribution-chart__title-spacer {
  flex: 1;
}

.nfb-distribution-chart__bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.nfb-distribution-chart__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.nfb-distribution-chart__label {
  font-size: 0.95rem;
  color: #374151;
  min-width: 0;
}

.nfb-distribution-chart__row--max .nfb-distribution-chart__label {
  font-weight: 600;
  color: #111;
}

.nfb-distribution-chart__bar-wrap {
  height: 10px;
  background: #e0e0e0;
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}

.nfb-distribution-chart__bar {
  height: 100%;
  background: #7f8e9c;
  border-radius: inherit;
  transition: width 0.2s ease;
}

.nfb-distribution-chart__row--max .nfb-distribution-chart__bar {
  background: #6b7a8a;
}

.nfb-distribution-chart__value {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  font-size: 0.95rem;
  color: #111;
  text-align: right;
  min-width: 3em;
}

.nfb-distribution-chart__row--max .nfb-distribution-chart__value {
  font-weight: 700;
}

.nfb-distribution-chart__insight {
  margin-top: 1rem;
}

.nfb-distribution-chart__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #64748b;
}

.nfb-distribution-chart__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #475569;
}

.nfb-distribution-chart__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  color: #6b7280;
}

.nfb-distribution-chart__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
}

.nfb-distribution-chart--left { text-align: left; max-width: 480px; }
.nfb-distribution-chart--center { text-align: center; }

.nfb-distribution-chart--center .nfb-distribution-chart__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-distribution-chart--right { text-align: right; max-width: 480px; margin-left: auto; }

.nfb-distribution-chart--neutral { background: #f8f9fb; border-color: #e7e9ef; }
.nfb-distribution-chart--neutral .nfb-distribution-chart__bar { background: #7f8e9c; }
.nfb-distribution-chart--neutral .nfb-distribution-chart__row--max .nfb-distribution-chart__bar { background: #6b7a8a; }
.nfb-distribution-chart--accent { background: #eff6ff; border-color: rgba(59, 130, 246, 0.3); }
.nfb-distribution-chart--accent .nfb-distribution-chart__bar { background: #7f8e9c; }
.nfb-distribution-chart--accent .nfb-distribution-chart__row--max .nfb-distribution-chart__bar { background: #6b7a8a; }
.nfb-distribution-chart--subtle { background: transparent; border-color: transparent; }
.nfb-distribution-chart--subtle .nfb-distribution-chart__bar { background: #7f8e9c; }
.nfb-distribution-chart--subtle .nfb-distribution-chart__row--max .nfb-distribution-chart__bar { background: #6b7a8a; }

.nfb-distribution-chart__paste-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .nfb-distribution-chart__value {
    font-size: 1.125rem;
  }
  .nfb-distribution-chart__row--max .nfb-distribution-chart__value {
    font-size: 2.125rem; /* ~34px — key number as primary anchor */
  }
}

@media (max-width: 480px) {
  .nfb-distribution-chart__row {
    gap: 8px;
  }
  .nfb-distribution-chart__label,
  .nfb-distribution-chart__value {
    font-size: 0.875rem;
  }
  .nfb-distribution-chart__row--max .nfb-distribution-chart__value {
    font-size: 1.75rem;
  }
}

/* ============================================================
   TIMELINE STATS — Vertical timeline (date + value + description)
   Amir & Mixel — 2025
============================================================ */

.tiptap.ProseMirror .nfb-timeline-stats,
.ProseMirror .nfb-timeline-stats,
.editor-shared .nfb-timeline-stats,
.nfb-article .nfb-timeline-stats {
  margin: 2rem 0;
  border: 1px solid #e7e9ef;
  background: #f8f9fb;
}

.tiptap.ProseMirror .nfb-timeline-stats:hover,
.ProseMirror .nfb-timeline-stats:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-timeline-stats.nfb-timeline-stats--neutral,
.ProseMirror .nfb-timeline-stats.nfb-timeline-stats--neutral,
.editor-shared .nfb-timeline-stats.nfb-timeline-stats--neutral,
.nfb-article .nfb-timeline-stats.nfb-timeline-stats--neutral {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tiptap.ProseMirror .nfb-timeline-stats.nfb-timeline-stats--accent,
.ProseMirror .nfb-timeline-stats.nfb-timeline-stats--accent,
.editor-shared .nfb-timeline-stats.nfb-timeline-stats--accent,
.nfb-article .nfb-timeline-stats.nfb-timeline-stats--accent {
  background: linear-gradient(160deg, #fffdfb 0%, #fff5f0 55%, #ffede6 100%);
  border: 1px solid rgba(232, 122, 97, 0.28);
}

.tiptap.ProseMirror .nfb-timeline-stats.nfb-timeline-stats--subtle,
.ProseMirror .nfb-timeline-stats.nfb-timeline-stats--subtle,
.editor-shared .nfb-timeline-stats.nfb-timeline-stats--subtle,
.nfb-article .nfb-timeline-stats.nfb-timeline-stats--subtle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.nfb-stat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8f98;
  margin-bottom: 6px;
  font-weight: 600;
  display: block;
}

/* Shared head-row for stat blocks with DATA/INSIGHT label */
.nfb-opinion-split__head-row,
.nfb-percentage-bar__head-row,
.nfb-comparison-bars__head-row,
.nfb-trend-line__head-row,
.nfb-multi-stat__head-row,
.nfb-ranking-list__head-row,
.nfb-progress-meter__head-row,
.nfb-distribution-chart__head-row,
.nfb-timeline-stats__head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/*
 * Center row (NFB corner is position:absolute): justify title in flow + same title box as entire family.
 * Explicit --center OR legacy HTML without --left / --right.
 */
.nfb-opinion-split.nfb-opinion-split--center .nfb-opinion-split__head-row,
.nfb-opinion-split:not(.nfb-opinion-split--left):not(.nfb-opinion-split--right) .nfb-opinion-split__head-row,
.nfb-percentage-bar.nfb-percentage-bar--center .nfb-percentage-bar__head-row,
.nfb-percentage-bar:not(.nfb-percentage-bar--left):not(.nfb-percentage-bar--right) .nfb-percentage-bar__head-row,
.nfb-comparison-bars.nfb-comparison-bars--center .nfb-comparison-bars__head-row,
.nfb-comparison-bars:not(.nfb-comparison-bars--left):not(.nfb-comparison-bars--right) .nfb-comparison-bars__head-row,
.nfb-trend-line.nfb-trend-line--center .nfb-trend-line__head-row,
.nfb-trend-line:not(.nfb-trend-line--left):not(.nfb-trend-line--right) .nfb-trend-line__head-row,
.nfb-multi-stat.nfb-multi-stat--center .nfb-multi-stat__head-row,
.nfb-multi-stat:not(.nfb-multi-stat--left):not(.nfb-multi-stat--right) .nfb-multi-stat__head-row,
.nfb-ranking-list.nfb-ranking-list--center .nfb-ranking-list__head-row,
.nfb-ranking-list:not(.nfb-ranking-list--left):not(.nfb-ranking-list--right) .nfb-ranking-list__head-row,
.nfb-progress-meter.nfb-progress-meter--center .nfb-progress-meter__head-row,
.nfb-progress-meter:not(.nfb-progress-meter--left):not(.nfb-progress-meter--right) .nfb-progress-meter__head-row,
.nfb-distribution-chart.nfb-distribution-chart--center .nfb-distribution-chart__head-row,
.nfb-distribution-chart:not(.nfb-distribution-chart--left):not(.nfb-distribution-chart--right) .nfb-distribution-chart__head-row,
.nfb-timeline-stats.nfb-timeline-stats--center .nfb-timeline-stats__head-row,
.nfb-timeline-stats:not(.nfb-timeline-stats--left):not(.nfb-timeline-stats--right) .nfb-timeline-stats__head-row {
  justify-content: center;
}

/* Center/default: same max-width box, optical center, inset vs corner mark */
.nfb-opinion-split.nfb-opinion-split--center .nfb-opinion-split__head-row .nfb-opinion-split__title,
.nfb-opinion-split:not(.nfb-opinion-split--left):not(.nfb-opinion-split--right) .nfb-opinion-split__head-row .nfb-opinion-split__title,
.nfb-percentage-bar--center .nfb-percentage-bar__head-row .nfb-percentage-bar__title,
.nfb-percentage-bar:not(.nfb-percentage-bar--left):not(.nfb-percentage-bar--right) .nfb-percentage-bar__head-row .nfb-percentage-bar__title,
.nfb-comparison-bars--center .nfb-comparison-bars__head-row .nfb-comparison-bars__title,
.nfb-comparison-bars:not(.nfb-comparison-bars--left):not(.nfb-comparison-bars--right) .nfb-comparison-bars__head-row .nfb-comparison-bars__title,
.nfb-trend-line--center .nfb-trend-line__head-row .nfb-trend-line__title,
.nfb-trend-line:not(.nfb-trend-line--left):not(.nfb-trend-line--right) .nfb-trend-line__head-row .nfb-trend-line__title,
.nfb-multi-stat--center .nfb-multi-stat__head-row .nfb-multi-stat__title,
.nfb-multi-stat:not(.nfb-multi-stat--left):not(.nfb-multi-stat--right) .nfb-multi-stat__head-row .nfb-multi-stat__title,
.nfb-ranking-list--center .nfb-ranking-list__head-row .nfb-ranking-list__title,
.nfb-ranking-list:not(.nfb-ranking-list--left):not(.nfb-ranking-list--right) .nfb-ranking-list__head-row .nfb-ranking-list__title,
.nfb-progress-meter--center .nfb-progress-meter__head-row .nfb-progress-meter__title,
.nfb-progress-meter:not(.nfb-progress-meter--left):not(.nfb-progress-meter--right) .nfb-progress-meter__head-row .nfb-progress-meter__title,
.nfb-distribution-chart--center .nfb-distribution-chart__head .nfb-distribution-chart__title,
.nfb-distribution-chart:not(.nfb-distribution-chart--left):not(.nfb-distribution-chart--right) .nfb-distribution-chart__head .nfb-distribution-chart__title,
.nfb-timeline-stats--center .nfb-timeline-stats__head .nfb-timeline-stats__title,
.nfb-timeline-stats:not(.nfb-timeline-stats--left):not(.nfb-timeline-stats--right) .nfb-timeline-stats__head .nfb-timeline-stats__title,
.nfb-timeline-stats--center .nfb-timeline-stats__head-row .nfb-timeline-stats__title,
.nfb-timeline-stats:not(.nfb-timeline-stats--left):not(.nfb-timeline-stats--right) .nfb-timeline-stats__head-row .nfb-timeline-stats__title,
.nfb-stat-block--center .nfb-stat-block__label,
.nfb-stat-block:not(.nfb-stat-block--left):not(.nfb-stat-block--right) .nfb-stat-block__label {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--nfb-stat-hero-pad-center, 2.75rem);
  padding-right: var(--nfb-stat-hero-pad-center, 2.75rem);
}

.nfb-opinion-split--left .nfb-opinion-split__head-row .nfb-opinion-split__title,
.nfb-percentage-bar--left .nfb-percentage-bar__head-row .nfb-percentage-bar__title,
.nfb-comparison-bars--left .nfb-comparison-bars__head-row .nfb-comparison-bars__title,
.nfb-trend-line--left .nfb-trend-line__head-row .nfb-trend-line__title,
.nfb-multi-stat--left .nfb-multi-stat__head-row .nfb-multi-stat__title,
.nfb-ranking-list--left .nfb-ranking-list__head-row .nfb-ranking-list__title,
.nfb-progress-meter--left .nfb-progress-meter__head-row .nfb-progress-meter__title,
.nfb-distribution-chart--left .nfb-distribution-chart__head .nfb-distribution-chart__title,
.nfb-timeline-stats--left .nfb-timeline-stats__head .nfb-timeline-stats__title,
.nfb-timeline-stats--left .nfb-timeline-stats__head-row .nfb-timeline-stats__title,
.nfb-stat-block--left .nfb-stat-block__label {
  margin-left: 0;
  margin-right: auto;
  padding-right: var(--nfb-stat-hero-pad-corner, 4rem);
}

.nfb-opinion-split--right .nfb-opinion-split__head-row .nfb-opinion-split__title,
.nfb-percentage-bar--right .nfb-percentage-bar__head-row .nfb-percentage-bar__title,
.nfb-comparison-bars--right .nfb-comparison-bars__head-row .nfb-comparison-bars__title,
.nfb-trend-line--right .nfb-trend-line__head-row .nfb-trend-line__title,
.nfb-multi-stat--right .nfb-multi-stat__head-row .nfb-multi-stat__title,
.nfb-ranking-list--right .nfb-ranking-list__head-row .nfb-ranking-list__title,
.nfb-progress-meter--right .nfb-progress-meter__head-row .nfb-progress-meter__title,
.nfb-distribution-chart--right .nfb-distribution-chart__head .nfb-distribution-chart__title,
.nfb-timeline-stats--right .nfb-timeline-stats__head .nfb-timeline-stats__title,
.nfb-timeline-stats--right .nfb-timeline-stats__head-row .nfb-timeline-stats__title,
.nfb-stat-block--right .nfb-stat-block__label {
  margin-left: auto;
  margin-right: 0;
  padding-left: var(--nfb-stat-hero-pad-corner, 4rem);
}

.nfb-timeline-stats__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.nfb-timeline-stats__head .nfb-timeline-stats__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * Article preview loads nfb-content-shared (via article.css) BEFORE this file.
 * .nfb-article h3 { font-size: 1.3rem } beats one-class __title — restore hero typography.
 */
.nfb-article .nfb-opinion-split h3.nfb-opinion-split__title,
.nfb-article .nfb-percentage-bar h3.nfb-percentage-bar__title,
.nfb-article .nfb-comparison-bars h3.nfb-comparison-bars__title,
.nfb-article .nfb-trend-line h3.nfb-trend-line__title,
.nfb-article .nfb-multi-stat h3.nfb-multi-stat__title,
.nfb-article .nfb-ranking-list h3.nfb-ranking-list__title,
.nfb-article .nfb-progress-meter h3.nfb-progress-meter__title,
.nfb-article .nfb-distribution-chart h3.nfb-distribution-chart__title,
.nfb-article .nfb-timeline-stats h3.nfb-timeline-stats__title {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #334155;
  line-height: 1.4;
  max-width: var(--nfb-stat-hero-line, 38ch);
  box-sizing: content-box;
  width: fit-content;
  min-width: 0;
  text-wrap: balance;
  margin-top: 0;
  margin-bottom: 0;
}

.nfb-timeline-stats__title-spacer {
  flex: 1;
}

.nfb-timeline-stats__list {
  --nfb-ts-row-gap: 1.0625rem; /* keep in sync with marker line extension */
  display: flex;
  flex-direction: column;
  gap: var(--nfb-ts-row-gap);
}

.nfb-timeline-stats__row {
  display: grid;
  grid-template-columns: 72px 24px 1fr;
  gap: 12px;
  align-items: flex-start;
}

.nfb-timeline-stats__row:first-child {
  padding-top: 0;
}

.nfb-timeline-stats__date {
  font-weight: 600;
  font-size: 0.95rem;
  color: #5f6b7a;
  padding-top: 6px;
}

.nfb-timeline-stats__marker {
  position: relative;
  z-index: 0;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.nfb-timeline-stats__dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0907a;
  margin-top: 6px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Last item: same footprint, stronger accent (no jumpy size / alignment) */
.nfb-timeline-stats__row--last .nfb-timeline-stats__dot {
  background: #e87a61;
  box-shadow: 0 0 0 3px rgba(232, 122, 97, 0.28);
}

/* One continuous rail: from dot center through row + list gap to next row (dots sit above line) */
.nfb-timeline-stats__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 11px; /* margin-top 6 + radius 5 — center of default dot */
  width: 2px;
  height: calc(100% + var(--nfb-ts-row-gap));
  background: #9ca8b8;
  border-radius: 1px;
  z-index: 0;
  pointer-events: none;
}

.nfb-timeline-stats__row--last .nfb-timeline-stats__marker::after {
  display: none;
}

.nfb-timeline-stats__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.nfb-timeline-stats__value {
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: #111;
}

.nfb-timeline-stats__desc {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.4;
}

.nfb-timeline-stats__insight {
  margin-top: 1rem;
}

.nfb-timeline-stats__insight-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #64748b;
}

.nfb-timeline-stats__insight-text {
  font-size: 0.95rem;
  font-style: italic;
  color: #475569;
}

.nfb-timeline-stats__footer {
  margin-top: 1.125rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  color: #6b7280;
}

.nfb-timeline-stats__meta:not(:last-child)::after {
  content: " • ";
  color: #6b7280;
}

.nfb-timeline-stats--left { text-align: left; max-width: 480px; }
.nfb-timeline-stats--center { text-align: center; }

.nfb-timeline-stats--center .nfb-timeline-stats__insight {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.nfb-timeline-stats--right { text-align: right; max-width: 480px; margin-left: auto; }

.nfb-timeline-stats--neutral { background: #f8f9fb; border-color: #e7e9ef; }
.nfb-timeline-stats--neutral .nfb-timeline-stats__dot { background: #e0907a; }
.nfb-timeline-stats--neutral .nfb-timeline-stats__row--last .nfb-timeline-stats__dot { background: #e87a61; }
.nfb-timeline-stats--accent { background: #eff6ff; border-color: rgba(59, 130, 246, 0.3); }
.nfb-timeline-stats--accent .nfb-timeline-stats__dot { background: #e0907a; }
.nfb-timeline-stats--accent .nfb-timeline-stats__row--last .nfb-timeline-stats__dot { background: #e87a61; }
.nfb-timeline-stats--subtle { background: transparent; border-color: transparent; }
.nfb-timeline-stats--subtle .nfb-timeline-stats__dot { background: #e0907a; }
.nfb-timeline-stats--subtle .nfb-timeline-stats__row--last .nfb-timeline-stats__dot { background: #e87a61; }

.nfb-timeline-stats__paste-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

/* Mobile: key number larger, dots slightly bigger for readability */
@media (max-width: 640px) {
  .nfb-timeline-stats__value {
    font-size: 1.25rem;
  }
  .nfb-timeline-stats__row--last .nfb-timeline-stats__value {
    font-size: 2.125rem; /* ~34px — key number as primary visual anchor */
  }
  .nfb-timeline-stats__desc {
    font-size: 14px;
  }
  .nfb-timeline-stats__dot {
    width: 8px;
    height: 8px;
    margin-top: 7px;
  }
  .nfb-timeline-stats__marker::after {
    top: 11px; /* 7 + 4 — rail through dot centers */
  }
}

@media (max-width: 480px) {
  .nfb-timeline-stats__row {
    grid-template-columns: 56px 20px 1fr;
    gap: 8px;
  }
  .nfb-timeline-stats__date {
    font-size: 0.875rem;
  }
  .nfb-timeline-stats__value {
    font-size: 1.125rem;
  }
  .nfb-timeline-stats__row--last .nfb-timeline-stats__value {
    font-size: 1.75rem;
  }
  .nfb-timeline-stats__desc {
    font-size: 0.875rem;
  }
}

/* ============================================================
   MATH — KaTeX Inline & Block (NFB typography)
   Amir & Mixel — 2025
   No card, no coral corner — minimal typography
   --nfb-math-ink: blaga čelično-plava (body ~#1f2937) — skeniranje bez živih boja
============================================================ */
:root {
  --nfb-math-ink: #334155;
}

/* --- Inline Math (decoration $...$) --- */
.tiptap.ProseMirror .Tiptap-mathematics-render,
.ProseMirror .Tiptap-mathematics-render,
.editor-shared .Tiptap-mathematics-render {
  font-size: 1.05em;
  color: var(--nfb-math-ink);
}

/* Inline math EDIT mode — jasno editable polje */
.tiptap.ProseMirror .Tiptap-mathematics-editor:not(.Tiptap-mathematics-editor--hidden),
.ProseMirror .Tiptap-mathematics-editor:not(.Tiptap-mathematics-editor--hidden) {
  display: inline-block !important;
  min-width: 120px;
  padding: 2px 8px;
  margin: 0 2px;
  background: #fef7f5;
  border: 1px solid rgba(232, 122, 97, 0.5);
  border-radius: 4px;
  font-family: 'KaTeX_Main', 'Times New Roman', serif;
  font-size: 1.05em;
  color: var(--nfb-math-ink);
}

/* Editor: subtle highlight when selected */
.tiptap.ProseMirror .Tiptap-mathematics-render--editable.ProseMirror-selectednode,
.ProseMirror .Tiptap-mathematics-render--editable.ProseMirror-selectednode {
  outline: 1px solid rgba(232, 122, 97, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Math Block (custom node) --- */
.tiptap.ProseMirror .nfb-math-block,
.ProseMirror .nfb-math-block,
.editor-shared .nfb-math-block {
  margin: 28px 0;
  text-align: center;
}

.tiptap.ProseMirror .nfb-math-block .Tiptap-mathematics-render,
.ProseMirror .nfb-math-block .Tiptap-mathematics-render,
.editor-shared .nfb-math-block .Tiptap-mathematics-render {
  font-size: 1.35em;
  color: var(--nfb-math-ink);
}

/* KaTeX bez Tiptap klase: preview članka + math block node view */
.nfb-article .article-body .katex,
.nfb-math-block__preview .katex {
  color: var(--nfb-math-ink);
}

/* Math Block — editable node view */
.nfb-math-block--editable {
  margin: 28px 0;
  padding: 1rem 1.25rem;
  background: #fefcfb;
  border: 1px dashed rgba(232, 122, 97, 0.35);
  border-radius: 8px;
  text-align: center;
}

.nfb-math-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.nfb-math-block__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e87a61;
}

.nfb-math-block__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nfb-math-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.15s ease;
}

.nfb-math-block__btn--edit {
  color: #64748b;
}

.nfb-math-block__btn--edit:hover {
  color: #e87a61;
  background: rgba(232, 122, 97, 0.08);
  border-color: rgba(232, 122, 97, 0.3);
}

.nfb-math-block__btn--delete {
  color: #94a3b8;
}

.nfb-math-block__btn--delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

.nfb-math-block__preview {
  min-height: 2.5em;
  margin-bottom: 0.75rem;
  font-size: 1.35em;
}

.nfb-math-block__preview--empty {
  color: #cbd5e1;
  font-size: 0.9rem;
  font-style: italic;
}

.nfb-math-block__preview--error {
  color: #94a3b8;
  font-family: monospace;
  font-size: 0.9rem;
}

.nfb-math-block__input {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font-family: 'KaTeX_Main', 'Consolas', monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
}

.nfb-math-block__input::placeholder {
  color: #94a3b8;
}

.nfb-math-block__input:focus {
  outline: none;
  border-color: #e87a61;
  box-shadow: 0 0 0 2px rgba(232, 122, 97, 0.15);
}

.nfb-math-block__hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.5rem;
}

/* --- Inline Math Bubble (when cursor in $...$) --- */
.nfb-inline-math-bubble {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Floating overlay — positioned above selection */
.nfb-inline-math-bubble--floating {
  position: fixed;
  transform: translate(-50%, 0);
  z-index: 99999;
}

.nfb-inline-math-bubble__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nfb-inline-math-bubble__btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* ============================================================
   TWO COLUMN LAYOUT — Editor + preview (structural, not a card)
   Amir & Mixel — 2026
============================================================ */

/* --- Editor: inner row holds two column nodes --- */
.tiptap.ProseMirror .nfb-two-column--editor .nfb-two-column__columns,
.ProseMirror .nfb-two-column--editor .nfb-two-column__columns,
.editor-shared .nfb-two-column--editor .nfb-two-column__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px; /* align with preview / future layout blocks */
  align-items: start; /* flex-start equivalent — no vertical stretch between unequal columns */
}

.tiptap.ProseMirror .nfb-two-column--editor,
.ProseMirror .nfb-two-column--editor,
.editor-shared .nfb-two-column--editor {
  margin: 1.35rem 0;
  padding: 0;
}

/*
 * Columns headers also use .nfb-section-label; global rule forces display:block !important
 * and padding:0 !important, so title + Delete stay inline on the left. Restore flex + padding
 * so Delete sits on the right like Verse, Infobox, etc.
 */
.tiptap.ProseMirror .nfb-two-column--editor .nfb-two-column__header.nfb-section-label,
.ProseMirror .nfb-two-column--editor .nfb-two-column__header.nfb-section-label,
.editor-shared .nfb-two-column--editor .nfb-two-column__header.nfb-section-label,
.tiptap.ProseMirror .nfb-three-column--editor .nfb-three-column__header.nfb-section-label,
.ProseMirror .nfb-three-column--editor .nfb-three-column__header.nfb-section-label,
.editor-shared .nfb-three-column--editor .nfb-three-column__header.nfb-section-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.4rem 0.6rem !important;
  margin: 0 0 0.5rem 0 !important;
  pointer-events: auto !important;
}

.tiptap.ProseMirror .nfb-two-column--editor .nfb-two-column__header-title,
.ProseMirror .nfb-two-column--editor .nfb-two-column__header-title,
.editor-shared .nfb-two-column--editor .nfb-two-column__header-title,
.tiptap.ProseMirror .nfb-three-column--editor .nfb-three-column__header-title,
.ProseMirror .nfb-three-column--editor .nfb-three-column__header-title,
.editor-shared .nfb-three-column--editor .nfb-three-column__header-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Column cells — light outline, comfortable padding (2 + 3 column layouts) */
.tiptap.ProseMirror .nfb-two-column__col,
.ProseMirror .nfb-two-column__col,
.editor-shared .nfb-two-column__col,
.tiptap.ProseMirror .nfb-three-column__col,
.ProseMirror .nfb-three-column__col,
.editor-shared .nfb-three-column__col {
  min-width: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.6);
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Editor only: subtle hover feedback on column shell */
.tiptap.ProseMirror .nfb-two-column--editor .nfb-two-column__col:hover,
.ProseMirror .nfb-two-column--editor .nfb-two-column__col:hover,
.editor-shared .nfb-two-column--editor .nfb-two-column__col:hover,
.tiptap.ProseMirror .nfb-three-column--editor .nfb-three-column__col:hover,
.ProseMirror .nfb-three-column--editor .nfb-three-column__col:hover,
.editor-shared .nfb-three-column--editor .nfb-three-column__col:hover {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(248, 250, 252, 0.85);
}

/* Placeholders (editor only): left vs right */
.tiptap.ProseMirror .nfb-two-column__col--left > p:first-child:last-child:empty::before,
.ProseMirror .nfb-two-column__col--left > p:first-child:last-child:empty::before {
  content: "Add content...";
  color: #94a3b8;
  pointer-events: none;
}

.tiptap.ProseMirror .nfb-two-column__col--right > p:first-child:last-child:empty::before,
.ProseMirror .nfb-two-column__col--right > p:first-child:last-child:empty::before {
  content: "Add content...";
  color: #94a3b8;
  pointer-events: none;
}

/* ProseMirror empty paragraph often contains only a trailing break */
.tiptap.ProseMirror .nfb-two-column__col--left > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.ProseMirror .nfb-two-column__col--left > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.tiptap.ProseMirror .nfb-two-column__col--right > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.ProseMirror .nfb-two-column__col--right > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before {
  content: "Add content...";
  color: #94a3b8;
  pointer-events: none;
}

/* --- Preview / saved HTML: two column divs are direct children of wrapper --- */
.tiptap.ProseMirror .nfb-two-column[data-nfb-two-column]:not(.nfb-two-column--editor),
.ProseMirror .nfb-two-column[data-nfb-two-column]:not(.nfb-two-column--editor),
.editor-shared .nfb-two-column[data-nfb-two-column]:not(.nfb-two-column--editor),
.is-preview .nfb-two-column[data-nfb-two-column],
.article-body .nfb-two-column[data-nfb-two-column] {
  display: grid;
  /* Cap column line length on wide viewports; center pair when there’s extra space */
  grid-template-columns: repeat(2, minmax(0, 680px));
  justify-content: center;
  gap: 32px;
  align-items: start;
  margin: 1.35rem 0;
}

.is-preview .nfb-two-column[data-nfb-two-column] .nfb-two-column__col,
.article-body .nfb-two-column[data-nfb-two-column] .nfb-two-column__col {
  max-width: 680px;
  padding: 0;
  border: none;
  background: transparent;
}

/* --- Mobile: stack left then right --- */
@media (max-width: 640px) {
  .tiptap.ProseMirror .nfb-two-column--editor .nfb-two-column__columns,
  .ProseMirror .nfb-two-column--editor .nfb-two-column__columns,
  .editor-shared .nfb-two-column--editor .nfb-two-column__columns,
  .tiptap.ProseMirror .nfb-two-column[data-nfb-two-column]:not(.nfb-two-column--editor),
  .ProseMirror .nfb-two-column[data-nfb-two-column]:not(.nfb-two-column--editor),
  .editor-shared .nfb-two-column[data-nfb-two-column]:not(.nfb-two-column--editor),
  .is-preview .nfb-two-column[data-nfb-two-column],
  .article-body .nfb-two-column[data-nfb-two-column] {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .is-preview .nfb-two-column[data-nfb-two-column] .nfb-two-column__col,
  .article-body .nfb-two-column[data-nfb-two-column] .nfb-two-column__col {
    max-width: none;
  }

  .tiptap.ProseMirror .nfb-three-column--editor .nfb-three-column__columns,
  .ProseMirror .nfb-three-column--editor .nfb-three-column__columns,
  .editor-shared .nfb-three-column--editor .nfb-three-column__columns,
  .tiptap.ProseMirror .nfb-three-column[data-nfb-three-column]:not(.nfb-three-column--editor),
  .ProseMirror .nfb-three-column[data-nfb-three-column]:not(.nfb-three-column--editor),
  .editor-shared .nfb-three-column[data-nfb-three-column]:not(.nfb-three-column--editor),
  .is-preview .nfb-three-column[data-nfb-three-column],
  .article-body .nfb-three-column[data-nfb-three-column] {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .is-preview .nfb-three-column[data-nfb-three-column] .nfb-three-column__col,
  .article-body .nfb-three-column[data-nfb-three-column] .nfb-three-column__col {
    max-width: none;
  }
}

/* ============================================================
   THREE COLUMN LAYOUT — Editor + preview (same system as 2 Columns)
============================================================ */

.tiptap.ProseMirror .nfb-three-column--editor .nfb-three-column__columns,
.ProseMirror .nfb-three-column--editor .nfb-three-column__columns,
.editor-shared .nfb-three-column--editor .nfb-three-column__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px; /* slightly tighter than 2-col (32px) for three tracks */
  align-items: start;
}

.tiptap.ProseMirror .nfb-three-column--editor,
.ProseMirror .nfb-three-column--editor,
.editor-shared .nfb-three-column--editor {
  margin: 1.35rem 0;
  padding: 0;
}

/* Placeholders — left / middle / right */
.tiptap.ProseMirror .nfb-three-column__col--left > p:first-child:last-child:empty::before,
.ProseMirror .nfb-three-column__col--left > p:first-child:last-child:empty::before,
.tiptap.ProseMirror .nfb-three-column__col--middle > p:first-child:last-child:empty::before,
.ProseMirror .nfb-three-column__col--middle > p:first-child:last-child:empty::before,
.tiptap.ProseMirror .nfb-three-column__col--right > p:first-child:last-child:empty::before,
.ProseMirror .nfb-three-column__col--right > p:first-child:last-child:empty::before {
  content: "Add content...";
  color: #94a3b8;
  pointer-events: none;
}

.tiptap.ProseMirror .nfb-three-column__col--left > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.ProseMirror .nfb-three-column__col--left > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.tiptap.ProseMirror .nfb-three-column__col--middle > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.ProseMirror .nfb-three-column__col--middle > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.tiptap.ProseMirror .nfb-three-column__col--right > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.ProseMirror .nfb-three-column__col--right > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before {
  content: "Add content...";
  color: #94a3b8;
  pointer-events: none;
}

.tiptap.ProseMirror .nfb-three-column[data-nfb-three-column]:not(.nfb-three-column--editor),
.ProseMirror .nfb-three-column[data-nfb-three-column]:not(.nfb-three-column--editor),
.editor-shared .nfb-three-column[data-nfb-three-column]:not(.nfb-three-column--editor),
.is-preview .nfb-three-column[data-nfb-three-column],
.article-body .nfb-three-column[data-nfb-three-column] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 400px));
  justify-content: center;
  gap: 28px;
  align-items: start;
  margin: 1.35rem 0;
}

.is-preview .nfb-three-column[data-nfb-three-column] .nfb-three-column__col,
.article-body .nfb-three-column[data-nfb-three-column] .nfb-three-column__col {
  max-width: 400px;
  padding: 0;
  border: none;
  background: transparent;
}

/* ============================================================
   ARTICLE SECTION — Layout wrapper (not layoutSection / nfb-layout grid)
   Editor: visible container; preview: structural spacing + width only
============================================================ */

/* --- Editor --- */
.tiptap.ProseMirror section.nfb-section.nfb-section--editor,
.ProseMirror section.nfb-section.nfb-section--editor,
.editor-shared section.nfb-section.nfb-section--editor {
  display: block;
  margin: 32px 0;
  padding: 18px 22px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.55);
  box-sizing: border-box;
}

.tiptap.ProseMirror .nfb-section--editor .nfb-section__content,
.ProseMirror .nfb-section--editor .nfb-section__content,
.editor-shared .nfb-section--editor .nfb-section__content {
  min-width: 0;
}

/* Normal Section only: justify like main column. Wide/Full use reading measure + left (see below). TipTap inline textAlign still wins. */
.tiptap.ProseMirror .nfb-section--editor.nfb-section--width-normal .nfb-section__content p,
.ProseMirror .nfb-section--editor.nfb-section--width-normal .nfb-section__content p,
.editor-shared .nfb-section--editor.nfb-section--width-normal .nfb-section__content p {
  text-align: justify;
  hyphens: auto;
  text-justify: inter-word;
}

/* Section header — internal label reads as UI chrome, not article title */
.tiptap.ProseMirror .nfb-section__header-kicker,
.ProseMirror .nfb-section__header-kicker,
.editor-shared .nfb-section__header-kicker {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  flex-shrink: 0;
  line-height: 1.2;
}

.tiptap.ProseMirror .nfb-section__header-label-suffix,
.ProseMirror .nfb-section__header-label-suffix,
.editor-shared .nfb-section__header-label-suffix {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #9ca3af;
  font-style: normal;
  line-height: 1.2;
}

.tiptap.ProseMirror .nfb-section__editor-label-input,
.ProseMirror .nfb-section__editor-label-input,
.editor-shared .nfb-section__editor-label-input {
  /* Header uses user-select: none; keep field editable */
  user-select: text;
  pointer-events: auto;
  flex: 1 1 120px;
  min-width: 88px;
  max-width: 220px;
  font-size: 0.65rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding: 0.2rem 0.4rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
  color: #64748b;
}

.tiptap.ProseMirror .nfb-section__editor-label-input::placeholder,
.ProseMirror .nfb-section__editor-label-input::placeholder,
.editor-shared .nfb-section__editor-label-input::placeholder {
  color: #b4bcc8;
  font-weight: 400;
}

.tiptap.ProseMirror .nfb-section__editor-label-input:focus,
.ProseMirror .nfb-section__editor-label-input:focus,
.editor-shared .nfb-section__editor-label-input:focus {
  outline: none;
  border-color: #cbd5e1;
  background: #fff;
  color: #475569;
}

.tiptap.ProseMirror .nfb-section__width-select,
.ProseMirror .nfb-section__width-select,
.editor-shared .nfb-section__width-select {
  pointer-events: auto;
  user-select: auto;
}

/* Width in editor (mirrors preview). Accent bar = mode is obvious even before counting pixels. */
.tiptap.ProseMirror .nfb-section--editor.nfb-section--width-normal,
.ProseMirror .nfb-section--editor.nfb-section--width-normal,
.editor-shared .nfb-section--editor.nfb-section--width-normal {
  max-width: var(--nfb-max-width-content);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  box-shadow: inset 4px 0 0 0 #94a3b8;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.06),
    transparent 10px
  );
}

.tiptap.ProseMirror .nfb-section--editor.nfb-section--width-wide,
.ProseMirror .nfb-section--editor.nfb-section--width-wide,
.editor-shared .nfb-section--editor.nfb-section--width-wide {
  max-width: var(--nfb-max-width-wide);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  box-shadow: inset 4px 0 0 0 #2563eb;
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.07),
    transparent 12px
  );
}

/* Full: same canvas width as editor column (ProseMirror has no horizontal padding — see user-editor-layout) */
.tiptap.ProseMirror .nfb-section--editor.nfb-section--width-full,
.ProseMirror .nfb-section--editor.nfb-section--width-full,
.editor-shared .nfb-section--editor.nfb-section--width-full {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  box-shadow: inset 4px 0 0 0 #7c3aed;
  background: linear-gradient(
    90deg,
    rgba(124, 58, 237, 0.08),
    transparent 14px
  );
}

/* Placeholder (editor) — gentle hint about headings; not a requirement */
.tiptap.ProseMirror .nfb-section--editor .nfb-section__content > p:first-child:last-child:empty::before,
.ProseMirror .nfb-section--editor .nfb-section__content > p:first-child:last-child:empty::before {
  content: "Start writing… Optional: add a heading (H2/H3) if this part needs a reader-facing title.";
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.9em;
  line-height: 1.45;
}

.tiptap.ProseMirror .nfb-section--editor .nfb-section__content > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before,
.ProseMirror .nfb-section--editor .nfb-section__content > p:first-child:last-child:has(br.ProseMirror-trailingBreak:only-child)::before {
  content: "Start writing… Optional: add a heading (H2/H3) if this part needs a reader-facing title.";
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.9em;
  line-height: 1.45;
}

/* --- Preview / saved HTML (no editor chrome) --- */
.tiptap.ProseMirror section.nfb-section[data-nfb-section]:not(.nfb-section--editor),
.ProseMirror section.nfb-section[data-nfb-section]:not(.nfb-section--editor),
.editor-shared section.nfb-section[data-nfb-section]:not(.nfb-section--editor),
.is-preview section.nfb-section[data-nfb-section],
.article-body section.nfb-section[data-nfb-section] {
  display: block;
  margin: 32px 0;
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

/* Preview / saved HTML: Normal stays reading measure; Wide breaks out past .nfb-article 720 when needed */
.is-preview section.nfb-section--width-normal,
.article-body section.nfb-section--width-normal,
.nfb-article .article-body section.nfb-section--width-normal {
  max-width: var(--nfb-max-width-content);
  margin-left: auto;
  margin-right: auto;
}

.is-preview section.nfb-section--width-wide,
.article-body section.nfb-section--width-wide,
.nfb-article .article-body section.nfb-section--width-wide {
  max-width: var(--nfb-max-width-wide);
  width: min(100vw - 2rem, var(--nfb-max-width-wide));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Full: viewport-edge band inside narrow article column (breakout from ~720 parent; 50% = parent width) */
.is-preview section.nfb-section--width-full,
.article-body section.nfb-section--width-full,
.nfb-article .article-body section.nfb-section--width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* ============================================================
   ARTICLE SECTION — Prose inside Wide / Full (editorial measure)
   Section width = layout canvas; body copy stays ~720 + left-aligned (no justify “rivers”).
   Wide blocks (figure, table, grid, embed, math, layout section) stay full section width.
============================================================ */

.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > p,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > p,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > p,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > p,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > p,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > p,
.is-preview section.nfb-section--width-wide > p,
.is-preview section.nfb-section--width-full > p,
.article-body section.nfb-section--width-wide > p,
.article-body section.nfb-section--width-full > p,
.nfb-article .article-body section.nfb-section--width-wide > p,
.nfb-article .article-body section.nfb-section--width-full > p,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h1,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h1,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h1,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h2,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h2,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h2,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h3,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h3,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h3,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h4,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h4,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h4,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h5,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h5,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h5,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h6,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h6,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > h6,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h1,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h1,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h1,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h2,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h2,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h2,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h3,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h3,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h3,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h4,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h4,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h4,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h5,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h5,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h5,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h6,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h6,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > h6,
.is-preview section.nfb-section--width-wide > h1,
.is-preview section.nfb-section--width-wide > h2,
.is-preview section.nfb-section--width-wide > h3,
.is-preview section.nfb-section--width-wide > h4,
.is-preview section.nfb-section--width-wide > h5,
.is-preview section.nfb-section--width-wide > h6,
.is-preview section.nfb-section--width-full > h1,
.is-preview section.nfb-section--width-full > h2,
.is-preview section.nfb-section--width-full > h3,
.is-preview section.nfb-section--width-full > h4,
.is-preview section.nfb-section--width-full > h5,
.is-preview section.nfb-section--width-full > h6,
.article-body section.nfb-section--width-wide > h1,
.article-body section.nfb-section--width-wide > h2,
.article-body section.nfb-section--width-wide > h3,
.article-body section.nfb-section--width-wide > h4,
.article-body section.nfb-section--width-wide > h5,
.article-body section.nfb-section--width-wide > h6,
.article-body section.nfb-section--width-full > h1,
.article-body section.nfb-section--width-full > h2,
.article-body section.nfb-section--width-full > h3,
.article-body section.nfb-section--width-full > h4,
.article-body section.nfb-section--width-full > h5,
.article-body section.nfb-section--width-full > h6,
.nfb-article .article-body section.nfb-section--width-wide > h1,
.nfb-article .article-body section.nfb-section--width-wide > h2,
.nfb-article .article-body section.nfb-section--width-wide > h3,
.nfb-article .article-body section.nfb-section--width-wide > h4,
.nfb-article .article-body section.nfb-section--width-wide > h5,
.nfb-article .article-body section.nfb-section--width-wide > h6,
.nfb-article .article-body section.nfb-section--width-full > h1,
.nfb-article .article-body section.nfb-section--width-full > h2,
.nfb-article .article-body section.nfb-section--width-full > h3,
.nfb-article .article-body section.nfb-section--width-full > h4,
.nfb-article .article-body section.nfb-section--width-full > h5,
.nfb-article .article-body section.nfb-section--width-full > h6,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > ul,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > ul,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > ul,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > ol,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > ol,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > ol,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > ul,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > ul,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > ul,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > ol,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > ol,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > ol,
.is-preview section.nfb-section--width-wide > ul,
.is-preview section.nfb-section--width-wide > ol,
.is-preview section.nfb-section--width-full > ul,
.is-preview section.nfb-section--width-full > ol,
.article-body section.nfb-section--width-wide > ul,
.article-body section.nfb-section--width-wide > ol,
.article-body section.nfb-section--width-full > ul,
.article-body section.nfb-section--width-full > ol,
.nfb-article .article-body section.nfb-section--width-wide > ul,
.nfb-article .article-body section.nfb-section--width-wide > ol,
.nfb-article .article-body section.nfb-section--width-full > ul,
.nfb-article .article-body section.nfb-section--width-full > ol,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > blockquote,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > blockquote,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > blockquote,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > blockquote,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > blockquote,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > blockquote,
.is-preview section.nfb-section--width-wide > blockquote,
.is-preview section.nfb-section--width-full > blockquote,
.article-body section.nfb-section--width-wide > blockquote,
.article-body section.nfb-section--width-full > blockquote,
.nfb-article .article-body section.nfb-section--width-wide > blockquote,
.nfb-article .article-body section.nfb-section--width-full > blockquote,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > pre,
.ProseMirror section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > pre,
.editor-shared section.nfb-section--editor.nfb-section--width-wide .nfb-section__content > pre,
.tiptap.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > pre,
.ProseMirror section.nfb-section--editor.nfb-section--width-full .nfb-section__content > pre,
.editor-shared section.nfb-section--editor.nfb-section--width-full .nfb-section__content > pre,
.is-preview section.nfb-section--width-wide > pre,
.is-preview section.nfb-section--width-full > pre,
.article-body section.nfb-section--width-wide > pre,
.article-body section.nfb-section--width-full > pre,
.nfb-article .article-body section.nfb-section--width-wide > pre,
.nfb-article .article-body section.nfb-section--width-full > pre {
  max-width: var(--nfb-max-width-content);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  text-align: left;
  hyphens: manual;
  text-justify: auto;
}

/* ============================================================
   NFB GRID LAYOUT — 2–6 columns × dynamic rows
   Canonical: __grid stacks __row; each row is its own CSS grid of cells.
   Legacy: flat __grid > .nfb-grid-item (items-N) still supported for old HTML.
============================================================ */

.nfb-grid-layout__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}

/* Exported / reader row: cells are direct children of .nfb-grid-layout__row */
.nfb-grid-layout[data-nfb-grid-columns="2"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor),
.nfb-grid-layout[data-nfb-grid-columns="3"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor),
.nfb-grid-layout[data-nfb-grid-columns="4"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor),
.nfb-grid-layout[data-nfb-grid-columns="5"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor),
.nfb-grid-layout[data-nfb-grid-columns="6"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor) {
  display: grid;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.nfb-grid-layout[data-nfb-grid-columns="2"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="3"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="4"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="5"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="6"] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Editor: cells live in .nfb-grid-layout__row__cells */
.nfb-grid-layout[data-nfb-grid-columns="2"] .nfb-grid-layout__row__cells {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="3"] .nfb-grid-layout__row__cells {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="4"] .nfb-grid-layout__row__cells {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="5"] .nfb-grid-layout__row__cells {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nfb-grid-layout[data-nfb-grid-columns="6"] .nfb-grid-layout__row__cells {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.nfb-grid-layout__row__cells {
  display: grid;
  gap: 16px;
  align-items: start;
  min-width: 0;
  flex: 1;
}

.nfb-grid-layout__row--editor {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 0.3rem 0.35rem 0.3rem 0.15rem;
  margin: 1px 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.nfb-grid-layout__row--editor:hover {
  background: rgba(241, 245, 249, 0.72);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.nfb-grid-layout__row-gutter {
  flex: 0 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.4rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nfb-grid-layout__row--editor:hover .nfb-grid-layout__row-gutter {
  opacity: 1;
}

.nfb-grid-layout__row-delete {
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 600;
  padding: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  border: 1px solid #fecaca;
  background: #fff;
  color: #ef4444;
  cursor: pointer;
}

.nfb-grid-layout__row-delete:hover {
  background: #fef2f2;
}

/* Add row — clearer affordance + touch-friendly target (editor only) */
.nfb-grid-layout--editor .nfb-grid-layout__btn-add-row {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 0.55rem 1rem;
  min-height: 2.55rem;
  border-radius: 8px;
  border: 1px dashed #94a3b8;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.nfb-grid-layout--editor .nfb-grid-layout__btn-add-row:hover {
  background: #e2e8f0;
  border-color: #64748b;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07);
}

.nfb-grid-layout--editor .nfb-grid-layout__btn-add-row:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Legacy flat grid (old saves) */
.nfb-grid-layout--items-3 > .nfb-grid-layout__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.nfb-grid-layout--items-4 > .nfb-grid-layout__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.nfb-grid-layout--items-5 > .nfb-grid-layout__grid,
.nfb-grid-layout--items-6 > .nfb-grid-layout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .nfb-grid-layout[data-nfb-grid-columns] > .nfb-grid-layout__grid > .nfb-grid-layout__row:not(.nfb-grid-layout__row--editor),
  .nfb-grid-layout[data-nfb-grid-columns] .nfb-grid-layout__row__cells {
    grid-template-columns: 1fr;
  }

  .nfb-grid-layout--items-3 > .nfb-grid-layout__grid,
  .nfb-grid-layout--items-4 > .nfb-grid-layout__grid {
    grid-template-columns: 1fr;
  }
}

/* Legacy flat saves (before __grid + --with-grid-shell) */
.nfb-grid-layout[data-nfb-grid-layout]:not(.nfb-grid-layout--with-grid-shell):not(.nfb-grid-layout--editor) {
  display: grid;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.nfb-grid-layout--items-3[data-nfb-grid-layout]:not(.nfb-grid-layout--with-grid-shell):not(.nfb-grid-layout--editor) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nfb-grid-layout--items-4[data-nfb-grid-layout]:not(.nfb-grid-layout--with-grid-shell):not(.nfb-grid-layout--editor) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nfb-grid-layout--items-5[data-nfb-grid-layout]:not(.nfb-grid-layout--with-grid-shell):not(.nfb-grid-layout--editor),
.nfb-grid-layout--items-6[data-nfb-grid-layout]:not(.nfb-grid-layout--with-grid-shell):not(.nfb-grid-layout--editor) {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (max-width: 640px) {
  .nfb-grid-layout--items-3[data-nfb-grid-layout]:not(.nfb-grid-layout--with-grid-shell):not(.nfb-grid-layout--editor),
  .nfb-grid-layout--items-4[data-nfb-grid-layout]:not(.nfb-grid-layout--with-grid-shell):not(.nfb-grid-layout--editor) {
    grid-template-columns: 1fr;
  }
}

/* Default cell shell (editor content areas without --editor use sparingly) */
.nfb-grid-item {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: transparent;
}

/* Editor: tool-like chrome — clearly editable */
.tiptap.ProseMirror .nfb-grid-layout--editor .nfb-grid-item,
.ProseMirror .nfb-grid-layout--editor .nfb-grid-item,
.editor-shared .nfb-grid-layout--editor .nfb-grid-item {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(248, 250, 252, 0.96);
}

/* In-app preview / article-body: same card language as .nfb-article (see nfb-content-shared) */
.is-preview .nfb-grid-layout:not(.nfb-grid-layout--editor) .nfb-grid-item,
.article-body .nfb-grid-layout:not(.nfb-grid-layout--editor) .nfb-grid-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px;
  border-radius: 10px;
  box-shadow: none;
}

@media (hover: hover) {
  .is-preview .nfb-grid-layout:not(.nfb-grid-layout--editor) .nfb-grid-item:hover,
  .article-body .nfb-grid-layout:not(.nfb-grid-layout--editor) .nfb-grid-item:hover {
    border-color: rgba(0, 0, 0, 0.12);
  }
}

.nfb-grid-item > *:first-child {
  margin-top: 0;
}

.nfb-grid-item > *:last-child {
  margin-bottom: 0;
}

.tiptap.ProseMirror .nfb-grid-layout--editor,
.ProseMirror .nfb-grid-layout--editor,
.editor-shared .nfb-grid-layout--editor {
  margin: 1.25rem 0;
}

/* ============================================================
   NFB TIMELINE — article layout: date | rail+marker | title + body
============================================================ */

.nfb-timeline__track {
  position: relative;
  --nfb-tl-date: 5.85rem;
  --nfb-tl-rail: 1.2rem;
  --nfb-tl-gap: 0.75rem;
}

.nfb-timeline__line {
  position: absolute;
  left: calc(var(--nfb-tl-date) + var(--nfb-tl-gap) + var(--nfb-tl-rail) / 2);
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.05) 0%,
    rgba(100, 116, 139, 0.14) 45%,
    rgba(15, 23, 42, 0.06) 100%
  );
  border-radius: 1px;
  z-index: 0;
  pointer-events: none;
}

.nfb-timeline__items {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.nfb-timeline-item {
  display: grid;
  grid-template-columns: var(--nfb-tl-date) var(--nfb-tl-rail) minmax(0, 1fr);
  column-gap: var(--nfb-tl-gap);
  align-items: start;
  margin-bottom: 1.45rem;
}

.nfb-timeline-item:last-child {
  margin-bottom: 0;
}

.nfb-timeline-item__date {
  text-align: right;
  padding-top: 0.12rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  color: #64748b;
  letter-spacing: 0.02em;
}

.nfb-timeline-item__date--empty {
  min-height: 1.35em;
}

.nfb-timeline-item__rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 0.15rem;
}

/* Compact dot: same bullseye language, smaller footprint */
.nfb-timeline-item__marker {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0f172a;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.14),
    0 0 0 3px rgba(148, 163, 184, 0.32),
    0 1px 2px rgba(15, 23, 42, 0.05);
  z-index: 2;
}

.nfb-timeline-item__main {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
  padding-top: 0.05rem;
}

.nfb-timeline-item__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #020617;
  letter-spacing: -0.012em;
}

.nfb-timeline-item__title--empty {
  display: none;
}

.nfb-timeline-item__content {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
}

.nfb-timeline-item__content > *:first-child {
  margin-top: 0;
}

.nfb-timeline-item__content > *:last-child {
  margin-bottom: 0;
}

/* Editor: spine matches published; same gradient as modern (slightly stronger) */
.tiptap.ProseMirror .nfb-timeline--editor .nfb-timeline__line,
.ProseMirror .nfb-timeline--editor .nfb-timeline__line,
.editor-shared .nfb-timeline--editor .nfb-timeline__line {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(100, 116, 139, 0.16) 50%,
    rgba(15, 23, 42, 0.07) 100%
  );
}

.nfb-timeline-item__date-col {
  text-align: right;
}

.nfb-timeline-item__date-input {
  width: 100%;
  max-width: 100%;
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.35rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
  color: #6b7280;
  pointer-events: auto;
  box-sizing: border-box;
}

.nfb-timeline-item__date-input:focus {
  outline: none;
  border-color: #cbd5e1;
  background: #fff;
  color: #475569;
}

.nfb-timeline-item__title-input {
  width: 100%;
  max-width: 100%;
  font-size: 0.925rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  padding: 0.2rem 0.4rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fafafa;
  color: #0f172a;
  pointer-events: auto;
  box-sizing: border-box;
}

.nfb-timeline-item__title-input:focus {
  outline: none;
  border-color: #cbd5e1;
  background: #fff;
}

.nfb-timeline-item__title-row {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .nfb-timeline__track {
    --nfb-tl-date: 4.75rem;
    --nfb-tl-rail: 1.1rem;
    --nfb-tl-gap: 0.55rem;
  }

  .nfb-timeline-item__date,
  .nfb-timeline-item__date-input {
    font-size: 0.625rem;
  }

  .nfb-timeline-item__title {
    font-size: 0.875rem;
  }

  .nfb-timeline-item__content {
    font-size: 0.75rem;
  }

  .nfb-timeline-item__marker {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }
}

.tiptap.ProseMirror .nfb-timeline--editor,
.ProseMirror .nfb-timeline--editor,
.editor-shared .nfb-timeline--editor {
  margin: 1.35rem 0;
}

/* ============================================================
   NFB MODERN TIMELINE — milestone cards + vertical axis
   Editorial tone: light date label, strong spine dots, airy rhythm
============================================================ */

.nfb-modern-timeline__track {
  position: relative;
  --nfb-mtl-rail: 1.75rem;
  --nfb-mtl-gap: 1rem;
}

/* Line centered on rail axis (exact dot alignment) */
.nfb-modern-timeline__line {
  position: absolute;
  left: calc(var(--nfb-mtl-rail) / 2);
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.05) 0%,
    rgba(100, 116, 139, 0.14) 45%,
    rgba(15, 23, 42, 0.06) 100%
  );
  border-radius: 1px;
  z-index: 0;
  pointer-events: none;
}

.nfb-modern-timeline__items {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.nfb-modern-timeline-item {
  display: grid;
  grid-template-columns: var(--nfb-mtl-rail) minmax(0, 1fr);
  column-gap: var(--nfb-mtl-gap);
  align-items: start;
  margin-bottom: 1.85rem;
}

.nfb-modern-timeline-item:last-child {
  margin-bottom: 0;
}

.nfb-modern-timeline-item__rail {
  display: flex;
  justify-content: center;
  padding-top: 1.15rem;
}

.nfb-modern-timeline-item > .nfb-modern-timeline-item__marker {
  justify-self: center;
  margin-top: 1.15rem;
}

.nfb-modern-timeline-item__marker {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #0f172a;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.14),
    0 0 0 4px rgba(148, 163, 184, 0.35),
    0 1px 2px rgba(15, 23, 42, 0.06);
  z-index: 2;
}

/* Optional: last milestone — stronger “current” anchor */
.nfb-modern-timeline-item:last-child .nfb-modern-timeline-item__marker {
  width: 15px;
  height: 15px;
  background: #020617;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(15, 23, 42, 0.2),
    0 2px 10px rgba(15, 23, 42, 0.14);
}

.nfb-modern-timeline-item:last-child .nfb-modern-timeline-item__card {
  border-color: rgba(15, 23, 42, 0.085);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 6px 18px rgba(15, 23, 42, 0.055);
}

.nfb-modern-timeline-item__card {
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.055);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.035);
}

/* Date: quiet “label”, not a heavy badge */
.nfb-modern-timeline-item__date {
  display: inline-block;
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(100, 116, 139, 0.22);
  padding: 0.22rem 0.5rem;
  border-radius: 5px;
}

.nfb-modern-timeline-item__date--empty {
  min-height: 1.5em;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.nfb-modern-timeline-item__title {
  margin: 0 0 0.7rem;
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.28;
  color: #020617;
  letter-spacing: -0.028em;
}

.nfb-modern-timeline-item__title--empty {
  display: none;
}

.nfb-modern-timeline-item__content {
  font-size: 0.9375rem;
  line-height: 1.58;
  color: #64748b;
}

.nfb-modern-timeline-item__content > *:first-child {
  margin-top: 0;
}

.nfb-modern-timeline-item__content > *:last-child {
  margin-bottom: 0;
}

/* Preview / published HTML: hide default empty slot (date + title + empty ¶) */
.nfb-article .nfb-modern-timeline-item[data-nfb-modern-timeline-empty="1"],
.is-preview .nfb-modern-timeline:not(.nfb-modern-timeline--editor)
  .nfb-modern-timeline-item[data-nfb-modern-timeline-empty="1"],
.editor-shared.is-preview .nfb-modern-timeline-item[data-nfb-modern-timeline-empty="1"] {
  display: none !important;
}

/* Editor: unfilled slot — readable, not “broken UI” */
.nfb-modern-timeline-item__card--editor-placeholder {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(248, 250, 252, 0.85);
}

/* Editor: inputs inside card */
.nfb-modern-timeline-item__date-row {
  margin-bottom: 0.35rem;
}

.nfb-modern-timeline-item__date-input {
  display: inline-block;
  width: auto;
  min-width: 6rem;
  max-width: 100%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 5px;
  background: rgba(248, 250, 252, 0.98);
  color: #64748b;
  pointer-events: auto;
  box-sizing: border-box;
}

.nfb-modern-timeline-item__date-input:focus {
  outline: none;
  border-color: #94a3b8;
  background: #fff;
  color: #475569;
}

.nfb-modern-timeline-item__title-input {
  width: 100%;
  max-width: 100%;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.28;
  padding: 0.15rem 0.35rem;
  margin-bottom: 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fafafa;
  color: #020617;
  pointer-events: auto;
  box-sizing: border-box;
}

.nfb-modern-timeline-item__title-input:focus {
  outline: none;
  border-color: #cbd5e1;
  background: #fff;
}

.nfb-modern-timeline-item__title-row {
  margin-bottom: 0;
}

/* Editor: Body placeholder (empty first paragraph) */
.tiptap.ProseMirror .nfb-modern-timeline-item__content > p:only-child:empty,
.ProseMirror .nfb-modern-timeline-item__content > p:only-child:empty,
.editor-shared .nfb-modern-timeline-item__content > p:only-child:empty {
  position: relative;
}

.tiptap.ProseMirror .nfb-modern-timeline-item__content > p:only-child:has(br:only-child),
.ProseMirror .nfb-modern-timeline-item__content > p:only-child:has(br:only-child),
.editor-shared .nfb-modern-timeline-item__content > p:only-child:has(br:only-child) {
  position: relative;
}

.tiptap.ProseMirror .nfb-modern-timeline-item__content > p:only-child:empty::before,
.ProseMirror .nfb-modern-timeline-item__content > p:only-child:empty::before,
.editor-shared .nfb-modern-timeline-item__content > p:only-child:empty::before {
  content: "Body";
  position: absolute;
  left: 0;
  top: 0;
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.9375rem;
  line-height: 1.58;
}

.tiptap.ProseMirror .nfb-modern-timeline-item__content > p:only-child:has(br:only-child)::before,
.ProseMirror .nfb-modern-timeline-item__content > p:only-child:has(br:only-child)::before,
.editor-shared .nfb-modern-timeline-item__content > p:only-child:has(br:only-child)::before {
  content: "Body";
  position: absolute;
  left: 0;
  top: 0;
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.9375rem;
  line-height: 1.58;
}

.tiptap.ProseMirror .nfb-modern-timeline--editor .nfb-modern-timeline__line,
.ProseMirror .nfb-modern-timeline--editor .nfb-modern-timeline__line,
.editor-shared .nfb-modern-timeline--editor .nfb-modern-timeline__line {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(100, 116, 139, 0.16) 50%,
    rgba(15, 23, 42, 0.07) 100%
  );
}

.tiptap.ProseMirror .nfb-modern-timeline--editor,
.ProseMirror .nfb-modern-timeline--editor,
.editor-shared .nfb-modern-timeline--editor {
  margin: 1.35rem 0;
}

@media (max-width: 520px) {
  .nfb-modern-timeline__track {
    --nfb-mtl-rail: 1.35rem;
    --nfb-mtl-gap: 0.75rem;
  }

  .nfb-modern-timeline-item__card {
    padding: 1.05rem 1.1rem;
  }

  .nfb-modern-timeline-item__title,
  .nfb-modern-timeline-item__title-input {
    font-size: 1.15rem;
  }
}