/* FaceCue documentation theme, v3.
 *
 * Every colour is lifted from the editor theme defaults
 * (FaceCueThemer.FaceCueDefaults.cs), measured against captures of the live
 * windows on 2026-09-08. The names on the left of each --fc-* token are the
 * theme's own, so a change in the editor can be carried here by name.
 *
 * The rule the palette follows: the canvas is near black, text is neutral
 * grey, and the warm tan and gold are reserved for structure (titles, hairlines,
 * arrows, chips). Tan on everything reads flat; tan on structure reads like the
 * tool.
 *
 * THREE LAYERS, in this order:
 *   --fc-*   the theme. One set per colour scheme. The asset's colours.
 *   --pg-*   the page palette. What a palette moves on the page itself.
 *   --sb-*   the sidebar palette. What a palette moves in the navigation.
 * A palette is a set of --pg-* and --sb-* values; both resolve against --fc-*,
 * so editing a theme colour moves every palette at once and editing a palette
 * moves only that one.
 */

/* ---- Theme, dark (the default) ------------------------------------------ */

[data-md-color-scheme="facecue"] {
  /* The --fc-* tokens are NOT here. They come from stylesheets/fc-tokens.css,
     the one token file the site and the documentation share, copied into this
     build by hooks/site_chrome.py and loaded ahead of this sheet. Declared on
     :root there, so this scheme inherits every one of them; the light scheme
     below re-declares the ones it changes. Edit a colour in that file, never
     here. What remains in this block is the mapping onto Material's own
     variables. */

  --md-default-bg-color:            var(--fc-panel);
  --md-default-fg-color:            var(--fc-text);
  --md-default-fg-color--light:     var(--fc-text);
  --md-default-fg-color--lighter:   var(--fc-text-muted);
  --md-default-fg-color--lightest:  var(--fc-section-border);

  --md-primary-fg-color:            var(--fc-section-header);
  --md-primary-fg-color--light:     var(--fc-headless);
  --md-primary-fg-color--dark:      var(--fc-panel);
  --md-primary-bg-color:            var(--fc-text-label);
  --md-primary-bg-color--light:     var(--fc-text);

  --md-accent-fg-color:             var(--fc-gold);
  --md-accent-fg-color--transparent: rgba(192, 154, 92, 0.14);
  --md-accent-bg-color:             var(--fc-panel);

  --md-typeset-color:               var(--fc-text);
  --md-typeset-a-color:             var(--fc-gold);
  --md-typeset-mark-color:          rgba(187, 143, 28, 0.35);
  --md-typeset-table-color:         var(--fc-section-border);
  --md-typeset-table-color--light:  rgba(255, 255, 255, 0.03);

  --md-code-bg-color:               var(--pg-code-bg);
  --md-code-fg-color:               var(--pg-code-fg);
  --md-code-hl-color:               rgba(187, 143, 28, 0.22);

  --md-code-hl-comment-color:       var(--fc-code-comment);
  --md-code-hl-keyword-color:       var(--fc-code-keyword);
  --md-code-hl-string-color:        var(--fc-code-string);
  --md-code-hl-number-color:        var(--fc-code-number);
  --md-code-hl-function-color:      var(--fc-code-function);
  --md-code-hl-constant-color:      var(--fc-code-constant);
  --md-code-hl-name-color:          var(--fc-code-name);
  --md-code-hl-variable-color:      var(--fc-code-name);
  --md-code-hl-generic-color:       var(--fc-code-name);
  --md-code-hl-operator-color:      var(--fc-code-operator);
  --md-code-hl-punctuation-color:   var(--fc-code-operator);
  --md-code-hl-special-color:       var(--fc-code-special);

  --md-admonition-bg-color:         var(--pg-callout-bg);
  --md-admonition-fg-color:         var(--fc-text);

  --md-footer-bg-color:             var(--fc-section-header);
  --md-footer-bg-color--dark:       #101010;
  --md-footer-fg-color:             var(--fc-text);
  --md-footer-fg-color--light:      var(--fc-text-muted);
  --md-footer-fg-color--lighter:    var(--fc-text-disabled);

  --md-shadow-z1: none;
  --md-shadow-z2: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.45);
  --md-shadow-z3: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.55);
}

/* ---- Theme, light (behind the toggle) ----------------------------------- */

[data-md-color-scheme="facecue-light"] {
  --fc-panel:            #F3EFE7;
  --fc-section:          #FBF9F4;
  --fc-section-header:   #EAE4D6;
  --fc-section-border:   #D5CDBB;
  --fc-headless:         #F0EBE0;
  --fc-callout:          #FBF9F4;
  --fc-callout-border:   #B9A66A;
  --fc-hub-group:        #EDE6D3;
  --fc-hub-tile:         #F1EBDC;
  --fc-hub-tile-hover:   #E6DEC8;
  --fc-hairline:         #B9A66A;

  --fc-text:             #33302B;
  --fc-text-bright:      #1E1C19;
  --fc-text-label:       #2B2925;
  --fc-text-muted:       #7A7264;
  --fc-text-disabled:    #A39B8C;
  --fc-text-body-soft:   #5E5950;

  --fc-tan:              #7A5E1E;
  --fc-tan-bright:       #5E4812;
  --fc-gold:             #8E6C2A;
  --fc-amber:            #9A7414;
  --fc-olive:            #C9B98F;
  --fc-olive-deep:       #B8A67A;
  --fc-olive-dark:       #AD9C6E;

  --fc-warm-white:       #2E2A22;
  --fc-warm-grey:        #4A453C;

  /* Light counterparts, untuned like the rest of this scheme. */
  --fc-warm-surface:     #F0EADC;
  --fc-warm-line:        #C6B48A;
  --fc-warm-rail:        #9C8752;
  --fc-amber-bright:     #9A7414;
  --fc-warm-hover:       #E8E1D0;
  --fc-neutral-hover:    #EFEAE0;
  --fc-grey-line:        #C9C4BC;
  --fc-olive-line:       #B3A268;
  --fc-sand-line:        #C4BCA4;
  --fc-bronze-line:      #B08A55;

  --fc-button:           #E6DFCF;
  --fc-button-hover:     #DDD4C0;
  --fc-button-label:     #5E4812;
  --fc-button-border:    #C9BFA8;

  --fc-tier-basic:       #3F7F4A;
  --fc-tier-advanced:    #9A7414;
  --fc-tier-expert:      #A63E3E;
  --fc-expert-fill:      #E8C9C9;

  --fc-red:              #9E3535;
  --fc-yellow:           #7A5A10;
  --fc-green:            #3F8F4A;
  --fc-blue:             #2F6BC2;

  --fc-warning:          var(--fc-yellow);
  --fc-warning-border:   #C9A24A;
  --fc-warning-bg:       #F7ECC9;
  --fc-error:            var(--fc-red);
  --fc-error-border:     #D08A8A;
  --fc-error-bg:         #F8E3E3;
  --fc-ok:               var(--fc-green);
  --fc-selection:        var(--fc-blue);

  --fc-alert-tint: 0.35;
  --fc-alert-icon-tint: 1;
  --fc-figure-radius: 3px;
  --fc-figure-fade: 4px;
  --fc-figure-fade-edge: 0;

  /* VS Code's Light+, the counterpart of the dark scheme's Dark+. */
  --fc-code-comment:     #008000;
  --fc-code-keyword:     #0000FF;
  --fc-code-string:      #A31515;
  --fc-code-number:      #098658;
  --fc-code-function:    #795E26;
  --fc-code-type:        #267F99;
  --fc-code-name:        #001080;
  --fc-code-constant:    #0070C1;
  --fc-code-operator:    #333333;
  --fc-code-special:     #AF00DB;

  --md-default-bg-color:            var(--fc-panel);
  --md-default-fg-color:            var(--fc-text);
  --md-default-fg-color--light:     var(--fc-text);
  --md-default-fg-color--lighter:   var(--fc-text-muted);
  --md-default-fg-color--lightest:  var(--fc-section-border);

  --md-primary-fg-color:            #1E1D1C;
  --md-primary-fg-color--light:     #2E2D2C;
  --md-primary-fg-color--dark:      #141414;
  --md-primary-bg-color:            #DBDBE0;
  --md-primary-bg-color--light:     #CCCCCC;

  --md-accent-fg-color:             var(--fc-gold);
  --md-accent-fg-color--transparent: rgba(142, 108, 42, 0.14);
  --md-accent-bg-color:             var(--fc-panel);

  --md-typeset-color:               var(--fc-text);
  --md-typeset-a-color:             var(--fc-gold);
  --md-typeset-mark-color:          rgba(154, 116, 20, 0.25);
  --md-typeset-table-color:         var(--fc-section-border);
  --md-typeset-table-color--light:  rgba(0, 0, 0, 0.03);

  --md-code-bg-color:               var(--pg-code-bg);
  --md-code-fg-color:               var(--pg-code-fg);
  --md-code-hl-color:               rgba(154, 116, 20, 0.2);

  --md-code-hl-comment-color:       var(--fc-code-comment);
  --md-code-hl-keyword-color:       var(--fc-code-keyword);
  --md-code-hl-string-color:        var(--fc-code-string);
  --md-code-hl-number-color:        var(--fc-code-number);
  --md-code-hl-function-color:      var(--fc-code-function);
  --md-code-hl-constant-color:      var(--fc-code-constant);
  --md-code-hl-name-color:          var(--fc-code-name);
  --md-code-hl-variable-color:      var(--fc-code-name);
  --md-code-hl-generic-color:       var(--fc-code-name);
  --md-code-hl-operator-color:      var(--fc-code-operator);
  --md-code-hl-punctuation-color:   var(--fc-code-operator);
  --md-code-hl-special-color:       var(--fc-code-special);

  --md-admonition-bg-color:         var(--pg-callout-bg);
  --md-admonition-fg-color:         var(--fc-text);

  --md-footer-bg-color:             #1E1D1C;
  --md-footer-bg-color--dark:       #101010;
  --md-footer-fg-color:             #CCCCCC;
  --md-footer-fg-color--light:      #8A857F;
  --md-footer-fg-color--lighter:    #706A63;

  --md-shadow-z1: none;
  --md-shadow-z2: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
  --md-shadow-z3: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.2);
}

/* ---- Layout ------------------------------------------------------------- */

/* Overall scale. Material sets the root size in three steps and everything on the
   site is in rem, so these three values scale the whole thing at once: type,
   spacing, sidebars, column width, all of it together.
   They are Material's own steps taken to nine tenths. Its defaults are 125% /
   137.5% / 150%, which land on 20px, 22px and 24px, and read large next to other
   Unity asset documentation. Change the factor here rather than adjusting sizes
   anywhere else, or the parts stop scaling together. */
html { font-size: 112.5%; }

@media screen and (min-width: 100em) {
  html { font-size: 123.75%; }
}

@media screen and (min-width: 125em) {
  html { font-size: 135%; }
}

/* Material centres a grid capped at 61rem and leaves the rest of the viewport
   empty. The cap is there to stop prose lines running too long, which is real,
   but it also shrinks every screenshot to a third of its captured width. So the
   grid is widened, and line length is held by the width of the column itself
   rather than by capping the text inside it. Everything in the column, prose
   included, takes that one width.
   Only above Material's own desktop breakpoint, since below it the sidebar is a
   drawer and these widths would fight it.
   Everything here is in rem on purpose: Material raises the root font size at
   100em and again at 125em, so a rem width grows with the text and the measure
   in characters stays put. A px cap would tighten as the type grew. */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 76rem;
  }

  /* ⛔ These two widths are load-bearing beyond the sidebars: the search field in
     the header is aligned to the content column by subtracting them from the
     grid, so they are declared once here and read there. Change one and the
     search moves with it. */
  :root {
    --fc-sidebar-w: 16rem;
    --fc-toc-w: 13rem;
    /* The Search button's width, read by the field, the clear button and the
       results panel so all three stop short of it by the same amount. */
    --fc-search-btn-w: 6rem;
  }

  .md-sidebar--primary {
    width: var(--fc-sidebar-w);
  }

  /* ⛔ Widening .md-sidebar alone does nothing: Material caps the nav inside it
     with `.md-sidebar__inner { padding-right: calc(100% - 11.5rem) }`, and that
     padding is what creates the gutter between the nav and the content. So the
     nav width is set here, and the difference from the sidebar width above is
     the gutter. Without this the chapter labels keep wrapping in a sidebar that
     measures wide but holds a narrow nav. */
  .md-sidebar--primary .md-sidebar__inner {
    padding-right: calc(100% - 14.5rem);
  }

  .md-sidebar--secondary {
    width: var(--fc-toc-w);
  }

  /* ---- The search, across the content column ---------------------------- */

  /* The field spans exactly the column between the two sidebars, so it reads as
     belonging to the page rather than floating in the corner.

     ⛔ Positioned against the header itself, NOT against .md-header__inner.
     The inner is a .md-grid, but topbar.css zeroes its margins so the /a/ mark
     lands on the site bar's pixel, which leaves that grid hugging the left edge
     while the page grid below stays centred. A search placed against the inner
     therefore sat one grid margin to the left of the column on every viewport
     wider than the grid, 90px at 1700. The header spans the full width, so the
     page grid's left edge is recomputed here from the header's own width: the
     centred margin, zero once the viewport is narrower than the grid, plus the
     sidebar on that side. The percentage resolves against the header, which is
     the same width the page grid centres in, scrollbar excluded on both. */
  .md-header {
    position: sticky;
  }

  .md-search {
    position: absolute;
    left: calc(max(0px, (100% - 76rem) / 2) + var(--fc-sidebar-w));
    right: calc(max(0px, (100% - 76rem) / 2) + var(--fc-toc-w));
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }

  /* ⛔ Material sizes the field itself, not its container: `.md-search__inner`
     carries `width: 11.7rem` and `float: right`, and a second, far more specific
     rule grows it to 23.4rem while the search is open. Overriding only the first
     leaves the field collapsed at one width and jumping at the other, so both
     are answered here and the float has to go with them, since a floated box
     ignores the flex container it is sitting in. */
  .md-header .md-search__inner,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
  }

  /* The form is a row: the field, then the Search button after it, with a gap.
     Material paints the field look on the FORM, so the field would otherwise
     run on under the button. The form goes bare and the input becomes the
     field, so the field ends where the input does. The open state repaints the
     form too, so it is answered as well. */
  .md-header .md-search__form,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 1.8rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .md-header .md-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 1.8rem;
    box-sizing: border-box;
    padding-left: 0.6rem;
    /* Room for the clear button, which sits inside the field's trailing end. */
    padding-right: 2rem;
    background: var(--fc-panel);
    border: 1px solid var(--pg-topbar-border);
    border-radius: 3px;
  }

  /* The results panel hangs from the field, so it stops where the field does. */
  .md-header .md-search__output {
    width: calc(100% - var(--fc-search-btn-w) - 0.4rem);
  }

  /* The magnifier is a `<label for="__search">`, an actual control that focuses
     the field, so it becomes the Search button rather than a pseudo-element
     pretending to be one. It takes the word and sits after the field. */
  /* ⛔ Material positions this label ABSOLUTELY inside the form, so `order` does
     nothing to it while that stands. It is made static first, and only then
     does it take its place in the row. Its width is fixed so the clear button
     and the results panel can be placed against it. */
  .md-header .md-search__form > .md-search__icon {
    position: static;
    transform: none;
    order: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 1.8rem;
    width: var(--fc-search-btn-w);
    box-sizing: border-box;
    margin: 0 0 0 0.4rem;
    padding: 0 0.7rem;
    border-radius: 2px;
    background: var(--fc-olive-dark);
    border: 1px solid var(--fc-hairline);
    color: var(--fc-tan);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .md-header .md-search__form > .md-search__icon:hover {
    background: var(--fc-olive);
    color: var(--fc-tan-bright);
  }

  .md-header .md-search__form > .md-search__icon::after {
    content: "Search";
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* The clear button stays inside the field's trailing end, so it is pushed in
     past the Search button and the gap. */
  .md-header .md-search__options {
    right: calc(var(--fc-search-btn-w) + 0.4rem + 0.5rem);
  }

  /* The colour-scheme toggle sits at the far right of the header, against the
     screen edge with the same inset the site bar gives its own last control,
     rather than at the end of the header's grid, which hugs the left. Anchored
     to the header for the same reason the search is. */
  .md-header__option {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* One column, capped and centred, and everything in it shares both edges.
     The cap is on the column rather than on the text inside it. Capping
     paragraphs alone left them flush with the column's left edge and short of
     its right, so the slack all fell on one side and every code block, tabbed
     set and figure overhung the text it belonged to. Capping the column instead
     means the two gutters grow together and nothing inside needs an exception.
     This is the knob for line length. Wider reads longer and gives screenshots
     more room, narrower reads shorter and gives them less.

     ⛔ The cap goes on .md-content, not on .md-content__inner. Material margins
     the inner with a sidebar-sibling selector that outranks a plain class, so an
     auto margin there loses: the fixed margin stays on the left and all the slack
     lands on the right, which is the same lean one level down. Capping the parent
     lets the parent centre while the inner keeps its even margins inside it. */
  .md-content {
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- The palettes ------------------------------------------------------- */

/* A palette is a set of --pg-* (the page) and --sb-* (the sidebar) values.
   Selected in preview by data-fc-sidebar-palette on <html>; the shipped theme
   keeps one and the others are deleted.
   ⛔ These are declared on `body`, not `:root`. Material defines the scheme
   tokens on the body element, so a palette declared on <html> would resolve
   every var() against nothing, and a custom property that resolves to nothing
   makes the property using it invalid: the boxes come out transparent with no
   error anywhere. */

body,
[data-fc-sidebar-palette="0"] body {
  /* Type and links */
  --pg-heading:          var(--fc-tan);
  --pg-heading-rule:     var(--fc-hairline);
  --pg-subheading:       var(--pg-heading);
  --pg-subheading-bar:   var(--pg-heading-rule);
  --pg-h4:               var(--fc-tan);
  --pg-lead:             var(--fc-text-muted);
  --pg-link:             var(--fc-gold);
  --pg-link-hover:       var(--fc-tan-bright);
  --pg-link-underline:   rgba(192, 154, 92, 0.35);

  /* The plain callout, the one with no signal colour of its own */
  --pg-callout-bg:       var(--fc-section);
  --pg-callout-border:   var(--fc-callout-border);
  --pg-callout-title-bg: var(--fc-section-header);
  --pg-callout-title-fg: var(--fc-text-bright);
  --pg-callout-icon:     var(--fc-amber);

  /* Tables */
  --pg-table-bg:         var(--fc-section);
  --pg-table-head-bg:    var(--fc-section-header);
  --pg-table-head-fg:    var(--fc-text-label);
  --pg-table-border:     var(--fc-section-border);

  /* Code */
  --pg-code-bg:          var(--fc-section-header);
  --pg-code-border:      var(--fc-section-border);
  --pg-code-fg:          var(--fc-text-bright);

  /* Content tabs, drawn as the editor's tab strip rather than a segmented
     control: flat labels, the active one brighter over an accent underline. */
  --pg-tab-fg:           var(--fc-text-muted);
  --pg-tab-active-fg:    var(--fc-tan);
  --pg-tab-underline:    var(--fc-tan);
  --pg-tab-border:       var(--fc-section-border);
  --pg-tab-content-bg:   transparent;

  /* Cards, drawn as the Hub's tiles */
  --pg-card-bg:          var(--fc-section-header);
  --pg-card-border:      var(--fc-section-border);
  --pg-card-hover-bg:    var(--fc-hub-tile-hover);
  --pg-card-hover-border: var(--fc-hairline);
  --pg-card-title:       var(--fc-text-label);
  --pg-card-rule:        var(--fc-hairline);

  /* Inline chips: a control named in prose, a window name, a key */
  --pg-chip-bg:          var(--fc-button);
  --pg-chip-fg:          var(--fc-button-label);
  --pg-chip-border:      var(--fc-button-border);
  --pg-win:              var(--fc-tan);
  --pg-key-bg:           var(--fc-section-header);
  --pg-key-fg:           var(--fc-text-bright);
  --pg-key-border:       var(--fc-section-border);

  /* The bar across the top */
  --pg-topbar-bg:        var(--fc-section-header);
  --pg-topbar-fg:        var(--fc-text-label);
  --pg-topbar-border:    var(--fc-section-border);
  --pg-topbar-mark:      var(--fc-tan);

  /* The sidebar */
  --sb-head-bg:        var(--fc-section-header);
  --sb-head-fg:        var(--fc-text-label);
  --sb-head-border:    var(--fc-section-border);
  --sb-head-rule:      #615345;
  --sb-body-bg:        var(--fc-section);
  --sb-body-border:    var(--fc-section-border);
  --sb-link:           var(--fc-text);
  --sb-link-rail:      var(--fc-section-border);
  --sb-active-bg:      var(--fc-headless);
  --sb-active-fg:      var(--fc-tan);
  --sb-active-stripe:  var(--fc-tan);
  --sb-arrow:          var(--fc-gold);
  --sb-head-hover:     var(--fc-tan-bright);
  --sb-link-hover:     var(--fc-tan);
  --sb-arrow-hover:    var(--fc-tan-bright);
}

/* 1 · Warm: Chris's own pass over the page and the sidebar, migrated
   2026-09-08. Written out in full rather than as a diff from the defaults, so
   the palette reads as one decision, and as tokens rather than the literals the
   editor exports, so a theme change still reaches it and the light scheme has
   somewhere to resolve to. */
[data-fc-sidebar-palette="1"] body {
  --pg-heading:          var(--fc-tan);
  --pg-heading-rule:     var(--fc-warm-line);
  --pg-subheading:       var(--fc-tan);
  --pg-subheading-bar:   var(--fc-warm-line);
  --pg-h4:               var(--fc-tan);
  --pg-lead:             var(--fc-text-muted);
  --pg-link:             var(--fc-gold);
  --pg-link-hover:       var(--fc-tan-bright);
  --pg-link-underline:   var(--fc-gold);
  --pg-callout-bg:       var(--fc-warm-surface);
  --pg-callout-border:   var(--fc-warm-line);
  --pg-callout-title-bg: var(--fc-section-header);
  --pg-callout-title-fg: var(--fc-text-bright);
  --pg-callout-icon:     var(--fc-amber-bright);
  --pg-table-bg:         var(--fc-warm-surface);
  --pg-table-head-bg:    var(--fc-section-header);
  --pg-table-head-fg:    var(--fc-text-label);
  --pg-table-border:     var(--fc-section-border);
  --pg-code-bg:          var(--fc-section-header);
  --pg-code-border:      var(--fc-section-border);
  --pg-code-fg:          var(--fc-text-bright);
  --pg-tab-fg:           var(--fc-text-muted);
  --pg-tab-active-fg:    var(--fc-tan-bright);
  --pg-tab-underline:    var(--fc-gold);
  --pg-tab-border:       var(--fc-section-border);
  --pg-tab-content-bg:   transparent;
  --pg-card-bg:          var(--fc-section-header);
  --pg-card-border:      var(--fc-warm-line);
  --pg-card-hover-bg:    var(--fc-warm-hover);
  --pg-card-hover-border: var(--fc-warm-rail);
  --pg-card-title:       var(--fc-text-label);
  --pg-card-rule:        var(--fc-warm-line);
  --pg-chip-bg:          var(--fc-warm-surface);
  --pg-chip-fg:          var(--fc-button-label);
  --pg-chip-border:      var(--fc-grey-line);
  --pg-win:              var(--fc-tan);
  --pg-key-bg:           var(--fc-section-header);
  --pg-key-fg:           var(--fc-text-bright);
  --pg-key-border:       var(--fc-olive-line);
  --pg-topbar-bg:        var(--fc-section-header);
  --pg-topbar-fg:        var(--fc-text-label);
  --pg-topbar-border:    var(--fc-section-border);
  --pg-topbar-mark:      var(--fc-tan);

  --sb-head-bg:        var(--fc-section-header);
  --sb-head-fg:        var(--fc-tan);
  --sb-head-border:    var(--fc-hub-tile-hover);
  --sb-head-rule:      var(--fc-warm-line);
  --sb-body-bg:        var(--fc-warm-surface);
  --sb-body-border:    var(--fc-hub-tile-hover);
  --sb-link:           var(--fc-text);
  --sb-link-rail:      var(--fc-warm-rail);
  --sb-active-bg:      var(--fc-hub-tile-hover);
  --sb-active-fg:      var(--fc-tan-bright);
  --sb-active-stripe:  var(--fc-gold);
  --sb-arrow:          var(--fc-gold);
  --sb-head-hover:     var(--fc-tan-bright);
  --sb-link-hover:     var(--fc-tan);
  --sb-arrow-hover:    var(--fc-tan-bright);
}

/* 2 · Gold: Chris's own pass, migrated 2026-09-08. The neutral surfaces exactly
   as palette 0 has them, with the gold carrying every line and every piece of
   heading type. So the two palettes differ only in what the gold touches, which
   is the comparison worth having. */
[data-fc-sidebar-palette="2"] body {
  --pg-heading:          var(--fc-gold);
  --pg-heading-rule:     var(--fc-hairline);
  --pg-subheading:       var(--fc-gold);
  --pg-subheading-bar:   var(--fc-hairline);
  --pg-h4:               var(--fc-gold);
  --pg-lead:             var(--fc-text-muted);
  --pg-link:             var(--fc-gold);
  --pg-link-hover:       var(--fc-tan-bright);
  --pg-link-underline:   var(--fc-gold);
  --pg-callout-bg:       var(--fc-section);
  --pg-callout-border:   var(--fc-hairline);
  --pg-callout-title-bg: var(--fc-section-header);
  --pg-callout-title-fg: var(--fc-text-bright);
  --pg-callout-icon:     var(--fc-gold);
  --pg-table-bg:         var(--fc-section);
  --pg-table-head-bg:    var(--fc-section-header);
  --pg-table-head-fg:    var(--fc-text-label);
  --pg-table-border:     var(--fc-sand-line);
  --pg-code-bg:          var(--fc-section-header);
  --pg-code-border:      var(--fc-section-border);
  --pg-code-fg:          var(--fc-text-bright);
  --pg-tab-fg:           var(--fc-text-muted);
  --pg-tab-active-fg:    var(--fc-gold);
  --pg-tab-underline:    var(--fc-gold);
  --pg-tab-border:       var(--fc-section-border);
  --pg-tab-content-bg:   transparent;
  --pg-card-bg:          var(--fc-section-header);
  --pg-card-border:      var(--fc-hairline);
  --pg-card-hover-bg:    var(--fc-neutral-hover);
  --pg-card-hover-border: var(--fc-gold);
  --pg-card-title:       var(--fc-text-label);
  --pg-card-rule:        var(--fc-hairline);
  --pg-chip-bg:          var(--fc-section);
  --pg-chip-fg:          var(--fc-button-label);
  --pg-chip-border:      var(--fc-hairline);
  --pg-win:              var(--fc-tan);
  --pg-key-bg:           var(--fc-section-header);
  --pg-key-fg:           var(--fc-text-bright);
  --pg-key-border:       var(--fc-bronze-line);
  --pg-topbar-bg:        var(--fc-section-header);
  --pg-topbar-fg:        var(--fc-text-label);
  --pg-topbar-border:    var(--fc-section-border);
  --pg-topbar-mark:      var(--fc-gold);

  --sb-head-bg:        var(--fc-section-header);
  --sb-head-fg:        var(--fc-gold);
  --sb-head-border:    var(--fc-section-border);
  --sb-head-rule:      var(--fc-hairline);
  --sb-body-bg:        var(--fc-section);
  --sb-body-border:    var(--fc-section-border);
  --sb-link:           var(--fc-text);
  --sb-link-rail:      var(--fc-gold);
  --sb-active-bg:      var(--fc-headless);
  --sb-active-fg:      var(--fc-tan);
  --sb-active-stripe:  var(--fc-gold);
  --sb-arrow:          var(--fc-gold);
  --sb-head-hover:     var(--fc-tan-bright);
  --sb-link-hover:     var(--fc-tan);
  --sb-arrow-hover:    var(--fc-tan-bright);
}

/* 3 · Deep: a step darker than neutral throughout, with the gold kept to the
   arrows, the stripes and the type. */
[data-fc-sidebar-palette="3"] body {
  --pg-callout-bg:       var(--fc-panel);
  --pg-table-bg:         var(--fc-section-header);
  --pg-table-head-bg:    var(--fc-panel);
  --pg-code-bg:          var(--fc-panel);
  --pg-card-bg:          var(--fc-section-header);
  --pg-card-hover-bg:    var(--fc-hub-group);
  --pg-key-bg:           var(--fc-panel);
  --pg-topbar-bg:        var(--fc-panel);

  --sb-head-bg:        var(--fc-panel);
  --sb-head-fg:        var(--fc-tan-bright);
  --sb-head-border:    var(--fc-headless);
  --sb-head-rule:      var(--fc-headless);
  --sb-body-bg:        var(--fc-section-header);
  --sb-body-border:    var(--fc-headless);
  --sb-link:           var(--fc-text);
  --sb-link-rail:      rgba(192, 154, 92, 0.35);
  --sb-active-bg:      var(--fc-hub-group);
  --sb-active-fg:      var(--fc-tan-bright);
  --sb-active-stripe:  var(--fc-gold);
  --sb-arrow:          var(--fc-gold);
  --sb-head-hover:     var(--fc-tan-bright);
  --sb-link-hover:     var(--fc-tan);
  --sb-arrow-hover:    var(--fc-tan-bright);
}

/* ---- Type --------------------------------------------------------------- */

.md-typeset {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* The window title band: a large bold tan title, the page's lead paragraph as
   the italic muted subtitle, and one tan hairline under both. */
.md-typeset h1 {
  font-weight: 700;
  font-size: 2.05em;
  letter-spacing: -0.01em;
  color: var(--pg-heading);
  margin: 0 0 0.15em;
}

.md-typeset h1 + p {
  font-style: italic;
  color: var(--pg-lead);
  font-size: 0.95em;
  margin: 0 0 0.9em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--pg-heading-rule);
}

/* Group header: tan, bold, hairline, the "References / Mode / Settings" band. */
.md-typeset h2 {
  font-weight: 600;
  font-size: 1.3em;
  color: var(--pg-heading);
  margin: 2.2em 0 0.8em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--pg-heading-rule);
}

/* Section sub-header. In the heading colour like the rest of the ladder, since
   a neutral grey at this size was indistinguishable from bold body text. It is
   marked by a bar at its start rather than a rule beneath it, so it does not
   compete with the second level's horizontal rule. */
.md-typeset h3 {
  font-weight: 600;
  font-size: 1.05em;
  color: var(--pg-subheading);
  margin: 1.8em 0 0.6em;
  border-left: 2px solid var(--pg-subheading-bar);
  padding-left: 0.6em;
}

.md-typeset h4 {
  font-weight: 600;
  font-size: 0.9em;
  color: var(--pg-h4);
  margin: 1.4em 0 0.5em;
}

.md-typeset a {
  color: var(--pg-link);
  text-decoration: none;
  border-bottom: 1px solid var(--pg-link-underline);
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--pg-link-hover);
  border-bottom-color: var(--pg-link-hover);
}

.md-typeset strong {
  color: var(--fc-text-bright);
  font-weight: 600;
}

/* Rarely used, for something quoted from the product or a customer. Material
   leaves the bar at a neutral grey; this warms it to the page's rule. */
.md-typeset blockquote {
  border-left: 2px solid var(--pg-heading-rule);
  color: var(--fc-text-muted);
  margin-left: 0;
  padding-left: 1em;
}

/* Material only paints this rule's bottom edge, leaving the top at the
   browser's own grey, which shows through on a dark ground. */
.md-typeset hr {
  border: 0;
  border-bottom: 1px solid var(--pg-table-border);
}

/* ---- The bar across the top --------------------------------------------- */

.md-header {
  background-color: var(--pg-topbar-bg);
  border-bottom: 1px solid var(--pg-topbar-border);
  box-shadow: none;
}

.md-header__button.md-logo {
  display: none;
}

.md-header__topic:first-child {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pg-topbar-fg);
}

/* The /a/ mark, set in the site's serif, in front of the wordmark. */
.md-header__topic:first-child .md-ellipsis::before {
  content: "/a/";
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--pg-topbar-mark);
  margin-right: 0.7rem;
  position: relative;
  top: 0.05rem;
}

.md-search__form {
  background-color: var(--fc-panel);
  border: 1px solid var(--pg-topbar-border);
  border-radius: 3px;
}

.md-search__input {
  color: var(--fc-text);
}

.md-search__input::placeholder {
  color: var(--fc-text-muted);
}

/* ---- Sidebar, shared ---------------------------------------------------- */

.md-sidebar--primary .md-nav__title {
  display: none;
}

.md-nav__link {
  font-size: 0.74rem;
  margin-top: 0.35em;
}

.md-nav__icon {
  color: var(--sb-arrow);
}

.md-nav__link--active,
.md-nav__link:hover {
  color: var(--fc-tan);
}

/* A chapter row is a text link beside an arrow label. Material lets the link
   grow to fill the row, so a click on empty space navigates. Here the link is
   only as wide as its text and the arrow's label takes the rest of the row, so
   the text opens the chapter page and everything else, arrow included, folds. */
.md-sidebar--primary .md-nav__container {
  display: flex;
  align-items: center;
}

.md-sidebar--primary .md-nav__container > a.md-nav__link:first-child {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 0.4em;
}

.md-sidebar--primary .md-nav__container > label.md-nav__link:last-child {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 0;
  min-height: 1.6em;
  cursor: pointer;
}

/* The arrow lights up whenever the cursor is anywhere on a chapter row, since
   anywhere but the text is what folds it. The second rule hands the highlight
   back when the cursor reaches the text, where the label itself lights instead
   and the click navigates rather than folds. */
.md-sidebar--primary .md-nav__container:hover .md-nav__icon {
  color: var(--sb-arrow-hover);
}

.md-sidebar--primary .md-nav__container > a.md-nav__link:hover ~ label.md-nav__link .md-nav__icon {
  color: var(--sb-arrow);
}

/* The right-hand table of contents. */
.md-sidebar--secondary .md-nav__title {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-text-muted);
  box-shadow: none;
  padding-left: 0;
}

.md-sidebar--secondary .md-nav__link {
  color: var(--fc-text-muted);
  font-size: 0.7rem;
}

.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link:hover {
  color: var(--fc-tan);
}

/* ---- Sidebar, variant A: plain foldouts (default) ----------------------- */

.md-sidebar--primary .md-nav__item--nested > .md-nav__container,
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link,
.md-sidebar--primary .md-nav__item--nested > .md-nav__container > .md-nav__link {
  font-weight: 600;
  color: var(--sb-head-fg);
}

.md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link {
  color: var(--sb-link);
  font-weight: 400;
}

.md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link--active {
  color: var(--sb-active-fg);
  background-color: var(--sb-active-bg);
  border-left: 2px solid var(--sb-active-stripe);
  margin-left: -0.6rem;
  padding: 0.15em 0.4em 0.15em 0.5em;
  border-radius: 0 2px 2px 0;
}

/* ---- Sidebar, variant B: section boxes ---------------------------------- */

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__list {
  margin-right: 0.4rem;
}

/* The boxes are separated by the panel showing through between them, not by a
   shared border. Stacking them flush removed the gutter entirely and the column
   read as one mass under every palette, so the space and the rounding are the
   separation here and the rule between chapters is left to variants A and C. */
[data-fc-sidebar="b"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item {
  margin: 0.55em 0;
  border-radius: 3px;
}

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested {
  border: 1px solid var(--sb-body-border);
  background-color: var(--sb-body-bg);
  padding: 0;
}

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested > .md-nav__container,
[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested > label.md-nav__link {
  margin: 0;
  padding: 0.35em 0.5em;
  background-color: var(--sb-head-bg);
  color: var(--sb-head-fg);
  font-weight: 600;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid var(--sb-head-rule);
}

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested > .md-nav__toggle:not(:checked) ~ .md-nav__container,
[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested > .md-nav__toggle:not(:checked) ~ label.md-nav__link {
  border-bottom-color: transparent;
}

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested > .md-nav {
  padding: 0.25em 0.5em 0.45em;
}

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link {
  margin-top: 0.15em;
  padding: 0.12em 0 0.12em 0.55em;
  border-left: 2px solid var(--sb-link-rail);
}

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link--active {
  background: none;
  margin-left: 0;
  border-left: 2px solid var(--sb-active-stripe);
  border-radius: 0;
  color: var(--sb-active-fg);
}

/* A standalone page is painted exactly like a chapter's header bar. The two are
   told apart by the gap and the rounding around each card, and by the chapter's
   arrow, rather than by colour. */
[data-fc-sidebar="b"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) > .md-nav__link {
  padding: 0.35em 0.5em;
  margin: 0;
  border: 1px solid var(--sb-body-border);
  border-radius: 3px;
  background-color: var(--sb-head-bg);
  color: var(--sb-head-fg);
  font-weight: 600;
}

[data-fc-sidebar="b"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) > .md-nav__link--active {
  color: var(--sb-active-fg);
  border-left: 3px solid var(--sb-active-stripe);
}

/* ---- Sidebar, variant C: inspector rows --------------------------------- */

[data-fc-sidebar="c"] .md-sidebar--primary .md-nav__item--nested > .md-nav__container,
[data-fc-sidebar="c"] .md-sidebar--primary .md-nav__item--nested > label.md-nav__link,
[data-fc-sidebar="c"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) > .md-nav__link {
  margin: 0.3em 0 0;
  padding: 0.3em 0.5em;
  background-color: var(--sb-head-bg);
  border: 1px solid var(--sb-head-border);
  border-radius: 3px;
  color: var(--sb-head-fg);
  font-weight: 600;
}

[data-fc-sidebar="c"] .md-sidebar--primary .md-nav__item--nested > .md-nav {
  padding: 0.2em 0 0.3em 0.35em;
}

[data-fc-sidebar="c"] .md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link {
  margin-top: 0.1em;
  padding: 0.14em 0.5em;
  border-left: 3px solid var(--sb-link-rail);
  color: var(--sb-link);
}

[data-fc-sidebar="c"] .md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link--active {
  margin-left: 0;
  border-left: 3px solid var(--sb-active-stripe);
  border-radius: 0 3px 3px 0;
  background-color: var(--sb-active-bg);
  color: var(--sb-active-fg);
}

/* ---- Sidebar: hover ----------------------------------------------------- */

/* Every row in the sidebar is a link, and none of them said so. These sit after
   all three variants because each variant sets the row's colour on a selector
   of its own, and a hover rule has to outrank whichever one is active. */
.md-sidebar--primary .md-nav__item--nested > .md-nav__container > a.md-nav__link:hover,
[data-fc-sidebar="b"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) > .md-nav__link:hover,
[data-fc-sidebar="c"] .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) > .md-nav__link:hover {
  color: var(--sb-head-hover);
}

.md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link:hover,
[data-fc-sidebar="b"] .md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link:hover,
[data-fc-sidebar="c"] .md-sidebar--primary .md-nav__item--nested .md-nav__item > .md-nav__link:hover {
  color: var(--sb-link-hover);
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--sb-link-hover);
}

/* ---- Sidebar: the conceptual groups ------------------------------------- */

/* Seven groups: intro, baker and cues, character design, the performance, other
   ways to drive, supplementary, informational. A rule across the gutter is the
   whole treatment, there is no group heading.
   ⛔ MkDocs has no divider in its nav, so the boundary is matched by POSITION and
   these six numbers track the nav in mkdocs.yml. That file carries the matching
   warning. They are the first entry of each group after the first: The Baker,
   OneClick Wizard, Core, Live Speech, Performance, FAQ.
   ⛔ This block sits AFTER the three variants on purpose. It ties with variant B's
   card rule on specificity, so whichever comes last wins, and the group spacing
   was being silently overridden while the rule above it still drew. Groups layer
   on top of a structure, so they belong below all three. */
.md-sidebar--primary {
  --sb-group-gap: 1.5em;
}

/* B's cards already sit apart from one another, so its group gap is tighter than
   the one the flat structures need to read as a break. */
[data-fc-sidebar="b"] .md-sidebar--primary {
  --sb-group-gap: 1.2em;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list
  > .md-nav__item:is(:nth-child(4), :nth-child(8), :nth-child(10), :nth-child(17), :nth-child(19), :nth-child(21)) {
  position: relative;
  margin-top: var(--sb-group-gap);
}

/* In the flat structures the row's own top margin collapses through the item,
   so the gap came out at two different sizes depending on whether the group
   started with a chapter or a single page, and the rule then sat off-centre in
   it. Zeroing it leaves the item's margin as the only gap. */
.md-sidebar--primary .md-nav--primary > .md-nav__list
  > .md-nav__item:is(:nth-child(4), :nth-child(8), :nth-child(10), :nth-child(17), :nth-child(19), :nth-child(21))
  > :is(.md-nav__link, .md-nav__container) {
  margin-top: 0;
}

/* Drawn as a pseudo-element rather than a border-top, so the rule sits in the
   gutter above the item instead of on the item's own edge, which in variant B
   would only recolour the card's border. Halving the gap keeps it centred
   whatever the gap is set to. */
.md-sidebar--primary .md-nav--primary > .md-nav__list
  > .md-nav__item:is(:nth-child(4), :nth-child(8), :nth-child(10), :nth-child(17), :nth-child(19), :nth-child(21))::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sb-group-gap) / -2);
  border-top: 1px solid var(--sb-head-rule);
}

/* ---- Tables ------------------------------------------------------------- */

.md-typeset table:not([class]) {
  font-size: 0.8em;
  border: 1px solid var(--pg-table-border);
  border-radius: 3px;
  background-color: var(--pg-table-bg);
}

.md-typeset table:not([class]) th {
  background-color: var(--pg-table-head-bg);
  color: var(--pg-table-head-fg);
  font-weight: 600;
  border-bottom: 1px solid var(--pg-table-border);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--pg-table-border);
}

/* Vertical rules between columns, whatever the palette. A settings table with
   three or four columns is unreadable as rows of floating text. */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border-right: 1px solid var(--pg-table-border);
}

.md-typeset table:not([class]) th:last-child,
.md-typeset table:not([class]) td:last-child {
  border-right: 0;
}

/* ---- Code --------------------------------------------------------------- */

.md-typeset code {
  font-size: 0.8em;
  border-radius: 3px;
  padding: 0.05em 0.35em;
}

.md-typeset pre > code {
  border: 1px solid var(--pg-code-border);
  border-radius: 3px;
  padding: 0.9em 1em;
}

/* ---- Callouts ----------------------------------------------------------- */

/* The plain callout, and every neutral kind, take the editor's callout box.
   Material tints each kind its own hue at a higher specificity than a single
   generic rule, which is why every kind is named. */
.md-typeset .admonition,
.md-typeset details,
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract,
.md-typeset .admonition.question,
.md-typeset .admonition.example,
.md-typeset .admonition.quote,
.md-typeset details.note,
.md-typeset details.info,
.md-typeset details.abstract,
.md-typeset details.question,
.md-typeset details.example,
.md-typeset details.quote {
  font-size: 0.82em;
  border: 1px solid var(--pg-callout-border);
  border-left-width: 1px;
  border-radius: 3px;
  box-shadow: none;
  background-color: var(--pg-callout-bg);
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary,
.md-typeset .admonition.note > .admonition-title,
.md-typeset .admonition.info > .admonition-title,
.md-typeset .admonition.abstract > .admonition-title,
.md-typeset .admonition.question > .admonition-title,
.md-typeset .admonition.example > .admonition-title,
.md-typeset .admonition.quote > .admonition-title,
.md-typeset details.note > summary,
.md-typeset details.info > summary,
.md-typeset details.abstract > summary,
.md-typeset details.question > summary,
.md-typeset details.example > summary,
.md-typeset details.quote > summary {
  background-color: var(--pg-callout-title-bg);
  color: var(--pg-callout-title-fg);
  font-weight: 600;
  border-bottom: 1px solid var(--pg-callout-border);
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before,
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before,
.md-typeset .admonition.abstract > .admonition-title::before,
.md-typeset .admonition.question > .admonition-title::before,
.md-typeset .admonition.example > .admonition-title::before,
.md-typeset .admonition.quote > .admonition-title::before,
.md-typeset details.note > summary::before,
.md-typeset details.info > summary::before,
.md-typeset details.abstract > summary::before,
.md-typeset details.question > summary::before,
.md-typeset details.example > summary::before,
.md-typeset details.quote > summary::before {
  background-color: var(--pg-callout-icon);
}

/* Tip: the callout with a green stripe. Its title stays ordinary bright text,
   which is the reading the warning and danger boxes are tuned toward below. */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--pg-callout-border);
  border-left: 3px solid var(--fc-green);
}

.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
  background-color: color-mix(in srgb, var(--fc-green) 14%, transparent);
  color: var(--pg-callout-title-fg);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--fc-green);
}

/* Warning and danger. The band, the border and the icon keep the signal colour;
   the title text is mixed toward ordinary bright text by --fc-alert-tint, so
   how loud these read is one number rather than a set of hand-picked colours. */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--fc-warning-border);
  background-color: var(--fc-warning-bg);
}

.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
  background-color: color-mix(in srgb, var(--fc-yellow) 16%, transparent);
  color: color-mix(in srgb, var(--fc-yellow) calc(var(--fc-alert-tint) * 100%), var(--fc-text-bright));
  border-bottom-color: var(--fc-warning-border);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: color-mix(in srgb, var(--fc-yellow) calc(var(--fc-alert-icon-tint) * 100%), var(--fc-text-bright));
}

.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset details.danger,
.md-typeset details.failure {
  border-color: var(--fc-error-border);
  background-color: var(--fc-error-bg);
}

.md-typeset .admonition.danger > .admonition-title,
.md-typeset .admonition.failure > .admonition-title,
.md-typeset details.danger > summary,
.md-typeset details.failure > summary {
  background-color: color-mix(in srgb, var(--fc-red) 16%, transparent);
  color: color-mix(in srgb, var(--fc-red) calc(var(--fc-alert-tint) * 100%), var(--fc-text-bright));
  border-bottom-color: var(--fc-error-border);
}

.md-typeset .danger > .admonition-title::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .danger > summary::before,
.md-typeset .failure > summary::before {
  background-color: color-mix(in srgb, var(--fc-red) calc(var(--fc-alert-icon-tint) * 100%), var(--fc-text-bright));
}

/* ---- Content tabs ------------------------------------------------------- */

/* Drawn as the editor's own tab strip, the one across the top of the Face Rig
   Designer: flat labels on the page, the active one brighter over an accent
   underline, and the content below with nothing boxing it in. */
.md-typeset .tabbed-set {
  margin: 1.2em 0;
}

/* One line, not two. Material draws a rule across the strip as an inset shadow
   and slides a 2px indicator under the active label; at different thicknesses
   they read as two competing lines.
   ⛔ The shadow is set from a `.js`-prefixed selector, so a two-class rule
   cannot turn it off, which is why an earlier `box-shadow: none` here did
   nothing. Naming .tabbed-set ties the specificity, and rather than removing
   the rule it is redrawn at the indicator's own thickness and position, so the
   indicator covers it exactly and the two read as one line with a bright
   segment travelling along it. */
.md-typeset .tabbed-set .tabbed-labels {
  box-shadow: inset 0 -2px 0 var(--pg-tab-border);
  border: 0;
  border-radius: 0;
  background: none;
}

/* ⛔ Material's own rule for these labels is prefixed with `.js` on the root
   element, so a two-class selector loses to it and the label keeps the default
   body colour. Naming .tabbed-set as well ties the specificity, and this sheet
   loads after the theme's, so it wins. */
.md-typeset .tabbed-set .tabbed-labels > label {
  color: var(--pg-tab-fg);
  font-size: 0.8em;
  font-weight: 500;
  padding: 0.5em 1.1em;
  border: 0;
  border-right: 1px solid var(--pg-tab-border);
  transition: color 0.12s ease;
}

.md-typeset .tabbed-set .tabbed-labels > label:last-child {
  border-right: 0;
}

/* ⛔ Every tab label wraps its text in an anchor, so the site-wide link rule was
   drawing a link underline under each tab's text. That was the second line: it
   sat directly under the words rather than at the strip's edge, which is why
   the strip rule and the indicator being in the same place did not fix it. */
.md-typeset .tabbed-set .tabbed-labels > label > a {
  color: inherit;
  border-bottom: 0;
}

.md-typeset .tabbed-set .tabbed-labels > label:hover {
  color: var(--pg-tab-active-fg);
}

/* ⛔ The radio inputs are ALL siblings before .tabbed-labels, so neither
   `input:checked + .tabbed-labels` nor `label:has(+ input:checked)` can pair a
   label with its own input: the first matches only the last tab, the second
   matches nothing at all, and the active label silently keeps the body colour.
   Material pairs them by position instead, and so does this. Eight is well past
   the widest set the documentation uses. */
.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6),
.md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) {
  color: var(--pg-tab-active-fg);
  background: none;
}

/* Material's own sliding indicator, kept and recoloured. It is the only line
   under the strip, and it animates between labels. Material sets it with the
   `background` shorthand from a `.js`-prefixed selector, so the specificity is
   tied here the same way the labels are, and the shorthand is used rather than
   background-color so nothing is left half-overridden. */
.md-typeset .tabbed-set .tabbed-labels::before {
  background: var(--pg-tab-underline);
}

.md-typeset .tabbed-content {
  border: 0;
  border-radius: 0;
  padding: 0.9em 0 0;
  background-color: var(--pg-tab-content-bg);
}

/* ---- Inline chips: tier badges, on-screen controls, keys ---------------- */

.md-typeset .tier-basic,
.md-typeset .tier-advanced,
.md-typeset .tier-expert {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: 0 0.55em;
  border-radius: 3px;
  border: 1px solid;
  background-color: var(--fc-section-header);
  vertical-align: 0.12em;
  font-family: inherit;
}

.md-typeset .tier-basic    { color: var(--fc-tier-basic);    border-color: var(--fc-tier-basic); }
.md-typeset .tier-advanced { color: var(--fc-tier-advanced); border-color: var(--fc-tier-advanced); }
.md-typeset .tier-expert   { color: var(--fc-tier-expert);   border-color: var(--fc-tier-expert); }

/* A button or control named in prose, drawn the way the editor draws it. */
.md-typeset .ui {
  display: inline-block;
  font-family: inherit;
  font-size: 0.82em;
  line-height: 1.55;
  padding: 0 0.6em;
  border-radius: 3px;
  background-color: var(--pg-chip-bg);
  color: var(--pg-chip-fg);
  border: 1px solid var(--pg-chip-border);
  white-space: nowrap;
}

/* A window or section title named in prose. */
.md-typeset .win {
  color: var(--pg-win);
  font-weight: 600;
}

.md-typeset kbd {
  display: inline-block;
  font-size: 0.78em;
  line-height: 1.6;
  padding: 0 0.45em;
  border-radius: 3px;
  box-shadow: none;
  background-color: var(--pg-key-bg);
  color: var(--pg-key-fg);
  border: 1px solid var(--pg-key-border);
}

.md-typeset .md-button {
  background-color: var(--pg-chip-bg);
  color: var(--pg-chip-fg);
  border: 1px solid var(--pg-chip-border);
  border-radius: 3px;
  font-weight: 500;
}

.md-typeset .md-button:hover {
  background-color: var(--fc-button-hover);
  color: var(--fc-tan-bright);
  border-color: var(--pg-card-hover-border);
}

/* ---- Cards -------------------------------------------------------------- */

/* The Hub's tiles: a bordered box with the label on top, a divider, the
   description, and the link at the bottom. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--pg-card-border);
  border-radius: 3px;
  background-color: var(--pg-card-bg);
  box-shadow: none;
  padding: 1em 1.1em;
  margin: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  background-color: var(--pg-card-hover-bg);
  border-color: var(--pg-card-hover-border);
}

.md-typeset .grid.cards > ul > li > hr {
  border-bottom: 1px solid var(--pg-card-rule);
  margin: 0.7em 0;
}

.md-typeset .grid.cards strong {
  display: block;
  color: var(--pg-card-title);
  font-size: 1.05em;
  font-weight: 600;
}

/* The link that closes a card sits on its own, with no underline to compete
   with the divider above it. */
.md-typeset .grid.cards > ul > li > p:last-child > a {
  border-bottom: 0;
  font-weight: 500;
}

/* ---- Figures ------------------------------------------------------------ */

.md-typeset figure {
  margin: 1.5em 0;
}

.md-typeset figure img,
.md-typeset img.screenshot {
  border: 1px solid var(--pg-table-border);
  border-radius: var(--fc-figure-radius);
}

.md-typeset figcaption {
  font-size: 0.78em;
  color: var(--pg-lead);
  margin-top: 0.5em;
}

/* How a screenshot sits on the page, chosen by data-fc-figure on <html>.
   Absent or "frame": the hairline and rounded corners above. "plain": the image
   alone. "fade": the edges dissolve into the page over --fc-figure-fade, down to
   --fc-figure-fade-edge at the outermost pixel, so a dark capture reads as part
   of the page rather than a card laid on it. Two gradient masks, one per axis,
   intersected so all four edges fade. The preview switcher sets the attribute
   while a mode is being chosen; whichever wins is then set in main.html. */
[data-fc-figure="plain"] .md-typeset figure img,
[data-fc-figure="plain"] .md-typeset img.screenshot,
[data-fc-figure="fade"] .md-typeset figure img,
[data-fc-figure="fade"] .md-typeset img.screenshot {
  border: 0;
  border-radius: 0;
}

[data-fc-figure="fade"] .md-typeset figure img,
[data-fc-figure="fade"] .md-typeset img.screenshot {
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0, 0, 0, var(--fc-figure-fade-edge)),
      #000 var(--fc-figure-fade),
      #000 calc(100% - var(--fc-figure-fade)),
      rgba(0, 0, 0, var(--fc-figure-fade-edge))),
    linear-gradient(to bottom,
      rgba(0, 0, 0, var(--fc-figure-fade-edge)),
      #000 var(--fc-figure-fade),
      #000 calc(100% - var(--fc-figure-fade)),
      rgba(0, 0, 0, var(--fc-figure-fade-edge)));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,
      rgba(0, 0, 0, var(--fc-figure-fade-edge)),
      #000 var(--fc-figure-fade),
      #000 calc(100% - var(--fc-figure-fade)),
      rgba(0, 0, 0, var(--fc-figure-fade-edge))),
    linear-gradient(to bottom,
      rgba(0, 0, 0, var(--fc-figure-fade-edge)),
      #000 var(--fc-figure-fade),
      #000 calc(100% - var(--fc-figure-fade)),
      rgba(0, 0, 0, var(--fc-figure-fade-edge)));
  mask-composite: intersect;
}

/* ---- Footer ------------------------------------------------------------- */

.md-footer {
  border-top: 1px solid var(--pg-topbar-border);
}

.md-footer__title {
  font-size: 0.8rem;
}

.md-footer__direction {
  color: var(--fc-text-muted);
}