/* docs.terminal.army
 *
 * The manual, dressed as the product.
 *
 * This site used to ship stock Material for MkDocs in deep orange and amber,
 * on Roboto, pulled from Google Fonts. terminal.army is off-black, ion cyan,
 * Geist, and radius 0 everywhere. A reader who arrived here from the game had
 * no way to tell the two were the same thing.
 *
 * Everything below is lifted from internal/web/static/main.css, which is the
 * real token system. Where a value appears in both files it is the same value,
 * so a colour changed there can be found here by searching for the hex.
 *
 * Three decisions worth stating, because they are not obvious:
 *
 *  1. The header and the footer stay dark in both colour schemes. They are the
 *     product's chrome: the wordmark, the cyan dot and the Play button read the
 *     same on every page in either scheme, and terminal.army itself has no
 *     light mode to match (layout.html declares color-scheme: dark and main.css
 *     has no prefers-color-scheme block at all). Only the reading surface
 *     between them switches.
 *
 *  2. Dark is the default with no media query, so everyone lands on the game's
 *     own ground, the way they do on terminal.army. The toggle is still there,
 *     and Material remembers the choice, so a reader who wants light keeps it.
 *
 *  3. Radius 0. Material rounds code blocks, admonitions, buttons and the
 *     search field; nothing on terminal.army is rounded. The corners are
 *     squared off by hand below because Material has no token for it.
 */

/* Geist, self-hosted, copied from internal/web/static/vendor. The game serves
   these from its own origin under `font-src 'self'` and sends no CORS header,
   so linking to them across the subdomain boundary would fail silently and
   drop the whole site back to Helvetica. They are 141 KB for the pair. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Material composes its families as var(--md-text-font,_) followed by the
   fallback stack, so naming the face here is all that is needed. `font: false`
   in mkdocs.yml stops it fetching Roboto from Google. */
:root {
  --md-text-font: "Geist";
  --md-code-font: "Geist Mono";
}

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */

/* The chrome palette, identical in both schemes. */
:root {
  --ta-chrome-bg: var(--ta-color-bg);
  --ta-chrome-foot: #0a0c0f;
  --ta-chrome-line: var(--ta-color-border-subtle);
  --ta-chrome-line-soft: var(--ta-color-border-subtle);
  --ta-chrome-text: var(--ta-color-text-primary);
  --ta-chrome-muted: var(--ta-color-text-muted);
  --ta-chrome-faint: var(--ta-color-text-faint);
  /* One step up from the game's #5b6270 footer base. That value is 3.2:1 on
     this ground, which is under AA for the 12px it is set at, and the base row
     here carries the attribution rather than a decoration. Same role, same
     ramp, one stop brighter. */
  --ta-chrome-quiet: var(--ta-color-text-muted);
  --ta-accent: var(--ta-color-action);
  --ta-accent-hi: var(--ta-color-action-hover);
  --ta-ink: var(--ta-color-action-ink);
}

/* Dark: the game's own values. */
[data-md-color-scheme="slate"] {
  --ta-bg: var(--ta-color-bg);
  --ta-surface: var(--ta-color-surface);
  --ta-surface-2: var(--ta-color-surface-raised);
  --ta-line: var(--ta-color-border-subtle);
  --ta-line-soft: var(--ta-color-border-subtle);
  --ta-line-strong: var(--ta-color-border);
  --ta-dim: #4b515c;
  --ta-faint: var(--ta-color-text-faint);
  --ta-muted: var(--ta-color-text-muted);
  --ta-body: #b6bcc6;
  --ta-text: var(--ta-color-text-secondary);
  --ta-strong: #e8eaed;
  --ta-bright: var(--ta-color-text-primary);
  --ta-link: var(--ta-color-action);
  --ta-link-hi: var(--ta-color-action-hover);
  --ta-good: var(--ta-color-success);
  --ta-bad: var(--ta-color-danger);
  --ta-code-bg: #171717;

  color-scheme: dark;
}

/* Light: the same relationships turned over. The link colour is not #22d3ee.
   Ion cyan on white is about 1.7:1, which is a decoration rather than a link,
   so the reading surface borrows the darker end of the same ramp and the pure
   accent is kept for the marks and rules that are not load-bearing text. */
[data-md-color-scheme="default"] {
  --ta-bg: #ffffff;
  --ta-surface: #f6f7f9;
  --ta-surface-2: #eceef1;
  --ta-line: #e2e5ea;
  --ta-line-soft: #edeff2;
  --ta-line-strong: #cbd0d8;
  --ta-dim: #9aa1ad;
  --ta-faint: #737b88;
  --ta-muted: #5c636f;
  --ta-body: #3d434d;
  --ta-text: #2c313a;
  --ta-strong: #15181d;
  --ta-bright: #08090b;
  --ta-link: #0e7490;
  --ta-link-hi: #155e75;
  --ta-good: #4d7c0f;
  --ta-bad: #b91c1c;
  --ta-code-bg: #f1f3f5;

  color-scheme: light;
}

/* Material's own variables, pointed at the tokens above. Anything Material
   styles that is not restyled by hand further down still lands in the right
   palette because of this block. */
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-default-fg-color: var(--ta-text);
  --md-default-fg-color--light: var(--ta-muted);
  --md-default-fg-color--lighter: var(--ta-faint);
  --md-default-fg-color--lightest: var(--ta-line);
  --md-default-bg-color: var(--ta-bg);
  --md-default-bg-color--light: var(--ta-surface);
  --md-default-bg-color--lighter: var(--ta-surface-2);
  --md-default-bg-color--lightest: var(--ta-line-soft);

  --md-primary-fg-color: var(--ta-chrome-bg);
  --md-primary-fg-color--light: var(--ta-chrome-bg);
  --md-primary-fg-color--dark: var(--ta-chrome-bg);
  --md-primary-bg-color: var(--ta-chrome-text);
  --md-primary-bg-color--light: var(--ta-chrome-muted);

  --md-accent-fg-color: var(--ta-link-hi);
  --md-accent-fg-color--transparent: rgba(34, 211, 238, 0.1);
  --md-accent-bg-color: var(--ta-ink);
  --md-accent-bg-color--light: var(--ta-ink);

  --md-typeset-color: var(--ta-body);
  --md-typeset-a-color: var(--ta-link);
  --md-typeset-mark-color: rgba(34, 211, 238, 0.22);
  --md-typeset-table-color: var(--ta-line);
  --md-typeset-table-color--light: var(--ta-line-soft);
  --md-typeset-kbd-color: var(--ta-surface-2);
  --md-typeset-kbd-accent-color: var(--ta-line-strong);
  --md-typeset-kbd-border-color: var(--ta-line);
  --md-typeset-del-color: rgba(248, 113, 113, 0.16);
  --md-typeset-ins-color: rgba(132, 204, 22, 0.16);

  --md-code-fg-color: var(--ta-strong);
  --md-code-bg-color: var(--ta-code-bg);

  --md-admonition-fg-color: var(--ta-body);
  --md-admonition-bg-color: var(--ta-surface);

  --md-footer-fg-color: var(--ta-chrome-text);
  --md-footer-fg-color--light: var(--ta-chrome-muted);
  --md-footer-fg-color--lighter: var(--ta-chrome-faint);
  --md-footer-bg-color: var(--ta-chrome-foot);
  --md-footer-bg-color--dark: var(--ta-chrome-bg);

  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.55);
}

/* Syntax highlighting. The client paints in cyan, lime and violet; the code
   blocks that document it use the same three rather than Material's blues. */
[data-md-color-scheme="slate"] {
  --md-code-hl-comment-color: #6f7683;
  --md-code-hl-punctuation-color: #8d94a1;
  --md-code-hl-operator-color: #8d94a1;
  --md-code-hl-name-color: var(--ta-strong);
  --md-code-hl-string-color: #84cc16;
  --md-code-hl-number-color: #c084fc;
  --md-code-hl-constant-color: #c084fc;
  --md-code-hl-keyword-color: #22d3ee;
  --md-code-hl-function-color: #67e8f9;
  --md-code-hl-variable-color: var(--ta-strong);
  --md-code-hl-special-color: #f87171;
  --md-code-hl-color--light: rgba(34, 211, 238, 0.1);
}
[data-md-color-scheme="default"] {
  --md-code-hl-comment-color: #737b88;
  --md-code-hl-punctuation-color: #5c636f;
  --md-code-hl-operator-color: #5c636f;
  --md-code-hl-name-color: var(--ta-strong);
  --md-code-hl-string-color: #4d7c0f;
  --md-code-hl-number-color: #7e22ce;
  --md-code-hl-constant-color: #7e22ce;
  --md-code-hl-keyword-color: #0e7490;
  --md-code-hl-function-color: #155e75;
  --md-code-hl-variable-color: var(--ta-strong);
  --md-code-hl-special-color: #b91c1c;
  --md-code-hl-color--light: rgba(14, 116, 144, 0.1);
}

/* ---------------------------------------------------------------------------
   Ground
   --------------------------------------------------------------------------- */

/* The two corner washes from the landing page, so the reading surface is the
   same off-black with the same faint cyan and lime light on it rather than a
   flat grey. Fixed, so they stay put while the page scrolls, and dropped
   entirely in light mode where there is nothing for them to sit on. */
[data-md-color-scheme="slate"] body {
  background-image:
    radial-gradient(at 10% 6%, rgba(34, 211, 238, 0.045), transparent 42%),
    radial-gradient(at 92% 88%, rgba(132, 204, 22, 0.03), transparent 42%);
  background-attachment: fixed;
}

.md-grid { max-width: 58rem; }

/* Radius 0, everywhere Material introduces one. */
.md-typeset pre > code,
.md-typeset .highlight,
.md-typeset .highlighttable,
.md-typeset .highlighttable .linenos,
.md-typeset code,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .tabbed-labels > label,
.md-typeset .tabbed-content,
.md-typeset table:not([class]),
.md-search__form,
.md-search__output,
.md-search-result__article,
.md-typeset kbd,
.md-clipboard,
.md-top,
.md-nav__link,
.ta-card,
.ta-play {
  border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

/* .nav in main.css: 64px tall, a hairline underneath, the wordmark taking the
   slack and the auth controls pinned right. */
.md-header {
  background-color: var(--ta-chrome-bg);
  color: var(--ta-chrome-text);
  border-bottom: 1px solid var(--ta-chrome-line);
  box-shadow: none;
}
.md-header--shadow { box-shadow: none; }

.md-header__inner { height: 64px; min-height: 64px; align-items: center; }

/* Material's header is 2.4rem tall and it hard-codes that number in three
   other places: the offset the sticky sidebars stick at, the scroll margin an
   anchored heading is given, and where the back-to-top button parks.
   terminal.army's bar is 64px, so all three have to move with it, or the top
   of the navigation column slides under the header and a link to #a-section
   lands with the section title hidden behind it.

   The scroll margin is declared on `.md-typeset :target` and not on :root:
   Material redefines the variable inside that rule, so a :root value never
   reaches the element that reads it. */
.md-sidebar { top: 3.4rem; }
.md-typeset :target { --md-scroll-margin: 4.2rem; }
.md-top { top: 3.6rem; }
.md-header__button.md-logo { padding: 0; margin-right: 0.4rem; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { width: 1.1rem; height: 1.1rem; }
.md-header__button { color: var(--ta-chrome-muted); }
.md-header__button:hover { color: var(--ta-chrome-text); opacity: 1; }

/* The wordmark. terminal.army sets it in the sans at 0.82rem with 0.16em of
   tracking; the page title that Material swaps in underneath on scroll is left
   as ordinary text so the two are told apart. */
.md-header__title { font-weight: 400; margin-left: 0.4rem; }
.md-header__topic:first-child .md-ellipsis {
  color: var(--ta-chrome-text);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.md-header__topic + .md-header__topic .md-ellipsis {
  color: var(--ta-chrome-muted);
  font-size: 0.62rem;
  letter-spacing: 0.01em;
}

/* The way back into the game, on every page, above the fold, in the one colour
   this site uses for the thing it wants you to do. .btn-loud in main.css. */
.ta-play {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.4rem;
  padding: 0.34rem 0.72rem;
  background: var(--ta-accent);
  border: 1px solid var(--ta-accent);
  color: var(--ta-ink);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ta-play:hover,
.ta-play:focus {
  background: var(--ta-accent-hi);
  border-color: var(--ta-accent-hi);
  color: var(--ta-ink);
}
.ta-play:focus-visible { outline: 2px solid var(--ta-chrome-text); outline-offset: 2px; }

/* Below 400px the button and the search and palette icons cannot all have the
   bar. The button is the one that stays: search is reachable from the drawer,
   and the label shortens rather than disappearing. */
.ta-play__long { display: inline; }
.ta-play__short { display: none; }
@media screen and (max-width: 25em) {
  .ta-play { margin-left: 0.2rem; padding: 0.34rem 0.5rem; }
  .ta-play__long { display: none; }
  .ta-play__short { display: inline; }
  .md-header__title { margin-left: 0.1rem; }
}

/* Search.
 *
 * Scoped to the width where Material actually puts the field in the header
 * bar. Below 60em the same element becomes a full-screen sheet on the page's
 * own ground, and an unscoped rule here painted it with the header's
 * translucent white and left the typed text in #fafafa on white in light mode:
 * a search box you cannot read what you typed into. Material's own defaults
 * are right for that case and they resolve through the tokens above, so the
 * only thing left to do is square off the desktop field.
 *
 * The input's own colour is deliberately not set: Material gives it
 * `color: inherit` so it takes the dark bar's foreground while docked and the
 * page's foreground once the sheet opens, which is what is wanted in both. */
@media screen and (min-width: 60em) {
  .md-search__form {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ta-chrome-line);
  }
  .md-search__form:hover { background-color: rgba(255, 255, 255, 0.1); }
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--ta-bg);
  border-color: var(--ta-line-strong);
  box-shadow: none;
}
.md-search__output { box-shadow: none; border: 1px solid var(--ta-line); border-top: 0; }
.md-search-result__meta {
  background-color: var(--ta-surface);
  color: var(--ta-muted);
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.md-search-result__link:focus,
.md-search-result__link:hover { background-color: var(--ta-surface); }
.md-search-result mark { color: var(--ta-link); background: transparent; }

/* ---------------------------------------------------------------------------
   Sidebars
   --------------------------------------------------------------------------- */

/* .legal-toc in main.css: an uppercase micro-label, and entries hung off a
   2px rule that lights up on the current one. */
.md-nav {
  font-size: 0.68rem;
  line-height: 1.5;
}
.md-nav__title {
  color: var(--ta-muted);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
}
.md-nav__item--section > .md-nav__link[for] {
  color: var(--ta-muted);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.md-nav__link {
  color: var(--ta-muted);
  padding: 0.2rem 0 0.2rem 0.42rem;
  margin-top: 0;
  border-left: 2px solid var(--ta-line);
  gap: 0.4rem;
}
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--ta-bright);
  border-left-color: var(--ta-dim);
}
.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
  color: var(--ta-link);
  border-left-color: var(--ta-accent);
}
.md-nav--secondary .md-nav__title { border-left: 0; }
.md-nav__item .md-nav__link--active { font-weight: 400; }

/* The drawer on a phone gets the chrome ground and the wordmark, so the site
   still identifies itself where the header title is hidden. The breakpoint is
   Material's own, to the digit, so there is no sliver of width where the
   drawer styles are on and these are not. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--ta-chrome-bg);
    color: var(--ta-chrome-text);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: none;
    border-bottom: 1px solid var(--ta-chrome-line);
  }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo img,
  .md-nav--primary .md-nav__title .md-nav__button.md-logo svg { height: 1.4rem; width: 1.4rem; }
  .md-nav--primary,
  .md-nav--primary .md-nav__source { background-color: var(--ta-bg); }
  .md-nav--primary .md-nav__link { border-left: 0; padding: 0.55rem 0.8rem; }
  .md-nav--primary .md-nav__list { padding: 0; }
}

/* ---------------------------------------------------------------------------
   Prose
   --------------------------------------------------------------------------- */

/* 0.76rem against Material's 125% root is 15.2px, which is 0.95rem against the
   game's 16px root: the size about.html and faq.html set their body text at.
   Line height 1.75 comes from the same rule. */
.md-typeset {
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--ta-body);
}

/* The measure, set on the elements that carry running text and not on the
   article, so a table, a code block or a card grid is still free to use the
   whole column. main.css explains the reasoning and lands on the same number. */
.md-typeset p,
.md-typeset li,
.md-typeset blockquote { max-width: 26rem; }
.md-typeset li > p { max-width: none; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--md-text-font-family);
  color: var(--ta-bright);
  font-weight: 700;
}

/* .page-title: 1.5rem at a 16px root, tracking pulled in, a hairline under it
   and the first paragraph riding close underneath. */
.md-typeset h1 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ta-line);
  color: var(--ta-bright);
}

/* .legal-sec > h2: a rule above, not a size jump. */
.md-typeset h2 {
  font-size: 1rem;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 2.2rem 0 0.7rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ta-line);
  scroll-margin-top: 4.2rem;
}
/* install.md opens with its first section immediately under the title, and the
   title already draws a rule. main.css handles the same case with
   .legal-sec:first-of-type: the first section head does not draw its own. */
.md-typeset h1 + h2 { margin-top: 1.4rem; padding-top: 0; border-top: 0; }

.md-typeset h3 {
  font-size: 0.84rem;
  letter-spacing: -0.01em;
  margin: 1.7rem 0 0.5rem;
  color: var(--ta-strong);
  scroll-margin-top: 4.2rem;
}
.md-typeset h4 {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ta-muted);
  margin: 1.4rem 0 0.4rem;
  scroll-margin-top: 4.2rem;
}

.md-typeset a { color: var(--ta-link); text-decoration: none; }
.md-typeset a:hover,
.md-typeset a:focus { color: var(--ta-link-hi); }
.md-typeset a:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 2px; }

.md-typeset strong,
.md-typeset b { color: var(--ta-strong); font-weight: 600; }
.md-typeset li::marker { color: var(--ta-dim); }
.md-typeset hr { border-bottom: 1px solid var(--ta-line); margin: 2rem 0; }

.md-typeset blockquote {
  color: var(--ta-muted);
  border-left: 2px solid var(--ta-accent);
  padding-left: 1rem;
}

/* The permalink anchor: the game marks sections with a mono glyph in the
   accent, so this uses the accent too rather than a grey pilcrow. */
.md-typeset .headerlink { color: var(--ta-line-strong); }
.md-typeset :hover > .headerlink,
.md-typeset .headerlink:focus { color: var(--ta-accent); }

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

/* Inline code, exactly the rule from main.css: the accent on a darker plate,
   because inline code here is nearly always a command or a key you type. */
.md-typeset code {
  color: var(--ta-link);
  background-color: var(--ta-code-bg);
  padding: 0 0.25rem;
  font-size: 0.88em;
  box-shadow: none;
}
.md-typeset a > code { color: var(--ta-link); }
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code { font-size: 0.9em; background: transparent; padding: 0; color: inherit; }

/* Block code is pre.key: the page's own ground inside a hairline box, so a
   command block reads as a terminal rather than as a highlighted quotation. */
.md-typeset pre > code {
  background-color: var(--ta-bg);
  border: 1px solid var(--ta-line-strong);
  color: var(--ta-strong);
  padding: 0.85rem 1rem;
  /* The copy button sits in the top right corner of every block, and a
     command longer than the box (the install line on any phone) ran under
     it: at 390 pixels the end of `curl ... | sh` was behind the button and
     could not be scrolled out from under it. Room on the right the width of
     the button lets the last characters clear it. */
  padding-right: 2.75rem;
  font-size: 0.7rem;
  line-height: 1.7;
}
.md-typeset .highlight { background: transparent; }
.md-typeset .highlight span.filename {
  background-color: var(--ta-surface);
  border: 1px solid var(--ta-line-strong);
  border-bottom: 0;
  color: var(--ta-faint);
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md-typeset .highlighttable .linenos { border: 1px solid var(--ta-line-strong); border-right: 0; }
.md-typeset .highlight .linenos,
.md-typeset .highlight .linenodiv pre { color: var(--ta-dim); }
.md-typeset .highlight [data-linenos]::before { color: var(--ta-dim); }

/* The copy button rides inside the box rather than floating over the corner
   of the text. .copy-btn in main.css. */
.md-clipboard {
  color: var(--ta-dim);
  transition: color 0.15s ease;
}
.md-clipboard:hover,
:hover > .md-clipboard { color: var(--ta-accent); }

.md-typeset kbd {
  background-color: var(--ta-surface-2);
  color: var(--ta-strong);
  box-shadow: none;
  border: 1px solid var(--ta-line-strong);
  font-size: 0.7rem;
}

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

/* The command reference is one long table, and the game renders tables with an
   uppercase mono header rule and hairlines between rows, no fill and no box.
   The wrapper keeps its own horizontal scroll so a wide row never pushes the
   page sideways on a phone. */
.md-typeset__table { padding: 0; min-width: 0; }
.md-typeset__scrollwrap { margin: 1rem 0; }
/* display and overflow are deliberately left to Material.
 *
 * The scroll wrapper around a table (.md-typeset__scrollwrap) is added by
 * JavaScript after the page loads, not by the build, so between first paint
 * and hydration, and permanently for a reader with JavaScript off, the only
 * thing stopping a wide table from widening the whole page is Material's own
 * `display: inline-block; max-width: 100%; overflow: auto` on the table
 * itself. Setting `display: table; width: 100%` here took that away, and the
 * PATH table on the install page is four columns of unbreakable shell code:
 * at 320px it pushed the entire document sideways. Once the wrapper does
 * arrive, `.md-typeset__table table` sets width:100% and the table fills the
 * column, which is what the width was wanted for in the first place. */
.md-typeset table:not([class]) {
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--ta-line);
  border-bottom: 1px solid var(--ta-line);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.7rem;
  max-width: 100%;
  overflow: auto;
}
.md-typeset table:not([class]) th {
  background-color: transparent;
  color: var(--ta-muted);
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--ta-line);
  min-width: 0;
}
.md-typeset table:not([class]) td {
  color: var(--ta-body);
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-top: 1px solid var(--ta-line-soft);
  vertical-align: top;
  line-height: 1.6;
}
.md-typeset table:not([class]) tr:first-child td { border-top: 0; }
.md-typeset table:not([class]) tbody tr:hover { background-color: var(--ta-surface); box-shadow: none; }
/* First column of a reference table is the thing you type. */
.md-typeset table:not([class]) td:first-child code { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Admonitions
   --------------------------------------------------------------------------- */

/* .legal-note in main.css: a hairline box with one 2px edge in the accent, a
   bold title in the bright, and no coloured fill behind either. Information,
   not a failure. */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-left: 2px solid var(--ta-accent);
  box-shadow: none;
  font-size: 0.72rem;
  padding: 0 1rem;
  margin: 1.4rem 0;
  max-width: 30rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent;
  color: var(--ta-bright);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.75rem 0 0.35rem;
  margin: 0 0 0.4rem;
  border: 0;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--ta-accent);
  top: 0.82rem;
  left: 0;
}
.md-typeset .admonition-title,
.md-typeset summary { padding-left: 1.4rem; }
.md-typeset .admonition > p:last-child,
.md-typeset details > p:last-child { margin-bottom: 0.9rem; }
.md-typeset .admonition p,
.md-typeset details p { max-width: none; }

.md-typeset .warning,
.md-typeset .caution,
.md-typeset .attention { border-left-color: #f59e0b; }
.md-typeset .warning > .admonition-title::before,
.md-typeset .caution > .admonition-title::before,
.md-typeset .attention > .admonition-title::before { background-color: #f59e0b; }
.md-typeset .danger,
.md-typeset .failure,
.md-typeset .bug,
.md-typeset .error { border-left-color: var(--ta-bad); }
.md-typeset .danger > .admonition-title::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .bug > .admonition-title::before,
.md-typeset .error > .admonition-title::before { background-color: var(--ta-bad); }
.md-typeset .success,
.md-typeset .check,
.md-typeset .done { border-left-color: var(--ta-good); }
.md-typeset .success > .admonition-title::before,
.md-typeset .check > .admonition-title::before,
.md-typeset .done > .admonition-title::before { background-color: var(--ta-good); }

/* Tabbed blocks, squared and hung off the same hairline. */
.md-typeset .tabbed-labels > label {
  color: var(--ta-faint);
  font-size: 0.68rem;
  font-weight: 400;
}
.md-typeset .tabbed-labels > label:hover { color: var(--ta-bright); }
.md-typeset .tabbed-set > input:checked + label { color: var(--ta-link); border-color: var(--ta-accent); }

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

/* The three doors on the home page. Material's own `grid cards` needs
   md_in_html and the icon pipeline, and it produced a Material-shaped card
   rather than a terminal.army one, so this is .card from main.css with the
   mono index number that .legal-sec puts in front of a heading. */
.ta-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.7rem;
  margin: 1.6rem 0 2rem;
  max-width: none;
}
/* Each card is a Markdown link, so Python-Markdown wraps it in a paragraph and
   the paragraph, not the anchor, is what the grid lays out. The wrapper is
   flattened to a flex box and the anchor told to fill it, which also gives the
   three cards a common height without asking for one. */
.ta-cards > p {
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
}
.ta-cards > p > .ta-card { flex: 1 1 auto; }

.ta-card {
  display: block;
  background-color: var(--ta-surface);
  border: 1px solid var(--ta-line);
  padding: 1rem 1.1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ta-card:hover,
.ta-card:focus {
  border-color: var(--ta-line-strong);
  background-color: var(--ta-surface-2);
}
.ta-card:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 2px; }
.ta-card__num {
  display: block;
  color: var(--ta-accent);
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.md-typeset .ta-card__name {
  display: block;
  color: var(--ta-bright);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.ta-card:hover .ta-card__name { color: var(--ta-link); }
.md-typeset .ta-card__desc {
  display: block;
  color: var(--ta-muted);
  font-size: 0.68rem;
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

/* The closing line every page ends on. */
.md-typeset .ta-cta {
  border-top: 1px solid var(--ta-line);
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  color: var(--ta-muted);
  font-size: 0.72rem;
  max-width: none;
}
.md-typeset .ta-cta a { font-weight: 600; }

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

/* .site-foot in main.css: the wordmark and a tagline on the left, columns of
   links on the right, and a base row under a fainter rule carrying the
   attribution and the language note. */
.md-footer {
  background-color: var(--ta-chrome-foot);
  color: var(--ta-chrome-muted);
  border-top: 1px solid var(--ta-chrome-line);
}
.md-footer-meta { background-color: transparent; }
.md-footer__inner { padding: 0.4rem 0; }
.md-footer__link { color: var(--ta-chrome-muted); opacity: 1; }
.md-footer__link:hover { color: var(--ta-chrome-text); }
.md-footer__direction { color: var(--ta-chrome-faint); font-size: 0.6rem; }
.md-footer__title { background-color: transparent; }

.ta-foot { padding: 2rem 0 0.5rem; }
.ta-foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.6rem 2.4rem;
  align-items: start;
}
.ta-foot__mark {
  display: block;
  color: var(--ta-chrome-text);
  font-family: var(--md-code-font-family);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.6rem;
  text-decoration: none;
}
.ta-foot__mark:hover { color: #fff; }
.ta-foot__mark .dot { color: var(--ta-accent); }
.ta-foot__tag {
  margin: 0;
  color: var(--ta-chrome-muted);
  font-size: 0.65rem;
  line-height: 1.65;
  max-width: 34ch;
}
.ta-foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.ta-foot__cols h2 {
  margin: 0 0 0.5rem;
  color: var(--ta-chrome-text);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ta-foot__cols a {
  display: block;
  color: var(--ta-chrome-muted);
  font-size: 0.65rem;
  padding: 0.16rem 0;
  text-decoration: none;
}
.ta-foot__cols a:hover { color: var(--ta-chrome-text); }
.ta-foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ta-chrome-line-soft);
}
.ta-foot__base p { margin: 0; color: var(--ta-chrome-quiet); font-size: 0.6rem; }
.ta-foot__base a { color: var(--ta-chrome-muted); text-decoration: none; }
.ta-foot__base a:hover { color: var(--ta-accent); }

/* One column below the breakpoint the four-across footer stops fitting. */
@media screen and (max-width: 44em) {
  .ta-foot__inner { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .ta-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 22em) {
  .ta-foot__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Back to top
   --------------------------------------------------------------------------- */

.md-top {
  background-color: var(--ta-surface);
  border: 1px solid var(--ta-line-strong);
  color: var(--ta-muted);
  box-shadow: none;
  font-size: 0.65rem;
}
.md-top:hover { background-color: var(--ta-surface-2); color: var(--ta-bright); }

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */

/* 320px is the floor. Nothing here may scroll the page sideways: long commands
   and wide tables get their own scroll container, and words that cannot be
   broken are allowed to break. */
.md-typeset { overflow-wrap: break-word; }
.md-typeset pre { max-width: 100%; }
.md-typeset .md-typeset__scrollwrap { -webkit-overflow-scrolling: touch; }

@media screen and (max-width: 30em) {
  .md-typeset { font-size: 0.74rem; }
  .md-typeset h1 { font-size: 1.05rem; }
  .md-typeset h2 { font-size: 0.92rem; }
  .md-typeset pre > code { padding: 0.7rem 2.5rem 0.7rem 0.75rem; font-size: 0.66rem; }
  .md-typeset .admonition,
  .md-typeset details { padding: 0 0.8rem; }
  .ta-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}