/* =============================================================================
   LaraMonster documentation  —  /laramonster/docs
   -----------------------------------------------------------------------------
   "Platform Branding" (.agent/Ui-Ux-Guidelines.md): flat solid blocks (no
   gradients, no soft shadows), separation by space before lines, hierarchy
   from size + weight (400 / 600 / 800 only), strict alignment, and every
   size taken from the tokens below — nothing is hard-coded twice.
   Brand colours come from the --bb-* tokens (bounty-board.css).
   The article is English and left-to-right in every locale.
   Everything is namespaced .lmd-*.

   Context table (Ui-Ux-Guidelines.md, adoption checklist), for this surface:
   | Core entity            | a documentation page (App\Support\LaraMonsterDocs)  |
   | Core action            | read a page, then go to the next one / find one      |
   | Primary surface        | the article column; the sidebar is the page grid     |
   | Status source of truth | none stored: a page exists (200) or not (404); PRO   |
   |                        | marks pages about paid features, never gates them    |
   | External dependency    | none (the search index is built and cached locally) |
   States: page, not found (closest page offered), search empty, search
   unavailable, copy failed, no JavaScript. No permission-denied state: every
   page is public, for guests and signed-in users alike (LaraMonsterDocsTest).
   The one high-contrast block per screen: Next (last page: Open an issue;
   not found: Go to <page> / Search the docs).
   ========================================================================== */

/* tokens: on the page and on the search dialog (which lives outside it) */
.lmd, .lmd-search {
    /* spacing: a 4px base, every gap in the docs is one of these */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* type: size + weight carry the hierarchy */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 17px;
    --fs-lead: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-3xl: clamp(32px, 3.6vw, 44px);
    --fw-regular: 400;
    --fw-strong: 600;
    --fw-heavy: 800;
    --lh-tight: 1.15;
    --lh-snug: 1.45;
    --lh-body: 1.7;
    --ls-label: .08em;

    /* icons: one size per role, and one icon-to-text gap */
    --ic-inline: 16px;
    --ic-nav: 18px;
    --ic-tile: 20px;
    --tile-sm: 32px;
    --tile-md: 40px;
    --gap-icon: var(--sp-3);

    /* colour: every pair is WCAG AA (muted is 6.0:1 on white, 5.6:1 on canvas) */
    --c-ink: var(--bb-ink, #1c1c6e);
    --c-body: var(--bb-body, #403d59);
    --c-muted: #645f7d;
    --c-line: var(--bb-line, #e7e5f2);
    --c-canvas: var(--bb-canvas, #f6f5fb);
    --c-surface: #ffffff;
    --c-brand: var(--bb-brand, #4242d6);
    --c-brand-strong: var(--bb-brand-strong, #3634b8);
    --c-brand-tint: var(--bb-brand-tint, #ecebff);
    --c-brand-wash: var(--bb-brand-wash, #f5f4ff);
    --c-mast: #1c1c26;
    --c-mast-ink: #ffffff;
    --c-mast-body: #cfcee0;
    --c-mast-label: #b9b8ff;
    --c-code-bg: #14141c;
    --c-code-bar: #1d1d28;
    --c-code-ink: #e6e5f3;
    --focus: 0 0 0 3px rgba(66, 66, 214, .35);

    --r-sm: 6px;
    --r: 10px;
    --r-lg: 16px;

    /* layout */
    --side-w: 248px;
    --toc-w: 200px;
    --measure: 740px;
    --sticky: 104px;
}
.lmd { background: var(--c-canvas); padding-bottom: var(--sp-8); color: var(--c-body); }

/* ── masthead: where you are, what this page is, search ── */
.lmd-mast { background: var(--c-mast); color: var(--c-mast-body); padding: var(--sp-6) 0 var(--sp-7); }
.lmd-crumbs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.lmd-crumbs a { color: var(--c-mast-body); text-decoration: none; }
.lmd-crumbs a:hover { color: var(--c-mast-ink); text-decoration: underline; text-underline-offset: 3px; }
.lmd-crumbs a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.lmd-crumbs i { font-size: var(--fs-xs); color: var(--c-mast-label); }
.lmd-mast__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); }
.lmd-mast__copy { min-width: 0; max-width: var(--measure); }
.lmd-mast__kicker { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-mast-label); }
.lmd-mast__title { margin: 0 0 var(--sp-3); color: var(--c-mast-ink); font-size: var(--fs-3xl); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: -.01em; text-wrap: balance; }
.lmd-mast__sub { margin: 0; max-width: 62ch; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--c-mast-body); text-wrap: pretty; }
.lmd-lang-note { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--c-mast-body); }
.lmd-lang-note i { font-size: var(--ic-inline); color: var(--c-mast-label); }

/* PRO: a poster label, flat block + one bold word */
.lmd-pro { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: var(--r-sm); background: #f4c152; color: #3b2a00; font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); line-height: 1.4; }

/* search: looks like the field it opens */
.lmd-search-btn[hidden] { display: none; }
.lmd-search-btn {
    flex: none; display: inline-flex; align-items: center; gap: var(--gap-icon); width: 300px; height: 48px; padding: 0 var(--sp-2) 0 var(--sp-4);
    border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--c-mast-body);
    font: inherit; font-size: var(--fs-base); cursor: pointer;
}
.lmd-search-btn i { font-size: var(--ic-nav); }
.lmd-search-btn:hover { background: rgba(255, 255, 255, .14); color: var(--c-mast-ink); }
.lmd-search-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #8f8fff; }
.lmd-search-btn span { flex: 1; text-align: start; }
.lmd kbd, .lmd-search kbd { font: var(--fw-strong) var(--fs-xs)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 5px var(--sp-2); border-radius: var(--r-sm); background: rgba(255, 255, 255, .12); color: inherit; white-space: nowrap; }

/* ── three columns: pages | article | on this page ── */
.lmd-grid { display: grid; grid-template-columns: var(--side-w) minmax(0, var(--measure)) var(--toc-w); justify-content: space-between; column-gap: var(--sp-7); align-items: start; padding-top: var(--sp-7); }

/* sidebar */
.lmd-side { position: sticky; top: var(--sticky); max-height: calc(100vh - var(--sticky) - var(--sp-4)); overflow-y: auto; padding-bottom: var(--sp-4); scrollbar-width: thin; }
.lmd-side__toggle { display: none; }
.lmd-nav__group + .lmd-nav__group { margin-top: var(--sp-6); }
.lmd-nav__label { margin: 0 0 var(--sp-2); padding: 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.lmd-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lmd-nav a { display: flex; align-items: center; gap: var(--gap-icon); min-height: 38px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r); color: var(--c-body); font-size: 15px; font-weight: var(--fw-regular); line-height: var(--lh-snug); text-decoration: none; }
.lmd-nav a i { flex: none; width: var(--ic-nav); font-size: var(--ic-nav); color: var(--c-muted); text-align: center; }
.lmd-nav a span:not(.lmd-pro) { flex: 1; min-width: 0; }
.lmd-nav a .lmd-pro { flex: none; }
.lmd-nav a:hover { background: var(--c-brand-tint); color: var(--c-ink); }
.lmd-nav a:hover i { color: var(--c-brand); }
/* where you are: recognisable, but quieter than the one primary action (Next) */
.lmd-nav a.is-current { background: var(--c-brand-tint); color: var(--c-brand); font-weight: var(--fw-strong); box-shadow: inset 3px 0 0 var(--c-brand); }
.lmd-nav a.is-current i { color: var(--c-brand); }
.lmd-nav a:focus-visible { outline: none; box-shadow: var(--focus); }
.lmd-side__cta { display: flex; align-items: center; gap: var(--gap-icon); margin-top: var(--sp-6); padding: var(--sp-4); border-radius: var(--r); background: var(--c-surface); text-decoration: none; }
.lmd-side__cta img { flex: none; width: var(--tile-sm); height: var(--tile-sm); padding: 7px; border-radius: var(--r-sm); background: var(--c-brand-wash); box-sizing: border-box; }
.lmd-side__cta b { display: block; color: var(--c-ink); font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.lmd-side__cta small { display: block; margin-top: 2px; color: var(--c-muted); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.lmd-side__cta:hover b { color: var(--c-brand); }
.lmd-side__cta:focus-visible { outline: none; box-shadow: var(--focus); }

/* the article: one flat reading surface */
.lmd-article { min-width: 0; padding: var(--sp-7) var(--sp-7) var(--sp-6); border-radius: var(--r-lg); background: var(--c-surface); text-align: left; }

/* on this page */
.lmd-toc { position: sticky; top: var(--sticky); max-height: calc(100vh - var(--sticky) - var(--sp-4)); overflow-y: auto; }
.lmd-toc__title { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.lmd-toc ol { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.lmd-toc a { display: block; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 2px solid var(--c-line); color: var(--c-body); font-size: var(--fs-sm); line-height: var(--lh-snug); text-decoration: none; }
.lmd-toc li.is-sub a { padding-left: var(--sp-5); color: var(--c-muted); font-size: 13px; }
.lmd-toc a:hover { color: var(--c-ink); border-left-color: var(--c-muted); }
.lmd-toc a.is-active { border-left-color: var(--c-brand); color: var(--c-brand); font-weight: var(--fw-strong); }
.lmd-toc a:focus-visible { outline: none; box-shadow: var(--focus); }

/* ── article typography ── */
.lmd-prose { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-body); }
.lmd-prose > :first-child { margin-top: 0; }
.lmd-prose > :last-child { margin-bottom: 0; }
.lmd-prose p { margin: 0 0 var(--sp-4); }
.lmd-prose .lmd-lead { margin-bottom: var(--sp-6); font-size: var(--fs-lead); line-height: 1.65; color: var(--c-body); }
.lmd-prose .lmd-lead strong { color: var(--c-ink); }
.lmd-prose :is(h2, h3, h4) { position: relative; color: var(--c-ink); scroll-margin-top: calc(var(--sticky) + var(--sp-4)); text-wrap: balance; }
.lmd-prose h2 { margin: var(--sp-8) 0 var(--sp-4); font-size: var(--fs-2xl); font-weight: var(--fw-heavy); line-height: 1.2; letter-spacing: -.01em; }
.lmd-prose h3 { margin: var(--sp-7) 0 var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-heavy); line-height: 1.3; }
.lmd-prose h4 { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.lmd-prose h2 + h3 { margin-top: var(--sp-5); }
.lmd-anchor { position: absolute; right: 100%; top: 0; padding-right: var(--sp-2); color: var(--c-muted); font-weight: var(--fw-strong); text-decoration: none; opacity: 0; }
.lmd-prose :is(h2, h3):hover .lmd-anchor, .lmd-anchor:focus-visible { opacity: 1; }
.lmd-anchor:hover { color: var(--c-brand); }
.lmd-prose a:not([class]) { color: var(--c-brand); font-weight: var(--fw-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lmd-prose a:not([class]):hover { color: var(--c-brand-strong); text-decoration-thickness: 2px; }
.lmd-prose a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }
.lmd-prose :is(strong, b) { color: var(--c-ink); font-weight: var(--fw-strong); }
.lmd-prose em { font-style: italic; }
.lmd-prose :is(ul, ol):not([class]) { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
.lmd-prose :is(ul, ol):not([class]) > li { margin: 0 0 var(--sp-2); padding-left: var(--sp-1); }
/* the theme (app.min.css) sets ul { margin: 0 !important }: lists in the
   article need their space back, so this one override has to win too */
.lmd-prose ul:not([class]) { margin: 0 0 var(--sp-5) !important; list-style: disc !important; }
.lmd-prose ol:not([class]) { list-style: decimal !important; }
.lmd-prose ul.lmd-features { margin: 0 0 var(--sp-6) !important; }
.lmd-prose :is(ul, ol):not([class]) > li::marker { color: var(--c-muted); }
.lmd-prose :not(pre) > code { padding: 2px 6px; border-radius: var(--r-sm); background: var(--c-brand-wash); color: var(--c-ink); font: var(--fw-regular) .875em ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; word-break: break-word; }
.lmd-prose hr { margin: var(--sp-7) 0; border: 0; border-top: 1px solid var(--c-line); }

/* ── code blocks (title bar and copy button: laramonster-docs.js) ── */
.lmd-code { margin: 0 0 var(--sp-5); border-radius: var(--r); background: var(--c-code-bg); overflow: hidden; }
.lmd-code__bar { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: 0 var(--sp-2) 0 var(--sp-4); background: var(--c-code-bar); color: #b4b3c9; font: var(--fw-strong) var(--fs-xs) Inter, system-ui, sans-serif; letter-spacing: .02em; }
.lmd-code__bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmd-code pre { margin: 0; padding: var(--sp-4) var(--sp-5); overflow-x: auto; color: var(--c-code-ink); font: 13.5px/1.75 ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; scrollbar-width: thin; }
.lmd-code pre code { font: inherit; color: inherit; background: none; padding: 0; white-space: pre; }
.lmd-code .c { color: #9493b0; font-style: italic; }   /* comment */
.lmd-code .p { color: #8f8fff; user-select: none; }     /* prompt  */
.lmd-code .s { color: #9fe0bf; }                         /* string  */
.lmd-code .k { color: #f4c152; }                         /* key     */
.lmd-code .o { color: #b4b3c9; }                         /* output  */
.lmd-copy { display: inline-flex; align-items: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: #cfcee0; font: var(--fw-strong) var(--fs-xs) Inter, system-ui, sans-serif; cursor: pointer; }
.lmd-copy i { font-size: var(--ic-inline); }
.lmd-copy:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lmd-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px #8f8fff; }
.lmd-copy.is-done { color: #9fe0bf; }
.lmd-copy.is-failed { color: #f4c152; }
.lmd-callout .lmd-code, .lmd-os .lmd-code { margin-top: var(--sp-3); }

/* ── callouts: flat tone block, icon on the first line ── */
.lmd-callout { display: grid; grid-template-columns: var(--ic-tile) minmax(0, 1fr); column-gap: var(--gap-icon); align-items: center; margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r); font-size: 15px; line-height: 1.65; }
.lmd-callout > i { display: grid; place-items: center; width: var(--ic-tile); height: var(--ic-tile); font-size: var(--ic-tile); line-height: 1; }
.lmd-callout > div > :last-child { margin-bottom: 0; }
.lmd-callout > div > b:first-child { display: block; margin-bottom: var(--sp-1); color: var(--c-ink); }
.lmd-callout--note { background: #e9f1fb; }
.lmd-callout--note > i { color: #275ea5; }
.lmd-callout--tip { background: #e6f4ec; }
.lmd-callout--tip > i { color: #2c7a51; }
.lmd-callout--warn { background: #fbeede; }
.lmd-callout--warn > i { color: #a5641a; }
.lmd-callout--pro { background: #fdf4dc; }
.lmd-callout--pro > i { color: #96601b; }

/* ── numbered steps ── */
.lmd-steps { list-style: none; counter-reset: lmd-step; margin: 0 0 var(--sp-6); padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.lmd-steps > li { counter-increment: lmd-step; position: relative; margin: 0; padding-left: calc(var(--tile-sm) + var(--sp-4)); min-height: var(--tile-sm); }
.lmd-steps > li::before { content: counter(lmd-step); position: absolute; left: 0; top: 0; width: var(--tile-sm); height: var(--tile-sm); border-radius: var(--r-sm); background: var(--c-brand-tint); color: var(--c-brand); font-size: var(--fs-sm); font-weight: var(--fw-heavy); display: grid; place-items: center; }
.lmd-steps > li > b:first-child { display: block; padding-top: 5px; margin-bottom: var(--sp-1); color: var(--c-ink); font-size: var(--fs-base); font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.lmd-steps > li > p { margin: 0 0 var(--sp-2); }
.lmd-steps > li > :last-child { margin-bottom: 0; }

/* ── UI paths: Settings › About ── */
.lmd-path { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); vertical-align: baseline; }
.lmd-path span { padding: 1px var(--sp-2); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-ink); font-size: .9em; font-weight: var(--fw-strong); white-space: nowrap; }
.lmd-path i { font-size: 11px; color: var(--c-muted); }

/* ── tables: dense data, so hairlines between rows only ── */
.lmd-table { margin: 0 0 var(--sp-6); overflow-x: auto; }
.lmd-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.lmd-table th { padding: 0 var(--sp-4) var(--sp-3) 0; border-bottom: 2px solid var(--c-ink); text-align: left; color: var(--c-ink); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.lmd-table td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.lmd-table :is(th, td):last-child { padding-right: 0; }
.lmd-table td:first-child { min-width: 9em; color: var(--c-ink); font-weight: var(--fw-strong); }
.lmd-table td code { white-space: nowrap; }
.lmd-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.lmd-table td:first-child b { font-weight: var(--fw-strong); }

/* ── OS tabs: one flat block, segmented control on top (laramonster-docs.js) ── */
.lmd-os { margin: 0 0 var(--sp-6); padding: var(--sp-2); border-radius: var(--r-lg); background: var(--c-canvas); }
.lmd-os__tabs { display: flex; gap: var(--sp-1); overflow-x: auto; }
.lmd-os__tab { display: inline-flex; align-items: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r); background: transparent; color: var(--c-body); font: var(--fw-strong) var(--fs-sm) Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.lmd-os__tab i { font-size: var(--ic-inline); }
.lmd-os__tab small { font-weight: var(--fw-regular); color: var(--c-muted); }
.lmd-os__tab:hover { background: var(--c-brand-tint); color: var(--c-ink); }
.lmd-os__tab[aria-selected="true"] { background: var(--c-surface); color: var(--c-brand); }
.lmd-os__tab[aria-selected="true"] small { color: var(--c-muted); }
.lmd-os__tab:focus-visible { outline: none; box-shadow: var(--focus); }
.lmd-os__panel { margin-top: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: var(--r); background: var(--c-surface); }
.lmd-os__panel > :first-child, .lmd-os__panel > .lmd-os__label + * { margin-top: 0; }
.lmd-os__panel > :last-child { margin-bottom: 0; }
.lmd-os.is-ready .lmd-os__label { display: none; }
.lmd-os__label { margin: 0 0 var(--sp-3) !important; font-weight: var(--fw-heavy); color: var(--c-ink); }

/* ── cards: the map of the docs ── */
.lmd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-6); }
.lmd-card { display: flex; flex-direction: column; padding: var(--sp-5); border-radius: var(--r); background: var(--c-canvas); text-decoration: none; }
.lmd-card__icon { display: grid; place-items: center; width: var(--tile-md); height: var(--tile-md); margin-bottom: var(--sp-4); border-radius: var(--r); background: var(--c-brand-tint); color: var(--c-brand); font-size: 22px; }
.lmd-card b { display: block; margin-bottom: var(--sp-1); color: var(--c-ink); font-size: var(--fs-base); font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.lmd-card span:not(.lmd-card__icon) { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }
.lmd-card:hover { background: var(--c-brand-tint); }
.lmd-card:hover .lmd-card__icon { background: var(--c-brand); color: #fff; }
.lmd-card:hover b { color: var(--c-brand); }
.lmd-card:focus-visible { outline: none; box-shadow: var(--focus); }

/* ── feature lists: icon tile | title + one line ── */
.lmd-features { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5) var(--sp-6); }
.lmd-features li { display: grid; grid-template-columns: var(--tile-sm) minmax(0, 1fr); column-gap: var(--sp-4); align-items: center; margin: 0; }
.lmd-features__icon { display: grid; place-items: center; width: var(--tile-sm); height: var(--tile-sm); border-radius: var(--r-sm); background: var(--c-brand-tint); color: var(--c-brand); font-size: var(--ic-nav); }
.lmd-features b { display: block; margin-bottom: 2px; color: var(--c-ink); font-size: var(--fs-base); font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.lmd-features p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ── the primary button (the not-found page's one action) ── */
.lmd-actions { margin: 0 0 var(--sp-6) !important; }
.lmd-btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 48px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r); background: var(--c-brand); color: #fff !important; font: var(--fw-strong) var(--fs-base) Inter, system-ui, sans-serif; text-decoration: none !important; cursor: pointer; }
.lmd-btn[hidden] { display: none; }
.lmd-btn i { font-size: var(--ic-inline); }
.lmd-btn:hover { background: var(--c-brand-strong); }
.lmd-btn:focus-visible { outline: none; box-shadow: var(--focus); }

/* ── pager + help ── */
.lmd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
.lmd-pager__link { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border-radius: var(--r); background: var(--c-canvas); text-decoration: none; }
.lmd-pager__link small { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; }
.lmd-pager__link b { color: var(--c-ink); font-size: var(--fs-md); font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.lmd-pager__link:hover { background: var(--c-brand-tint); }
.lmd-pager__link:hover b { color: var(--c-brand); }
.lmd-pager__link:focus-visible { outline: none; box-shadow: var(--focus); }
/* Next is the page's primary action: the one solid brand block */
.lmd-pager__link--next { grid-column: 2; align-items: flex-end; text-align: right; background: var(--c-brand); }
.lmd-pager__link--next :is(small, b) { color: #fff; }
.lmd-pager__link--next:hover { background: var(--c-brand-strong); }
.lmd-pager__link--next:hover b { color: #fff; }
.lmd-help { display: grid; grid-template-columns: var(--tile-md) minmax(0, 1fr); column-gap: var(--sp-4); align-items: center; margin-top: var(--sp-4); padding: var(--sp-5); border-radius: var(--r); background: var(--c-canvas); font-size: 15px; line-height: 1.6; }
.lmd-help__icon { display: grid; place-items: center; width: var(--tile-md); height: var(--tile-md); border-radius: var(--r); background: var(--c-surface); color: var(--c-brand); font-size: 22px; }
.lmd-help b { display: block; margin-bottom: var(--sp-1); color: var(--c-ink); font-weight: var(--fw-strong); }
.lmd-help p { margin: 0; }
.lmd-help a { color: var(--c-brand); font-weight: var(--fw-strong); }
.lmd-help code { padding: 1px 5px; border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink); font-size: .9em; }

/* ── search dialog ── */
.lmd-search { width: min(640px, calc(100vw - var(--sp-6))); max-height: min(72vh, 620px); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-body); overflow: hidden; }
.lmd-search[open] { display: flex; flex-direction: column; }
.lmd-search::backdrop { background: rgba(20, 20, 31, .6); }
.lmd-search__box { display: flex; align-items: center; gap: var(--gap-icon); padding: 0 var(--sp-3) 0 var(--sp-5); border-bottom: 1px solid var(--c-line); }
.lmd-search__box > i { font-size: var(--ic-tile); color: var(--c-muted); }
.lmd-search__box input { flex: 1; min-width: 0; height: 60px; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-md); color: var(--c-ink); }
.lmd-search__box input::-webkit-search-cancel-button { display: none; }
.lmd-search__close { padding: var(--sp-1); border: 0; background: none; color: var(--c-muted); cursor: pointer; }
.lmd-search__close:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.lmd-search kbd { background: var(--c-canvas); color: var(--c-muted); }
.lmd-search__results { list-style: none; margin: 0; padding: var(--sp-2); overflow-y: auto; text-align: left; }
.lmd-search__results:empty { display: none; }
.lmd-search__group { padding: var(--sp-4) var(--sp-3) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.lmd-search__group:first-child { padding-top: var(--sp-2); }
.lmd-search__results a { display: grid; grid-template-columns: var(--ic-tile) minmax(0, 1fr); column-gap: var(--gap-icon); align-items: center; padding: var(--sp-3); border-radius: var(--r); color: var(--c-body); text-decoration: none; }
.lmd-search__results a i { font-size: var(--ic-tile); color: var(--c-muted); }
.lmd-search__results a b { display: block; color: var(--c-ink); font-size: 15px; font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.lmd-search__results a small { display: block; margin-top: 2px; color: var(--c-muted); font-size: 13px; line-height: var(--lh-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmd-search__results a.is-active { background: var(--c-brand); }
.lmd-search__results a.is-active :is(b, small, i) { color: #fff; }
.lmd-search__results mark { padding: 0 1px; border-radius: 3px; background: #f4c152; color: #3b2a00; }
.lmd-search__results a.is-active mark { background: #fff; color: var(--c-brand); }
.lmd-search__empty { margin: 0; padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--c-muted); }

/* ── smaller screens ── */
@media (max-width: 1359.98px) {
    .lmd-grid { grid-template-columns: var(--side-w) minmax(0, 1fr); }
    .lmd-toc { display: none !important; }
}
@media (max-width: 991.98px) {
    .lmd { --sticky: 88px; }
    .lmd-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); padding-top: var(--sp-5); }
    .lmd-side { position: static; max-height: none; overflow: visible; padding: 0; }
    .lmd-side__toggle {
        display: flex; align-items: center; gap: var(--gap-icon); width: 100%; height: 52px; padding: 0 var(--sp-4);
        border: 0; border-radius: var(--r); background: var(--c-surface); color: var(--c-ink);
        font: var(--fw-strong) var(--fs-base) Inter, system-ui, sans-serif; cursor: pointer;
    }
    .lmd-side__toggle i { font-size: var(--ic-nav); }
    .lmd-side__toggle:focus-visible { outline: none; box-shadow: var(--focus); }
    .lmd-side__current { margin-inline-start: auto; font-weight: var(--fw-regular); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* without the script the menu button can't work: the list stays open */
    .lmd:not(.is-js) .lmd-side__toggle { display: none; }
    .lmd.is-js .lmd-nav, .lmd-side__cta { display: none; }
    .lmd:not(.is-js) .lmd-nav, .lmd.is-js .lmd-side.is-open .lmd-nav { display: block; margin-top: var(--sp-2); padding: var(--sp-4) var(--sp-2); border-radius: var(--r); background: var(--c-surface); }
    .lmd-mast__row { flex-direction: column; align-items: stretch; gap: var(--sp-5); }
    .lmd-search-btn { width: 100%; }
    .lmd-article { padding: var(--sp-6) var(--sp-5); }
    .lmd-anchor { display: none; }
}
@media (max-width: 575.98px) {
    .lmd-mast { padding: var(--sp-5) 0 var(--sp-6); }
    .lmd-crumbs { margin-bottom: var(--sp-5); }
    .lmd-article { padding: var(--sp-5) var(--sp-4); }
    .lmd-prose { font-size: 15.5px; }
    .lmd-prose .lmd-lead { font-size: var(--fs-md); }
    .lmd-prose h2 { margin-top: var(--sp-7); font-size: var(--fs-xl); }
    .lmd-pager { grid-template-columns: 1fr; }
    .lmd-pager__link--next { grid-column: 1; }
    .lmd-os__panel { padding: var(--sp-4); }
    /* tables: one block per row, every value under its column's name */
    .lmd-table.is-labelled thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .lmd-table.is-labelled :is(table, tbody, tr, td) { display: block; }
    .lmd-table.is-labelled tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
    .lmd-table.is-labelled tr:first-child { border-top: 2px solid var(--c-ink); }
    .lmd-table.is-labelled td { padding: 0; border: 0; min-width: 0; }
    .lmd-table.is-labelled td + td { margin-top: var(--sp-2); }
    .lmd-table.is-labelled td + td::before { content: attr(data-label); display: block; color: var(--c-muted); font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-label); text-transform: uppercase; }
    .lmd-table.is-labelled td:first-child { font-size: var(--fs-base); }
    .lmd-callout { padding: var(--sp-4); }
    .lmd-search { margin-top: var(--sp-4); max-height: calc(100vh - var(--sp-6)); }
}