/* ==========================================================================
   DRS Wiki — Direction C: Editorial x Portal
   Serif headings (Source Serif 4), Inter body, palette derived from goadrs.com
   --------------------------------------------------------------------------
   Palette source: goadrs.com computed styles, read 3 Aug 2026
     blue-600  #2563eb   nav gradient start
     green-600 #16a34a   nav gradient end
     teal-600  #0d9488   accent / links / active state
     slate-950 #020817   body text
     slate-700 #334155   secondary text
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
  /* brand */
  --drs-blue:    #2563eb;
  --drs-green:   #16a34a;
  --drs-teal:    #0d9488;
  --drs-teal-dk: #0b7268;
  --drs-ink:     #14312b;
  --drs-body:    #33403b;
  --drs-muted:   #6b7671;
  --drs-line:    #e8e6e1;
  --drs-paper:   #fdfdfc;
  --drs-tint:    #f2faf8;

  /* fonts */
  --drs-serif: "Source Serif 4", Georgia, "Iowan Old Style", serif;

  /* Material overrides */
  --md-primary-fg-color:       var(--drs-teal);
  --md-primary-fg-color--dark: var(--drs-teal-dk);
  --md-accent-fg-color:        var(--drs-teal);
  --md-typeset-a-color:        var(--drs-teal);
  --md-default-bg-color:       var(--drs-paper);
}

/* ---------- 1. The gradient rule -------------------------------------- */
/* goadrs.com's signature blue->green, reduced to a 4px band at the top    */
.md-header {
  background: #ffffff;
  color: var(--drs-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--drs-line);
}
.md-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(to right, var(--drs-blue), var(--drs-green));
}
.md-header__title { font-family: var(--drs-serif); font-size: 1.05rem; letter-spacing: -0.01em; }
.md-header__button.md-logo :is(img, svg) { fill: var(--drs-ink); }
.md-header .md-search__input { background: #fbfbf9; border: 1px solid #e2e0da; border-radius: 8px; }
.md-header .md-search__input::placeholder { color: #98a29e; }
.md-tabs { background: #fff; color: var(--drs-ink); border-bottom: 1px solid var(--drs-line); }

/* ---------- 2. Typography --------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--drs-serif);
  color: var(--drs-ink);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.md-typeset h1 { font-size: 2.1rem; line-height: 1.16; margin-bottom: .5rem; }
.md-typeset h2 { font-size: 1.42rem; margin-top: 2.1em; letter-spacing: -0.015em; }
.md-typeset h3 { font-size: 1.14rem; font-weight: 600; }

.md-typeset { font-size: .78rem; line-height: 1.72; color: var(--drs-body); }
.md-typeset p { margin: 0 0 .9em; }

/* Opening paragraph of a page reads as a lede */
.md-typeset h1 + p {
  font-size: .90rem;
  line-height: 1.62;
  color: var(--drs-ink);
}

/* Comfortable measure for prose; tables and code may exceed it */
.md-content__inner { max-width: 46rem; }
.md-typeset table:not([class]),
.md-typeset pre { max-width: none; }

/* Section kicker above the H1, fed by the `section` frontmatter field */
.drs-kicker {
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--drs-teal);
  font-weight: 700;
  margin-bottom: .7rem;
}

/* ---------- 3. Navigation --------------------------------------------- */
.md-nav { font-size: .68rem; }
.md-nav__title { font-size: .58rem; text-transform: uppercase; letter-spacing: .13em; color: #a0a8a4; font-weight: 700; }
.md-nav__link { color: #4a544f; }
.md-nav__link:is(:focus, :hover) { color: var(--drs-teal); }
.md-nav__list .md-nav__link--active,
.md-nav__list .md-nav__link[aria-current] {
  color: var(--drs-teal) !important;
  font-weight: 600;
  background: var(--drs-tint);
  box-shadow: inset 2px 0 0 var(--drs-teal);
  border-radius: 0 6px 6px 0;
  padding-left: .5rem;
  margin-left: -.1rem;
}
.md-sidebar--primary { border-right: 1px solid var(--drs-line); }
.md-sidebar--secondary { border-left: 1px solid var(--drs-line); }

/* ---------- 4. Review banner ------------------------------------------ */
.drs-review {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  font-size: .62rem;
  color: #5e6b66;
  border-radius: 8px;
  padding: .45rem .7rem;
  margin: 0 0 1.6rem;
  border: 1px solid var(--drs-line);
  background: #fbfbf9;
}
.drs-review b { color: var(--drs-ink); font-weight: 600; }
.drs-review__pill {
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .18rem .42rem;
  border-radius: 6px;
  color: #fff;
  background: var(--drs-muted);
}
/* draft — amber, borrowed from the portal's notice strip */
.drs-review--draft { background: #fffbeb; border-color: #fde9a8; }
.drs-review--draft .drs-review__pill { background: #d97706; }
/* current — verified */
.drs-review--current { background: var(--drs-tint); border-color: #cceae4; }
.drs-review--current .drs-review__pill { background: var(--drs-teal); }
/* superseded */
.drs-review--superseded { background: #fef2f2; border-color: #fecaca; }
.drs-review--superseded .drs-review__pill { background: #b91c1c; }
/* stale — set by the freshness check when last_reviewed is too old */
.drs-review--stale { background: #fff7ed; border-color: #fed7aa; }
.drs-review--stale .drs-review__pill { background: #ea580c; }

/* ---------- 5. Components --------------------------------------------- */
.md-typeset table:not([class]) {
  font-size: .68rem;
  border: 1px solid var(--drs-line);
  border-radius: 8px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: #f7f7f4;
  font-family: -apple-system, "Inter", system-ui, sans-serif;
  font-weight: 650;
  color: var(--drs-ink);
  font-size: .64rem;
  letter-spacing: .01em;
}
.md-typeset blockquote {
  border-left: 2px solid var(--drs-teal);
  color: var(--drs-muted);
  font-family: var(--drs-serif);
  font-size: .84rem;
}
.md-typeset code { border-radius: 4px; font-size: .84em; }
.md-typeset .admonition { border-radius: 8px; border-width: 1px; font-size: .70rem; }
.md-footer { background: var(--drs-ink); }
.md-footer-meta { background: #0d2620; }


/* ---------- 7. Page order --------------------------------------------- */
/* Material emits our kicker + banner above the H1 because the H1 comes
   from the Markdown body. Flex ordering puts them back where they belong:
   kicker, title, banner, prose.                                          */
.md-content__inner { display: flex; flex-direction: column; }
.md-content__inner > .drs-kicker { order: -2; }
.md-content__inner > h1 { order: -1; }
.md-content__inner > .drs-review { order: 0; margin-top: .2rem; }

/* The lede: first paragraph after the title reads as intro, not shouting.
   Neutralises a **bold** wrapper if the source Markdown has one.          */
.md-typeset h1 + p strong,
.md-content__inner > .drs-review + p strong {
  font-weight: 400;
}

/* ---------- 6. Dark mode ---------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #10201d;
  --drs-ink: #e8f0ed;
  --drs-body: #c2cfcb;
  --drs-line: #233833;
  --drs-tint: #16302b;
  --md-typeset-a-color: #45c9b6;
}
[data-md-color-scheme="slate"] .md-header { background: #10201d; color: var(--drs-ink); }
[data-md-color-scheme="slate"] .md-typeset :is(h1,h2,h3,h4) { color: var(--drs-ink); }
[data-md-color-scheme="slate"] .drs-review { background: #162622; border-color: #233833; color: #9fb2ad; }

/* Page status icons in the navigation (Material has no config hook for these) */
.md-status--current::after { -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m23%2012-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12%202.96%208.6%201.5%206.71%204.69%203.1%205.5l.34%203.7L1%2012l2.44%202.79-.34%203.7%203.61.82L8.6%2022.5l3.4-1.47%203.4%201.46%201.89-3.19%203.61-.82-.34-3.69zm-13%205-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m23%2012-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12%202.96%208.6%201.5%206.71%204.69%203.1%205.5l.34%203.7L1%2012l2.44%202.79-.34%203.7%203.61.82L8.6%2022.5l3.4-1.47%203.4%201.46%201.89-3.19%203.61-.82-.34-3.69zm-13%205-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209z%22/%3E%3C/svg%3E'); }
.md-status--current::after { background-color: var(--drs-teal, #00897b); }



/* Draft pages are labelled in the navigation rather than iconified — the word
   reads at a glance where a glyph needs learning. */
.md-status--draft::after {
  content: "(draft)";
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
  color: var(--md-default-fg-color--light);
  font-style: italic;
  font-size: 0.8em;
  font-weight: 400;
  width: auto;
  height: auto;
  margin-left: 0.15em;
  vertical-align: baseline;
  white-space: nowrap;
}
.md-status--draft:hover::after { background-color: transparent; color: currentcolor; }
.md-status--superseded::after {
  content: "(superseded)";
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
  color: var(--md-default-fg-color--light);
  font-style: italic;
  font-size: 0.8em;
  font-weight: 400;
  width: auto;
  height: auto;
  margin-left: 0.15em;
  vertical-align: baseline;
  white-space: nowrap;
}
.md-status--superseded:hover::after { background-color: transparent; color: currentcolor; }

/* ---------------------------------------------------------------------------
   Wide-screen layout.
   Material caps the whole grid at 61rem, so on a large display the nav, the
   text and the table of contents are crammed into the middle third of the
   screen. Widen the grid, push both sidebars to the edges, and let everything
   in the content column — prose included — use the full width.

   Long lines need more leading and slightly larger type to stay readable, so
   both are raised at these breakpoints.
   --------------------------------------------------------------------------- */

/* Material sets `width: fit-content` on figures, which collapses an inline SVG
   to a fraction of the column. Let diagrams fill the width they are given. */
.md-typeset figure { width: 100%; }
.md-typeset figure > svg { width: 100%; height: auto; }

@media screen and (min-width: 76.25em) {
  .md-grid { max-width: 78rem; }

  .md-sidebar--primary { width: 13rem; }
  .md-sidebar--secondary { width: 12.5rem; }

  .md-content__inner {
    max-width: none;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  /* Nothing is held back — prose matches tables, figures and admonitions. */
  .md-content__inner > * { max-width: none; }

  .md-typeset { font-size: .82rem; line-height: 1.75; }
}

@media screen and (min-width: 100em) {
  .md-grid { max-width: 86rem; }
  .md-typeset { font-size: .84rem; line-height: 1.8; }
}