/* The docs theme in the Learning Design Alliance brand (learningdesignalliance.org, the LDA
 * document and slide templates, and reports.learningdesignalliance.org, which uses the same
 * treatment): a cream ground with a soft lavender and pink glow, ink body text, lapis
 * headings, links and hairline rules, Baskervville headings, DM Sans text and DM Mono labels.
 * Both tiers load this file: mkdocs through extra_css, the long-tail pages through
 * scripts/build_longtail.py.
 *
 * mkdocs.yml sets theme.palette primary/accent to "custom" for both the light and slate
 * schemes, which makes Material add the [data-md-color-primary="custom"] /
 * [data-md-color-accent="custom"] attributes these selectors target. See
 * https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors
 *
 * The brand never fills chrome with a solid block of lapis: the header is the page's own
 * ground and lapis is the text and logo drawn on it. So --md-primary-fg-color (Material's
 * name for the header's background) is cream, and --md-primary-bg-color (the text drawn on
 * it, confusingly) is lapis.
 *
 * Contrast (WCAG 2, computed on the flat ground and, worst case, on the glow's full colour):
 * light, ink #0E1240 17.3:1 on cream (12.2 on pink), lapis #122FB2 9.8:1 (6.9), secondary
 * text (ink at 76%) 8.3:1 (6.7); dark, text #ECE9FF 15.7:1 on navy #0B0E33 (11.0),
 * lavender #C9C2FF 11.2:1 (7.9), secondary text 8.8:1 (6.7).
 *
 * FAIRE Sprig, the LDA display face, is not used: its licence forbids serving it from a
 * third-party host or a public repository. Baskervville stands in, as on the reports site.
 * mkdocs.yml sets theme.font to false, so Material does not also load Roboto. */

@import url("https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=DM+Mono:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap");

/* ---------- Light: tokens ---------- */
[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --lda-lapis: #122FB2;
  --lda-glow-1: #E1DBFF;                 /* lavender, top right */
  --lda-glow-2: #F7CBCB;                 /* pink, bottom left */
  --lda-rule: color-mix(in srgb, #122FB2 30%, transparent);

  --md-default-bg-color: #FFFBF5;
  --md-default-bg-color--light: color-mix(in srgb, #FFFBF5 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in srgb, #FFFBF5 30%, transparent);
  --md-default-bg-color--lightest: color-mix(in srgb, #FFFBF5 12%, transparent);
  --md-default-fg-color: #0E1240;
  --md-default-fg-color--light: color-mix(in srgb, #0E1240 76%, transparent);
  --md-default-fg-color--lighter: color-mix(in srgb, #0E1240 42%, transparent);
  --md-default-fg-color--lightest: color-mix(in srgb, #0E1240 10%, transparent);
  --md-typeset-color: #0E1240;
  --md-code-bg-color: #F6EFE8;           /* sand #E1D4C9 at a quarter over cream */
  --md-code-fg-color: #2A2E5C;
  --md-typeset-table-color: color-mix(in srgb, #122FB2 18%, transparent);
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-footer-fg-color: #122FB2;
  --md-footer-fg-color--light: #122FB2;
  --md-footer-fg-color--lighter: color-mix(in srgb, #0E1240 76%, transparent);

  --md-primary-fg-color: #FFFBF5;        /* header background: the page's own cream */
  --md-primary-fg-color--light: #FFFBF5;
  --md-primary-fg-color--dark: #FFFBF5;
  --md-primary-bg-color: #122FB2;        /* lapis: logo, header icons and text */
  --md-primary-bg-color--light: color-mix(in srgb, #122FB2 70%, transparent);
}

/* Accent governs inline link colour, hover and focus states and the code-block highlight
 * tint. The LDA's only saturated interactive colour is lapis; orange is not used for
 * controls. */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #122FB2;
  --md-accent-fg-color--transparent: color-mix(in srgb, #122FB2 10%, transparent);
  --md-accent-bg-color: #FFFBF5;
  --md-accent-bg-color--light: color-mix(in srgb, #FFFBF5 70%, transparent);
  /* Material defaults body links to --md-primary-fg-color, which is the cream header
   * background here: without this every inline link was cream on cream. */
  --md-typeset-a-color: #122FB2 !important;
}

/* ---------- Dark (slate): tokens ---------- */
/* A deep navy ground with lavender accents, as on the reports site in dark mode. The hue
 * is set too, so the shades Material derives from it (shadows, scrollbars) match the navy. */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-hue: 236deg;
  --lda-lapis: #C9C2FF;
  --lda-glow-1: #2B2470;
  --lda-glow-2: #4A2340;
  --lda-rule: color-mix(in srgb, #C9C2FF 32%, transparent);

  --md-default-bg-color: #0B0E33;
  --md-default-bg-color--light: color-mix(in srgb, #0B0E33 54%, transparent);
  --md-default-bg-color--lighter: color-mix(in srgb, #0B0E33 26%, transparent);
  --md-default-bg-color--lightest: color-mix(in srgb, #0B0E33 7%, transparent);
  --md-default-fg-color: #ECE9FF;
  --md-default-fg-color--light: color-mix(in srgb, #ECE9FF 74%, transparent);
  --md-default-fg-color--lighter: color-mix(in srgb, #ECE9FF 40%, transparent);
  --md-default-fg-color--lightest: color-mix(in srgb, #ECE9FF 12%, transparent);
  --md-typeset-color: #ECE9FF;
  --md-code-bg-color: #161A4A;
  --md-code-fg-color: #DCD8FF;
  --md-typeset-table-color: color-mix(in srgb, #C9C2FF 20%, transparent);
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-footer-fg-color: #C9C2FF;
  --md-footer-fg-color--light: #C9C2FF;
  --md-footer-fg-color--lighter: color-mix(in srgb, #ECE9FF 74%, transparent);

  --md-primary-fg-color: #0B0E33;
  --md-primary-fg-color--light: #0B0E33;
  --md-primary-fg-color--dark: #0B0E33;
  --md-primary-bg-color: #C9C2FF;
  --md-primary-bg-color--light: color-mix(in srgb, #C9C2FF 70%, transparent);
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-typeset-a-color: #C9C2FF !important;
  --md-accent-fg-color: #C9C2FF !important;
  --md-accent-fg-color--transparent: color-mix(in srgb, #C9C2FF 12%, transparent) !important;
  --md-accent-bg-color: #0B0E33 !important;
}

/* ---------- The ground ---------- */
/* The glow sits on a fixed layer behind everything, so it stays put while the page scrolls.
 * The body's own background (Material sets it to --md-default-bg-color) is the flat colour
 * under it and the colour of overscroll. */
body[data-md-color-primary="custom"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 100% 0%, var(--lda-glow-1), transparent 70%),
    radial-gradient(55vw 55vh at 0% 100%, var(--lda-glow-2), transparent 70%),
    var(--md-default-bg-color);
}

/* ---------- Type ---------- */
body[data-md-color-primary="custom"] {
  --md-text-font: "DM Sans";
  --md-code-font: "DM Mono";
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Baskervville", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--lda-lapis);
  letter-spacing: -0.01em;
}
.md-typeset h1 { font-size: 2.3em; line-height: 1.15; margin-bottom: 0.8em; }
.md-typeset h2 { font-size: 1.7em; line-height: 1.25; }
.md-typeset h3 { font-size: 1.35em; line-height: 1.35; }
/* Claim titles are sentences; at phone width the full size ran them to eight lines. */
@media screen and (max-width: 44.9375em) {
  .md-typeset h1 { font-size: 1.9em; }
}
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--lda-lapis);
}

/* Small labels in DM Mono, uppercase, where Material has them: the sidebar's section and
 * panel titles, the breadcrumb path, the footer and the long-tail header. Page links in the
 * nav stay in DM Sans, which reads better at length. */
.md-nav__title,
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-path,
.md-footer-meta,
.lt-header,
.lt-footer {
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.md-nav__title,
.md-nav--primary .md-nav__item--section > .md-nav__link {
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--lda-lapis);
}
.md-path { font-size: 0.58rem; }
/* Material gives the sticky sidebar titles a solid page-colour fill and a glow-shaped
 * shadow so links scroll under them; over the glow that read as a block. */
@media screen and (min-width: 76.25em) {
  .md-nav--secondary > .md-nav__title,
  .md-nav--primary > .md-nav__title,
  .md-nav__title {
    background: transparent;
    box-shadow: none;
  }
}

/* Hairline lapis rules in place of grey ones. */
.md-typeset hr {
  border-bottom-color: var(--lda-rule);
}

/* ---------- Header ---------- */
/* The page's own ground, translucent over the glow, with a hairline under it as on
 * learningdesignalliance.org; no coloured bar and no shadow. */
[data-md-color-primary="custom"] .md-header,
[data-md-color-primary="custom"] .lt-header {
  background-color: color-mix(in srgb, var(--md-default-bg-color) 86%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lda-rule);
  box-shadow: none;
}
/* The long-tail header's labels are smaller in DM Mono than the search field beside them, so
 * the row is a flex row, which centres them on it (the float on its form then does nothing). */
[data-md-color-primary="custom"] .lt-header {
  font-size: 0.68rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.4rem;
}

/* Logo only in the header, no adjacent site-name text: learningdesignalliance.org and
 * lazuli.design carry just the mark, and the landing page names the wiki below it. */
.md-header__title {
  display: none;
}

/* One clean header row: the logo on the left; search, the palette toggle and the
 * GitHub link as one cluster on the right. The search box is the Pagefind form
 * docs_hooks/two_tier.py inserts before the source link (the theme's own .md-search went
 * with lunr), so the rules that once placed .md-search placed nothing, and the toggle and
 * GitHub icon floated mid-header (maintainer, 2026-10-15). DOM order is toggle, search,
 * source; flex `order` puts search first and `margin-left: auto` pushes the cluster right. */
.lt-header-search {
  order: 1;
  margin: 0 0 0 auto;
  align-self: center;
}
.md-header__option {
  order: 2;
  margin-left: 0.4rem;
}
.md-header__source {
  order: 3;
  margin-left: 0.2rem;
  width: auto; /* Material reserves wide fixed width here for the repo name */
}

/* Icon-only GitHub link: the repo name text was as wide as the search box itself. */
.md-source__repository {
  display: none;
}

/* Search: a field with a visible lapis border and its own fill, so it reads as something
 * to type into against the header in both schemes. */
.lt-header-search input {
  font: inherit;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.7rem;
  width: 14rem;
  max-width: 34vw;
  padding: 0.3rem 0.55rem;
  border-radius: 0.2rem;
  border: 1px solid #122FB2;
  background: #FFFFFF;
  color: #0E1240;
}
.lt-header-search input::placeholder {
  color: color-mix(in srgb, #122FB2 75%, transparent);
}
.lt-header-search input:focus {
  outline: 2px solid color-mix(in srgb, #122FB2 45%, transparent);
  outline-offset: 1px;
}
[data-md-color-scheme="slate"] .lt-header-search input {
  background: #161A4A;
  border-color: #C9C2FF;
  color: #ECE9FF;
}
[data-md-color-scheme="slate"] .lt-header-search input::placeholder {
  color: color-mix(in srgb, #C9C2FF 85%, transparent);
}
[data-md-color-scheme="slate"] .lt-header-search input:focus {
  outline-color: color-mix(in srgb, #C9C2FF 60%, transparent);
}

/* The marks are single-colour lapis fills, so on the navy ground they would all but
 * disappear. lda-monogram-dawn.svg is the same paths in lavender #C9C2FF; `content: url()`
 * swaps the rendered image without touching the markup mkdocs generates (and without a
 * second <img> that a screen reader would read twice). Paths are relative to this file. */
[data-md-color-scheme="slate"] .md-logo img,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img,
[data-md-color-scheme="slate"] .lt-logo img {
  content: url("lda-monogram-dawn.svg");
}

/* The LDA monogram is wider than tall (96 x 62), so at Material's fixed 1.2rem logo height
 * it read as small type. A taller box keeps it legible beside the header controls. The
 * long-tail pages (build_longtail.py) carry the same mark at the same size, so the header
 * does not change as a reader moves between the two tiers. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg,
.lt-logo img {
  height: 1.7rem;
  width: auto;
}
.lt-logo img { display: block; }
.lt-header a.lt-logo {
  margin-right: 1rem;
}

/* ---------- Footer ---------- */
/* One small line of LDA links and the licence (mkdocs.yml `copyright`, which the long-tail
 * pages repeat), on the page's ground under a hairline. navigation.footer is off, so there
 * is no prev/next block; the rule keeps an empty one from showing if the theme renders it. */
.md-footer__inner {
  display: none;
}
[data-md-color-primary="custom"] .md-footer {
  background: transparent;
  border-top: 1px solid var(--lda-rule);
}
.md-footer-meta,
.lt-footer {
  font-size: 0.6rem;
  line-height: 1.8;
}
.md-copyright {
  color: var(--md-default-fg-color--light);
  font-size: inherit;
}
.md-copyright a,
.md-footer-meta.md-typeset .md-copyright a,
.lt-footer a {
  color: var(--lda-lapis);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.lda-footer-links {
  display: block;
}

/* scripts/build_longtail.py writes the same footer line under its pages. */
.lt-footer {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0.8rem 1.2rem 1.6rem;
  border-top: 1px solid var(--lda-rule);
  color: var(--md-default-fg-color--light);
}

/* The long-tail <main> centres itself with auto margins, which in Material's flex-column
 * body turns off stretching, so it took its content's width: at 390px a source URL, a
 * claim slug in code or a wide table pushed claim pages past the viewport (by 52px before
 * this file; DM Mono, wider than the system mono, made one 83px). A full width, capped by
 * the template's max-width, keeps it to the viewport; long words wrap and wide tables scroll
 * inside themselves, as on the curated pages. */
.lt-main {
  width: 100%;
}