/* =============================================================
   Spac3 theme for MkDocs Material - matches the Kamari public site

   Reference: the Kamari repo's build/public_site/styles.css (soft tinted
   background with ambient radial gradients, translucent cards, pill
   buttons, Outfit for text, one accent). Colour tokens are copied from
   there so the two sites read as one family.

   This is one of two themes; docs/stylesheets/crt-theme.css is the other.
   mkdocs.yml extra_css selects which one the site uses.

   Rules this file follows (docs/ai/prompts/ux-design-guideline.md):
   - Neutral text, ONE accent for links, the primary button and active nav.
   - Every text/background pair at least 7:1 in both schemes; measured in
     Chromium by tests/test_ux_guideline.py. Change a colour here and
     re-run the tests.
   - Light scheme by default, dark when the OS prefers it or the visitor
     picks it with the header toggle (Material remembers the choice).
   - Relative units only; pixels only for hairlines.

   Material sizing reminder: html is 125% (1rem = 20px at a 16px browser
   default) and .md-typeset is 0.8rem, so inside .md-typeset 1em = 16px.
   ============================================================= */

/* Outfit is served from this site (SIL Open Font License, docs/fonts/). */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
}

/* -- Scheme tokens: light (default, also used when JavaScript is off) -- */
:root {
  --spac3-bg:            #f7fafc;
  --spac3-surface:       #e7eef5;
  --spac3-text:          #0f1c26;
  --spac3-muted:         #384650;
  --spac3-line:          #b3c4d1;
  --spac3-accent:        #0c4968;
  --spac3-on-accent:     #ffffff;
  --spac3-code-bg:       #e3ebf2;
  --spac3-card:          rgba(255, 255, 255, 0.72);
  --spac3-card-strong:   rgba(255, 255, 255, 0.94);
  --spac3-shadow:        0 0.7rem 1.7rem rgba(15, 44, 68, 0.10);
  --spac3-ambient-1:     rgba(23, 121, 186, 0.07);
  --spac3-ambient-2:     rgba(8, 145, 168, 0.06);
  --spac3-accent-tint:   rgba(12, 73, 104, 0.10);
  --spac3-mark:          rgba(12, 73, 104, 0.18);
  --spac3-hl-keyword:    #0a3a80;
  --spac3-hl-string:     #0d4f1b;
  --spac3-hl-number:     #6e2800;
  --spac3-hl-comment:    #3f4d4d;
  --spac3-hl-function:   #43198c;
  --spac3-hl-constant:   #5c3f00;
  --spac3-hl-special:    #7e1232;
  --spac3-hl-variable:   #09405d;
  --spac3-hl-generic:    #2e3a3a;
  --spac3-hl-line:       rgba(12, 73, 104, 0.12);

  --md-text-font: "Outfit";
  --md-code-font: "JetBrains Mono";
  color-scheme: light;
}

/* -- Scheme tokens: dark (manual toggle) -- */
body[data-md-color-scheme="spac3-dark"] {
  --spac3-bg:            #0a1016;
  --spac3-surface:       #131e28;
  --spac3-text:          #e9f2f8;
  --spac3-muted:         #aebfcc;
  --spac3-line:          #2f4658;
  --spac3-accent:        #78c5ed;
  --spac3-on-accent:     #05161f;
  --spac3-code-bg:       #16232f;
  --spac3-card:          rgba(19, 30, 40, 0.66);
  --spac3-card-strong:   rgba(19, 30, 40, 0.92);
  --spac3-shadow:        0 0.8rem 2rem rgba(0, 0, 0, 0.46);
  --spac3-ambient-1:     rgba(79, 179, 232, 0.07);
  --spac3-ambient-2:     rgba(34, 211, 238, 0.055);
  --spac3-accent-tint:   rgba(120, 197, 237, 0.12);
  --spac3-mark:          rgba(120, 197, 237, 0.25);
  --spac3-hl-keyword:    #8fd3ff;
  --spac3-hl-string:     #a6e3a1;
  --spac3-hl-number:     #f5c2a0;
  --spac3-hl-comment:    #9fb0b0;
  --spac3-hl-function:   #d4bfff;
  --spac3-hl-constant:   #ffd27f;
  --spac3-hl-special:    #ff9fb2;
  --spac3-hl-variable:   #b8e3ff;
  --spac3-hl-generic:    #c7d2d2;
  --spac3-hl-line:       rgba(120, 197, 237, 0.15);
  color-scheme: dark;
}

/* -- Scheme tokens: dark, when the OS prefers dark and JavaScript has not
      run (Material leaves the scheme attribute at "default"). Duplicates
      the block above on purpose: CSS has no mixins and a media query cannot
      be combined with the attribute selector. -- */
@media (prefers-color-scheme: dark) {
  body[data-md-color-scheme="default"] {
    --spac3-bg:            #0a1016;
    --spac3-surface:       #131e28;
    --spac3-text:          #e9f2f8;
    --spac3-muted:         #aebfcc;
    --spac3-line:          #2f4658;
    --spac3-accent:        #78c5ed;
    --spac3-on-accent:     #05161f;
    --spac3-code-bg:       #16232f;
    --spac3-card:          rgba(19, 30, 40, 0.66);
    --spac3-card-strong:   rgba(19, 30, 40, 0.92);
    --spac3-shadow:        0 0.8rem 2rem rgba(0, 0, 0, 0.46);
    --spac3-ambient-1:     rgba(79, 179, 232, 0.07);
    --spac3-ambient-2:     rgba(34, 211, 238, 0.055);
    --spac3-accent-tint:   rgba(120, 197, 237, 0.12);
    --spac3-mark:          rgba(120, 197, 237, 0.25);
    --spac3-hl-keyword:    #8fd3ff;
    --spac3-hl-string:     #a6e3a1;
    --spac3-hl-number:     #f5c2a0;
    --spac3-hl-comment:    #9fb0b0;
    --spac3-hl-function:   #d4bfff;
    --spac3-hl-constant:   #ffd27f;
    --spac3-hl-special:    #ff9fb2;
    --spac3-hl-variable:   #b8e3ff;
    --spac3-hl-generic:    #c7d2d2;
    --spac3-hl-line:       rgba(120, 197, 237, 0.15);
    color-scheme: dark;
  }
}

/* -- Map the scheme tokens onto Material's custom properties.
      Declared on body[data-md-color-scheme] (not :root) so var() resolves
      against whichever scheme block won on the body element, and so it
      outranks Material's own [data-md-color-scheme=default] block. -- */
body[data-md-color-scheme] {
  --md-default-bg-color:             var(--spac3-bg);
  --md-default-bg-color--light:      var(--spac3-surface);
  --md-default-bg-color--lighter:    var(--spac3-surface);
  --md-default-bg-color--lightest:   var(--spac3-surface);
  --md-default-fg-color:             var(--spac3-text);
  --md-default-fg-color--light:      var(--spac3-muted);
  --md-default-fg-color--lighter:    var(--spac3-muted);
  --md-default-fg-color--lightest:   var(--spac3-line);

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

  --md-accent-fg-color:              var(--spac3-accent);
  --md-accent-fg-color--transparent: var(--spac3-accent-tint);
  --md-accent-bg-color:              var(--spac3-on-accent);
  --md-accent-bg-color--light:       var(--spac3-on-accent);

  --md-typeset-color:                var(--spac3-text);
  --md-typeset-a-color:              var(--spac3-accent);
  --md-typeset-mark-color:           var(--spac3-mark);
  --md-typeset-table-color:          var(--spac3-line);
  --md-typeset-table-color--light:   var(--spac3-accent-tint);
  --md-typeset-kbd-color:            var(--spac3-surface);
  --md-typeset-kbd-accent-color:     var(--spac3-code-bg);
  --md-typeset-kbd-border-color:     var(--spac3-line);

  --md-code-bg-color:                var(--spac3-code-bg);
  --md-code-bg-color--light:         var(--spac3-card-strong);
  --md-code-bg-color--lighter:       transparent;
  --md-code-fg-color:                var(--spac3-text);
  --md-code-hl-color:                var(--spac3-hl-line);
  --md-code-hl-color--light:         var(--spac3-hl-line);
  --md-code-hl-number-color:         var(--spac3-hl-number);
  --md-code-hl-special-color:        var(--spac3-hl-special);
  --md-code-hl-function-color:       var(--spac3-hl-function);
  --md-code-hl-constant-color:       var(--spac3-hl-constant);
  --md-code-hl-keyword-color:        var(--spac3-hl-keyword);
  --md-code-hl-string-color:         var(--spac3-hl-string);
  --md-code-hl-name-color:           var(--spac3-text);
  --md-code-hl-operator-color:       var(--spac3-text);
  --md-code-hl-punctuation-color:    var(--spac3-text);
  --md-code-hl-comment-color:        var(--spac3-hl-comment);
  --md-code-hl-generic-color:        var(--spac3-hl-generic);
  --md-code-hl-variable-color:       var(--spac3-hl-variable);

  --md-admonition-fg-color:          var(--spac3-text);
  --md-admonition-bg-color:          var(--spac3-card);

  --md-footer-bg-color:              var(--spac3-surface);
  --md-footer-bg-color--dark:        var(--spac3-surface);
  --md-footer-fg-color:              var(--spac3-text);
  --md-footer-fg-color--light:       var(--spac3-muted);
  --md-footer-fg-color--lighter:     var(--spac3-muted);

  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;
}

/* -- Base: tinted background with two soft ambient glows, as on Kamari -- */
html {
  background-color: var(--spac3-bg);
}

body {
  background-color: var(--spac3-bg);
  background-image:
    radial-gradient(58rem 40rem at 12% -6%, var(--spac3-ambient-1), transparent 62%),
    radial-gradient(52rem 38rem at 92% 18%, var(--spac3-ambient-2), transparent 60%),
    linear-gradient(152deg, var(--spac3-bg) 0%, var(--spac3-surface) 100%);
  background-attachment: fixed;
  color: var(--spac3-text);
  -webkit-font-smoothing: antialiased;
}

/* Material paints these over the body; keep the gradient showing through. */
.md-container,
.md-main,
.md-content,
.md-sidebar,
.md-sidebar__scrollwrap {
  background: transparent;
}

/* -- Layout: one centred column of about 1100px, text capped at ~75ch -- */
.md-grid {
  max-width: 55rem;
}

.md-content__inner {
  max-width: 36rem;
}

/* -- Focus: ring in the text colour, as on Kamari -- */
body :is(a, button, input, label, summary, [tabindex]):focus-visible {
  outline: 0.15rem solid var(--spac3-text);
  outline-offset: 0.15rem;
  border-radius: 0.3rem;
}

/* -- Header, tabs, search -- */
/* The scanline toggle in overrides/partials/header.html and search.html
   belongs to the CRT theme; this theme has no overlay, so hide it. */
.md-header__inner [data-scanline-toggle],
.md-search__options [data-scanline-toggle] {
  display: none !important;
}

.md-header {
  background-color: var(--spac3-card-strong);
  backdrop-filter: blur(0.3rem);
  color: var(--spac3-text);
  border-bottom: 1px solid var(--spac3-line);
  box-shadow: none;
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* 44px tap targets: Material's icon is 1.2rem; 0.5rem padding each side
   makes the control 2.2rem = 44px at the 20px root. */
.md-header__button,
.md-header__button.md-logo {
  margin: 0.1rem;
  padding: 0.5rem;
  min-width: 2.2rem;
  min-height: 2.2rem;
  box-sizing: border-box;
  color: var(--spac3-text);
  border-radius: 999px;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.2rem;
  width: auto;
  filter: none;
}

.md-header__button.md-icon:hover,
.md-header__button.md-icon:focus-visible {
  background-color: var(--spac3-card);
  color: var(--spac3-accent);
}

/* Tabs as pills, like Kamari's navigation */
.md-tabs {
  background-color: var(--spac3-card-strong);
  backdrop-filter: blur(0.3rem);
  color: var(--spac3-text);
  border-bottom: 1px solid var(--spac3-line);
}

.md-tabs__list {
  margin: 0;
}

.md-tabs__item {
  height: auto;
  padding: 0.3rem 0.1rem;
}

.md-tabs__link {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  padding: 0.3rem 0.8rem;
  min-height: 1.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--spac3-text);
  opacity: 1;
  font-weight: 500;
}

.md-tabs__item:hover .md-tabs__link,
.md-tabs__link:focus-visible {
  background-color: var(--spac3-card);
  text-decoration: underline;
}

.md-tabs__link--active {
  background-color: var(--spac3-accent-tint);
  border-color: var(--spac3-line);
  font-weight: 700;
}

.md-search__form {
  background-color: var(--spac3-card-strong);
  border: 1px solid var(--spac3-line);
  border-radius: 999px;
  box-shadow: none;
}

.md-search__input,
.md-search__input + .md-search__icon {
  color: var(--spac3-text);
}

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

.md-search__icon,
.md-search__options .md-icon {
  color: var(--spac3-muted);
}

.md-search__output {
  background-color: var(--spac3-bg);
  border-radius: 0 0 0.8rem 0.8rem;
}

.md-search-result__meta {
  background-color: var(--spac3-surface);
  color: var(--spac3-muted);
}

.md-search-result__article:hover,
.md-search-result__article:focus-within {
  background-color: var(--spac3-accent-tint);
}

/* -- Sidebars -- */
.md-sidebar__inner {
  border-right: none;
}

.md-nav__title {
  color: var(--spac3-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.md-nav__link {
  color: var(--spac3-text);
}

.md-nav__link:hover,
.md-nav__link:focus-visible,
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--spac3-accent);
}

.md-nav__link--active {
  font-weight: 700;
}

.md-nav--secondary .md-nav__link {
  color: var(--spac3-muted);
}

.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__link:hover {
  color: var(--spac3-accent);
}

/* Desktop sidebars sit on the gradient: no strip behind their titles.
   Material paints them (and a matching box-shadow) for its sticky effect. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav__title,
  .md-nav--secondary .md-nav__title {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Mobile drawer gets an opaque surface so the gradient does not bleed in. */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title[for="__drawer"],
  .md-nav--primary .md-nav__title {
    background-color: var(--spac3-surface);
    color: var(--spac3-text);
  }

  .md-nav--primary,
  .md-nav--primary .md-nav__list,
  .md-sidebar--primary .md-sidebar__scrollwrap {
    background-color: var(--spac3-bg);
  }
}

/* -- Typography: scale 1 / 1.25 / 1.75 / 2.5 em inside .md-typeset -- */
.md-typeset {
  color: var(--spac3-text);
  font-size: 0.8rem;
  line-height: 1.5;
}

.md-typeset h1 {
  color: var(--spac3-text);
  font-size: clamp(1.75em, 1.25em + 1.6vw, 2.5em);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.75em;
}

.md-typeset h2 {
  color: var(--spac3-text);
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 2.5em 0 0.75em;
}

.md-typeset h3 {
  color: var(--spac3-text);
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 2em 0 0.5em;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--spac3-text);
  font-size: 1em;
  font-weight: 600;
  margin: 1.5em 0 0.5em;
}

.md-typeset a {
  color: var(--spac3-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--spac3-accent);
  text-decoration-thickness: 0.125em;
}

.md-typeset mark {
  background-color: var(--spac3-mark);
  color: var(--spac3-text);
}

/* -- Code -- */
.md-typeset code {
  background-color: var(--spac3-code-bg);
  color: var(--spac3-text);
  border: none;
  border-radius: 0.3rem;
  padding: 0 0.35em;
  font-weight: 500;
}

.md-typeset pre > code {
  padding: 0.8em 1em;
}

.md-typeset pre,
.md-typeset .highlight,
.md-typeset .highlight pre {
  background-color: var(--spac3-card-strong);
  border: 1px solid var(--spac3-line);
  border-radius: 0.4rem;
  overflow-x: auto;
}

.md-typeset pre > code {
  background-color: transparent;
}

/* Material 9.6+ renders the copy control as .md-code__nav > .md-code__button;
   the nav's default translucent backdrop showed as a grey square in dark. */
.md-code__nav {
  background-color: transparent;
}

.md-code__button {
  color: var(--spac3-muted);
}

:hover > * > .md-code__button {
  color: var(--spac3-muted);
}

.md-code__button:hover,
.md-code__button:focus-visible {
  color: var(--spac3-accent);
}

/* -- Tables -- */
.md-typeset table:not([class]) {
  background-color: var(--spac3-card);
  border: 1px solid var(--spac3-line);
  border-radius: 0.8rem;
  font-size: 0.9em;
}

.md-typeset table:not([class]) th {
  background-color: transparent;
  color: var(--spac3-text);
  font-weight: 700;
  border-bottom: 1px solid var(--spac3-line);
}

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

.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--spac3-accent-tint);
}

/* -- Admonitions / details as translucent cards -- */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--spac3-card);
  border: 1px solid var(--spac3-line);
  border-left-width: 0.2rem;
  border-radius: 0.8rem;
  box-shadow: var(--spac3-shadow);
  font-size: 0.9em;
}

.md-typeset .admonition-title,
.md-typeset summary {
  color: var(--spac3-text);
  font-weight: 600;
  border-radius: 0.8rem 0.8rem 0 0;
}

/* -- Footer -- */
.md-footer {
  background-color: transparent;
  color: var(--spac3-text);
  border-top: 1px solid var(--spac3-line);
}

.md-footer-meta {
  background-color: transparent;
}

.md-footer__link,
.md-footer__title,
.md-footer__direction {
  color: var(--spac3-text);
  opacity: 1;
}

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

.md-footer__link:hover .md-footer__title,
.md-footer__link:focus-visible .md-footer__title {
  color: var(--spac3-accent);
  opacity: 1;
}

.md-copyright,
.md-copyright__highlight {
  color: var(--spac3-muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.md-copyright a {
  color: var(--spac3-accent);
  text-decoration: underline;
}

/* -- Back-to-top -- */
.md-top {
  background-color: var(--spac3-card-strong);
  border: 1px solid var(--spac3-line);
  border-radius: 999px;
  color: var(--spac3-text);
  box-shadow: var(--spac3-shadow);
}

.md-top:hover,
.md-top:focus-visible {
  background-color: var(--spac3-accent);
  color: var(--spac3-on-accent);
}

/* -- Post index list (overrides/blog.html) -- */
.md-post-list {
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
}

.md-post-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em 0.75em;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--spac3-line);
}

.md-post-list__date {
  flex: 0 0 auto;
  font-family: var(--md-code-font-family);
  font-size: 0.9em;
  white-space: nowrap;
  color: var(--spac3-muted);
}

.md-post-list__link {
  flex: 1 1 12em;
  color: var(--spac3-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* -- Home page hero (docs/index.md), centred like Kamari's -- */
.hero {
  padding: 0 0 1rem;
  text-align: center;
}

.hero h1 {
  border-bottom: none;
  margin: 0 auto 0.4em;
  max-width: 20ch;
}

.hero__subheadline {
  font-size: 1.125em;
  line-height: 1.5;
  color: var(--spac3-muted);
  margin: 0 auto 1em;
  max-width: 40em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
  align-items: center;
  margin: 0 0 2em;
}

.md-typeset .cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--spac3-accent);
  color: var(--spac3-on-accent);
  font-weight: 600;
  padding: 0 2em;
  min-height: 3em;
  border-radius: 999px;
  box-shadow: var(--spac3-shadow);
  text-decoration: none;
  box-sizing: border-box;
}

.md-typeset .cta-primary:hover,
.md-typeset .cta-primary:focus-visible {
  color: var(--spac3-on-accent);
  text-decoration: underline;
}

.md-typeset .cta-secondary {
  display: inline-flex;
  align-items: center;
  color: var(--spac3-accent);
  background-color: var(--spac3-card);
  border: 1px solid var(--spac3-line);
  padding: 0 1.5em;
  min-height: 3em;
  border-radius: 999px;
  font-weight: 600;
  box-sizing: border-box;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Short viewports (a phone held sideways is about 360px tall): keep the
   headline, subheadline and primary button on the first screen. */
@media (max-height: 30em) {
  .md-main__inner {
    margin-top: 0.5rem;
  }

  .hero__subheadline {
    font-size: 1em;
  }
}

/* Material centres figures and shrink-wraps them; the proof block is a
   real code excerpt and reads left-aligned inside a centred card. */
.md-typeset .hero__proof {
  display: block;
  width: auto;
  max-width: 36em;
  margin: 0 auto 1.5em;
  text-align: left;
}

.md-typeset .hero__proof pre {
  margin: 0;
  border-radius: 0.8rem;
  box-shadow: var(--spac3-shadow);
}

.md-typeset .hero__proof figcaption {
  color: var(--spac3-muted);
  font-size: 0.9em;
  font-style: normal;
  margin: 0.5em 0 0;
  max-width: none;
}

.trust-line {
  color: var(--spac3-muted);
  font-size: 0.9em;
  margin: 0;
  text-align: center;
}

/* Three "what you will find" cards: wrap by content width, no breakpoint. */
.home-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  gap: 1em;
  margin: 0 0 1em;
}

.md-typeset .home-sections > div {
  background-color: var(--spac3-card);
  border: 1px solid var(--spac3-line);
  border-radius: 0.8rem;
  box-shadow: var(--spac3-shadow);
  backdrop-filter: blur(0.3rem);
  padding: 1.5em;
}

.home-sections h3 {
  margin-top: 0;
}

.md-typeset .home-sections p {
  color: var(--spac3-muted);
  margin: 0;
}

/* -- User preferences -- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  body {
    background-image: none;
  }

  .md-typeset pre,
  .md-typeset .highlight,
  .md-typeset table:not([class]),
  .md-typeset .admonition,
  .md-search__form,
  .md-typeset .home-sections > div {
    border-width: 2px;
  }

  .md-typeset .cta-secondary {
    border: 2px solid currentColor;
  }

  .md-typeset table:not([class]),
  .md-typeset .admonition,
  .md-typeset .home-sections > div {
    background-color: var(--spac3-bg);
  }
}

@media (forced-colors: active) {
  .md-typeset .cta-primary,
  .md-typeset .cta-secondary,
  .md-header__button,
  .md-tabs__link--active,
  .md-top {
    border: 1px solid ButtonText;
  }

  .md-typeset a,
  .md-nav__link,
  .md-tabs__link,
  .md-footer__link {
    text-decoration: underline;
  }
}

/* Coarse pointers (touch): keep navigation rows tall enough to tap. */
@media (pointer: coarse) {
  .md-nav__link,
  .md-tabs__link {
    min-height: 2.2rem;
    display: flex;
    align-items: center;
  }
}

/* -- Print: content only, with link targets after link text -- */
@media print {
  body {
    background-image: none;
  }

  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-top,
  .md-search {
    display: none !important;
  }

  .md-content__inner {
    max-width: none;
  }

  .md-typeset a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}