@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400&family=Schibsted+Grotesk:wght@400&display=swap");

/* Brightbase documents · the document system (docs.bbase.ai/system, 6 Nov 2026) applied to MkDocs Material.
   Two typefaces, five type styles, five colours and a hairline. No bold, no italics, no boxes: emphasis is the next
   style up, never a heavier weight. The one addition is a monospace face for code, which a plugin manual cannot do
   without; it is set at Body size in Ink with no fill behind it. */
:root {
  --canvas: #FAF7F2;   /* the page */
  --ink: #1A1714;      /* text */
  --muted: #6E665C;    /* second-line text, eyebrows */
  --hair: #E2DACE;     /* every rule */
  --faint: #C4BAAC;    /* link underlines, off states */
  --wash: #EEE9E0;     /* halfway from Canvas to Hair: the ground under code, the one fill on the page */
  --serif: "Newsreader", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --h1: 64px; --h2: 34px; --body-l: 20px; --body: 14px; --eyebrow: 8px;
  --col: 1440px; --pad-x: clamp(16px, 4vw, 80px);
}
@media (max-width: 760px) { :root { --h1: 40px; --h2: 26px; } }

/* Material's colour slots, all drawn from the five */
[data-md-color-scheme="brightbase"] {
  color-scheme: light;
  --md-default-bg-color: var(--canvas);
  --md-default-bg-color--light: var(--canvas);
  --md-default-bg-color--lighter: var(--canvas);
  --md-default-bg-color--lightest: var(--canvas);
  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--muted);
  --md-default-fg-color--lighter: var(--faint);
  --md-default-fg-color--lightest: var(--hair);
  --md-primary-fg-color: var(--canvas);
  --md-primary-fg-color--light: var(--canvas);
  --md-primary-fg-color--dark: var(--canvas);
  --md-primary-bg-color: var(--ink);
  --md-primary-bg-color--light: var(--muted);
  --md-accent-fg-color: var(--ink);
  --md-accent-fg-color--transparent: transparent;
  --md-accent-bg-color: var(--canvas);
  --md-typeset-color: var(--ink);
  --md-typeset-a-color: var(--ink);
  --md-typeset-table-color: var(--hair);
  --md-typeset-table-color--light: transparent;
  --md-typeset-mark-color: transparent;
  --md-typeset-kbd-color: var(--canvas);
  --md-typeset-kbd-accent-color: var(--canvas);
  --md-typeset-kbd-border-color: var(--hair);
  --md-code-fg-color: var(--ink);
  --md-code-bg-color: transparent;
  --md-code-hl-color: transparent;
  --md-code-hl-color--light: transparent;
  --md-code-hl-number-color: var(--ink);
  --md-code-hl-special-color: var(--muted);
  --md-code-hl-function-color: var(--ink);
  --md-code-hl-constant-color: var(--ink);
  --md-code-hl-keyword-color: var(--ink);
  --md-code-hl-string-color: var(--muted);
  --md-code-hl-name-color: var(--ink);
  --md-code-hl-operator-color: var(--muted);
  --md-code-hl-punctuation-color: var(--muted);
  --md-code-hl-comment-color: var(--muted);
  --md-code-hl-generic-color: var(--muted);
  --md-code-hl-variable-color: var(--ink);
  --md-footer-fg-color: var(--ink);
  --md-footer-fg-color--light: var(--muted);
  --md-footer-fg-color--lighter: var(--faint);
  --md-footer-bg-color: var(--canvas);
  --md-footer-bg-color--dark: var(--canvas);
  --md-shadow-z1: none; --md-shadow-z2: none; --md-shadow-z3: none;
}

/* ---------- base: 400 everywhere, no italics ---------- */
body, input, .md-typeset { font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; }
b, strong, .md-typeset b, .md-typeset strong, .md-nav__title, .md-nav__link, .md-header__title, .md-footer__title,
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6,
.md-typeset table:not([class]) th, .md-typeset .admonition-title, .md-search-result__title, .md-search-result__meta { font-weight: 400; }
em, i, .md-typeset em, .md-typeset i { font-style: normal; }
::selection { background: var(--hair); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- the column ---------- */
.md-grid { max-width: var(--col); }
.md-header__inner, .md-main__inner, .md-footer__inner, .md-footer-meta__inner { padding-left: calc(var(--pad-x) - .8rem); padding-right: calc(var(--pad-x) - .8rem); }
@media (max-width: 76.2344em) { .md-header__inner, .md-main__inner, .md-footer__inner, .md-footer-meta__inner { padding-left: 0; padding-right: 0; } }

/* ---------- the top line: one quiet line that scrolls with the page. Where you are on the left in Eyebrow,
   Search on the right as a word, the way the system's Menu is a word. ---------- */
.md-header { position: static; background: var(--canvas); color: var(--ink); box-shadow: none; border: 0; }
.md-header--shadow { box-shadow: none; }
.md-header__inner { min-height: 0; padding-top: 40px; padding-bottom: 40px; align-items: center; }
.md-header__button.md-logo { display: none; }
.md-header__button { color: var(--ink); opacity: 1; margin-top: 0; margin-bottom: 0; }
.md-header__button:hover { opacity: 1; }
.md-header__title { flex: 1; font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; height: auto; line-height: 1.5; margin-left: .8rem; }
.md-header__title .md-header__topic, .md-header__title--active .md-header__topic { position: static; opacity: 1; transform: none; pointer-events: auto; transition: none; }
.md-header__title .md-header__topic + .md-header__topic, .md-header__title--active .md-header__topic + .md-header__topic { display: none; }   /* the page title is on the page */
.md-header__title .md-ellipsis { overflow: visible; }
.md-header__topic, .md-header__topic:first-child { font-weight: 400; color: var(--ink); }   /* Material bolds the first topic */
/* the line itself comes from extra.topline in mkdocs.yml; the site name it replaces stays in the page for screen readers */
.md-header__topic .md-ellipsis { font-size: 0; letter-spacing: 0; }
.md-header__topic .md-ellipsis::before { content: var(--bb-topline, "Brightbase · WordPress"); font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; }
.md-sidebar { top: 0; }
/* search: the word until it is used, then a line to type on (wide screens; small screens keep Material's full-width field) */
.md-search { padding: 0; }
.md-search__form { background: transparent; border-radius: 0; box-shadow: none; }
.md-search__form:hover { background: transparent; }
.md-search__input { color: var(--ink); background: transparent; }
.md-search__input::-webkit-search-decoration, .md-search__input::-webkit-search-cancel-button { display: none; }
.md-search__form .md-search__input:focus, .md-search__form .md-search__input:focus-visible, .md-search__form:focus-within { outline: 0; box-shadow: none; }   /* the hairline and the caret show focus */
.md-search__overlay { background-color: rgba(250, 247, 242, .92); }   /* the page quietens behind the search instead of going dark */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { background: var(--canvas); border-radius: 0; box-shadow: none; }
@media (min-width: 60em) {
  .md-search { margin-left: auto; }
  .md-search__inner { width: auto; }
  .md-search__scrollwrap { width: auto; }
  .md-search__form { height: auto; border-bottom: 1px solid transparent; }
  .md-search__icon[for="__search"] { display: none; }
  .md-header .md-search__input { width: 7rem; height: auto; padding: 8px 0 !important; font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; cursor: pointer; text-align: right; }
  .md-search__input::placeholder { color: var(--ink); opacity: 1; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner { width: 30rem; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-bottom-color: var(--hair); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input { width: 100%; font: 400 var(--body)/1.5 var(--sans); letter-spacing: 0; text-transform: none; cursor: text; text-align: left; padding: 8px 2.2rem 8px 0 !important; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder { color: var(--muted); }
  .md-search__output { border-radius: 0; box-shadow: none; border: 0; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__output { border: 1px solid var(--hair); border-top: 0; }
}
.md-search__icon, .md-search__icon[type="reset"] { color: var(--muted); }
.md-search__output { border-radius: 0; box-shadow: none; border: 0; }
[data-md-toggle="search"]:checked ~ .md-header .md-search__output { border: 1px solid var(--hair); border-top: 0; }
.md-search__scrollwrap { background: var(--canvas); }
.md-search-result__meta { background: var(--canvas); color: var(--muted); font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; padding-top: 14px; padding-bottom: 14px; }
.md-search-result__item { box-shadow: none; border-top: 1px solid var(--hair); }
.md-search-result__link:hover, .md-search-result__link:focus { background: transparent; }
.md-search-result .md-typeset h1.md-search-result__title, .md-search-result .md-typeset .md-search-result__title { font: 400 var(--body-l)/1.4 var(--sans); letter-spacing: 0; color: var(--ink); margin: 0; }
.md-search-result .md-typeset h1, .md-search-result .md-typeset h2, .md-search-result .md-typeset h3 { font: 400 var(--body)/1.5 var(--sans); letter-spacing: 0; color: var(--ink); border: 0; padding: 0; margin: 0 0 4px; max-width: none; }
.md-search-result .md-typeset h2::before { display: none; }
.md-search-result .md-typeset pre { margin: 8px 0; }
.md-search-result .md-typeset pre > code { padding: 10px 12px; }
.md-search-result__teaser, .md-search-result__article p { font: 400 var(--body)/1.5 var(--sans); color: var(--muted); }
.md-search-result mark, .md-typeset mark { background: transparent; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.md-search-result__icon { color: var(--faint); }
@media (max-width: 59.9844em) {   /* phones and small tablets: Material's overlay search keeps its own field */
  .md-header__inner { padding-top: 20px; padding-bottom: 20px; }
  .md-header .md-search__input { font: 400 var(--body)/1.5 var(--sans); letter-spacing: 0; text-transform: none; text-align: left; width: 100%; padding: 8px 2.2rem !important; }
  .md-search__icon[for="__search"] { display: inline-block; }
}

/* ---------- side lists: Body, Muted until it is the page you are on ---------- */
.md-nav { font: 400 var(--body)/1.5 var(--sans); }
.md-nav__link { color: var(--muted); margin-top: .55em; }
.md-nav__link:hover, .md-nav__link:focus, .md-nav__link--active, .md-nav__item .md-nav__link--active, .md-nav__link--passed { color: var(--ink); }
.md-nav__link--active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.md-nav__title, .md-nav--primary .md-nav__title, .md-nav--secondary .md-nav__title { font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; color: var(--muted); background: var(--canvas); box-shadow: none; }
.md-nav--primary .md-nav__title[for="__drawer"] { background: var(--canvas); color: var(--ink); }
.md-nav--primary .md-nav__title .md-logo img { height: 22px; width: auto; }
.md-sidebar { padding-top: 40px; }
.md-sidebar__scrollwrap { scrollbar-color: var(--faint) transparent; }
.md-sidebar__scrollwrap:hover { scrollbar-color: var(--muted) transparent; }

/* ---------- the five type styles ---------- */
.md-content__inner { padding-top: 40px; margin-bottom: 96px; }
.md-content__inner::before { display: none; }
.md-typeset { font: 400 var(--body)/1.5 var(--sans); color: var(--ink); counter-reset: sec; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset p, .md-typeset li, .md-typeset td { text-wrap: pretty; }
.md-typeset h1 { font: 400 var(--h1)/1.08 var(--serif); letter-spacing: -.015em; color: var(--ink); margin: 40px 0 20px; max-width: 1000px; }
.md-typeset h1 + p { font: 400 var(--body-l)/1.4 var(--sans); max-width: 760px; margin: 0 0 80px; }   /* the opening summary */
.md-typeset h2 { font: 400 var(--h2)/1.22 var(--serif); letter-spacing: -.005em; color: var(--ink); border-top: 1px solid var(--hair); padding-top: 56px; margin: 72px 0 24px; counter-increment: sec; }
/* a section: the hairline, its number in Eyebrow, then the title */
.md-typeset h2::before { content: counter(sec, decimal-leading-zero); display: block; font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; color: var(--muted); margin-bottom: 12px; }
.md-typeset h3 { font: 400 var(--body-l)/1.4 var(--sans); letter-spacing: 0; color: var(--ink); margin: 40px 0 12px; }
.md-typeset h4 { font: 400 var(--body)/1.5 var(--sans); letter-spacing: 0; color: var(--ink); margin: 28px 0 8px; }
.md-typeset h5, .md-typeset h6 { font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; color: var(--muted); margin: 28px 0 8px; }
.md-typeset p, .md-typeset ul, .md-typeset ol, .md-typeset dl { max-width: 760px; margin-top: 0; margin-bottom: 14px; }
.md-typeset ul li::marker, .md-typeset ol li::marker { color: var(--muted); }
.md-typeset hr { border-bottom: 1px solid var(--hair); margin: 56px 0; }
/* the anchor: # in Hair while the heading is hovered, Muted when it is the target or hovered itself */
.md-typeset .headerlink { color: var(--hair); text-decoration: none; }
.md-typeset .headerlink:hover, .md-typeset .headerlink:focus, .md-typeset :target > .headerlink { color: var(--muted); }

/* links hug their words: a 1px underline in Faint that turns Ink on hover */
.md-typeset a:not(.headerlink):not(.md-button) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.md-typeset a:not(.headerlink):not(.md-button):hover { color: inherit; text-decoration-color: var(--ink); }

/* the one button: outlined in Ink, 8px corners, filled Ink on hover */
.md-typeset .md-button, .md-top { font: 400 var(--body)/1.5 var(--sans); padding: 10px 20px; border-radius: 8px; border: 1px solid var(--ink); background: transparent; color: var(--ink); box-shadow: none; }
.md-typeset .md-button:hover, .md-typeset .md-button:focus, .md-top:hover, .md-top:focus { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.md-top { background: var(--canvas); }

/* ---------- code: the monospace exception. Ink on the page, hairlines above and below a block, the language as an
   Eyebrow tag in the corner. Highlighting is two tones, which is all five colours allow: the code in Ink, and in Muted
   what is quoted (strings), what is said about it (comments), and the punctuation and operators between. ---------- */
/* inline code sits on Wash, halfway between the page and its rules, as a quiet chip; a block sits on the same ground */
.md-typeset code, .md-typeset kbd { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--wash); padding: .1em .4em; border-radius: 4px; box-shadow: none; word-break: break-word; }
.md-typeset pre { margin: 20px 0 24px; border: 0; border-radius: 8px; background: var(--wash); max-width: 1000px; }
.md-typeset pre > code { padding: 18px 20px; background: transparent; border-radius: 0; font-size: 12.5px; line-height: 1.6; scrollbar-color: var(--faint) transparent; }
.md-typeset .highlight, .md-typeset .highlighttable { margin: 0; position: relative; }
.md-typeset .highlight[class*="language-"] pre > code { padding-top: 36px; }
.md-typeset .highlight[class*="language-"]::before { position: absolute; z-index: 1; top: 15px; left: 20px; font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.md-typeset .highlight.language-bash::before, .md-typeset .highlight.language-sh::before, .md-typeset .highlight.language-shell::before { content: "Shell"; }
.md-typeset .highlight.language-php::before { content: "PHP"; }
.md-typeset .highlight.language-json::before { content: "JSON"; }
.md-typeset .highlight.language-html::before { content: "HTML"; }
.md-typeset .highlight.language-apache::before { content: "Apache"; }
.md-typeset .highlight.language-yaml::before { content: "YAML"; }
.md-typeset .highlight.language-css::before { content: "CSS"; }
.md-typeset .highlight.language-js::before, .md-typeset .highlight.language-javascript::before { content: "JavaScript"; }
.md-typeset .highlight.language-sql::before { content: "SQL"; }
.md-typeset .highlight .w { color: inherit; }
.md-typeset .highlight .c, .md-typeset .highlight .c1, .md-typeset .highlight .cm, .md-typeset .highlight .cp, .md-typeset .highlight .sd,
.md-typeset .highlight .s, .md-typeset .highlight .s1, .md-typeset .highlight .s2, .md-typeset .highlight .sb, .md-typeset .highlight .sx, .md-typeset .highlight .se,
.md-typeset .highlight .o, .md-typeset .highlight .p, .md-typeset .highlight .ow { color: var(--muted); }
.md-typeset .highlight .k, .md-typeset .highlight .kd, .md-typeset .highlight .kn, .md-typeset .highlight .kc, .md-typeset .highlight .nb, .md-typeset .highlight .nf, .md-typeset .highlight .nv, .md-typeset .highlight .nt, .md-typeset .highlight .na, .md-typeset .highlight .m, .md-typeset .highlight .mi, .md-typeset .highlight .mf, .md-typeset .highlight .nc, .md-typeset .highlight .no { color: var(--ink); }
.md-typeset .md-code__button, .md-clipboard { color: var(--muted); top: 12px; right: 12px; }
.md-typeset .md-code__button:hover, .md-clipboard:hover { color: var(--ink); }
.md-typeset .md-code__nav { background: transparent; }

/* ---------- tables are rows: a hairline above each and one under the last, column heads in Eyebrow ---------- */
.md-typeset__scrollwrap { margin: 20px 0 28px; }
.md-typeset__table { display: block; padding: 0; }
.md-typeset table:not([class]) { display: table; width: 100%; font: 400 var(--body)/1.5 var(--sans); background: transparent; border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--hair); }
.md-typeset table:not([class]) th { font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; padding: 0 32px 12px 0; min-width: 0; white-space: nowrap; }
.md-typeset table:not([class]) td { border-top: 1px solid var(--hair); padding: 16px 32px 16px 0; vertical-align: baseline; color: var(--ink); }
.md-typeset table:not([class]) th:last-child, .md-typeset table:not([class]) td:last-child { padding-right: 0; }
.md-typeset table:not([class]) tbody tr:hover { background: transparent; box-shadow: none; }
.md-typeset table:not([class]) td:not(:first-child) { color: var(--ink); }
/* a name in a cell never breaks inside itself: the column grows, and a wide table scrolls sideways instead */
.md-typeset table:not([class]) code { word-break: normal; overflow-wrap: normal; white-space: nowrap; }
.md-typeset table:not([class]) td:first-child code { display: inline-block; }

/* ---------- notes: no panel, no tint, no icon. Hairlines and an Eyebrow label ---------- */
.md-typeset .admonition, .md-typeset details { font: 400 var(--body)/1.5 var(--sans); color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding: 20px 0; margin: 28px 0; max-width: 760px; }
.md-typeset .admonition > .admonition-title, .md-typeset details > summary { font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; padding: 0; margin: 0 0 10px; }
.md-typeset .admonition > .admonition-title::before, .md-typeset details > summary::before, .md-typeset details > summary::after { display: none; }
.md-typeset .admonition > :last-child, .md-typeset details > :last-child { margin-bottom: 0; }
.md-typeset .admonition.admonition, .md-typeset details.details { border-color: var(--hair); }   /* over Material's per-type colours */

/* ---------- the foot: a hairline, then the same quiet line ---------- */
.md-footer { background: var(--canvas); color: var(--ink); border-top: 1px solid var(--hair); }
.md-footer__inner { padding-top: 16px; padding-bottom: 16px; }
.md-footer__link { opacity: 1; padding-top: 24px; padding-bottom: 24px; }
.md-footer__link:hover, .md-footer__link:focus { opacity: 1; }
.md-footer__link:hover .md-footer__title > .md-ellipsis, .md-footer__link:focus .md-footer__title > .md-ellipsis { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.md-footer__button { color: var(--muted); }
.md-footer__title { font: 400 var(--body-l)/1.4 var(--sans); color: var(--ink); background: transparent; margin-bottom: 0; }
.md-footer__direction { font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; color: var(--muted); opacity: 1; position: static; display: block; margin: 0 0 6px; padding: 0; }
.md-footer-meta { background: var(--canvas); border-top: 1px solid var(--hair); }
.md-footer-meta__inner { padding-top: 24px; padding-bottom: 24px; }
.md-copyright, .md-copyright__highlight { font: 400 var(--eyebrow)/1.5 var(--sans); letter-spacing: .23em; text-transform: uppercase; color: var(--muted); margin: 0; padding: 0; width: auto; }

/* phones */
@media (max-width: 760px) {
  .md-typeset h1 { margin-top: 24px; }
  .md-typeset h1 + p { margin-bottom: 48px; }
  .md-typeset h2 { padding-top: 40px; margin-top: 56px; }
  .md-typeset table:not([class]) th, .md-typeset table:not([class]) td { padding-right: 20px; }
}