/*
Starting values ported from the Minimal theme for Obsidian (https://github.com/kepano/obsidian-minimal), MIT License, Copyright (c) 2020-2024 Steph Ango (@kepano).
*/
:root {
    color-scheme: light dark;
    --mb-bg: #fbf0d9;
    --mb-bg-alt: #f3e4c4;
    --mb-text: #2c2217;
    --mb-text-muted: #6b6b6b;
    --mb-accent: #8b261e;
    --mb-border: #e6e6e6;
    --mb-code-bg: #f5f5f5;
    --mb-code-text: #5c5c5c;
    --mb-mark-bg: rgba(255, 225, 0, 0.5);
    --mb-focus: #506d7d;
    --mb-link-internal: #506d7d;
    --mb-link-internal-hover: #3f5666;
    --mb-link-external: #6b6b6b;
    --mb-link-unlinked: #6b6b6b;
    --mb-link-dead: #b5354a;
    --mb-callout-note: #6c99bb;
    --mb-callout-tip: #a8c373;
    --mb-callout-warning: #d5763f;
    --mb-callout-danger: #d04255;
    --mb-callout-quote: #b5b5b5;
        --mb-font-body: Charter, Georgia, serif;
    --mb-font-heading: Georgia, "Times New Roman", serif;
    --mb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --mb-font-size: 1.0625rem;
    --mb-line-height: 1.5;
    --mb-heading-scale: 1.125;
    --mb-heading-weight: 600;
    --mb-measure: 40rem;
    --mb-gutter: 1.5rem;
    --mb-radius: 16px;
    --mb-image-padding: 0;
    --mb-image-align: auto;
    --mb-block-gap: 1.75rem;
    --color-bg-alt: var(--mb-bg-alt);
    --color-border: var(--mb-border);
    --radius: var(--mb-radius);
        --mb-layout-max-width: 56rem;
    --mb-layout-align: auto;
    --mb-layout-offset-x: 0;
    --mb-layout-offset-y: 0;
    --mb-layout-padding-inline: 1.5rem;
    --mb-layout-padding-block: 0;
    --mb-layout-bg: transparent;
    --mb-layout-radius: 8px;
    --mb-layout-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --mb-layout-page-bg: var(--mb-bg);
    --mb-layout-sidebar-width: 18rem;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-mb-theme]) {
    --mb-bg: #191410;
    --mb-bg-alt: #261e18;
    --mb-text: #e8dccb;
    --mb-text-muted: #999999;
    --mb-accent: #d97736;
    --mb-border: #363636;
    --mb-code-bg: #212121;
    --mb-code-text: #a6a6a6;
    --mb-mark-bg: rgba(255, 177, 80, 0.3);
    --mb-focus: #889eaa;
    --mb-link-internal: #889eaa;
    --mb-link-internal-hover: #a0b2bb;
    --mb-link-external: #999999;
    --mb-link-unlinked: #999999;
    --mb-link-dead: #ef7586;
    --mb-callout-note: #6c99bb;
    --mb-callout-tip: #a8c373;
    --mb-callout-warning: #d5763f;
    --mb-callout-danger: #d04255;
    --mb-callout-quote: #595959;
    }
}
:root[data-mb-theme="dark"] {
    color-scheme: dark;
    --mb-bg: #191410;
    --mb-bg-alt: #261e18;
    --mb-text: #e8dccb;
    --mb-text-muted: #999999;
    --mb-accent: #d97736;
    --mb-border: #363636;
    --mb-code-bg: #212121;
    --mb-code-text: #a6a6a6;
    --mb-mark-bg: rgba(255, 177, 80, 0.3);
    --mb-focus: #889eaa;
    --mb-link-internal: #889eaa;
    --mb-link-internal-hover: #a0b2bb;
    --mb-link-external: #999999;
    --mb-link-unlinked: #999999;
    --mb-link-dead: #ef7586;
    --mb-callout-note: #6c99bb;
    --mb-callout-tip: #a8c373;
    --mb-callout-warning: #d5763f;
    --mb-callout-danger: #d04255;
    --mb-callout-quote: #595959;
}
:root[data-mb-theme="light"] {
    color-scheme: light;
    --mb-bg: #fbf0d9;
    --mb-bg-alt: #f3e4c4;
    --mb-text: #2c2217;
    --mb-text-muted: #6b6b6b;
    --mb-accent: #8b261e;
    --mb-border: #e6e6e6;
    --mb-code-bg: #f5f5f5;
    --mb-code-text: #5c5c5c;
    --mb-mark-bg: rgba(255, 225, 0, 0.5);
    --mb-focus: #506d7d;
    --mb-link-internal: #506d7d;
    --mb-link-internal-hover: #3f5666;
    --mb-link-external: #6b6b6b;
    --mb-link-unlinked: #6b6b6b;
    --mb-link-dead: #b5354a;
    --mb-callout-note: #6c99bb;
    --mb-callout-tip: #a8c373;
    --mb-callout-warning: #d5763f;
    --mb-callout-danger: #d04255;
    --mb-callout-quote: #b5b5b5;
}
html {
    background-color: var(--mb-bg);
    color-scheme: light dark;
}
:root[data-mb-theme="dark"] {
    color-scheme: dark;
}
:root[data-mb-theme="light"] {
    color-scheme: light;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    background-color: var(--mb-bg);
    color-scheme: light dark;
}
body {
    background-color: var(--mb-bg);
    background: var(--mb-layout-page-bg);
    color: var(--mb-text);
    font-family: var(--mb-font-body);
    font-size: var(--mb-font-size);
    line-height: var(--mb-line-height);
    min-height: 100vh;
    display: grid;
    margin: 0;
    padding: 0;
}
header, footer {
    padding-inline: var(--mb-gutter);
    padding-block: 0.5rem;
}
nav[data-pane="menu"] {
    padding: 1rem;
}
main {
    grid-area: main;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: min(var(--mb-layout-max-width), 100%);
    margin-inline: var(--mb-layout-align);
    padding-inline: var(--mb-layout-padding-inline);
    padding-block: var(--mb-layout-padding-block);
    background: var(--mb-layout-bg);
    border-radius: var(--mb-layout-radius);
    box-shadow: var(--mb-layout-shadow);
    translate: var(--mb-layout-offset-x) var(--mb-layout-offset-y);
    overflow-wrap: break-word;
}
article[data-pane="main"],
.mb-article {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    display: flow-root;
}
.mb-skip-link {
    position: absolute;
    left: -9999px;
}
.mb-skip-link:focus,
.mb-skip-link:focus-visible {
    left: 1rem;
    top: 1rem;
    position: fixed;
    background: Canvas;
    color: CanvasText;
    padding: 0.5rem 1rem;
    z-index: 1000;
}
/* `R-A11Y-2`: Visible `:focus-visible` styles that the inspector cannot disable. */
:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mb-focus, currentColor) !important;
    outline-offset: 2px !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mb-font-heading);
    font-weight: var(--mb-heading-weight);
    line-height: 1.2;
    margin-block: var(--mb-block-gap) calc(var(--mb-block-gap) * 0.5);
    /* Headings do not clear floats: text, headings included, flows beside a wrapped image as in Obsidian. A rule
       (hr) still clears, so the next entry starts below the last picture. */
}
h1 { font-size: calc(var(--mb-font-size) * (1 + (var(--mb-heading-scale) - 1) * 1)); }
h2 { font-size: calc(var(--mb-font-size) * (1 + (var(--mb-heading-scale) - 1) * 0.6)); }
h3 { font-size: calc(var(--mb-font-size) * (1 + (var(--mb-heading-scale) - 1) * 0.35)); }
h4 { font-size: calc(var(--mb-font-size) * (1 + (var(--mb-heading-scale) - 1) * 0.2)); }
h5 { font-size: calc(var(--mb-font-size) * (1 + (var(--mb-heading-scale) - 1) * 0.1)); }
h6 { font-size: var(--mb-font-size); }
p, ul, ol, blockquote, table, pre {
    margin-block: var(--mb-block-gap);
}
/* `R-THEME-6`: link states are never color alone — underline (or a
   distinct underline style) always accompanies the color change. */
a[href] {
    color: var(--mb-link-internal);
    text-decoration: underline;
}
a[href]:hover {
    color: var(--mb-link-internal-hover);
}
a.mb-link-external {
    color: var(--mb-link-external);
    text-decoration-style: dotted;
}
.mb-link-unlinked {
    color: var(--mb-link-unlinked);
    text-decoration: none;
}
a.mb-link-dead {
    color: var(--mb-link-dead);
    text-decoration-style: wavy;
}
/* Preview-only link-state overlays (section 5, M4 step 1). Export always
   collapses to plain `.mb-link-unlinked` (`R-LINK-5`) — these classes are
   never emitted in export mode. `R-THEME-6`: each gets a distinct
   underline style, not just a color, so they're distinguishable without
   relying on color perception. */
.mb-link-overlay-blocked, .mb-link-overlay-review, .mb-link-overlay-notselected,
.mb-link-overlay-dead, .mb-link-overlay-evicted {
    text-decoration-line: underline;
    cursor: help;
}
.mb-link-overlay-blocked {
    color: var(--mb-callout-danger);
    text-decoration-style: dashed;
}
.mb-link-overlay-review {
    color: var(--mb-callout-warning);
    text-decoration-style: dotted;
}
.mb-link-overlay-notselected {
    color: var(--mb-text-muted);
    text-decoration-style: double;
}
.mb-link-overlay-dead {
    color: var(--mb-link-dead);
    text-decoration-style: wavy;
}
.mb-link-overlay-evicted {
    color: var(--mb-callout-danger);
    text-decoration-style: wavy;
}

/* Primary Navigation (Section 11, R-LAY-4, R-A11Y-4) */
.mb-menu-toggle,
button.mb-menu-toggle[aria-expanded] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--mb-bg-alt);
    color: var(--mb-text);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    cursor: pointer;
}
.mb-menu-items {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.mb-menu-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--mb-text);
    text-decoration: none;
}
.mb-menu-brand:hover {
    color: var(--mb-accent);
    text-decoration: none;
}
.mb-menu-list,
.mb-menu-sublist {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.mb-menu-sublist {
    padding-inline-start: 0.75rem;
}
.mb-menu-item a {
    color: var(--mb-text-muted);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--mb-radius) * 0.5);
    transition: color 0.15s ease;
}
.mb-menu-item a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.mb-menu-item a:hover {
    color: var(--mb-link-internal);
    background: var(--mb-bg-alt);
    text-decoration: none;
}
body[data-layout="side-left"] .mb-menu-items,
body[data-layout="side-right"] .mb-menu-items {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
body[data-layout="side-left"] .mb-menu-list,
body[data-layout="side-right"] .mb-menu-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

/* Secondary Sidebar & Widgets (R-LAY-3, Section 11) */
aside[data-pane="secondary"] {
    grid-area: side;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: var(--mb-layout-sidebar-width, 18rem);
}
.mb-widget {
    background: var(--mb-bg-alt);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    padding: 1rem;
}
.mb-widget-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mb-text-muted);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--mb-border);
}
.mb-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mb-widget-list li a {
    font-size: 0.9rem;
    color: var(--mb-text);
    text-decoration: none;
    display: block;
    padding: 0.2rem 0;
    line-height: 1.3;
}
.mb-widget-list li a:hover {
    color: var(--mb-link-internal);
    text-decoration: underline;
}
/* Blog List Widget */
.mb-blog-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mb-blog-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.mb-blog-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mb-text);
    text-decoration: none;
    line-height: 1.3;
}
.mb-blog-card-title:hover {
    color: var(--mb-accent);
    text-decoration: underline;
}
.mb-blog-date {
    font-size: 0.75rem;
    color: var(--mb-text-muted);
}
.mb-blog-snippet {
    font-size: 0.85rem;
    color: var(--mb-text-muted);
    margin: 0;
    line-height: 1.4;
}
/* Table of Contents Widget */
.mb-toc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mb-toc-item a, .mb-toc-sub a {
    font-size: 0.85rem;
    color: var(--mb-text-muted);
    text-decoration: none;
    line-height: 1.3;
    display: block;
}
.mb-toc-item a:hover, .mb-toc-sub a:hover {
    color: var(--mb-link-internal);
    text-decoration: underline;
}
.mb-toc-sub {
    padding-left: 0.75rem;
}
/* Author Bio Widget */
.mb-bio-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.mb-bio-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mb-accent);
    color: var(--mb-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.mb-bio-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mb-text);
}
.mb-bio-text {
    font-size: 0.85rem;
    color: var(--mb-text-muted);
    margin: 0;
    line-height: 1.4;
}

blockquote, .mb-callout {
    border-inline-start: 4px solid var(--mb-border);
    padding-inline-start: 1rem;
    margin-inline: 0;
}
.mb-callout {
    background: var(--mb-bg-alt);
    border-radius: var(--mb-radius);
    padding: 0.75rem 1rem;
}
.mb-callout-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
details.mb-callout summary {
    cursor: pointer;
    list-style: none;
}
details.mb-callout summary::-webkit-details-marker {
    display: none;
}
.mb-callout-note, .mb-callout-abstract, .mb-callout-info, .mb-callout-todo, .mb-callout-margin, .mb-callout-sidenote {
    border-inline-start-color: var(--mb-callout-note);
}
.mb-callout-tip, .mb-callout-success, .mb-callout-question {
    border-inline-start-color: var(--mb-callout-tip);
}
.mb-callout-warning {
    border-inline-start-color: var(--mb-callout-warning);
}
.mb-callout-failure, .mb-callout-danger, .mb-callout-bug {
    border-inline-start-color: var(--mb-callout-danger);
}
.mb-callout-quote, .mb-callout-example {
    border-inline-start-color: var(--mb-callout-quote);
}
code, .mb-math {
    font-family: var(--mb-font-mono);
    background: var(--mb-code-bg);
    color: var(--mb-code-text);
    border-radius: calc(var(--mb-radius) * 0.5);
    padding: 0.1em 0.3em;
}
pre {
    background: var(--mb-code-bg);
    border-radius: var(--mb-radius);
    padding: 0.75rem 1rem;
    overflow-x: auto;
}
pre code {
    background: none;
    padding: 0;
}
mark {
    background: var(--mb-mark-bg);
    color: inherit;
}
img, video {
    display: block;
    max-width: 100%;
    border-radius: var(--mb-radius);
    padding: var(--mb-image-padding);
    margin-inline: var(--mb-image-align);
}
hr {
    border: none;
    border-top: 1px solid var(--mb-border);
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid var(--mb-border);
    padding: 0.4em 0.6em;
}
.mb-tag {
    color: var(--mb-link-external);
    background: var(--mb-bg-alt);
    border-radius: var(--mb-radius);
    padding: 0 0.4em;
    font-size: 0.85em;
}
/* Task list items (Obsidian / GFM checkboxes) */
li.mb-task-item {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: -1.25rem;
}
li.mb-task-item > p {
    display: inline;
    margin: 0;
}
li.mb-task-item input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    accent-color: var(--mb-accent);
}
/* Floating & Text Flow for Images, Media, Callouts & Embeds.
   Wrapped images follow the Image Text Wrap Obsidian plugin (tyler21richards/image-text-wrap, MIT): a float
   at most half the column wide, `--mb-gap` (plugin default 16px) between picture and text, and wrap-block as
   a centred row with text only above and below. */
.mb-float-left,
.mb-media-image.mb-float-left,
.mb-inline-image-wrapper.mb-float-left,
img.mb-float-left {
    float: left !important;
    display: block;
    width: fit-content;
    max-width: 50%;
    margin: 0 var(--mb-gap, 16px) 0.5em 0 !important;
    clear: left;
    box-sizing: border-box;
}
.mb-float-right,
.mb-media-image.mb-float-right,
.mb-inline-image-wrapper.mb-float-right,
img.mb-float-right {
    float: right !important;
    display: block;
    width: fit-content;
    max-width: 50%;
    margin: 0 0 0.5em var(--mb-gap, 16px) !important;
    clear: right;
    box-sizing: border-box;
}
.mb-float-center,
.mb-media-image.mb-float-center,
.mb-inline-image-wrapper.mb-float-center,
img.mb-float-center {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
    padding-block: calc(var(--mb-gap, 16px) / 2);
    clear: both;
    text-align: center;
}

.mb-media-image.mb-float-left img,
.mb-media-image.mb-float-right img,
.mb-inline-image-wrapper.mb-float-left img,
.mb-inline-image-wrapper.mb-float-right img,
img.mb-float-left,
img.mb-float-right {
    margin-inline: 0 !important;
    max-width: 100%;
    height: auto;
}

/* Slide: an image the author has slid sideways (never up or down) so it overhangs the text box. The offset is a
   percent of the image's own width, applied as a transform so the text around it does not reflow. The image gets
   its own shadow, and sits above the text. Narrow screens ignore the slide: there is no margin to overhang into. */
.mb-slid {
    position: relative;
    z-index: 1;
    transform: translateX(calc(var(--mb-slide, 0) * 1%));
}
.mb-slid img,
img.mb-slid {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
}
body { overflow-x: clip; }
@media (max-width: 720px) {
    .mb-slid { transform: none; }
    .mb-slid img,
    img.mb-slid { box-shadow: none; }
}

.mb-callout.mb-float-left,
.mb-embed.mb-float-left,
.mb-video-embed.mb-float-left,
.mb-card.mb-float-left {
    float: left !important;
    max-width: min(380px, 48%) !important;
    margin: 0.5rem 1.5rem 1rem 0 !important;
    clear: left;
}

.mb-callout.mb-float-right,
.mb-embed.mb-float-right,
.mb-video-embed.mb-float-right,
.mb-card.mb-float-right {
    float: right !important;
    max-width: min(380px, 48%) !important;
    margin: 0.5rem 0 1rem 1.5rem !important;
    clear: right;
}

.mb-callout.mb-float-center,
.mb-embed.mb-float-center,
.mb-video-embed.mb-float-center,
.mb-card.mb-float-center {
    display: block !important;
    max-width: 100% !important;
    margin: 1.5rem auto !important;
    clear: both;
}

/* Vertical Nudge Clamped to 50% of element height */
.mb-floated-nudge {
    position: relative;
    transform: translateY(clamp(-50%, var(--mb-nudge-y, 0px), 50%));
}

/* Drop Cap & Drop Words */
article[data-dropcap="true"] .mb-content > p:first-of-type::first-letter,
article[data-dropcap="true"] > p:first-of-type::first-letter,
.mb-content p.mb-dropcap::first-letter,
.mb-dropcap::first-letter {
    float: left;
    font-family: var(--mb-font-heading, var(--mb-font-body));
    font-size: 3.4em;
    line-height: 0.78;
    padding-top: 0.08em;
    padding-right: 0.12em;
    padding-bottom: 0.02em;
    color: var(--mb-accent);
    font-weight: 700;
}

article[data-dropwords="true"] .mb-content > p:first-of-type > .mb-dropwords,
article[data-dropwords="true"] > p:first-of-type > .mb-dropwords,
article[data-dropwords="true"] .mb-content > p:first-of-type > strong:first-child,
article[data-dropwords="true"] > p:first-of-type > strong:first-child,
.mb-dropwords {
    font-variant: small-caps;
    font-size: 1.12em;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--mb-text);
}

/* Drop Cap Style Variants */
article[data-dropcap-style="boxed"] .mb-content > p:first-of-type::first-letter,
article[data-dropcap-style="boxed"] > p:first-of-type::first-letter,
.mb-content p.mb-dropcap-boxed::first-letter,
.mb-dropcap-boxed::first-letter {
    background: var(--mb-accent);
    color: #ffffff !important;
    padding: 0.12em 0.22em 0.1em 0.22em;
    margin-right: 0.25em;
    border-radius: var(--mb-radius);
    line-height: 0.85;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

article[data-dropcap-style="illuminated"] .mb-content > p:first-of-type::first-letter,
article[data-dropcap-style="illuminated"] > p:first-of-type::first-letter,
.mb-content p.mb-dropcap-illuminated::first-letter,
.mb-dropcap-illuminated::first-letter {
    font-family: "Cinzel", "UnifrakturMaguntia", "Georgia", serif;
    font-style: italic;
    color: var(--mb-accent);
    text-shadow: 2px 2px 0px rgba(0,0,0,0.12), -1px -1px 0px rgba(255,255,255,0.4);
    border-bottom: 2px double var(--mb-accent);
    padding-right: 0.15em;
    margin-right: 0.15em;
}

article[data-dropcap-style="hanging"] .mb-content > p:first-of-type::first-letter,
article[data-dropcap-style="hanging"] > p:first-of-type::first-letter,
.mb-content p.mb-dropcap-hanging::first-letter,
.mb-dropcap-hanging::first-letter {
    margin-left: -1.1em;
    padding-right: 0.15em;
}

/* Multi-column Page Layout */
article[data-columns="2"] .mb-content,
article[data-columns="2"],
.mb-columns-2 {
    column-count: 2;
    column-gap: 2.2rem;
    column-rule: 1px solid var(--mb-border);
}
article[data-columns="3"] .mb-content,
article[data-columns="3"],
.mb-columns-3 {
    column-count: 3;
    column-gap: 2rem;
    column-rule: 1px solid var(--mb-border);
}
article[data-columns] h1,
article[data-columns] h2 {
    column-span: all;
}
article[data-columns] table,
article[data-columns] pre,
article[data-columns] blockquote,
article[data-columns] .mb-callout,
article[data-columns] .mb-embed,
article[data-columns] figure {
    break-inside: avoid;
    page-break-inside: avoid;
}
@media (max-width: 800px) {
    article[data-columns="2"] .mb-content,
    article[data-columns="3"] .mb-content,
    .mb-columns-2,
    .mb-columns-3 {
        column-count: 1 !important;
    }
}

/* Multi-column Callouts (> [!column]) */
.mb-columns-container,
.mb-callout-column {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.mb-columns-container > .mb-callout,
.mb-callout-column > .mb-callout {
    flex: 1 1 0;
    min-width: 200px;
    margin-bottom: 0;
}
@media (max-width: 650px) {
    .mb-columns-container,
    .mb-callout-column {
        flex-direction: column !important;
    }
}

/* TTRPG / SRD Tables */
.mb-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 1.25rem 0;
    border-radius: var(--mb-radius);
    border: 1px solid var(--mb-border);
    -webkit-overflow-scrolling: touch;
}
.mb-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95em;
}
.mb-table-wrapper th {
    background: var(--mb-bg-alt);
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 2px solid var(--mb-border);
    color: var(--mb-text);
    font-family: var(--mb-font-heading, inherit);
}
.mb-table-wrapper td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mb-border);
    color: var(--mb-text);
}
/* Cells wrap at word boundaries; inherited anywhere/break-word would shrink
   min-content to one character and collapse narrow columns. */
.mb-table-wrapper th, .mb-table-wrapper td {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    min-width: 8ch;
}
.mb-table-wrapper tbody tr:nth-child(even) {
    background-color: rgba(125, 125, 125, 0.04);
}
.mb-table-wrapper tbody tr:hover {
    background-color: rgba(125, 125, 125, 0.08);
}

/* Statblock Ability Tables (|STR|DEX|CON|...) */
table.mb-table-statblock th {
    text-align: center;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    color: var(--mb-accent);
    background: rgba(125, 125, 125, 0.08);
    border-bottom: 1px solid var(--mb-accent);
}
table.mb-table-statblock td {
    text-align: center;
    font-weight: 600;
    font-family: var(--mb-font-mono, monospace);
}

/* Statblock Code Blocks */
.mb-statblock-wrapper {
    margin: 1.5rem 0;
    border-left: 4px solid var(--mb-accent);
    background: var(--mb-bg-alt);
    border-radius: var(--mb-radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.mb-statblock-wrapper pre.mb-statblock {
    margin: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    white-space: pre-wrap;
}

/* Dice Rolls (inline & cards) */
.mb-dice-roll {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 999px;
    background: var(--mb-bg-alt);
    border: 1px solid var(--mb-border);
    font-family: var(--mb-font-mono, monospace);
    font-size: 0.9em;
    font-weight: 600;
    color: var(--mb-accent);
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    vertical-align: baseline;
}
.mb-dice-roll:hover {
    background: var(--mb-border);
    border-color: var(--mb-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.mb-dice-roll:active, .mb-dice-roll.rolling {
    transform: scale(0.94);
}
.mb-dice-roll .mb-dice-icon {
    font-size: 1.05em;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease;
}
.mb-dice-roll.rolling .mb-dice-icon {
    animation: mb-dice-spin 0.4s ease-in-out infinite;
}
@keyframes mb-dice-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.mb-dice-card {
    margin: 1rem 0;
    display: inline-block;
}
.mb-dice-card-roll {
    font-size: 1.05em;
    padding: 6px 14px;
}

/* Theme Override Styles: Novel / Literary & Novel View Templates */
body[data-page-theme="novel"],
body[data-template="novel"] {
    --mb-font-body: "Charter", "Georgia", "Iowan Old Style", "Palatino", serif;
    --mb-font-heading: "Playfair Display", "Didot", "Georgia", serif;
    --mb-line-height: 1.8;
}
:root[data-mb-theme="light"] body[data-page-theme="novel"],
:root[data-mb-theme="light"] body[data-template="novel"],
:root[data-mb-theme="light"] body[data-novel-palette="sepia"] {
    --mb-bg: #fbf0d9;
    --mb-bg-alt: #f4e5c7;
    --mb-text: #2c221e;
    --mb-text-muted: #6f5b4d;
    --mb-accent: #8b3a2b;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #e3d3b6;
    --mb-layout-bg: #fdf6e6;
    --mb-layout-page-bg: #f5ebd2;
}
:root[data-mb-theme="dark"] body[data-page-theme="novel"],
:root[data-mb-theme="dark"] body[data-template="novel"],
:root[data-mb-theme="dark"] body[data-novel-palette="sepia"] {
    --mb-bg: #1c1815;
    --mb-bg-alt: #26211c;
    --mb-text: #e8dfd3;
    --mb-text-muted: #968a7c;
    --mb-accent: #d97864;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #3b332b;
    --mb-layout-bg: #221d19;
    --mb-layout-page-bg: #161311;
}

/* Novel Palette: Classic Print / Paperback */
:root[data-mb-theme="light"] body[data-novel-palette="classic"] {
    --mb-bg: #faf8f5;
    --mb-bg-alt: #f2eee8;
    --mb-text: #1a1a1a;
    --mb-text-muted: #666360;
    --mb-accent: #1e3a5f;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #e2ddd5;
    --mb-layout-bg: #ffffff;
    --mb-layout-page-bg: #f0ece5;
}
:root[data-mb-theme="dark"] body[data-novel-palette="classic"] {
    --mb-bg: #18191c;
    --mb-bg-alt: #222428;
    --mb-text: #e6e8eb;
    --mb-text-muted: #8d9299;
    --mb-accent: #689bd4;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #31353d;
    --mb-layout-bg: #1e2024;
    --mb-layout-page-bg: #121315;
}

/* Novel Palette: Vintage Hardcover */
:root[data-mb-theme="light"] body[data-novel-palette="vintage"] {
    --mb-bg: #f4ecd8;
    --mb-bg-alt: #ebdcb9;
    --mb-text: #241b14;
    --mb-text-muted: #6b5a4b;
    --mb-accent: #2e5339;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #d6c5a2;
    --mb-layout-bg: #f9f3e4;
    --mb-layout-page-bg: #ebdcb9;
}
:root[data-mb-theme="dark"] body[data-novel-palette="vintage"] {
    --mb-bg: #171b16;
    --mb-bg-alt: #212620;
    --mb-text: #e3ebd8;
    --mb-text-muted: #8b9980;
    --mb-accent: #6fb082;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #313b30;
    --mb-layout-bg: #1d231c;
    --mb-layout-page-bg: #111410;
}

/* Novel Palette: Midnight Reader */
body[data-novel-palette="midnight"] {
    --mb-bg: #14171e;
    --mb-bg-alt: #1d212b;
    --mb-text: #e4e7ed;
    --mb-text-muted: #8c93a3;
    --mb-accent: #d4a373;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #2c3240;
    --mb-layout-bg: #191d26;
    --mb-layout-page-bg: #0e1015;
}

/* Novel View: Reading Measure */
body[data-novel-measure="36rem"] article[data-pane="main"] { max-width: 36rem; margin-inline: auto; }
body[data-novel-measure="40rem"] article[data-pane="main"] { max-width: 40rem; margin-inline: auto; }
body[data-novel-measure="44rem"] article[data-pane="main"] { max-width: 44rem; margin-inline: auto; }

/* Novel View: Justified Text */
body[data-novel-justify="true"] article[data-pane="main"] p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* Novel View: Book Paragraph Indentation (first line indent, zero gap) */
body[data-template="novel"] article[data-pane="main"] p + p,
body[data-novel-indent="true"] article[data-pane="main"] p + p {
    text-indent: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
}
body[data-template="novel"] article[data-pane="main"] h1 + p,
body[data-template="novel"] article[data-pane="main"] h2 + p,
body[data-template="novel"] article[data-pane="main"] h3 + p,
body[data-template="novel"] article[data-pane="main"] blockquote + p,
body[data-template="novel"] article[data-pane="main"] hr + p,
body[data-novel-indent="true"] article[data-pane="main"] h1 + p,
body[data-novel-indent="true"] article[data-pane="main"] h2 + p,
body[data-novel-indent="true"] article[data-pane="main"] h3 + p,
body[data-novel-indent="true"] article[data-pane="main"] blockquote + p,
body[data-novel-indent="true"] article[data-pane="main"] hr + p {
    text-indent: 0;
    margin-top: 1em;
}

/* Novel View: Chapter Header & Ornaments */
body[data-template="novel"] article[data-pane="main"] > h1:first-child,
body[data-page-theme="novel"] article[data-pane="main"] > h1:first-child {
    text-align: center;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}
body[data-template="novel"] hr,
body[data-page-theme="novel"] hr {
    border: 0;
    text-align: center;
    height: 2.5em;
    margin: 2.5em 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body[data-template="novel"] hr::before,
body[data-page-theme="novel"] hr::before {
    content: "✦   ✦   ✦";
    display: inline-block;
    letter-spacing: 0.6em;
    font-size: 0.85em;
    color: var(--mb-text-muted);
}

/* Theme Override Styles: RPG / Parchment */
body[data-page-theme="rpg"],
body[data-page-theme="parchment"],
body[data-page-theme="ttrpg"] {
    --mb-font-heading: "Cinzel", "Copperplate", "Georgia", serif;
    --mb-font-body: "Athelas", "Baskerville", "Palatino", serif;
}
:root[data-mb-theme="light"] body[data-page-theme="rpg"],
:root[data-mb-theme="light"] body[data-page-theme="parchment"],
:root[data-mb-theme="light"] body[data-page-theme="ttrpg"] {
    --mb-bg: #f9f5ec;
    --mb-bg-alt: #f0e8d5;
    --mb-text: #2c2217;
    --mb-text-muted: #726250;
    --mb-accent: #9b2c2c;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #dfd4bf;
}
:root[data-mb-theme="dark"] body[data-page-theme="rpg"],
:root[data-mb-theme="dark"] body[data-page-theme="parchment"],
:root[data-mb-theme="dark"] body[data-page-theme="ttrpg"] {
    --mb-bg: #1c1815;
    --mb-bg-alt: #28221c;
    --mb-text: #e8dfd3;
    --mb-text-muted: #9e9180;
    --mb-accent: #e06666;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #3d3429;
}

/* Theme Override Styles: Tech / Modern */
body[data-page-theme="tech"],
body[data-page-theme="modern"] {
    --mb-font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --mb-font-heading: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}
:root[data-mb-theme="light"] body[data-page-theme="tech"],
:root[data-mb-theme="light"] body[data-page-theme="modern"] {
    --mb-bg: #ffffff;
    --mb-bg-alt: #f3f4f6;
    --mb-text: #111827;
    --mb-text-muted: #5b6472;
    --mb-accent: #2563eb;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #e5e7eb;
}
:root[data-mb-theme="dark"] body[data-page-theme="tech"],
:root[data-mb-theme="dark"] body[data-page-theme="modern"] {
    --mb-bg: #0f172a;
    --mb-bg-alt: #1e293b;
    --mb-text: #f8fafc;
    --mb-text-muted: #94a3b8;
    --mb-accent: #60a5fa;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #334155;
}

/* Theme Override Styles: Chess / Editorial */
body[data-page-theme="chess"],
body[data-page-theme="editorial"] {
    --mb-font-heading: "Bodoni MT", "Didot", "Georgia", serif;
    --mb-font-body: "Charter", "Baskerville", serif;
}
:root[data-mb-theme="light"] body[data-page-theme="chess"],
:root[data-mb-theme="light"] body[data-page-theme="editorial"] {
    --mb-bg: #f8f8f9;
    --mb-bg-alt: #ebecee;
    --mb-text: #161616;
    --mb-text-muted: #666666;
    --mb-accent: #a64b06;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #dcdde0;
}
:root[data-mb-theme="dark"] body[data-page-theme="chess"],
:root[data-mb-theme="dark"] body[data-page-theme="editorial"] {
    --mb-bg: #141416;
    --mb-bg-alt: #1f2023;
    --mb-text: #e6e7eb;
    --mb-text-muted: #8b8f97;
    --mb-accent: #f59e0b;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #2e3036;
}
.mb-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--mb-radius);
    display: inline-block;
}

.mb-asset-placeholder {
    display: block;
    background-color: var(--color-bg-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    min-height: 120px;
}

/* Asset Badges & Distinct Geometric Shapes */
.mb-asset-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    z-index: 100;
    padding: 0;
    outline: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 2px solid #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mb-asset-badge:hover {
    transform: scale(1.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}
.mb-asset-badge .mb-badge-icon {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    pointer-events: none;
    user-select: none;
}

/* Shape 1: Allowed -> Smooth Circle */
.mb-badge-allowed {
    background-color: #10b981;
    border-radius: 50%;
}
.mb-badge-allowed .mb-badge-icon {
    font-size: 11px;
}

/* Shape 2: Warn -> Rounded Diamond / Angled Square */
.mb-badge-warn {
    background-color: #f59e0b;
    border-radius: 4px;
}
.mb-badge-warn .mb-badge-icon {
    font-size: 13px;
    font-weight: 900;
}

/* Shape 3: Do Not Ever Publish -> Beveled Octagonal Stop Sign */
.mb-badge-doNotEverPublish {
    background-color: #ef4444;
    border-radius: 2px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}
.mb-badge-doNotEverPublish .mb-badge-icon {
    font-size: 11px;
    font-weight: 900;
}

.mb-media {
    position: relative;
}
.mb-inline-image-wrapper {
    position: relative;
    display: inline-block;
}
figure.mb-media {
    margin: 1.25rem 0;
    padding: 0;
}
figure.mb-media figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--mb-text-muted);
    text-align: center;
}
/* Audio Attachments */
.mb-media-audio {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    background: var(--mb-bg-alt);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
}
.mb-audio-player {
    width: 100%;
    height: 38px;
    display: block;
}
.mb-audio-caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--mb-text-muted);
}
/* YouTube embeds: a responsive 16:9 player, or a 9:16 Short. */
.mb-youtube {
    margin: 1.5rem 0;
    max-width: 100%;
}
.mb-embed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--mb-radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.10);
}
.mb-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.mb-youtube-short .mb-embed-frame {
    aspect-ratio: 9 / 16;
    max-width: 22rem;
    margin-inline: auto;
}
.mb-youtube figcaption {
    margin-top: 0.5rem;
    font-size: 0.9em;
    text-align: center;
    color: var(--mb-text-muted);
}
.mb-embed-fallback {
    margin: 0.35rem 0 0;
    font-size: 0.8em;
    text-align: center;
    color: var(--mb-text-muted);
}
.mb-youtube-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1b1b1f, #3a3a44);
    border-radius: var(--mb-radius);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}
.mb-youtube-short .mb-youtube-poster {
    aspect-ratio: 9 / 16;
    max-width: 22rem;
    margin-inline: auto;
}
.mb-youtube-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mb-youtube-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4.5rem;
    height: 3.1rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 0.9rem;
}
.mb-youtube-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem 0.8rem 0.55rem;
    font-size: 0.78rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
.mb-embed-link {
    margin: 1rem 0;
}
/* Video & PDF */
.mb-media-video {
    margin: 1.25rem 0;
}
.mb-video-player {
    width: 100%;
    max-width: 100%;
    border-radius: var(--mb-radius);
}
.mb-media-pdf {
    margin: 1rem 0;
}
.mb-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--mb-bg-alt);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    text-decoration: none;
    font-weight: 500;
    color: var(--mb-text);
}
.mb-pdf-link:hover {
    border-color: var(--mb-accent);
    color: var(--mb-accent);
}

/* Media Cover Box */
.mb-asset-cover-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 140px;
    background: repeating-linear-gradient(
        -45deg,
        var(--mb-bg-alt),
        var(--mb-bg-alt) 10px,
        var(--mb-bg) 10px,
        var(--mb-bg) 20px
    );
    border: 2px dashed var(--mb-callout-danger, #d9534f);
    border-radius: var(--mb-radius);
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mb-asset-cover-box:hover {
    border-color: var(--mb-text);
}
.mb-asset-cover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    pointer-events: none;
}
.mb-asset-cover-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--mb-callout-danger, #d9534f);
}
.mb-asset-cover-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mb-text);
    letter-spacing: 0.02em;
}
.mb-asset-cover-hint {
    font-size: 0.75rem;
    color: var(--mb-text-muted);
}

/* Dropdown Menu for Asset States */
.mb-asset-menu {
    position: absolute;
    z-index: 2000;
    min-width: 240px;
    max-width: 320px;
    background: var(--mb-bg, #ffffff);
    border: 1px solid var(--mb-border, #d0d7de);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    animation: mbMenuFadeIn 0.12s ease-out;
}
@keyframes mbMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.mb-asset-menu-header {
    padding: 6px 8px 4px 8px;
    border-bottom: 1px solid var(--mb-border, #e5e7eb);
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
}
.mb-asset-menu-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--mb-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-asset-menu-subtitle {
    font-size: 10px;
    color: var(--mb-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 1px;
}
.mb-asset-menu-item {
    appearance: none;
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color 0.12s ease;
}
.mb-asset-menu-item:hover {
    background-color: var(--mb-bg-alt, rgba(0, 0, 0, 0.05));
}
.mb-asset-menu-item.active {
    background-color: rgba(9, 105, 218, 0.08);
}
.mb-asset-menu-item .mb-badge-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}
.mb-asset-menu-item .mb-badge-icon-allowed {
    background-color: #10b981;
    border-radius: 50%;
}
.mb-asset-menu-item .mb-badge-icon-warn {
    background-color: #f59e0b;
    border-radius: 4px;
}
.mb-asset-menu-item .mb-badge-icon-locked {
    background-color: #ef4444;
    border-radius: 2px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}
.mb-asset-menu-item-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.mb-asset-menu-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--mb-text, #1f2937);
}
.mb-asset-menu-item-desc {
    font-size: 10px;
    color: var(--mb-text-muted, #6b7280);
}
.mb-asset-menu-check {
    font-size: 13px;
    font-weight: bold;
    color: var(--mb-accent, #0969da);
    margin-left: 4px;
}

/* Floating Toolbar for Text Flow */
.mb-flow-toolbar {
    position: absolute;
    display: inline-flex;
    align-items: center;
    background: var(--mb-bg, #ffffff);
    border: 1px solid var(--mb-border, #d0d7de);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    padding: 3px 4px;
    gap: 2px;
    z-index: 1500;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    animation: mbMenuFadeIn 0.12s ease-out;
}
.mb-flow-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--mb-text, #24292f);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
}
.mb-flow-btn:hover {
    background: var(--mb-bg-alt, rgba(0, 0, 0, 0.06));
}
.mb-flow-btn.active {
    background: var(--mb-accent, #0969da);
    color: #ffffff;
    font-weight: 600;
}
body[data-mode="preview"] .mb-media-image,
body[data-mode="preview"] .mb-inline-image-wrapper {
    cursor: pointer;
}
body[data-mode="preview"] .mb-media-image:hover img.mb-image,
body[data-mode="preview"] .mb-inline-image-wrapper:hover img.mb-image {
    outline: 2px dashed var(--mb-accent, #0969da);
    outline-offset: 2px;
}
.mb-image-selected {
    outline: 3px solid var(--mb-accent, #0969da) !important;
    outline-offset: 3px !important;
}

/* Clear floating elements on horizontal breaks */
hr, .mb-clear-both {
    clear: both;
}
/* Responsive un-float on mobile screens (< 640px) */
@media (max-width: 640px) {
    .mb-float-left, .mb-float-right,
    .mb-media-image.mb-float-left, .mb-media-image.mb-float-right,
    .mb-inline-image-wrapper.mb-float-left, .mb-inline-image-wrapper.mb-float-right,
    img.mb-float-left, img.mb-float-right,
    .mb-callout.mb-float-left, .mb-callout.mb-float-right,
    .mb-embed.mb-float-left, .mb-embed.mb-float-right,
    .mb-video-embed.mb-float-left, .mb-video-embed.mb-float-right,
    .mb-card.mb-float-left, .mb-card.mb-float-right {
        float: none !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 1.25rem auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 600px) {
    .mb-float-left, .mb-float-right,
    .mb-callout.mb-float-left, .mb-callout.mb-float-right,
    .mb-embed.mb-float-left, .mb-embed.mb-float-right,
    .mb-video-embed.mb-float-left, .mb-video-embed.mb-float-right {
        float: none !important;
        display: block !important;
        margin: 1rem auto !important;
        max-width: 100% !important;
        transform: none !important;
    }
}

/* Drop Ghost Drop-Target Silhouette */
.mb-drop-ghost {
    outline: 2px dashed var(--mb-accent, #0969da);
    background: rgba(9, 105, 218, 0.08);
    border-radius: var(--mb-radius, 6px);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* `R-A11Y-3`: Honor prefers-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;
        animation: none !important;
        transition: none !important;
    }
}
header { grid-area: head; }
nav[data-pane="menu"] { grid-area: nav; }
aside[data-pane="secondary"] { grid-area: side; }
footer { grid-area: foot; }
body[data-layout="top"] {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "nav" "main" "foot";
}
body[data-layout="top"][data-sidebar="right"] {
    grid-template-columns: minmax(0, 1fr) var(--mb-layout-sidebar-width, 18rem);
    grid-template-areas: "head head" "nav nav" "main side" "foot foot";
}
body[data-layout="top"][data-sidebar="left"] {
    grid-template-columns: var(--mb-layout-sidebar-width, 18rem) minmax(0, 1fr);
    grid-template-areas: "head head" "nav nav" "side main" "foot foot";
}
body[data-layout="none"] {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "main" "foot";
}
body[data-layout="none"][data-sidebar="right"] {
    grid-template-columns: minmax(0, 1fr) var(--mb-layout-sidebar-width, 18rem);
    grid-template-areas: "head head" "main side" "foot foot";
}
body[data-layout="none"][data-sidebar="left"] {
    grid-template-columns: var(--mb-layout-sidebar-width, 18rem) minmax(0, 1fr);
    grid-template-areas: "head head" "side main" "foot foot";
}
body[data-layout="side-left"] {
    --mb-layout-nav-width: 16rem;
    grid-template-columns: var(--mb-layout-nav-width) 1fr;
    grid-template-areas: "head head" "nav main" "foot foot";
}
body[data-layout="side-left"][data-sidebar="right"] {
    --mb-layout-nav-width: 16rem;
    grid-template-columns: var(--mb-layout-nav-width) minmax(0, 1fr) var(--mb-layout-sidebar-width, 18rem);
    grid-template-areas: "head head head" "nav main side" "foot foot foot";
}
body[data-layout="side-left"][data-sidebar="left"] {
    --mb-layout-nav-width: 16rem;
    grid-template-columns: var(--mb-layout-nav-width) var(--mb-layout-sidebar-width, 18rem) minmax(0, 1fr);
    grid-template-areas: "head head head" "nav side main" "foot foot foot";
}
body[data-layout="side-right"] {
    --mb-layout-nav-width: 16rem;
    grid-template-columns: 1fr var(--mb-layout-nav-width);
    grid-template-areas: "head head" "main nav" "foot foot";
}
body[data-layout="side-right"][data-sidebar="left"] {
    --mb-layout-nav-width: 16rem;
    grid-template-columns: var(--mb-layout-sidebar-width, 18rem) minmax(0, 1fr) var(--mb-layout-nav-width);
    grid-template-areas: "head head head" "side main nav" "foot foot foot";
}
body[data-layout="side-right"][data-sidebar="right"] {
    --mb-layout-nav-width: 16rem;
    grid-template-columns: minmax(0, 1fr) var(--mb-layout-sidebar-width, 18rem) var(--mb-layout-nav-width);
    grid-template-areas: "head head head" "main side nav" "foot foot foot";
}
/* Prevent content offset from translating into active sidebars */
body[data-sidebar="right"] main {
    translate: 0 var(--mb-layout-offset-y);
}
body[data-sidebar="left"] main {
    translate: 0 var(--mb-layout-offset-y);
}
body[data-sidebar] {
    column-gap: var(--mb-layout-gutter, 1.5rem);
}
/* Prevent margin notes from overlapping right sidebar when data-sidebar="right" */
body[data-sidebar="right"] article[data-margin-mode="true"] {
    padding-right: 0 !important;
}
body[data-sidebar="right"] article[data-margin-mode="true"] .mb-margin-note,
body[data-sidebar="right"] article[data-margin-mode="true"] .mb-margin-callout,
body[data-sidebar="right"] article[data-margin-mode="true"] figure.mb-margin-media {
    float: none !important;
    clear: none !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}
body[data-sidebar="right"] article[data-margin-mode="true"] .mb-slot-inline-margin {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* Tier 1 (<= 1100px): In 3-column layouts, stack secondary sidebar below main */
@media (max-width: 1100px) {
    body[data-layout="side-left"][data-sidebar="right"],
    body[data-layout="side-left"][data-sidebar="left"] {
        grid-template-columns: var(--mb-layout-nav-width) minmax(0, 1fr) !important;
        grid-template-areas: "head head" "nav main" "nav side" "foot foot" !important;
    }
    body[data-layout="side-right"][data-sidebar="left"],
    body[data-layout="side-right"][data-sidebar="right"] {
        grid-template-columns: minmax(0, 1fr) var(--mb-layout-nav-width) !important;
        grid-template-areas: "head head" "main nav" "side nav" "foot foot" !important;
    }
    body[data-sidebar] article[data-columns] .mb-content,
    body[data-sidebar] article[data-columns] {
        column-count: 1 !important;
    }
}
body[data-sidebar] aside[data-pane="secondary"] {
    padding-top: max(1.5rem, var(--mb-layout-offset-y));
}
body[data-layout="top"][data-sidebar="right"] aside[data-pane="secondary"],
body[data-layout="top"][data-sidebar="left"] aside[data-pane="secondary"],
body[data-layout="none"][data-sidebar="right"] aside[data-pane="secondary"],
body[data-layout="none"][data-sidebar="left"] aside[data-pane="secondary"] {
    border-left: none;
    border-right: none;
}
body:not([style*="--mb-layout-bg: transparent"]):not([style*="--mb-layout-bg:transparent"]) aside[data-pane="secondary"] .mb-widget {
    background: var(--mb-layout-bg, var(--mb-bg));
    border-radius: var(--mb-layout-radius, var(--mb-radius));
    box-shadow: var(--mb-layout-shadow, none);
}
/* Tier 2 (<= 900px): In 3-column layouts, stack nav and sidebars */
@media (max-width: 900px) {
    body[data-layout="side-left"][data-sidebar="right"],
    body[data-layout="side-left"][data-sidebar="left"],
    body[data-layout="side-right"][data-sidebar="left"],
    body[data-layout="side-right"][data-sidebar="right"] {
        grid-template-columns: 1fr !important;
        grid-template-areas: "head" "nav" "main" "side" "foot" !important;
    }
    body[data-sidebar] .mb-float-left,
    body[data-sidebar] .mb-float-right {
        float: none !important;
        margin: 1.5rem auto !important;
        max-width: 100% !important;
        display: block !important;
    }
}
/* Tier 3 (<= 768px): All sidebars and layouts stack into single column */
@media (max-width: 768px) {
    body[data-layout="top"][data-sidebar="right"],
    body[data-layout="top"][data-sidebar="left"],
    body[data-layout="none"][data-sidebar="right"],
    body[data-layout="none"][data-sidebar="left"] {
        grid-template-columns: 1fr !important;
        grid-template-areas: "head" "nav" "main" "side" "foot" !important;
    }
    aside[data-pane="secondary"],
    .mb-sidebar {
        max-width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid var(--mb-border) !important;
    }
}
nav[data-pane="menu"][data-collapse="hidden"] {
    display: none;
}
/* `R-LAY-4`, `R-A11Y-4`: side menus collapse on narrow screens. Real button with aria-expanded and 44x44px minimum touch target. */
@media (max-width: 768px) {
    body[data-layout="side-left"], body[data-layout="side-right"],
    body[data-layout="top"][data-sidebar="right"], body[data-layout="top"][data-sidebar="left"],
    body[data-layout="none"][data-sidebar="right"], body[data-layout="none"][data-sidebar="left"],
    body[data-layout="side-left"][data-sidebar="right"], body[data-layout="side-left"][data-sidebar="left"],
    body[data-layout="side-right"][data-sidebar="left"], body[data-layout="side-right"][data-sidebar="right"] {
        grid-template-columns: 1fr;
        grid-template-areas: "head" "nav" "main" "side" "foot";
    }
    .mb-menu-toggle,
    button.mb-menu-toggle[aria-expanded] {
        display: inline-flex;
        min-width: 44px;
        min-height: 44px;
    }
    .mb-menu-items,
    nav[data-pane="menu"][data-collapse="drawer-on-narrow"] .mb-menu-items {
        display: none;
        width: 100%;
        margin-top: 0.5rem;
    }
    .mb-menu-items.mb-menu-open,
    .mb-menu-toggle[aria-expanded="true"] + .mb-menu-items {
        display: flex;
    }
    .mb-menu-item a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
    }
    aside[data-pane="secondary"] {
        max-width: 100%;
    }
}
/* `R-A11Y-5`: Ensure navigation remains accessible on narrow viewports when JavaScript is disabled. */
@media (max-width: 768px) and (scripting: none) {
    .mb-menu-toggle {
        display: none;
    }
    .mb-menu-items,
    nav[data-pane="menu"][data-collapse="drawer-on-narrow"] .mb-menu-items {
        display: flex;
    }
}

/* Secondary Sidebar Styling (`R-LAY-3`) */
aside[data-pane="secondary"],
.mb-sidebar {
    padding: var(--mb-layout-gutter, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-sizing: border-box;
    min-width: 0;
}
.mb-sidebar-right {
    border-left: 1px solid var(--mb-border);
}
.mb-sidebar-left {
    border-right: 1px solid var(--mb-border);
}

/* Drag and Drop preview styles for Widgets & Sidebars */
body[data-mode="preview"] .mb-sidebar {
    position: relative;
    min-height: 160px;
}
body[data-mode="preview"] .mb-sidebar-drag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mb-text-muted);
    background: var(--mb-bg-alt);
    border: 1px solid var(--mb-border);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    margin-bottom: 0.25rem;
}
body[data-mode="preview"] .mb-sidebar-drag-header:active {
    cursor: grabbing;
}
body[data-mode="preview"] .mb-sidebar-drag-hint {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    text-transform: none;
}
body[data-mode="preview"] .mb-widget {
    position: relative;
}
body[data-mode="preview"] .mb-widget-drag-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mb-text-muted);
    background: var(--mb-bg-alt);
    border: 1px solid var(--mb-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: grab;
    user-select: none;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}
body[data-mode="preview"] .mb-widget:hover .mb-widget-drag-bar,
body[data-mode="preview"] .mb-widget-drag-bar:hover {
    opacity: 1;
    color: var(--mb-accent);
}
body[data-mode="preview"] .mb-widget.mb-widget-dragging {
    opacity: 0.35;
}
body[data-mode="preview"] .mb-dropzone-allowed {
    background: rgba(0, 0, 0, 0.05);
    border: 2px dashed var(--mb-accent);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--mb-accent);
    transition: all 0.15s ease;
    box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
    body[data-mode="preview"] .mb-dropzone-allowed {
        background: rgba(255, 255, 255, 0.08);
    }
}
body[data-mode="preview"][data-mb-theme="dark"] .mb-dropzone-allowed {
    background: rgba(255, 255, 255, 0.08);
}
body[data-mode="preview"] .mb-dropzone-hover {
    background: rgba(59, 130, 246, 0.18) !important;
    border-color: var(--mb-accent) !important;
    transform: scale(1.02);
}
body[data-mode="preview"] .mb-sidebar-zone-overlay {
    position: fixed;
    top: 55px;
    bottom: 30px;
    width: 220px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--mb-accent);
    background: rgba(0, 0, 0, 0.07);
    border: 2.5px dashed var(--mb-accent);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    pointer-events: auto;
    box-sizing: border-box;
    transition: transform 0.15s ease, background 0.15s ease;
}
@media (prefers-color-scheme: dark) {
    body[data-mode="preview"] .mb-sidebar-zone-overlay {
        background: rgba(255, 255, 255, 0.10);
    }
}
body[data-mode="preview"][data-mb-theme="dark"] .mb-sidebar-zone-overlay {
    background: rgba(255, 255, 255, 0.10);
}
body[data-mode="preview"] .mb-sidebar-zone-left {
    left: 15px;
}
body[data-mode="preview"] .mb-sidebar-zone-right {
    right: 15px;
}

/* Image Anchor Bounds Overlay (`R-MED-1` / visual anchor bounds) */
body[data-mode="preview"] .mb-anchor-bounds-overlay {
    position: absolute;
    border: 2px dashed var(--mb-accent);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    z-index: 80;
    box-sizing: border-box;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    padding: 4px;
    transition: opacity 0.15s ease;
}
@media (prefers-color-scheme: dark) {
    body[data-mode="preview"] .mb-anchor-bounds-overlay {
        background: rgba(255, 255, 255, 0.06);
    }
}
body[data-mode="preview"][data-mb-theme="dark"] .mb-anchor-bounds-overlay {
    background: rgba(255, 255, 255, 0.06);
}
body[data-mode="preview"] .mb-anchor-bounds-badge {
    position: absolute;
    top: -24px;
    left: 8px;
    background: var(--mb-accent);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}
body[data-mode="preview"] .mb-anchor-center-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed rgba(128, 128, 128, 0.5);
    pointer-events: none;
}
body[data-mode="preview"] .mb-anchor-zone {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mb-text-muted);
    border-radius: 6px;
    margin: 0 2px;
    pointer-events: none;
    transition: background 0.15s ease, color 0.15s ease;
}
body[data-mode="preview"] .mb-anchor-zone.active {
    background: rgba(59, 130, 246, 0.14);
    color: var(--mb-accent);
}
/* Container Hooks & Placement Slots (T0.1, T0.3) */
.mb-slot {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mb-slot-top {
    margin-bottom: 1.5rem;
}
.mb-slot-below-title {
    margin-bottom: 1.5rem;
}
.mb-slot-after-content {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mb-border);
}
.mb-slot-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}
.mb-slot-inline-margin {
    display: block;
}

/* Margin Notes Container Hooks (prep for T3.4) */
article[data-margin-mode="true"] {
    position: relative;
}
@media (min-width: 1100px) {
    article[data-margin-mode="true"] .mb-slot-inline-margin {
        position: absolute;
        right: calc(-1 * var(--mb-layout-sidebar-width, 18rem) - 2rem);
        top: 0;
        width: var(--mb-layout-sidebar-width, 18rem);
        max-width: 100%;
    }
}
@media (max-width: 1099px) {
    article[data-margin-mode="true"] .mb-slot-inline-margin {
        margin: 1.5rem 0;
        padding: 0.75rem 1rem;
        background: var(--mb-bg-alt);
        border-left: 3px solid var(--mb-accent);
        border-radius: var(--mb-radius);
    }
}

/* Retro Badges Widget (T0.1) */
.mb-widget-retro-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}
.mb-badge-retro {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--mb-font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    user-select: none;
}

/* Backlinks Widget (T0.1) */
.mb-widget-backlinks .mb-widget-list {
    margin-top: 0.5rem;
}

/* Breadcrumbs Widget (T0.1) */
.mb-widget-breadcrumbs {
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.mb-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.mb-breadcrumb-item + .mb-breadcrumb-item::before {
    content: "›";
    padding-right: 0.4rem;
    color: var(--mb-text-muted);
}
.mb-breadcrumb-list a {
    color: var(--mb-text-muted);
    text-decoration: none;
}
.mb-breadcrumb-list a:hover {
    color: var(--mb-link-internal);
    text-decoration: underline;
}
.mb-breadcrumb-current {
    color: var(--mb-text);
    font-weight: 600;
}

/* Series Navigation Widget (T0.1) */
.mb-widget-series-nav {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.mb-series-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.mb-series-prev, .mb-series-next {
    font-size: 0.9rem;
    color: var(--mb-link-internal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.mb-series-prev:hover, .mb-series-next:hover {
    text-decoration: underline;
}

/* Creator & Promo Ad Widgets (Patreon, Amazon Author, Outschool) */
.mb-widget-creator-ads,
.mb-widget-patreon,
.mb-widget-amazon,
.mb-widget-outschool {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mb-creator-ad-card {
    background: var(--mb-bg);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mb-creator-ad-card:hover {
    border-color: var(--mb-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.mb-creator-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mb-creator-icon {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}
.mb-creator-icon-patreon {
    background: rgba(255, 66, 77, 0.15);
    color: #FF424D;
}
.mb-creator-icon-amazon {
    background: rgba(255, 153, 0, 0.15);
    color: #FF9900;
}
.mb-creator-icon-outschool {
    background: rgba(0, 168, 168, 0.15);
    color: #00A8A8;
}
.mb-creator-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mb-text);
    margin: 0;
    line-height: 1.2;
}
.mb-creator-tagline {
    font-size: 0.72rem;
    color: var(--mb-text-muted);
    display: block;
}
.mb-creator-blurb {
    font-size: 0.82rem;
    color: var(--mb-text);
    line-height: 1.4;
    margin: 0;
}
.mb-creator-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    padding: 0.45rem 0.85rem;
    border-radius: var(--mb-radius);
    min-height: 36px;
    transition: background 0.15s ease, filter 0.15s ease;
    border: 1px solid transparent;
}
.mb-btn-patreon {
    background: #FF424D;
    color: #FFFFFF !important;
}
.mb-btn-patreon:hover {
    background: #E03540;
    color: #FFFFFF !important;
}
.mb-btn-amazon {
    background: #FF9900;
    color: #111111 !important;
}
.mb-btn-amazon:hover {
    background: #E68A00;
    color: #111111 !important;
}
.mb-btn-outschool {
    background: #00A8A8;
    color: #FFFFFF !important;
}
.mb-btn-outschool:hover {
    background: #008F8F;
    color: #FFFFFF !important;
}
.mb-creator-sublink {
    font-size: 0.75rem;
    color: var(--mb-text-muted);
    text-decoration: underline;
    align-self: flex-start;
}
.mb-creator-sublink:hover {
    color: var(--mb-link-internal);
}
/* ==========================================================================
   Margin Mode & Side Notes (T3.4, Medium / Tufte Style)
   ========================================================================== */

/* Active Margin Mode Container: Reserves space on wide viewports */
@media (min-width: 1024px) {
    article[data-margin-mode="true"] {
        position: relative;
        padding-right: clamp(14rem, 30vw, 24rem);
    }

    /* Side Column Margin Notes (Tufte style footnotes aligned with text) */
    article[data-margin-mode="true"] .mb-margin-note {
        float: right;
        clear: right;
        margin-right: calc(-1 * clamp(14rem, 30vw, 22rem));
        width: clamp(12rem, 28vw, 20rem);
        max-width: clamp(12rem, 28vw, 20rem);
        margin-top: 0.2rem;
        margin-bottom: 1.25rem;
        font-size: 0.88rem;
        line-height: 1.45;
        vertical-align: baseline;
        position: relative;
        text-align: left;
        border-left: 2px solid var(--mb-accent, #3b82f6);
        padding-left: 0.65rem;
        color: var(--mb-text-muted, #666);
    }

    /* Callouts in Margin */
    article[data-margin-mode="true"] .mb-margin-callout,
    article[data-margin-mode="true"] .mb-callout.mb-margin-note {
        float: right;
        clear: right;
        margin-right: calc(-1 * clamp(14rem, 30vw, 22rem));
        width: clamp(12rem, 28vw, 20rem);
        max-width: clamp(12rem, 28vw, 20rem);
        margin-top: 0.5rem;
        margin-bottom: 1.25rem;
    }

    /* Half-indented callouts */
    article[data-margin-mode="true"] .mb-callout-half-margin,
    article[data-margin-mode="true"] .mb-callout.mb-half-margin {
        margin-right: calc(-0.5 * clamp(14rem, 30vw, 22rem));
    }

    /* Photos / Media in Margin */
    article[data-margin-mode="true"] .mb-margin-media,
    article[data-margin-mode="true"] figure.mb-margin-media {
        float: right;
        clear: right;
        margin-right: calc(-1 * clamp(14rem, 30vw, 22rem));
        width: clamp(12rem, 28vw, 20rem) !important;
        max-width: clamp(12rem, 28vw, 20rem) !important;
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
    }

    /* In margin mode, hide bottom footnotes on wide viewports since side notes are shown */
    article[data-margin-mode="true"] .mb-footnotes,
    article[data-margin-mode="true"] .footnotes {
        display: none;
    }
}

/* Standalone margin callouts even when whole page is not in margin mode */
@media (min-width: 1024px) {
    article:not([data-margin-mode="true"]) .mb-margin-callout,
    article:not([data-margin-mode="true"]) .mb-callout-margin {
        float: right;
        clear: right;
        margin-right: calc(-1 * clamp(8rem, 20vw, 16rem));
        width: clamp(10rem, 22vw, 16rem);
    }
}

/* Responsive collapse on narrow screens (< 1024px) */
@media (max-width: 1023px) {
    article[data-margin-mode="true"] {
        padding-right: 0 !important;
    }

    article[data-margin-mode="true"] .mb-margin-note,
    article[data-margin-mode="true"] .mb-margin-callout,
    article[data-margin-mode="true"] .mb-callout.mb-margin-note,
    article[data-margin-mode="true"] .mb-margin-media,
    article[data-margin-mode="true"] figure.mb-margin-media,
    article[data-margin-mode="true"] .mb-callout-half-margin,
    .mb-margin-callout,
    .mb-callout-margin {
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Margin notes collapse into inline subtle notes on mobile */
    article[data-margin-mode="true"] .mb-margin-note {
        display: block;
        margin: 0.75rem 0;
        padding: 0.5rem 0.75rem;
        background: var(--mb-bg-alt, rgba(0, 0, 0, 0.03));
        border-radius: var(--mb-radius, 4px);
    }

    /* Restore bottom footnotes fallback on narrow screens */
    article[data-margin-mode="true"] .mb-footnotes,
    article[data-margin-mode="true"] .footnotes {
        display: block !important;
    }
}

/* Sidenote references, targets and interaction */
.mb-sidenote-ref {
    text-decoration: none;
    font-weight: 600;
    color: var(--mb-accent, #3b82f6);
    padding: 0 0.15em;
    cursor: pointer;
}
.mb-sidenote-ref:hover {
    text-decoration: underline;
}

.mb-margin-note:target,
.mb-margin-note.mb-highlighted {
    background-color: var(--mb-bg-alt, rgba(59, 130, 246, 0.08));
    outline: 2px solid var(--mb-accent, #3b82f6);
    border-radius: var(--mb-radius, 4px);
    transition: background-color 0.3s ease, outline 0.3s ease;
}

.mb-margin-note-number {
    font-weight: 700;
    margin-right: 0.35rem;
    color: var(--mb-text, inherit);
}
@media print {
    nav,
    nav[data-pane="menu"],
    aside[data-pane="secondary"],
    .mb-sidebar,
    .mb-skip-link,
    .mb-menu-toggle {
        display: none !important;
    }
    body {
        display: block !important;
        background: transparent !important;
        color: #000 !important;
    }
    main {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        translate: none !important;
    }
    article[data-columns],
    article[data-columns="2"],
    article[data-columns="3"],
    article[data-columns="2"] .mb-content,
    article[data-columns="3"] .mb-content,
    .mb-columns-2,
    .mb-columns-3 {
        column-count: 1 !important;
    }
    details,
    details:not([open]) {
        display: block !important;
    }
    details > *:not(summary),
    details:not([open]) > *:not(summary) {
        display: block !important;
    }
    details::details-content,
    details:not([open])::details-content {
        display: block !important;
        content-visibility: visible !important;
    }
    a.mb-link-external[href]::after,
    a[href^="http://"]::after,
    a[href^="https://"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }
    /* Margin Mode (T3.4): Hide side column/margin notes, display bottom footnotes fallback */
    article[data-margin-mode="true"] .mb-margin-note,
    .mb-slot-inline-margin {
        display: none !important;
    }
    article[data-margin-mode="true"] .mb-footnotes,
    article[data-margin-mode="true"] .footnotes,
    .mb-footnotes,
    .footnotes {
        display: block !important;
    }
    table,
    pre,
    blockquote,
    .mb-callout,
    .mb-embed,
    figure,
    .mb-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}
/* Page themes with no manual light/dark switch follow the reader's system setting. */
:root:not([data-mb-theme]) {
    color-scheme: light;
    --mb-bg: #fbf0d9;
    --mb-bg-alt: #f3e4c4;
    --mb-text: #2c2217;
    --mb-text-muted: #6b6b6b;
    --mb-accent: #8b261e;
    --mb-border: #e6e6e6;
    --mb-code-bg: #f5f5f5;
    --mb-code-text: #5c5c5c;
    --mb-mark-bg: rgba(255, 225, 0, 0.5);
    --mb-focus: #506d7d;
    --mb-link-internal: #506d7d;
    --mb-link-internal-hover: #3f5666;
    --mb-link-external: #6b6b6b;
    --mb-link-unlinked: #6b6b6b;
    --mb-link-dead: #b5354a;
    --mb-callout-note: #6c99bb;
    --mb-callout-tip: #a8c373;
    --mb-callout-warning: #d5763f;
    --mb-callout-danger: #d04255;
    --mb-callout-quote: #b5b5b5;
}
:root:not([data-mb-theme]) {
    color-scheme: light;
}
:root:not([data-mb-theme]) body[data-page-theme="novel"],
:root:not([data-mb-theme]) body[data-template="novel"],
:root:not([data-mb-theme]) body[data-novel-palette="sepia"] {
    --mb-bg: #fbf0d9;
    --mb-bg-alt: #f4e5c7;
    --mb-text: #2c221e;
    --mb-text-muted: #6f5b4d;
    --mb-accent: #8b3a2b;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #e3d3b6;
    --mb-layout-bg: #fdf6e6;
    --mb-layout-page-bg: #f5ebd2;
}
:root:not([data-mb-theme]) body[data-novel-palette="classic"] {
    --mb-bg: #faf8f5;
    --mb-bg-alt: #f2eee8;
    --mb-text: #1a1a1a;
    --mb-text-muted: #666360;
    --mb-accent: #1e3a5f;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #e2ddd5;
    --mb-layout-bg: #ffffff;
    --mb-layout-page-bg: #f0ece5;
}
:root:not([data-mb-theme]) body[data-novel-palette="vintage"] {
    --mb-bg: #f4ecd8;
    --mb-bg-alt: #ebdcb9;
    --mb-text: #241b14;
    --mb-text-muted: #6b5a4b;
    --mb-accent: #2e5339;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #d6c5a2;
    --mb-layout-bg: #f9f3e4;
    --mb-layout-page-bg: #ebdcb9;
}
:root:not([data-mb-theme]) body[data-page-theme="rpg"],
:root:not([data-mb-theme]) body[data-page-theme="parchment"],
:root:not([data-mb-theme]) body[data-page-theme="ttrpg"] {
    --mb-bg: #f9f5ec;
    --mb-bg-alt: #f0e8d5;
    --mb-text: #2c2217;
    --mb-text-muted: #726250;
    --mb-accent: #9b2c2c;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #dfd4bf;
}
:root:not([data-mb-theme]) body[data-page-theme="tech"],
:root:not([data-mb-theme]) body[data-page-theme="modern"] {
    --mb-bg: #ffffff;
    --mb-bg-alt: #f3f4f6;
    --mb-text: #111827;
    --mb-text-muted: #5b6472;
    --mb-accent: #2563eb;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #e5e7eb;
}
:root:not([data-mb-theme]) body[data-page-theme="chess"],
:root:not([data-mb-theme]) body[data-page-theme="editorial"] {
    --mb-bg: #f8f8f9;
    --mb-bg-alt: #ebecee;
    --mb-text: #161616;
    --mb-text-muted: #666666;
    --mb-accent: #a64b06;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #dcdde0;
}
@media (prefers-color-scheme: dark) {
:root:not([data-mb-theme]) {
    color-scheme: dark;
    --mb-bg: #191410;
    --mb-bg-alt: #261e18;
    --mb-text: #e8dccb;
    --mb-text-muted: #999999;
    --mb-accent: #d97736;
    --mb-border: #363636;
    --mb-code-bg: #212121;
    --mb-code-text: #a6a6a6;
    --mb-mark-bg: rgba(255, 177, 80, 0.3);
    --mb-focus: #889eaa;
    --mb-link-internal: #889eaa;
    --mb-link-internal-hover: #a0b2bb;
    --mb-link-external: #999999;
    --mb-link-unlinked: #999999;
    --mb-link-dead: #ef7586;
    --mb-callout-note: #6c99bb;
    --mb-callout-tip: #a8c373;
    --mb-callout-warning: #d5763f;
    --mb-callout-danger: #d04255;
    --mb-callout-quote: #595959;
}
:root:not([data-mb-theme]) {
    color-scheme: dark;
}
:root:not([data-mb-theme]) body[data-page-theme="novel"],
:root:not([data-mb-theme]) body[data-template="novel"],
:root:not([data-mb-theme]) body[data-novel-palette="sepia"] {
    --mb-bg: #1c1815;
    --mb-bg-alt: #26211c;
    --mb-text: #e8dfd3;
    --mb-text-muted: #968a7c;
    --mb-accent: #d97864;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #3b332b;
    --mb-layout-bg: #221d19;
    --mb-layout-page-bg: #161311;
}
:root:not([data-mb-theme]) body[data-novel-palette="classic"] {
    --mb-bg: #18191c;
    --mb-bg-alt: #222428;
    --mb-text: #e6e8eb;
    --mb-text-muted: #8d9299;
    --mb-accent: #689bd4;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #31353d;
    --mb-layout-bg: #1e2024;
    --mb-layout-page-bg: #121315;
}
:root:not([data-mb-theme]) body[data-novel-palette="vintage"] {
    --mb-bg: #171b16;
    --mb-bg-alt: #212620;
    --mb-text: #e3ebd8;
    --mb-text-muted: #8b9980;
    --mb-accent: #6fb082;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #313b30;
    --mb-layout-bg: #1d231c;
    --mb-layout-page-bg: #111410;
}
:root:not([data-mb-theme]) body[data-page-theme="rpg"],
:root:not([data-mb-theme]) body[data-page-theme="parchment"],
:root:not([data-mb-theme]) body[data-page-theme="ttrpg"] {
    --mb-bg: #1c1815;
    --mb-bg-alt: #28221c;
    --mb-text: #e8dfd3;
    --mb-text-muted: #9e9180;
    --mb-accent: #e06666;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #3d3429;
}
:root:not([data-mb-theme]) body[data-page-theme="tech"],
:root:not([data-mb-theme]) body[data-page-theme="modern"] {
    --mb-bg: #0f172a;
    --mb-bg-alt: #1e293b;
    --mb-text: #f8fafc;
    --mb-text-muted: #94a3b8;
    --mb-accent: #60a5fa;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #334155;
}
:root:not([data-mb-theme]) body[data-page-theme="chess"],
:root:not([data-mb-theme]) body[data-page-theme="editorial"] {
    --mb-bg: #141416;
    --mb-bg-alt: #1f2023;
    --mb-text: #e6e7eb;
    --mb-text-muted: #8b8f97;
    --mb-accent: #f59e0b;
    --mb-link-internal: var(--mb-accent);
    --mb-link-internal-hover: var(--mb-accent);
    --mb-focus: var(--mb-accent);
    --mb-border: #2e3036;
}
}