/* ============================================================
   Beautiful Note Preview — reading themes & structured layout
   Presentation only — does not change stored markdown.
   ============================================================ */

.beautiful-note {
  --bn-accent: #b8860b;
  --bn-accent-soft: color-mix(in srgb, var(--bn-accent) 12%, transparent);
  --bn-accent-border: color-mix(in srgb, var(--bn-accent) 35%, var(--color-border));
  --bn-paper: var(--color-bg);
  --bn-section-bg: var(--color-bg-elevated);
  --bn-radius: var(--radius-lg, 12px);
  --bn-font: var(--font-body, 'Segoe UI', system-ui, sans-serif);
  --bn-display: var(--font-display, Georgia, 'Times New Roman', serif);

  flex: 1;
  overflow-y: auto;
  padding: 0;
  max-width: none;
  margin: 0;
  background: var(--bn-paper);
  font-family: var(--bn-font);
}

.beautiful-note .bn-document {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 36px 48px;
}

/* ── Meta bar (from note fields, not content) ── */
.bn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.bn-meta__subject {
  color: var(--bn-accent);
  background: var(--bn-accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.bn-meta__chapter {
  color: var(--color-text-secondary);
}

.bn-meta__dot {
  opacity: 0.45;
}

/* ── Hero title ── */
.bn-hero {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--bn-accent-border);
}

.bn-hero h1,
.bn-hero .md-h1 {
  font-family: var(--bn-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: var(--letter-spacing-tight, -0.02em);
  color: var(--color-text-primary);
}

.bn-hero .bn-lead,
.bn-hero p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.bn-hero blockquote.bn-lead {
  margin: 12px 0 0;
  padding: 14px 18px;
  border-left: 4px solid var(--bn-accent);
  background: var(--bn-accent-soft);
  border-radius: 0 var(--bn-radius) var(--bn-radius) 0;
  font-style: italic;
}

/* ── Section cards ── */
.bn-section {
  margin-bottom: 22px;
  background: var(--bn-section-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--bn-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 4%, transparent);
}

.bn-section__head {
  padding: 14px 20px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  background: color-mix(in srgb, var(--bn-accent) 4%, var(--bn-section-bg));
}

.bn-section__head h2,
.bn-section__head .md-h2 {
  margin: 0;
  font-family: var(--bn-display);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  color: var(--color-text-primary);
  border: none;
  padding: 0;
}

.bn-section__content {
  padding: 16px 22px 20px;
}

.bn-section--intro .bn-section__content {
  padding-top: 18px;
}

/* Section variants */
.bn-section--prelims .bn-section__head {
  background: color-mix(in srgb, #e85d04 8%, var(--bn-section-bg));
  border-bottom-color: color-mix(in srgb, #e85d04 25%, var(--color-border));
}

.bn-section--prelims .bn-section__head h2 { color: #c44d00; }

.bn-section--mains .bn-section__head {
  background: color-mix(in srgb, #5b4bb4 8%, var(--bn-section-bg));
}

.bn-section--mains .bn-section__head h2 { color: #5b4bb4; }

.bn-section--timeline .bn-section__head {
  background: color-mix(in srgb, #0d6e6e 8%, var(--bn-section-bg));
}

.bn-section--timeline .bn-section__head h2 { color: #0d6e6e; }

.bn-section--summary .bn-section__head,
.bn-section--revision .bn-section__head {
  background: color-mix(in srgb, var(--bn-accent) 10%, var(--bn-section-bg));
}

.bn-section--causes .bn-section__head h2 { color: #8b4513; }
.bn-section--impact .bn-section__head h2 { color: #2d6a4f; }

/* Subheadings inside sections */
.bn-subheading,
.bn-section__content h3.md-h3 {
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
  margin: 1.25rem 0 0.5rem;
  padding-left: 12px;
  border-left: 3px solid var(--bn-accent-border);
  color: var(--color-text-primary);
}

.bn-section__content h3.md-h3:first-child {
  margin-top: 0;
}

/* ── Typography inside sections ── */
.beautiful-note p {
  margin: 0 0 0.9em;
  line-height: 1.75;
  font-size: 1.02rem;
}

.beautiful-note .bn-key-line {
  padding: 6px 0;
}

.beautiful-note .bn-key-line strong {
  color: var(--bn-accent);
}

/* Lists */
.beautiful-note .bn-list {
  margin: 0.5em 0 1em;
  padding-left: 0;
  list-style: none;
}

.beautiful-note .bn-list > li {
  position: relative;
  padding: 8px 12px 8px 28px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--color-bg-subtle) 60%, transparent);
  border-radius: var(--radius-md, 8px);
  line-height: 1.6;
}

.beautiful-note .bn-list > li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 1.05em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bn-accent);
  transform: translateY(-50%);
}

.beautiful-note ol.bn-list {
  counter-reset: bn-ol;
}

.beautiful-note ol.bn-list > li {
  counter-increment: bn-ol;
  padding-left: 36px;
}

.beautiful-note ol.bn-list > li::before {
  content: counter(bn-ol);
  width: auto;
  height: auto;
  background: none;
  color: var(--bn-accent);
  font-weight: var(--font-weight-bold);
  font-size: 0.85rem;
  top: 0.95em;
  left: 10px;
}

.beautiful-note .bn-list--nested {
  margin-top: 8px;
  margin-bottom: 0;
}

.beautiful-note .bn-list--nested > li {
  background: transparent;
  padding-left: 20px;
  margin-bottom: 4px;
}

.beautiful-note .bn-list--nested > li::before {
  width: 4px;
  height: 4px;
  opacity: 0.6;
}

/* Callouts / blockquotes */
.beautiful-note .bn-callout {
  margin: 1em 0;
  padding: 14px 18px;
  border-radius: var(--bn-radius);
  border-left: 4px solid var(--bn-accent);
  background: var(--bn-accent-soft);
  color: var(--color-text-primary);
  font-size: 0.98rem;
  line-height: 1.65;
}

.beautiful-note .bn-callout--tip {
  border-left-color: #2d6a4f;
  background: color-mix(in srgb, #2d6a4f 10%, var(--bn-section-bg));
}

.beautiful-note .bn-callout--warn {
  border-left-color: #c1121f;
  background: color-mix(in srgb, #c1121f 8%, var(--bn-section-bg));
}

.beautiful-note .bn-callout--define {
  border-left-color: #5b4bb4;
  background: color-mix(in srgb, #5b4bb4 8%, var(--bn-section-bg));
}

/* Dividers */
.beautiful-note .bn-divider {
  border: none;
  height: 1px;
  margin: 1.5em 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bn-accent-border) 20%,
    var(--bn-accent-border) 80%,
    transparent
  );
}

/* Tables */
.beautiful-note .bn-table-wrap,
.beautiful-note .md-table-wrap {
  margin: 1em 0;
  border-radius: var(--bn-radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text) 5%, transparent);
}

.beautiful-note table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.beautiful-note th {
  background: color-mix(in srgb, var(--bn-accent) 12%, var(--color-bg-elevated));
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.beautiful-note th,
.beautiful-note td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}

/* Code */
.beautiful-note .md-pre {
  border-radius: var(--bn-radius);
  border: 1px solid var(--color-border);
}

.beautiful-note :not(pre) > code {
  background: color-mix(in srgb, var(--bn-accent) 10%, var(--color-bg-subtle));
  color: var(--color-text-primary);
  padding: 0.12em 0.45em;
  border-radius: 4px;
}

/* Links */
.beautiful-note a {
  color: var(--bn-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Task lists */
.beautiful-note .md-task-item {
  list-style: none;
  padding-left: 8px;
}

/* ── Theme: Classic (default gold) ── */
.bn-theme-classic {
  --bn-accent: #b8860b;
}

/* ── Theme: Ocean ── */
.bn-theme-ocean {
  --bn-accent: #1d6a96;
  --bn-paper: color-mix(in srgb, #e8f4fc 30%, var(--color-bg));
}

.bn-theme-ocean .bn-section__head {
  background: color-mix(in srgb, #1d6a96 6%, var(--bn-section-bg));
}

/* ── Theme: Forest ── */
.bn-theme-forest {
  --bn-accent: #2d6a4f;
  --bn-paper: color-mix(in srgb, #edf7f0 35%, var(--color-bg));
}

/* ── Theme: Rose ── */
.bn-theme-rose {
  --bn-accent: #9d4edd;
  --bn-paper: color-mix(in srgb, #faf0ff 30%, var(--color-bg));
}

/* ── Theme: Slate ── */
.bn-theme-slate {
  --bn-accent: #475569;
  --bn-section-bg: var(--color-bg);
}

.bn-theme-slate .bn-section {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-border) 90%, transparent);
}

.bn-theme-slate .bn-list > li {
  background: transparent;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 0;
}

/* Preview chrome in editor */
.note-editor__preview-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.note-editor__preview-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.note-editor__preview-theme {
  height: 30px;
  padding: 0 10px;
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  cursor: pointer;
}

.note-editor__pane--preview {
  display: flex;
  flex-direction: column;
}

.note-editor__pane--preview .beautiful-note,
.note-editor__pane--preview .md-preview {
  border-radius: 0;
}

@media (max-width: 900px) {
  .beautiful-note .bn-document {
    padding: 20px 18px 36px;
  }

  .bn-section__content {
    padding: 14px 16px 16px;
  }
}

@media print {
  .note-editor__preview-chrome { display: none; }
  .bn-section { break-inside: avoid; }
}

/* ── Flowchart beautification ── */
.bn-flowchart {
  margin: 1.25em 0 1.75em;
  padding: 20px 16px 24px;
  background: color-mix(in srgb, var(--bn-accent) 5%, var(--color-bg-subtle));
  border: 1px solid var(--bn-accent-border);
  border-radius: var(--bn-radius);
  text-align: center;
}

.bn-flowchart__badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bn-accent);
  background: var(--bn-accent-soft);
  border-radius: 999px;
}

.bn-flowchart__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
}

.bn-flowchart__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.bn-flowchart__box {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 14px 18px 14px 42px;
  background: var(--color-bg-elevated);
  border: 2px solid var(--bn-accent-border);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-text) 6%, transparent);
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s;
}

.bn-flowchart__box:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--bn-accent) 15%, transparent);
}

.bn-flowchart__box--end {
  background: color-mix(in srgb, var(--bn-accent) 12%, var(--color-bg-elevated));
  border-color: var(--bn-accent);
  font-weight: var(--font-weight-semibold);
}

.bn-flowchart__num {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-on-accent, #fff);
  background: var(--bn-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.bn-flowchart__text {
  display: block;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--color-text-primary);
}

.bn-flowchart__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 100%;
  color: var(--bn-accent);
}

.bn-flowchart__arrow span {
  display: block;
  width: 2px;
  height: 18px;
  background: var(--bn-accent);
  position: relative;
  opacity: 0.7;
}

.bn-flowchart__arrow span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--bn-accent);
}

/* Horizontal variant for wide screens with many short steps — optional auto */
.bn-flowchart--horizontal .bn-flowchart__track {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.bn-theme-ocean .bn-flowchart__box--end {
  background: color-mix(in srgb, #1d6a96 12%, var(--color-bg-elevated));
}

.bn-theme-forest .bn-flowchart__box--end {
  background: color-mix(in srgb, #2d6a4f 12%, var(--color-bg-elevated));
}

.bn-theme-rose .bn-flowchart__box--end {
  background: color-mix(in srgb, #9d4edd 12%, var(--color-bg-elevated));
}