/* Rich note blocks (myApp/utils/note_blocks.py).
   Used on the student lesson page, in the editors and in printed resources.
   Colors follow the academy brand through --brand-* variables, so the same
   markup works on dark and light themes and on white paper. */

.nb {
    --nb-accent: var(--brand-accent-primary, #0ea5e9);
    --nb-text: inherit;
    --nb-muted: var(--brand-text-muted, #64748b);
    --nb-line: var(--brand-border, rgba(127, 127, 127, 0.35));
    --nb-tint: color-mix(in srgb, var(--nb-accent) 10%, transparent);
    --nb-tint-strong: color-mix(in srgb, var(--nb-accent) 22%, transparent);
    --nb-good: #16a34a;
    --nb-bad: #dc2626;
    --nb-warn: #d97706;
    --nb-radius: 12px;
    margin: 1.25rem 0;
    color: var(--nb-text);
    break-inside: avoid;
}
.nb p { margin: 0 0 0.5rem; }
.nb p:last-child { margin-bottom: 0; }
.nb ul, .nb ol { margin: 0; padding-left: 1.25rem; }
.nb-title { font-weight: 700; font-size: 1.05em; margin-bottom: 0.6rem !important; }
.nb-item-title { font-weight: 700; margin-bottom: 0.2rem !important; }
.nb-prompt { font-weight: 600; margin-bottom: 0.6rem !important; }
.nb-eyebrow {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--nb-accent); margin-bottom: 0.4rem !important;
}
.nb-meta { font-size: 0.8rem; color: var(--nb-muted); }
.nb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.nb-letter {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    border: 1.5px solid var(--nb-line); margin-right: 0.5rem;
}
.nb-chip {
    display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600;
    padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--nb-tint); white-space: nowrap;
}
.nb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nb-tag {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--nb-accent); color: #fff; border-radius: 6px; padding: 0.1rem 0.45rem; margin-right: 0.5rem;
}

/* Callouts and boxed notes */
.nb-callout, .nb-takeaway, .nb-exercise, .nb-summary, .nb-compliance, .nb-tools, .nb-mistake, .nb-reflection {
    border-radius: var(--nb-radius); padding: 1rem 1.15rem; background: var(--nb-tint);
    border: 1px solid color-mix(in srgb, var(--nb-accent) 30%, transparent);
}
.nb-callout { display: flex; gap: 0.75rem; align-items: flex-start; border-left-width: 4px; }
.nb-callout-icon { font-size: 1.15rem; line-height: 1.5; flex: none; }
.nb-callout-body { flex: 1; min-width: 0; }
.nb-callout--tip { --nb-accent: #eab308; }
.nb-callout--warning { --nb-accent: var(--nb-warn); }
.nb-callout--success { --nb-accent: var(--nb-good); }
.nb-callout--danger { --nb-accent: var(--nb-bad); }
.nb-callout--note { --nb-accent: #8b5cf6; }
.nb-takeaway { border-left: 4px solid var(--nb-accent); }
.nb-takeaway-text { font-size: 1.1em; font-weight: 600; }
.nb-compliance { --nb-accent: var(--nb-bad); border-left: 4px solid var(--nb-accent); }
.nb-mistake { --nb-accent: var(--nb-warn); }
.nb-mistake-label { color: var(--nb-bad); }
.nb-fix-label { color: var(--nb-good); margin-top: 0.75rem !important; }

/* Toggle, FAQ, flashcards */
.nb-toggle, .nb-faq-item, .nb-flashcard {
    border: 1px solid var(--nb-line); border-radius: var(--nb-radius); padding: 0.75rem 1rem;
}
.nb-faq-item, .nb-flashcard { --nb-line: var(--brand-border, rgba(127, 127, 127, 0.35)); margin: 0.5rem 0; }
.nb-toggle > summary, .nb-faq-item > summary, .nb-flashcard > summary {
    cursor: pointer; font-weight: 700; list-style-position: inside;
}
.nb-toggle-body, .nb-faq-item > div { margin-top: 0.6rem; }
.nb-flashcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.nb-flashcard { margin: 0; background: var(--nb-tint); min-height: 5rem; }
.nb-flashcard[open] { background: var(--nb-tint-strong); }
.nb-flashcard > div { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--nb-line); }

/* Layout */
.nb-divider { border: 0; border-top: 1px solid var(--nb-line); height: 0; }
.nb-divider--thick { border-top: 4px solid var(--nb-accent); width: 4rem; }
.nb-divider--dots { border: 0; text-align: center; }
.nb-divider--dots::before { content: '• • •'; letter-spacing: 0.6em; color: var(--nb-muted); }
.nb-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.nb-column-title { margin: 0 0 0.4rem !important; font-size: 1em !important; }
.nb-banner {
    border-radius: var(--nb-radius); padding: 1.75rem 1.5rem; background: var(--nb-accent); color: #fff;
}
.nb-banner--dark { background: #0f172a; }
.nb-banner--soft { background: var(--nb-tint-strong); color: inherit; }
.nb-banner-title { font-size: 1.6em; font-weight: 800; line-height: 1.2; }
.nb-banner-sub { opacity: 0.85; margin-top: 0.3rem !important; }
.nb-quote-card { padding: 1.25rem 1.5rem; border-left: 4px solid var(--nb-accent); }
.nb-quote-card blockquote { font-size: 1.3em; font-style: italic; font-weight: 500; margin: 0; border: 0; padding: 0; }
.nb-quote-card figcaption { margin-top: 0.6rem; color: var(--nb-muted); font-size: 0.9em; }
.nb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; }
.nb-stat { border-radius: var(--nb-radius); background: var(--nb-tint); padding: 1rem; text-align: center; }
.nb-stat-value { display: block; font-size: 2em; font-weight: 800; color: var(--nb-accent); line-height: 1.1; }
.nb-stat-label { display: block; font-size: 0.85em; color: var(--nb-muted); margin-top: 0.25rem; }
.nb-icon-list { list-style: none; padding: 0 !important; display: grid; gap: 0.75rem; }
.nb-icon-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.nb-icon { font-size: 1.4rem; line-height: 1.3; flex: none; }
.nb-spacer--small { height: 0.75rem; }
.nb-spacer--medium { height: 2rem; }
.nb-spacer--large { height: 4rem; }
.nb-page-break { border-top: 2px dashed var(--nb-line); text-align: center; margin: 1.5rem 0; }
.nb-page-break span { position: relative; top: -0.7em; padding: 0 0.6rem; font-size: 0.7rem; color: var(--nb-muted); background: var(--brand-surface, transparent); }
.nb-button {
    display: inline-block; padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--nb-accent);
    color: #fff !important; font-weight: 700; text-decoration: none !important;
}

/* Lists and steps */
.nb-checklist ul { list-style: none; padding: 0; }
.nb-checklist li { margin: 0.35rem 0; }
.nb-checklist label, .nb-choice label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.nb-checklist input, .nb-choice input, .nb-scale input, .nb-true-false input {
    accent-color: var(--nb-accent); width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; flex: none;
}
.nb-steps ol, .nb-timeline ol { list-style: none; padding: 0; counter-reset: nb-step; }
.nb-steps li {
    counter-increment: nb-step; position: relative; padding-left: 2.75rem; margin: 0.9rem 0; min-height: 2rem;
}
.nb-steps li::before {
    content: counter(nb-step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 999px;
    background: var(--nb-accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.nb-timeline li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.6rem 0; border-left: 2px solid var(--nb-tint-strong); padding-left: 1rem; }
.nb-timeline-label { font-weight: 800; color: var(--nb-accent); }

/* Learning */
.nb-definition { border-left: 4px solid var(--nb-accent); padding: 0.25rem 0 0.25rem 1rem; }
.nb-definition dt { font-weight: 800; font-size: 1.1em; }
.nb-definition dd { margin: 0.3rem 0 0; }
.nb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.nb-pair > div { border-radius: var(--nb-radius); padding: 0.9rem 1rem; border: 1px solid var(--nb-line); }
.nb-pair-good { background: color-mix(in srgb, var(--nb-good) 10%, transparent); border-color: color-mix(in srgb, var(--nb-good) 35%, transparent) !important; }
.nb-pair-bad { background: color-mix(in srgb, var(--nb-bad) 9%, transparent); border-color: color-mix(in srgb, var(--nb-bad) 30%, transparent) !important; }
.nb-pair-label { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem !important; }
.nb-pair-good .nb-pair-label { color: var(--nb-good); }
.nb-pair-bad .nb-pair-label { color: var(--nb-bad); }
.nb-before-after .nb-pair > div { background: var(--nb-tint); }
.nb-before-after .nb-after { background: var(--nb-tint-strong) !important; }
.nb-summary ul { margin-top: 0.25rem; }
.nb-summary li { margin: 0.25rem 0; }

/* Worksheet */
.nb-writing-lines { display: flex; flex-direction: column; margin-top: 0.4rem; }
.nb-writing-lines span { display: block; height: 2rem; border-bottom: 1px solid var(--nb-line); }
.nb-writing-lines--journal span { height: 2.1rem; }
.nb-answer-box { border: 1.5px solid var(--nb-line); border-radius: 10px; }
.nb-answer-box--short { height: 4rem; }
.nb-answer-box--medium { height: 8rem; }
.nb-answer-box--long { height: 14rem; }
.nb-options { list-style: none; padding: 0 !important; display: grid; gap: 0.4rem; }
.nb-choice label { align-items: center; }
.nb-choice input { position: absolute; opacity: 0; pointer-events: none; }
.nb-choice input:checked + .nb-letter { background: var(--nb-accent); border-color: var(--nb-accent); color: #fff; }
.nb-scale-points { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nb-scale-point { position: relative; cursor: pointer; }
.nb-scale-point input { position: absolute; opacity: 0; }
.nb-scale-point span {
    display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
    border: 1.5px solid var(--nb-line); border-radius: 8px; font-weight: 700;
}
.nb-scale-point input:checked + span { background: var(--nb-accent); border-color: var(--nb-accent); color: #fff; }
.nb-scale-ends { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--nb-muted); margin-top: 0.4rem; }
.nb-true-false ol { padding-left: 1.25rem; }
.nb-true-false li { margin: 0.5rem 0; }
.nb-true-false li > span:first-child { display: block; }
.nb-tf { display: flex; gap: 1.25rem; font-size: 0.9em; margin-top: 0.25rem; }
.nb-tf label { display: flex; gap: 0.35rem; align-items: center; cursor: pointer; }
.nb-matching-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.nb-matching-cols ol, .nb-matching-cols ul { list-style: none; padding: 0; }
.nb-matching-cols li { display: flex; align-items: center; margin: 0.5rem 0; }
.nb-matching-cols ol { counter-reset: nb-match; }
.nb-matching-cols ol li { counter-increment: nb-match; }
.nb-matching-cols ol li::before { content: counter(nb-match) '.'; font-weight: 700; width: 1.5rem; flex: none; }
.nb-blank { display: inline-block; width: 2rem; border-bottom: 1.5px solid var(--nb-line); margin-right: 0.6rem; height: 1.1em; flex: none; }

/* Tables and grids */
.nb-table-wrap { overflow-x: auto; }
.nb .nb-grid { width: 100%; border-collapse: collapse; font-size: 0.95em; margin: 0; }
.nb .nb-grid caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 0.5rem; }
.nb .nb-grid th, .nb .nb-grid td { border: 1px solid var(--nb-line); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.nb .nb-grid th { background: var(--nb-tint-strong); font-weight: 700; }
.nb .nb-grid--blank td { height: 2.6rem; }
.nb .nb-grid--tracker th, .nb .nb-grid--tracker td { padding: 0.35rem; text-align: center; min-width: 1.6rem; }
.nb .nb-grid--tracker td:first-child, .nb .nb-grid--tracker th:first-child { text-align: left; min-width: 8rem; }
.nb-planner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.nb-planner-day { border: 1px solid var(--nb-line); border-radius: 10px; padding: 0.6rem 0.75rem; }
.nb-planner-day .nb-writing-lines span { height: 1.6rem; }

/* SOP */
.nb-sop-step { border: 1px solid var(--nb-line); border-left: 4px solid var(--nb-accent); border-radius: var(--nb-radius); padding: 0.9rem 1.1rem; }
.nb-sop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.nb-decision { border: 1px dashed var(--nb-line); border-radius: var(--nb-radius); padding: 0.9rem 1rem; }
.nb-decision-if { font-weight: 700; display: flex; align-items: center; margin-bottom: 0.7rem !important; }
.nb-decision .nb-pair-good .nb-pair-label { color: var(--nb-accent); }
.nb-decision .nb-pair-good { background: var(--nb-tint); border-color: var(--nb-line) !important; }
.nb-decision .nb-pair-bad { background: transparent; border-color: var(--nb-line) !important; }
.nb-decision .nb-pair-bad .nb-pair-label { color: var(--nb-muted); }
.nb-sign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.nb-sign-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85em; color: var(--nb-muted); }
.nb-sign-line { height: 2.25rem; border-bottom: 1.5px solid currentColor; }
.nb-revision { font-size: 0.9em; border-top: 1px solid var(--nb-line); padding-top: 0.75rem; color: var(--nb-muted); }
.nb-revision-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.4rem; }

/* Media */
.nb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.nb-gallery figure { margin: 0; }
.nb-gallery img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; }
.nb-gallery figcaption, .nb-audio figcaption { font-size: 0.85em; color: var(--nb-muted); margin-top: 0.3rem; }
.nb-audio audio { width: 100%; }
.nb-file {
    display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; border-radius: var(--nb-radius);
    border: 1px solid var(--nb-line); text-decoration: none !important; color: inherit !important; background: var(--nb-tint);
}
.nb-file-icon { font-size: 1.5rem; }
.nb-file-label { display: block; font-weight: 700; }
.nb-file-desc { display: block; font-size: 0.85em; color: var(--nb-muted); }

@media (max-width: 640px) {
    .nb-columns, .nb-pair, .nb-matching-cols { grid-template-columns: 1fr; }
    .nb-timeline li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Page stylesheets (lesson article, prose) style every ul/ol; these lists
   draw their own markers. */
.nb.nb-steps ol, .nb.nb-timeline ol, .nb.nb-checklist ul, .nb .nb-options, .nb.nb-icon-list,
.nb .nb-matching-cols ol, .nb .nb-matching-cols ul {
    list-style: none !important; padding-left: 0 !important; margin-left: 0 !important;
}
.nb.nb-steps li, .nb.nb-timeline li, .nb.nb-checklist li, .nb .nb-options li, .nb.nb-icon-list li,
.nb .nb-matching-cols li { margin-left: 0 !important; }
.nb.nb-steps li::marker, .nb.nb-timeline li::marker, .nb.nb-checklist li::marker, .nb .nb-options li::marker { content: ''; }
.nb.nb-summary ul, .nb.nb-tools ul, .nb.nb-pros-cons ul { list-style: disc; padding-left: 1.25rem; }
.nb.nb-true-false ol { list-style: decimal; padding-left: 1.25rem; }

/* Formatted text: embedded blocks behave as one unit in the editor. */
.nb-embed { position: relative; }
[contenteditable="true"] .nb-embed { cursor: pointer; border-radius: 12px; outline: 1px dashed transparent; outline-offset: 4px; }
[contenteditable="true"] .nb-embed:hover { outline-color: var(--brand-accent-primary, #22d3ee); }
[contenteditable="true"] .nb-embed input { pointer-events: none; }

/* Editor text color and highlight markers (sanitizer keeps the inline color). */
.hl { border-radius: 3px; padding: 0 0.1em; }
.lesson-html table, .notes-preview table, [data-rich-editor] table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.lesson-html td, .lesson-html th, .notes-preview td, .notes-preview th, [data-rich-editor] td, [data-rich-editor] th {
    border: 1px solid var(--brand-border, rgba(127, 127, 127, 0.35)); padding: 0.5rem 0.65rem; vertical-align: top; text-align: left;
}
.lesson-html th, .notes-preview th, [data-rich-editor] th { font-weight: 700; background: rgba(127, 127, 127, 0.12); }
.lesson-html hr, .notes-preview hr, [data-rich-editor] hr { border: 0; border-top: 1px solid var(--brand-border, rgba(127, 127, 127, 0.35)); margin: 1.5rem 0; }

/* Curated fonts (myApp/utils/note_fonts.py). Generated: keep in step with FONTS. */
/* FONT-CLASSES-START */
.ff-inter{font-family:'Inter', sans-serif}
.ff-dm-sans{font-family:'DM Sans', sans-serif}
.ff-manrope{font-family:'Manrope', sans-serif}
.ff-plus-jakarta-sans{font-family:'Plus Jakarta Sans', sans-serif}
.ff-outfit{font-family:'Outfit', sans-serif}
.ff-work-sans{font-family:'Work Sans', sans-serif}
.ff-roboto{font-family:'Roboto', sans-serif}
.ff-source-sans-3{font-family:'Source Sans 3', sans-serif}
.ff-ibm-plex-sans{font-family:'IBM Plex Sans', sans-serif}
.ff-lato{font-family:'Lato', sans-serif}
.ff-open-sans{font-family:'Open Sans', sans-serif}
.ff-noto-sans{font-family:'Noto Sans', sans-serif}
.ff-playfair-display{font-family:'Playfair Display', serif}
.ff-lora{font-family:'Lora', serif}
.ff-merriweather{font-family:'Merriweather', serif}
.ff-cormorant-garamond{font-family:'Cormorant Garamond', serif}
.ff-libre-baskerville{font-family:'Libre Baskerville', serif}
.ff-eb-garamond{font-family:'EB Garamond', serif}
.ff-dm-serif-display{font-family:'DM Serif Display', serif}
.ff-montserrat{font-family:'Montserrat', sans-serif}
.ff-poppins{font-family:'Poppins', sans-serif}
.ff-raleway{font-family:'Raleway', sans-serif}
.ff-oswald{font-family:'Oswald', sans-serif}
.ff-bebas-neue{font-family:'Bebas Neue', sans-serif}
.ff-archivo-black{font-family:'Archivo Black', sans-serif}
.ff-space-grotesk{font-family:'Space Grotesk', sans-serif}
.ff-nunito{font-family:'Nunito', sans-serif}
.ff-quicksand{font-family:'Quicksand', sans-serif}
.ff-fredoka{font-family:'Fredoka', sans-serif}
.ff-comfortaa{font-family:'Comfortaa', sans-serif}
.ff-baloo-2{font-family:'Baloo 2', sans-serif}
.ff-varela-round{font-family:'Varela Round', sans-serif}
.ff-caveat{font-family:'Caveat', cursive}
.ff-patrick-hand{font-family:'Patrick Hand', cursive}
.ff-dancing-script{font-family:'Dancing Script', cursive}
.ff-kalam{font-family:'Kalam', cursive}
.ff-shadows-into-light{font-family:'Shadows Into Light', cursive}
.ff-jetbrains-mono{font-family:'JetBrains Mono', monospace}
/* FONT-CLASSES-END */