/* docs.nationalcompute.com in the console's dress — the NC design tokens
   (grid-interconnect portal/app/templates/_tokens.html, the "NC Design
   Tokens" kit) mapped onto MkDocs Material's variables. Three parts:

     1. the faces: GT America / GT America Mono / GT America Extended,
        self-hosted from ../assets/fonts (the same woff2 files the console
        serves from /static/fonts); mkdocs.yml sets `font: false` so no
        Google font loads;
     2. the palette: the kit's dark and light sets, dark on Material's
        `slate` scheme and light on `default`, then one mapping of
        Material's --md-* roles onto them (page / card / raised surfaces,
        text steps, accent-blue links, status hues for admonitions);
     3. the components: the console's flat chrome (page-surface header
        with a hairline, nav rows with a hover wash and the raised step
        when active, uppercase section heads), Extended Bold headings,
        the 12 / 8 / 6 / 4 radii.

   Keep the hex values in step with _tokens.html — a palette change there
   is a palette change here. The mapping lives on [data-md-color-scheme]
   (Material sets it on <body>) rather than :root because a custom
   property resolves on the element that declares it: a :root rule could
   not see the per-scheme NC values declared on body. */

/* ── 1. faces ────────────────────────────────────────────────────────── */
@font-face { font-family: "GT America"; src: url("../assets/fonts/GT-America-Standard-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America"; src: url("../assets/fonts/GT-America-Standard-Regular-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "GT America"; src: url("../assets/fonts/GT-America-Standard-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America"; src: url("../assets/fonts/GT-America-Standard-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America Mono"; src: url("../assets/fonts/GT-America-Mono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America Mono"; src: url("../assets/fonts/GT-America-Mono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America Mono"; src: url("../assets/fonts/GT-America-Mono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America Extended"; src: url("../assets/fonts/GT-America-Extended-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* the three role stacks (National Type); Material splices --md-text-font
     and --md-code-font into its own system-font tails */
  --font-sans: "GT America", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "GT America Mono", "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --font-extended: "GT America Extended", Archivo, "GT America", Inter, sans-serif;
  --md-text-font: "GT America", Inter;
  --md-code-font: "GT America Mono", "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo;

  /* the type scale (px, as the kit states it; Material's rem base is 20px) */
  --fs-xxs: 10px; --lh-xxs: 12px;
  --fs-xs: 12px;  --lh-xs: 14px;
  --fs-sm: 14px;  --lh-sm: 16px;
  --fs-md: 16px;  --lh-md: 18px;
  --fs-lg: 20px;  --lh-lg: 22px;

  /* radii: cards 12 · inputs 8 · buttons & chips 6 · tags 4 */
  --radius-lg: 12px; --radius-md: 8px; --radius-sm: 6px; --radius-xs: 4px;

  --terminal-bg: #0D0C0A;
}

/* ── 2. palette ──────────────────────────────────────────────────────── */
/* dark — the kit's dark set, on Material's slate scheme */
[data-md-color-scheme="slate"] {
  --surface-primary: #25221F;
  --surface-secondary: #1F1D19;
  --surface-tertiary: #272520;
  --surface-sunken: #1A1816;
  --surface-raised: #332F2B;
  --surface-floating: #7A736A;
  --border-default: #3A3632;
  --border-strong: #59534D;
  --text-primary: #FFFFFF;
  --text-secondary: #D2CAC2;
  --text-tertiary: #9C978F;
  --text-faint: #6B655D;
  --text-inverse: #1A1816;
  --status-ok: #ADFEA0;
  --status-warn: #DBA04A;
  --status-error: #F8634C;
  --status-running: #5E8F9B;
  --status-hold: #A9B2DD;
  --accent-blue: #A8C5CF;
  /* semantic roles — dark refs (cards are sunken-filled in dark) */
  --surface-page: var(--surface-secondary);
  --surface-card: var(--surface-sunken);
  --surface-elevated: var(--surface-raised);
}

/* light — the kit's light set, on Material's default scheme */
[data-md-color-scheme="default"] {
  --surface-primary: #F5F2EC;
  --surface-secondary: #EAE7DE;
  --surface-tertiary: #F8F5EE;
  --surface-sunken: #F1EEE6;
  --surface-raised: #E3DFD5;
  --surface-floating: #B0AAA3;
  --border-default: #D5D0C7;
  --border-strong: #C2BCB3;
  --text-primary: #1A1816;
  --text-secondary: #514C46;
  --text-tertiary: #827C74;
  --text-faint: #928B84;
  --text-inverse: #FDFCF9;
  --status-ok: #6BA761;
  --status-warn: #C48940;
  --status-error: #BE3A28;
  --status-running: #5E8F9B;
  --status-hold: #5C6DA6;
  --accent-blue: #709BA9;
  /* semantic roles — light refs */
  --surface-page: var(--surface-tertiary);
  --surface-card: var(--surface-secondary);
  --surface-elevated: var(--surface-secondary);
}

/* Material's roles onto the NC tokens — one mapping for both schemes */
[data-md-color-scheme] {
  --md-default-fg-color: var(--text-primary);
  --md-default-fg-color--light: var(--text-secondary);
  --md-default-fg-color--lighter: var(--text-faint);
  --md-default-fg-color--lightest: var(--border-default);
  --md-default-bg-color: var(--surface-page);
  --md-default-bg-color--light: color-mix(in srgb, var(--surface-page) 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in srgb, var(--surface-page) 30%, transparent);
  --md-default-bg-color--lightest: color-mix(in srgb, var(--surface-page) 12%, transparent);

  /* the header, the drawer head and the tabs ride "primary": the page
     surface with the primary text on it — the console's flat chrome */
  --md-primary-fg-color: var(--surface-page);
  --md-primary-fg-color--light: var(--surface-card);
  --md-primary-fg-color--dark: var(--surface-card);
  --md-primary-bg-color: var(--text-primary);
  --md-primary-bg-color--light: var(--text-secondary);

  --md-accent-fg-color: var(--accent-blue);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--accent-blue) 12%, transparent);
  --md-accent-bg-color: var(--text-inverse);
  --md-accent-bg-color--light: color-mix(in srgb, var(--text-inverse) 70%, transparent);

  --md-typeset-color: var(--text-primary);
  --md-typeset-a-color: var(--accent-blue);
  --md-typeset-kbd-color: var(--surface-raised);
  --md-typeset-kbd-accent-color: var(--surface-primary);
  --md-typeset-kbd-border-color: var(--border-strong);
  --md-typeset-mark-color: color-mix(in srgb, var(--status-warn) 35%, transparent);
  --md-typeset-del-color: color-mix(in srgb, var(--status-error) 15%, transparent);
  --md-typeset-ins-color: color-mix(in srgb, var(--status-ok) 15%, transparent);
  --md-typeset-table-color: var(--border-default);
  --md-typeset-table-color--light: color-mix(in srgb, var(--surface-raised) 55%, transparent);

  --md-code-fg-color: var(--text-primary);
  --md-code-bg-color: var(--surface-card);
  --md-code-bg-color--light: color-mix(in srgb, var(--surface-card) 90%, transparent);
  --md-code-bg-color--lighter: color-mix(in srgb, var(--surface-card) 54%, transparent);
  --md-code-hl-color: var(--accent-blue);
  --md-code-hl-color--light: color-mix(in srgb, var(--accent-blue) 12%, transparent);
  --md-code-hl-number-color: var(--status-warn);
  --md-code-hl-special-color: var(--status-error);
  --md-code-hl-function-color: var(--accent-blue);
  --md-code-hl-constant-color: var(--status-hold);
  --md-code-hl-keyword-color: var(--status-hold);
  --md-code-hl-string-color: var(--status-ok);
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--text-tertiary);
  --md-code-hl-punctuation-color: var(--text-tertiary);
  --md-code-hl-comment-color: var(--text-tertiary);
  --md-code-hl-generic-color: var(--text-tertiary);
  --md-code-hl-variable-color: var(--text-secondary);

  --md-admonition-fg-color: var(--text-primary);
  --md-admonition-bg-color: var(--surface-card);
  --md-warning-fg-color: var(--text-inverse);
  --md-warning-bg-color: var(--status-warn);

  --md-footer-fg-color: var(--text-secondary);
  --md-footer-fg-color--light: var(--text-tertiary);
  --md-footer-fg-color--lighter: var(--text-faint);
  --md-footer-bg-color: var(--surface-page);
  --md-footer-bg-color--dark: var(--surface-card);

  /* the console's one shadow: a soft wash of the text color */
  --md-shadow-z1: 0 1px 2px color-mix(in srgb, var(--text-primary) 6%, transparent);
  --md-shadow-z2: 0 8px 24px color-mix(in srgb, var(--text-primary) 18%, transparent);
  --md-shadow-z3: 0 12px 32px color-mix(in srgb, var(--text-primary) 24%, transparent);
}

/* ── 3. components ───────────────────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; }

/* header: the page surface under a hairline, never a colored bar or a
   scroll shadow; the site name in the sidebar-head weight (Extended) */
.md-header { border-bottom: 1px solid var(--border-default); box-shadow: none; }
.md-header--shadow { box-shadow: none; }
.md-header__title { font-size: var(--fs-md); }
.md-header__topic:first-child { font-family: var(--font-extended); font-weight: 700; letter-spacing: -.01em; }
.md-header__topic + .md-header__topic { font-weight: 500; }
.md-header__button:hover { opacity: 1; color: var(--text-secondary); }
/* the lockup asset is white (the console paints its inline copy with
   currentColor); on the light surface it inverts to the near-black text */
[data-md-color-scheme="default"] .md-logo img { filter: invert(.9); }

/* search: an input in the console's dress (card fill, hairline, 8px) */
.md-search__form { background-color: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.md-search__form:hover { background-color: var(--surface-raised); }
.md-search__input::placeholder { color: var(--text-tertiary); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: var(--radius-md) var(--radius-md) 0 0; border-color: var(--border-strong); }
.md-search__output { border: 1px solid var(--border-strong); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.md-search-result__meta { background-color: var(--surface-card); color: var(--text-secondary); }
.md-search-result__item { box-shadow: 0 -1px 0 var(--border-default); }

/* navigation: rows on the one surface — no box, no border; a hover wash,
   the raised step when active (the console's aside a.nav) */
.md-nav { font-size: var(--fs-sm); }
.md-nav--primary .md-nav__link[href] {
  margin-top: 2px; padding: 7px 12px; border-radius: var(--radius-md);
  color: var(--text-secondary); line-height: var(--lh-sm);
  transition: background .12s ease, color .12s ease;
}
.md-nav--primary .md-nav__link[href]:hover,
.md-nav--primary .md-nav__link[href]:focus {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
}
.md-nav--primary .md-nav__link[href].md-nav__link--active { color: var(--text-primary); background: var(--surface-raised); }
.md-nav--primary .md-nav__link[href] code { background: none; color: inherit; padding: 0; }
/* the right-hand table of contents: quiet, the current entry in the
   primary step */
.md-nav--secondary .md-nav__link { color: var(--text-tertiary); }
.md-nav--secondary .md-nav__link:hover,
.md-nav--secondary .md-nav__link:focus { color: var(--text-primary); }
.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__item .md-nav__link--active code { color: var(--text-primary); }
.md-nav--secondary .md-nav__link--passed { color: var(--text-faint); }
@media screen and (min-width: 76.25em) {
  /* section heads — the sidebar's title and each nav section's label —
     in the console's .side-sec dress */
  .md-nav--primary > .md-nav__title,
  .md-nav__item--section > .md-nav__link {
    /* 24 left: the label text lines up with the row text (the rows sit
       inside Material's 12px item inset and carry 12px of their own) */
    padding: 10px 12px 4px 24px; margin: 0;
    color: var(--text-tertiary); font-family: var(--font-sans);
    font-size: var(--fs-xxs); line-height: var(--lh-xxs); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .md-nav--primary > .md-nav__title { padding-top: 0; }
  .md-nav--secondary > .md-nav__title {
    padding: 0 12px 4px; margin: 0;
    color: var(--text-tertiary); font-family: var(--font-sans);
    font-size: var(--fs-xxs); line-height: var(--lh-xxs); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .md-nav--primary .md-nav__item--section { margin: 14px 0 0; }
  /* a section sits inside the item inset already: 12 more lands its label
     on the same line as the sidebar title and the row text */
  .md-nav--primary .md-nav__item--section > .md-nav__link { margin-bottom: 2px; padding-left: 12px; }
  /* the sticky heads lose Material's page-colored blur (it smears the
     row scrolling under it into a faint band) and the list its inset
     hairline — the console's column has neither */
  .md-nav--primary > .md-nav__title,
  .md-nav--secondary > .md-nav__title { box-shadow: none; }
  .md-nav__title ~ .md-nav__list { box-shadow: none; }
  .md-sidebar__scrollwrap { scrollbar-color: var(--border-strong) transparent; }
}

/* running text */
.md-typeset { line-height: 1.55; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: var(--font-extended); font-weight: 700; color: var(--text-primary);
}
.md-typeset h1 { font-size: 2em; line-height: 1.125; letter-spacing: -.01em; margin: 0 0 1em; }
.md-typeset h2 { font-size: 1.5em; line-height: 1.333; letter-spacing: 0; margin: 2em 0 .75em; }
.md-typeset h3 { font-size: 1.25em; line-height: 1.2; letter-spacing: 0; margin: 1.6em 0 .6em; }
.md-typeset h2 + h3 { margin-top: .8em; }
.md-typeset h4 { font-weight: 600; letter-spacing: 0; }
.md-typeset h5, .md-typeset h6 { color: var(--text-secondary); letter-spacing: .04em; }
/* links: accent-blue with a quiet underline that fills on hover */
.md-typeset a {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-blue) 45%, transparent);
  transition: text-decoration-color .12s ease;
}
.md-typeset a:hover, .md-typeset a:focus { text-decoration-color: currentColor; }
.md-typeset a code { color: inherit; }
.md-typeset hr { border-bottom: 1px solid var(--border-default); }
.md-typeset blockquote { border-left: 2px solid var(--border-strong); color: var(--text-secondary); }
/* code: inline chips on the raised step at the tag radius; blocks as
   bordered cards at the input radius */
.md-typeset code { border-radius: var(--radius-xs); font-size: .85em; padding: .1em .35em; }
.md-typeset :not(pre) > code { background-color: var(--surface-raised); }
.md-typeset pre > code {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 14px; line-height: 1.55; scrollbar-color: var(--border-strong) transparent;
}
.md-typeset .highlight span.filename { background-color: var(--surface-raised); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.md-typeset .highlight span.filename + pre > code { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.md-typeset .md-clipboard { color: var(--text-faint); }
.md-typeset .md-clipboard:hover { color: var(--text-primary); }
.md-typeset kbd { border-radius: var(--radius-xs); }
/* tables: hairline-ruled rows, the console's quiet uppercase column heads */
.md-typeset table:not([class]) { border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: 1.45; }
.md-typeset table:not([class]) th { padding: 10px 14px; color: var(--text-tertiary); font-size: var(--fs-xxs); line-height: var(--lh-xxs); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; vertical-align: bottom; }
.md-typeset table:not([class]) td { padding: 10px 14px; border-top: 1px solid var(--border-default); }
.md-typeset table:not([class]) th code, .md-typeset table:not([class]) td code { font-size: .9em; }
/* admonitions: cards with a status chip's tint — fill 12 %, border 45 %
   of the status hue, the console's chip formula; one hue per family */
.md-typeset .admonition, .md-typeset details {
  border: 1px solid color-mix(in srgb, var(--admonition-hue, var(--status-running)) 45%, transparent);
  border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: 1.5; box-shadow: none;
}
.md-typeset .admonition:focus-within, .md-typeset details:focus-within { box-shadow: none; }
.md-typeset .admonition-title, .md-typeset summary {
  background-color: color-mix(in srgb, var(--admonition-hue, var(--status-running)) 12%, transparent);
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; font-weight: 500;
}
.md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--admonition-hue, var(--status-running)); }
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.example, .md-typeset details.example,
.md-typeset .admonition.quote, .md-typeset details.quote,
.md-typeset .admonition.question, .md-typeset details.question { --admonition-hue: var(--status-running); border-color: color-mix(in srgb, var(--status-running) 45%, transparent); }
.md-typeset .admonition.tip, .md-typeset details.tip,
.md-typeset .admonition.success, .md-typeset details.success { --admonition-hue: var(--status-ok); border-color: color-mix(in srgb, var(--status-ok) 45%, transparent); }
.md-typeset .admonition.warning, .md-typeset details.warning { --admonition-hue: var(--status-warn); border-color: color-mix(in srgb, var(--status-warn) 45%, transparent); }
.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.bug, .md-typeset details.bug { --admonition-hue: var(--status-error); border-color: color-mix(in srgb, var(--status-error) 45%, transparent); }
.md-typeset .note > .admonition-title, .md-typeset .note > summary,
.md-typeset .abstract > .admonition-title, .md-typeset .abstract > summary,
.md-typeset .info > .admonition-title, .md-typeset .info > summary,
.md-typeset .example > .admonition-title, .md-typeset .example > summary,
.md-typeset .quote > .admonition-title, .md-typeset .quote > summary,
.md-typeset .question > .admonition-title, .md-typeset .question > summary,
.md-typeset .tip > .admonition-title, .md-typeset .tip > summary,
.md-typeset .success > .admonition-title, .md-typeset .success > summary,
.md-typeset .warning > .admonition-title, .md-typeset .warning > summary,
.md-typeset .danger > .admonition-title, .md-typeset .danger > summary,
.md-typeset .failure > .admonition-title, .md-typeset .failure > summary,
.md-typeset .bug > .admonition-title, .md-typeset .bug > summary { background-color: color-mix(in srgb, var(--admonition-hue) 12%, transparent); }
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before,
.md-typeset .abstract > .admonition-title::before, .md-typeset .abstract > summary::before,
.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before,
.md-typeset .example > .admonition-title::before, .md-typeset .example > summary::before,
.md-typeset .quote > .admonition-title::before, .md-typeset .quote > summary::before,
.md-typeset .question > .admonition-title::before, .md-typeset .question > summary::before,
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before,
.md-typeset .success > .admonition-title::before, .md-typeset .success > summary::before,
.md-typeset .warning > .admonition-title::before, .md-typeset .warning > summary::before,
.md-typeset .danger > .admonition-title::before, .md-typeset .danger > summary::before,
.md-typeset .failure > .admonition-title::before, .md-typeset .failure > summary::before,
.md-typeset .bug > .admonition-title::before, .md-typeset .bug > summary::before { background-color: var(--admonition-hue); }

/* footer: the page surface over a hairline; prev / next in the body step */
.md-footer { border-top: 1px solid var(--border-default); }
.md-footer__title { font-size: var(--fs-md); }
.md-footer__direction { font-size: var(--fs-xs); opacity: 1; color: var(--text-tertiary); }
.md-footer__link:hover, .md-footer__link:focus { opacity: 1; color: var(--text-primary); }
.md-footer-meta { border-top: 1px solid var(--border-default); }
.md-copyright, .md-copyright__highlight { color: var(--text-tertiary); font-size: var(--fs-xs); }

/* back-to-top: a bordered pill on the card surface */
.md-top { background-color: var(--surface-card); border: 1px solid var(--border-default); color: var(--text-secondary); box-shadow: var(--md-shadow-z2); }
.md-top:hover, .md-top:focus { background-color: var(--surface-raised); color: var(--text-primary); }