/* Material overrides: brand palette, and layout adjustments.
 *
 * Colours are the youSleep primary scale from the brand repo's tokens.yaml,
 * copied because Material reads its own --md-* variables. Generate this from
 * tokens.yaml once the brand package is distributable.
 */

:root {
  --md-primary-fg-color:        #3a8a73;  /* primary.800 */
  --md-primary-fg-color--light: #5da18c;  /* primary.600 */
  --md-primary-fg-color--dark:  #287f66;  /* primary.900 */
  --md-accent-fg-color:         #287f66;
  --md-typeset-a-color:         #287f66;
}

/* Dark mode: the header takes --md-primary-fg-color, so using the brand green
 * there produced a bright bar above a dark page. Use the brand's dark surface
 * for chrome and keep the green for links and active states, which is what most
 * Material sites do on the slate scheme. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #161b22;  /* brand dark surface */
  --md-primary-fg-color--light: #1c222b;
  --md-primary-fg-color--dark:  #0d1117;
  --md-accent-fg-color:         #6fac98;  /* primary.500 */
  --md-typeset-a-color:         #93c2b1;  /* primary.300 — readable on dark */
  --md-default-bg-color:        #0d1117;
}

/* Material caps the grid at 61rem, which wastes half a wide screen on pages that
 * are mostly tables and code. */
.md-grid {
  max-width: 84rem;
}

/* Breathing room at the sides and, especially, after the last element — the
 * default leaves the final paragraph almost against the footer. */
.md-content__inner {
  margin-inline: 1.2rem;
  padding-bottom: 4rem;
}
@media screen and (min-width: 76.25em) {
  .md-content__inner { margin-inline: 2rem; }
}

/* Tables are the densest thing here — component matrices, requirement
 * traceability, argument references. Let them use the width and scroll. */
.md-typeset table:not([class]) { display: table; width: 100%; }
.md-typeset__table { overflow-x: auto; }

/* Versions, IDs and hashes read better slightly tighter. */
.md-typeset code { font-size: 0.85em; }

/* The Components tab nests four levels. Tighten the sidebar so more of it fits
 * without scrolling, and make section labels scannable. */
.md-nav { font-size: 0.72rem; }
.md-nav__item .md-nav__link { padding-block: 0.22rem; }
.md-nav__title { font-size: 0.72rem; }
.md-nav--secondary .md-nav__title { padding-bottom: 0.4rem; }


/* Pre-rendered C4 views. They carry their own palette from the model, so they
   deliberately do not follow the site theme.

   `width: 100%` is load-bearing, not cosmetic. Material styles every figure as
   `.md-typeset figure { width: fit-content }`, and the SVG inlined here has no
   intrinsic width to fit to: mmdc emits no `height` attribute, and the `c4()`
   macro strips the `width="100%"` it does emit so the view scales to the text
   column instead of its exported pixel width. fit-content around a child with
   no intrinsic width resolves to zero, so every C4 view rendered 0x0 -- present
   in the HTML, invisible on the page.

   The `!important` overrides the `max-width: <exported px>` mmdc writes into the
   root <svg>'s inline style, which would otherwise cap wide views and stop them
   scaling down on narrow viewports. */
figure.c4 { margin: 1.2rem 0; overflow-x: auto; width: 100%; }
figure.c4 svg { width: 100%; height: auto; max-width: 100% !important; display: block; }