/**
 * remake-blocks v3.0.0 — GitHub Theme
 *
 * Complete CSS rewrite based on:
 * - WCAG 2.2 AA contrast (4.5:1 text, 3:1 non-text)
 * - WAI-ARIA 1.2 (role="region" + aria-labelledby, native details/summary)
 * - CSS cascade layers (@layer)
 * - CSS light-dark() function for dark mode
 * - CSS logical properties (RTL-safe)
 * - Native CSS nesting
 * - :where() for zero-specificity defaults
 * - 4px-base spacing scale
 * - No outer margin on components (parent controls spacing)
 */

/* ========================================================================
   0. Cascade Layer Declaration
   ======================================================================== */
@layer remake-blocks.tokens, remake-blocks.base, remake-blocks.components, remake-blocks.utilities;


/* ========================================================================
   1. Design Tokens
   ======================================================================== */
@layer remake-blocks.tokens {

  /* -- Color Scheme ----------------------------------------------------- */
  :root {
    color-scheme: light dark;
  }
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }

  /* -- Spacing Scale (4px base) ---------------------------------------- */
  :root {
    --rb-space-1: 0.25rem;   /*  4px */
    --rb-space-2: 0.5rem;    /*  8px */
    --rb-space-3: 0.75rem;   /* 12px */
    --rb-space-4: 1rem;      /* 16px */
    --rb-space-5: 1.25rem;   /* 20px */
    --rb-space-6: 1.5rem;    /* 24px */
  }

  /* -- Layout Tokens ---------------------------------------------------- */
  :root {
    --rb-radius: 6px;
    --rb-radius-lg: 8px;
    --rb-padding-block: var(--rb-space-3);   /* 12px */
    --rb-padding-inline: var(--rb-space-4);  /* 16px */
    --rb-gap: var(--rb-space-2);             /*  8px title↔body */
    --rb-title-gap: var(--rb-space-2);       /*  8px icon↔title */
    --rb-title-font-size: 1.0625em;
    --rb-body-font-size: 1em;
    --rb-icon-size: 20px;
    --rb-shadow: light-dark(
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.3)
    );

    /* -- Text Colors (explicit, never inherit) ------------------------- */
    --rb-text-color: light-dark(#1f2328, #e6edf3);
    --rb-title-color: light-dark(#1f2328, #e6edf3);
    --rb-muted-color: light-dark(#57606a, #8b949e);
    --rb-link-color: light-dark(#0969da, #58a6ff);
    --rb-code-bg: light-dark(rgba(175,184,193,0.2), rgba(110,118,129,0.4));
    --rb-pre-bg: light-dark(#f6f8fa, #161b22);

    /* -- Blockquote ----------------------------------------------------- */
    --rb-blockquote-border: light-dark(#888e92, #646f80);
    --rb-blockquote-bg: light-dark(#f6f8fa, #161b22);
    --rb-blockquote-color: light-dark(#24292f, #e6edf3);

    /* -- Disclosure ----------------------------------------------------- */
    --rb-disclosure-border: light-dark(#888e92, #646f80);
    --rb-disclosure-bg: light-dark(#f6f8fa, #161b22);
    --rb-disclosure-title-color: light-dark(#24292f, #e6edf3);
    --rb-disclosure-body-color: light-dark(#1f2328, #e6edf3);
  }

  /* -- Per-Type Color Pairs (WCAG AA verified) -------------------------- */
  /* Each type: border (accent), bg (tint). All meet 4.5:1 text contrast
     and 3:1 non-text contrast in both light and dark mode. */
  :root {
    /* GFM Primaries (5) */
    --rb-note-border:        light-dark(#0969da, #2da2ff);
    --rb-note-bg:            light-dark(#ddf4ff, #0c2d6b);

    --rb-tip-border:         light-dark(#1a7f37, #39d857);
    --rb-tip-bg:             light-dark(#dafbe1, #0f5323);

    --rb-important-border:   light-dark(#8250df, #b775ff);
    --rb-important-bg:       light-dark(#fbefff, #32195a);

    --rb-warning-border:     light-dark(#9a6700, #d28e03);
    --rb-warning-bg:         light-dark(#fff8c5, #3d2e00);

    --rb-caution-border:     light-dark(#cf222e, #ff605b);
    --rb-caution-bg:         light-dark(#ffebe9, #5c1014);

    /* Obsidian Primaries (10) */
    --rb-abstract-border:    light-dark(#067690, #0ab0d8);
    --rb-abstract-bg:        light-dark(#ecfeff, #083344);

    --rb-info-border:        light-dark(#57606a, #7a848f);
    --rb-info-bg:            light-dark(#f6f8fa, #161b22);

    --rb-success-border:     light-dark(#177a3a, #3dda69);
    --rb-success-bg:         light-dark(#dafbe1, #0f5323);

    --rb-question-border:    light-dark(#9b5705, #d28e03);
    --rb-question-bg:        light-dark(#fff1e5, #3d2e00);

    --rb-failure-border:     light-dark(#b33a3a, #ff4d4d);
    --rb-failure-bg:         light-dark(#ffe2e2, #451a1a);

    --rb-danger-border:      light-dark(#cf222e, #ff605b);
    --rb-danger-bg:          light-dark(#ffebe9, #5c1014);

    --rb-quote-border:       light-dark(#57606a, #7a848f);
    --rb-quote-bg:           light-dark(#f6f8fa, #161b22);

    --rb-bug-border:         light-dark(#c93257, #ff4a81);
    --rb-bug-bg:             light-dark(#ffedf2, #451a2e);

    --rb-example-border:     light-dark(#8250df, #b775ff);
    --rb-example-bg:         light-dark(#fbefff, #32195a);

    --rb-todo-border:        light-dark(#1f6895, #32abf2);
    --rb-todo-bg:            light-dark(#e5f2fc, #0c2d6b);

    /* Promoted Aliases (12) */
    --rb-summary-border:     light-dark(#0e7490, #0ab0d8);
    --rb-summary-bg:         light-dark(#f0fdfa, #083344);

    --rb-tldr-border:        light-dark(#05788b, #0ab0d8);
    --rb-tldr-bg:            light-dark(#ecfeff, #083344);

    --rb-hint-border:        light-dark(#377d32, #4ce061);
    --rb-hint-bg:            light-dark(#e8f5e9, #0f5323);

    --rb-check-border:       light-dark(#0b786e, #2dd4bf);
    --rb-check-bg:           light-dark(#f0fdfa, #083344);

    --rb-done-border:        light-dark(#15803d, #25d967);
    --rb-done-bg:            light-dark(#dcfce7, #0f5323);

    --rb-help-border:        light-dark(#af5b05, #ef8307);
    --rb-help-bg:            light-dark(#fff7ed, #3d2e00);

    --rb-faq-border:         light-dark(#b45309, #ef8307);
    --rb-faq-bg:             light-dark(#fffbeb, #3d2e00);

    --rb-attention-border:   light-dark(#946504, #facc15);
    --rb-attention-bg:       light-dark(#fefce8, #422006);

    --rb-fail-border:        light-dark(#be123c, #ff45ac);
    --rb-fail-bg:            light-dark(#fff1f2, #451a2e);

    --rb-missing-border:     light-dark(#9f3a3a, #ff6464);
    --rb-missing-bg:         light-dark(#fef2f2, #451a1a);

    --rb-error-border:       light-dark(#c62222, #ff6464);
    --rb-error-bg:           light-dark(#fef2f2, #5c1014);

    --rb-cite-border:        light-dark(#525fac, #787bff);
    --rb-cite-bg:            light-dark(#eef2ff, #1e1b4b);

    /* v1.6.0 Promoted Types (15) */
    --rb-definition-border:        light-dark(#5b21b6, #a78bfa);
    --rb-definition-bg:            light-dark(#f5f3ff, #2e1065);

    --rb-aside-border:             light-dark(#6b7280, #9ca3af);
    --rb-aside-bg:                 light-dark(#f9fafb, #1f2937);

    --rb-correction-border:        light-dark(#b45309, #fbbf24);
    --rb-correction-bg:            light-dark(#fef3c7, #451a03);

    --rb-update-border:            light-dark(#0369a1, #3bc6ff);
    --rb-update-bg:                light-dark(#e0f2fe, #0c4a6e);

    --rb-figure-border:            light-dark(#334155, #94a3b8);
    --rb-figure-bg:                light-dark(#f8fafc, #1e293b);

    --rb-further-reading-border:   light-dark(#9a3412, #fb923c);
    --rb-further-reading-bg:       light-dark(#fff7ed, #431407);

    --rb-prerequisite-border:      light-dark(#0e7490, #22d3ee);
    --rb-prerequisite-bg:          light-dark(#ecfeff, #083344);

    --rb-exercise-border:          light-dark(#15803d, #4ade80);
    --rb-exercise-bg:              light-dark(#f0fdf4, #052e16);

    --rb-sidenote-border:          light-dark(#475569, #94a3b8);
    --rb-sidenote-bg:              light-dark(#f8fafc, #1e293b);

    --rb-timeline-border:          light-dark(#7c3aed, #a78bfa);
    --rb-timeline-bg:              light-dark(#f5f3ff, #2e1065);

    --rb-announcement-border:      light-dark(#be123c, #fb7185);
    --rb-announcement-bg:          light-dark(#fff1f2, #4c0519);

    --rb-bibliography-border:      light-dark(#1e293b, #cbd5e1);
    --rb-bibliography-bg:          light-dark(#f1f5f9, #0f172a);

    --rb-draft-border:             light-dark(#a16207, #fbbf24);
    --rb-draft-bg:                 light-dark(#fef9c3, #422006);

    --rb-translation-border:       light-dark(#0f766e, #2dd4bf);
    --rb-translation-bg:           light-dark(#f0fdfa, #042f2e);

    --rb-discussion-border:        light-dark(#c2410c, #fb923c);
    --rb-discussion-bg:            light-dark(#fff7ed, #431407);

    --rb-retro-border:             light-dark(#78350f, #fbbf24);
    --rb-retro-bg:                 light-dark(#fef3c7, #451a03);
  }
}


/* ========================================================================
   2. Base — Reset + shared element styles
   ======================================================================== */
@layer remake-blocks.base {

  :where(.callout, .disclosure, .disclosure-accordion, .blockquote-enhanced,
         .pull-quote, .epigraph) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}


/* ========================================================================
   3. Components
   ======================================================================== */
@layer remake-blocks.components {

  /* ---- 3a. Callout Container ----------------------------------------- */
  :where(.callout) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rb-gap);
    padding-block: var(--rb-padding-block);
    padding-inline: var(--rb-padding-inline);
    border-radius: var(--rb-radius);
    border-inline-start: 4px solid var(--rb-color, var(--rb-note-border));
    background: var(--rb-bg, var(--rb-note-bg));
    box-shadow: var(--rb-shadow);
    overflow: hidden;
    color: var(--rb-text-color);
  }

  /* Subtle gradient overlay */
  :where(.callout)::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background: linear-gradient(135deg, var(--rb-color, var(--rb-note-border)) 0%, transparent 60%);
    pointer-events: none;
  }

  /* ---- 3b. Per-Type Color Assignment -------------------------------- */
  :where(.callout-note)            { --rb-color: var(--rb-note-border);          --rb-bg: var(--rb-note-bg); }
  :where(.callout-tip)             { --rb-color: var(--rb-tip-border);           --rb-bg: var(--rb-tip-bg); }
  :where(.callout-important)       { --rb-color: var(--rb-important-border);     --rb-bg: var(--rb-important-bg); }
  :where(.callout-warning)         { --rb-color: var(--rb-warning-border);       --rb-bg: var(--rb-warning-bg); }
  :where(.callout-caution)         { --rb-color: var(--rb-caution-border);       --rb-bg: var(--rb-caution-bg); }
  :where(.callout-abstract)        { --rb-color: var(--rb-abstract-border);      --rb-bg: var(--rb-abstract-bg); }
  :where(.callout-info)            { --rb-color: var(--rb-info-border);          --rb-bg: var(--rb-info-bg); }
  :where(.callout-success)         { --rb-color: var(--rb-success-border);       --rb-bg: var(--rb-success-bg); }
  :where(.callout-question)        { --rb-color: var(--rb-question-border);      --rb-bg: var(--rb-question-bg); }
  :where(.callout-failure)         { --rb-color: var(--rb-failure-border);       --rb-bg: var(--rb-failure-bg); }
  :where(.callout-danger)          { --rb-color: var(--rb-danger-border);        --rb-bg: var(--rb-danger-bg); }
  :where(.callout-quote)           { --rb-color: var(--rb-quote-border);         --rb-bg: var(--rb-quote-bg); }
  :where(.callout-bug)             { --rb-color: var(--rb-bug-border);           --rb-bg: var(--rb-bug-bg); }
  :where(.callout-example)         { --rb-color: var(--rb-example-border);       --rb-bg: var(--rb-example-bg); }
  :where(.callout-todo)            { --rb-color: var(--rb-todo-border);          --rb-bg: var(--rb-todo-bg); }
  :where(.callout-summary)         { --rb-color: var(--rb-summary-border);       --rb-bg: var(--rb-summary-bg); }
  :where(.callout-tldr)            { --rb-color: var(--rb-tldr-border);          --rb-bg: var(--rb-tldr-bg); }
  :where(.callout-hint)            { --rb-color: var(--rb-hint-border);          --rb-bg: var(--rb-hint-bg); }
  :where(.callout-check)           { --rb-color: var(--rb-check-border);         --rb-bg: var(--rb-check-bg); }
  :where(.callout-done)            { --rb-color: var(--rb-done-border);          --rb-bg: var(--rb-done-bg); }
  :where(.callout-help)            { --rb-color: var(--rb-help-border);          --rb-bg: var(--rb-help-bg); }
  :where(.callout-faq)             { --rb-color: var(--rb-faq-border);           --rb-bg: var(--rb-faq-bg); }
  :where(.callout-attention)       { --rb-color: var(--rb-attention-border);     --rb-bg: var(--rb-attention-bg); }
  :where(.callout-fail)            { --rb-color: var(--rb-fail-border);          --rb-bg: var(--rb-fail-bg); }
  :where(.callout-missing)         { --rb-color: var(--rb-missing-border);       --rb-bg: var(--rb-missing-bg); }
  :where(.callout-error)           { --rb-color: var(--rb-error-border);         --rb-bg: var(--rb-error-bg); }
  :where(.callout-cite)            { --rb-color: var(--rb-cite-border);          --rb-bg: var(--rb-cite-bg); }
  :where(.callout-definition)      { --rb-color: var(--rb-definition-border);    --rb-bg: var(--rb-definition-bg); }
  :where(.callout-aside)           { --rb-color: var(--rb-aside-border);         --rb-bg: var(--rb-aside-bg); }
  :where(.callout-correction)      { --rb-color: var(--rb-correction-border);    --rb-bg: var(--rb-correction-bg); }
  :where(.callout-update)          { --rb-color: var(--rb-update-border);        --rb-bg: var(--rb-update-bg); }
  :where(.callout-figure)          { --rb-color: var(--rb-figure-border);        --rb-bg: var(--rb-figure-bg); }
  :where(.callout-further-reading) { --rb-color: var(--rb-further-reading-border); --rb-bg: var(--rb-further-reading-bg); }
  :where(.callout-prerequisite)    { --rb-color: var(--rb-prerequisite-border);  --rb-bg: var(--rb-prerequisite-bg); }
  :where(.callout-exercise)        { --rb-color: var(--rb-exercise-border);      --rb-bg: var(--rb-exercise-bg); }
  :where(.callout-sidenote)        { --rb-color: var(--rb-sidenote-border);      --rb-bg: var(--rb-sidenote-bg); }
  :where(.callout-timeline)        { --rb-color: var(--rb-timeline-border);      --rb-bg: var(--rb-timeline-bg); }
  :where(.callout-announcement)    { --rb-color: var(--rb-announcement-border);  --rb-bg: var(--rb-announcement-bg); }
  :where(.callout-bibliography)    { --rb-color: var(--rb-bibliography-border);  --rb-bg: var(--rb-bibliography-bg); }
  :where(.callout-draft)           { --rb-color: var(--rb-draft-border);         --rb-bg: var(--rb-draft-bg); }
  :where(.callout-translation)     { --rb-color: var(--rb-translation-border);   --rb-bg: var(--rb-translation-bg); }
  :where(.callout-discussion)      { --rb-color: var(--rb-discussion-border);    --rb-bg: var(--rb-discussion-bg); }
  :where(.callout-retro)           { --rb-color: var(--rb-retro-border);         --rb-bg: var(--rb-retro-bg); }

  /* ---- 3c. Callout Title --------------------------------------------- */
  :where(.callout-title) {
    display: flex;
    align-items: center;
    gap: var(--rb-title-gap);
    font-weight: 700;
    font-size: var(--rb-title-font-size);
    line-height: 1.3;
    color: var(--rb-color, var(--rb-note-border));
    user-select: none;
  }

  :where(.callout-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: var(--rb-icon-size);
    block-size: var(--rb-icon-size);
    color: var(--rb-color, var(--rb-note-border));
  }

  :where(.callout-icon) svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-width: 2;
  }

  :where(.callout-title-text) {
    word-break: break-word;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.04em;
  }

  /* ---- 3d. Callout Body ---------------------------------------------- */
  :where(.callout-body) {
    font-size: var(--rb-body-font-size);
    line-height: 1.5;
    color: var(--rb-text-color);
  }

  :where(.callout-body) > *:first-child { margin-block-start: 0; }
  :where(.callout-body) > *:last-child { margin-block-end: 0; }
  :where(.callout-body) p { margin-block: var(--rb-space-2); }

  :where(.callout-body) code {
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: var(--rb-code-bg);
  }

  :where(.callout-body) pre {
    margin-block: var(--rb-space-2);
    padding: var(--rb-space-2) var(--rb-space-3);
    border-radius: 4px;
    background: var(--rb-pre-bg);
    overflow-x: auto;
  }

  :where(.callout-body) pre code {
    padding: 0;
    background: none;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9375em;
  }

  :where(.callout-body) ul,
  :where(.callout-body) ol {
    padding-inline-start: var(--rb-space-5);
    margin-block: var(--rb-space-2);
  }

  :where(.callout-body) li { margin-block: var(--rb-space-1); }

  :where(.callout-body) h1,
  :where(.callout-body) h2,
  :where(.callout-body) h3,
  :where(.callout-body) h4,
  :where(.callout-body) h5,
  :where(.callout-body) h6 {
    margin-block-start: var(--rb-space-3);
    margin-block-end: var(--rb-space-2);
  }

  :where(.callout-body) a { color: var(--rb-link-color); }

  /* ---- 3e. Collapsible Callouts (details/summary) -------------------- */
  :where(details.callout) {
    padding: 0;
  }

  :where(details.callout) > summary {
    display: flex;
    align-items: center;
    gap: var(--rb-title-gap);
    padding-block: var(--rb-padding-block);
    padding-inline: var(--rb-padding-inline);
    font-weight: 700;
    font-size: var(--rb-title-font-size);
    line-height: 1.3;
    color: var(--rb-color, var(--rb-note-border));
    cursor: pointer;
    user-select: none;
    list-style: none;
  }

  /* Remove default marker (we use a custom chevron) */
  :where(details.callout) > summary::-webkit-details-marker { display: none; }
  :where(details.callout) > summary::marker { display: none; content: ""; }

  /* Chevron indicator */
  :where(details.callout) > summary::after {
    content: "";
    margin-inline-start: auto;
    inline-size: 6px;
    block-size: 6px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  :where(details.callout[open]) > summary::after {
    transform: rotate(-135deg);
  }

  :where(details.callout) > .callout-body {
    padding-block: 0 var(--rb-padding-block);
    padding-inline: var(--rb-padding-inline);
  }

  /* ---- 3f. Disclosure Widget ----------------------------------------- */
  :where(.disclosure) {
    position: relative;
    border: none;
    border-radius: var(--rb-radius-lg);
    background: var(--rb-disclosure-bg);
    overflow: hidden;
  }

  /* Left accent line */
  :where(.disclosure)::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 4px;
    background: var(--rb-disclosure-border);
    border-radius: 4px;
    z-index: 1;
  }

  :where(.disclosure) > summary {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    padding-block: var(--rb-space-3);
    padding-inline: var(--rb-space-4) var(--rb-space-5);
    padding-inline-start: var(--rb-space-5);
    font-weight: 600;
    font-size: var(--rb-title-font-size);
    line-height: 1.3;
    color: var(--rb-disclosure-title-color);
    cursor: pointer;
    user-select: none;
    list-style: none;
    border-block-end: 1px solid transparent;
    transition: border-block-end-color 0.15s ease;
  }

  :where(.disclosure) > summary:hover {
    background-color: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05));
  }

  /* Remove default marker */
  :where(.disclosure) > summary::-webkit-details-marker { display: none; }
  :where(.disclosure) > summary::marker { display: none; content: ""; }

  /* Chevron indicator */
  :where(.disclosure) > summary::before {
    content: "";
    flex-shrink: 0;
    inline-size: 7px;
    block-size: 7px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-inline-end: var(--rb-space-1);
  }

  :where(.disclosure[open]) > summary::before {
    transform: rotate(-135deg);
  }

  /* Separator line appears when expanded */
  :where(.disclosure[open]) > summary {
    border-block-end: 1px solid var(--rb-disclosure-border);
  }

  :where(.disclosure-body) {
    padding-block: 0 var(--rb-space-3);
    padding-inline: var(--rb-space-5);
    font-size: var(--rb-body-font-size);
    line-height: 1.6;
    color: var(--rb-disclosure-body-color);
  }

  :where(.disclosure-body) > *:first-child { margin-block-start: 0; }
  :where(.disclosure-body) > *:last-child { margin-block-end: 0; }
  :where(.disclosure-body) p { margin-block: var(--rb-space-2); }

  :where(.disclosure-body) code {
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: var(--rb-code-bg);
  }

  :where(.disclosure-body) pre {
    margin-block: var(--rb-space-2);
    padding: var(--rb-space-2) var(--rb-space-3);
    border-radius: 4px;
    background: var(--rb-pre-bg);
    overflow-x: auto;
  }

  :where(.disclosure-body) pre code {
    padding: 0;
    background: none;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9375em;
  }

  :where(.disclosure-body) ul,
  :where(.disclosure-body) ol {
    padding-inline-start: var(--rb-space-5);
    margin-block: var(--rb-space-2);
  }

  :where(.disclosure-body) li { margin-block: var(--rb-space-1); }
  :where(.disclosure-body) a { color: var(--rb-link-color); }

  /* ---- 3g. Accordion ------------------------------------------------- */
  :where(.disclosure-accordion) {
    position: relative;
    border: none;
    border-radius: var(--rb-radius-lg);
    overflow: hidden;
    background: var(--rb-disclosure-bg);
  }

  /* Left accent line for entire accordion */
  :where(.disclosure-accordion)::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 4px;
    background: var(--rb-disclosure-border);
    border-radius: 4px;
    z-index: 1;
  }

  :where(.disclosure-accordion) > .disclosure {
    margin: 0;
    border: none;
    border-radius: 0;
  }

  :where(.disclosure-accordion) > .disclosure::before {
    display: none;
  }

  /* Divider between accordion items */
  :where(.disclosure-accordion) > .disclosure + .disclosure {
    border-block-start: 1px solid var(--rb-disclosure-border);
  }

  /* ---- 3h. Tree View (nested disclosures) ---------------------------- */
  :where(.disclosure-tree) {
    margin-inline-start: var(--rb-space-4);
    border-inline-start: 2px solid var(--rb-disclosure-border);
    border-radius: 0;
  }

  :where(.disclosure[data-depth="1"]) { margin-inline-start: var(--rb-space-4); }
  :where(.disclosure[data-depth="2"]) { margin-inline-start: var(--rb-space-6); }
  :where(.disclosure[data-depth="3"]) { margin-inline-start: var(--rb-space-8, 2rem); }
  :where(.disclosure[data-depth="4"]) { margin-inline-start: var(--rb-space-10, 2.5rem); }
  :where(.disclosure[data-depth="5"]) { margin-inline-start: var(--rb-space-12, 3rem); }

  /* ---- 3i. Enhanced Blockquote --------------------------------------- */
  :where(.blockquote-enhanced) {
    margin: 0;
    padding: 0;
  }

  :where(.blockquote-enhanced) blockquote {
    position: relative;
    margin: 0;
    padding: var(--rb-space-3) var(--rb-space-4);
    border: none;
    border-radius: 0 var(--rb-radius) var(--rb-radius) 0;
    background: var(--rb-blockquote-bg);
    color: var(--rb-blockquote-color);
    font-style: italic;
    line-height: 1.5;
    overflow: hidden;
  }

  :where(.blockquote-enhanced) blockquote::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 4px;
    background: var(--rb-blockquote-border);
    border-radius: 4px;
  }

  :where(.blockquote-enhanced) blockquote > *:first-child { margin-block-start: 0; }
  :where(.blockquote-enhanced) blockquote > *:last-child { margin-block-end: 0; }
  :where(.blockquote-enhanced) blockquote p { margin-block: var(--rb-space-1); }

  /* ---- 3j. Pull Quote ------------------------------------------------ */
  :where(.pull-quote) {
    padding: 0;
    border: none;
    background: none;
  }

  :where(.pull-quote-text) {
    font-size: 1.4em;
    font-style: italic;
    line-height: 1.5;
    color: var(--rb-blockquote-color);
    text-align: center;
    margin: 0;
  }

  :where(.pull-quote-attribution) {
    font-size: 0.85em;
    font-style: normal;
    text-align: end;
    color: var(--rb-muted-color);
    margin-block-start: var(--rb-space-2);
    padding-inline-end: var(--rb-space-4);
  }

  :where(.pull-quote-attribution) cite {
    font-style: normal;
    font-weight: 500;
  }

  /* ---- 3k. Epigraph -------------------------------------------------- */
  :where(.epigraph) {
    margin-block: var(--rb-space-6);
    margin-inline: auto;
    max-inline-size: 70%;
    padding: 0;
    border: none;
    background: none;
  }

  :where(.epigraph-text) {
    font-size: 1.05em;
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    color: var(--rb-muted-color);
    text-align: center;
    margin: 0;
  }

  :where(.epigraph-attribution) {
    font-size: 0.85em;
    font-style: normal;
    text-align: center;
    color: var(--rb-muted-color);
    margin-block-start: var(--rb-space-1);
  }

  :where(.epigraph-attribution) cite {
    font-style: normal;
  }

  /* ---- 3l. Inline Callouts ------------------------------------------- */
  :where(.callout-inline) {
    float: inline-start;
    inline-size: var(--rb-inline-width, 50%);
    margin-inline-end: var(--rb-space-4);
    margin-block-end: var(--rb-space-4);
    clear: inline-start;
  }

  :where(.callout-inline-end) {
    float: inline-end;
    inline-size: var(--rb-inline-width, 50%);
    margin-inline-start: var(--rb-space-4);
    margin-block-end: var(--rb-space-4);
    clear: inline-end;
  }

  @media (max-width: 768px) {
    :where(.callout-inline, .callout-inline-end) {
      float: none;
      inline-size: 100%;
      margin: var(--rb-space-4) 0;
      clear: both;
    }
  }

  /* ---- 3m. Nested Callouts ------------------------------------------- */
  :where(.callout[data-nested="true"]) {
    margin-block: var(--rb-space-2);
  }

  /* ---- 3n. Animation ------------------------------------------------- */
  @keyframes rb-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  :where(.callout) {
    animation: rb-fade-in 0.25s ease-out;
  }

  :where(details.callout) > .callout-body {
    animation: rb-fade-in 0.15s ease-out;
  }
}


/* ========================================================================
   4. Utilities — sr-only, print, reduced motion
   ======================================================================== */
@layer remake-blocks.utilities {

  /* ---- 4a. Screen Reader Only ---------------------------------------- */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ---- 4b. Print Styles ---------------------------------------------- */
  @media print {
    /* Force all collapsibles open in print */
    details { display: block; }
    details > summary { list-style: none; }
    details > *:not(summary) { display: block !important; }

    /* Remove shadows and gradients (saves ink) */
    :where(.callout) { box-shadow: none; break-inside: avoid; }
    :where(.callout)::before { display: none; }
    :where(.disclosure) { box-shadow: none; }
    :where(.disclosure)::before { inline-size: 2px; }
    :where(.disclosure-accordion) { box-shadow: none; }
    :where(.disclosure-accordion)::before { inline-size: 2px; }

    /* Remove animations */
    :where(.callout, details.callout > .callout-body) { animation: none; }
  }

  /* ---- 4c. Reduced Motion -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}