/*
 * DearDoc brand theme for the wiki — shared by every tier.
 * Tokens follow the DearDoc brand guide: DM Sans, white base, charcoal
 * surface, dark-green accent, 8px radius, subtle shadows, smooth 0.4s motion.
 */

/* ---------- Brand tokens ---------- */

:root {
  --dd-green: #1B7A4A;
  --dd-green-dark: #14603A;
  --dd-green-light: #4FB883;   /* green on dark surfaces (7:1 on charcoal) */
  --dd-black: #0A0A0A;
  --dd-charcoal: #1A1A1A;
  --dd-muted: #3A3127;
  --dd-border: #CCCCCC;

  --dd-radius-sm: 4px;
  --dd-radius: 8px;
  --dd-radius-lg: 16px;
  --dd-duration: .4s;
  --dd-ease: cubic-bezier(.2, .7, .2, 1);
  --dd-button-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dd-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

  --md-text-font: "DM Sans";
  --md-code-font: "DM Mono";
}

/* Light */
[data-md-color-scheme="default"] {
  --dd-surface: #F6F7F6;
  --dd-hairline: #E5E5E5;
  --dd-tint: #E8F3EC;
  --dd-subtle: #6B6258;        /* placeholder text, 6:1 on white */
  --dd-link: var(--dd-green);

  --md-primary-fg-color: var(--dd-charcoal);
  --md-primary-fg-color--light: #2A2A2A;
  --md-primary-fg-color--dark: var(--dd-black);
  --md-primary-bg-color: #FFFFFF;
  --md-primary-bg-color--light: #FFFFFFB3;
  --md-accent-fg-color: var(--dd-green-dark);
  --md-accent-fg-color--transparent: #1B7A4A1A;
  --md-accent-bg-color: #FFFFFF;
  --md-accent-bg-color--light: #FFFFFFB3;

  --md-default-bg-color: #FFFFFF;
  --md-default-fg-color: var(--dd-black);
  --md-default-fg-color--light: var(--dd-muted);
  --md-default-fg-color--lighter: #3A312780;
  --md-default-fg-color--lightest: #3A31271A;
  --md-typeset-color: var(--dd-black);
  --md-typeset-a-color: var(--dd-link);
  --md-typeset-mark-color: #1B7A4A2E;
  --md-typeset-table-color: #0A0A0A1A;
  --md-typeset-table-color--light: #0A0A0A08;
  --md-code-bg-color: var(--dd-surface);
  --md-code-fg-color: #1F2328;
  --md-footer-bg-color: var(--dd-charcoal);
  --md-footer-bg-color--dark: #111111;

  --md-shadow-z1: 0 1px 2px #0A0A0A0F;
  --md-shadow-z2: 0 4px 16px #0A0A0A14, 0 1px 2px #0A0A0A0F;
  --md-shadow-z3: 0 12px 32px #0A0A0A1F, 0 2px 4px #0A0A0A14;
}

/* Dark — neutral charcoal instead of Material's blue slate */
[data-md-color-scheme="slate"] {
  --dd-surface: #1C1C1C;
  --dd-hairline: #FFFFFF1A;
  --dd-tint: #4FB8831F;
  --dd-subtle: #9A938A;
  --dd-link: var(--dd-green-light);

  --md-primary-fg-color: var(--dd-charcoal);
  --md-primary-fg-color--light: #2A2A2A;
  --md-primary-fg-color--dark: #0F0F0F;
  --md-primary-bg-color: #FFFFFF;
  --md-primary-bg-color--light: #FFFFFFB3;
  --md-accent-fg-color: #6FCF9C;
  --md-accent-fg-color--transparent: #4FB8831A;
  --md-accent-bg-color: #0A0A0A;

  --md-default-bg-color: #121212;
  --md-default-bg-color--light: #121212B3;
  --md-default-bg-color--lighter: #1212124D;
  --md-default-bg-color--lightest: #1212121F;
  --md-default-fg-color: #EDEDED;
  --md-default-fg-color--light: #B5AEA5;
  --md-default-fg-color--lighter: #B5AEA580;
  --md-default-fg-color--lightest: #FFFFFF14;
  --md-typeset-color: var(--md-default-fg-color);
  --md-typeset-a-color: var(--dd-link);
  --md-typeset-mark-color: #4FB88340;
  --md-typeset-table-color: #FFFFFF1F;
  --md-typeset-table-color--light: #FFFFFF08;
  --md-typeset-kbd-color: #FFFFFF1F;
  --md-typeset-kbd-accent-color: #FFFFFF33;
  --md-typeset-kbd-border-color: #121212;
  --md-code-bg-color: var(--dd-surface);
  --md-code-bg-color--light: #1C1C1CE6;
  --md-code-bg-color--lighter: #1C1C1C8A;
  --md-code-fg-color: #E3E3E3;
  --md-footer-bg-color: #0C0C0C;
  --md-footer-bg-color--dark: #080808;

  --md-shadow-z2: 0 4px 16px #00000066, 0 1px 2px #0000004D;
  --md-shadow-z3: 0 12px 32px #00000080, 0 2px 4px #0000004D;
}

::selection {
  background-color: #1B7A4A40;
}

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

.md-header--shadow {
  box-shadow: 0 1px 0 #FFFFFF14, 0 6px 20px #0A0A0A1F;
}

.md-header__button.md-logo img {
  height: 1.05rem;
}

/* Logo at the top of the mobile nav drawer */
.md-nav--primary .md-nav__title .md-nav__button.md-logo img {
  height: 1.3rem;
  width: auto;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Thin divider between the logo and the wiki name */
@media screen and (min-width: 76.25em) {
  .md-header__title {
    margin-left: .8rem;
    position: relative;
  }
  .md-header__title::before {
    background-color: #FFFFFF33;
    bottom: .75rem;
    content: "";
    left: -.6rem;
    position: absolute;
    top: .75rem;
    width: 1px;
  }
}

/* Page-load progress bar (navigation.instant.progress) */
.md-progress {
  background: var(--dd-green-light);
}

/* Search */
@media screen and (min-width: 60em) {
  .md-search__form {
    background-color: #FFFFFF14;
    border: 1px solid #FFFFFF1F;
    border-radius: var(--dd-radius);
    transition: background-color var(--dd-duration) var(--dd-ease),
      border-color var(--dd-duration) var(--dd-ease);
  }
  .md-search__form:hover {
    background-color: #FFFFFF1F;
    border-color: #FFFFFF38;
  }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-color: transparent;
    border-radius: var(--dd-radius) var(--dd-radius) 0 0;
  }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__output {
    border-radius: 0 0 var(--dd-radius) var(--dd-radius);
  }
}

.md-search-result__link:is(:focus, :hover),
.md-search-result__more > summary:is(:focus, :hover) > div {
  background-color: var(--dd-tint);
}

/* Sign in / sign out buttons, injected by assets/extra.js in production */
.dd-auth-btn {
  align-self: center;
  background: var(--dd-green);
  border: 1px solid var(--dd-green);
  border-radius: var(--dd-radius);
  color: #FFFFFF;
  font-family: var(--dd-button-font);
  font-size: .7rem;
  font-weight: 600;
  margin-left: .6rem;
  padding: .4em 1em;
  transition: background-color var(--dd-duration) var(--dd-ease),
    border-color var(--dd-duration) var(--dd-ease);
  white-space: nowrap;
}
.dd-auth-btn:is(:hover, :focus) {
  background: var(--dd-green-dark);
  border-color: var(--dd-green-dark);
  color: #FFFFFF;
}

/* ---------- Wiki switcher (overrides/partials/wikis.html) ---------- */

.dd-wikis {
  background-color: var(--md-primary-fg-color);
  border-top: 1px solid #FFFFFF14;
}

.dd-wikis__inner {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  padding: 0 .8rem;
  scrollbar-width: none;
}

.dd-wikis__link {
  border-bottom: 2px solid transparent;
  color: #FFFFFFA6;
  font-size: .7rem;
  font-weight: 600;
  padding: .55rem 0 .45rem;
  transition: color var(--dd-duration) var(--dd-ease),
    border-color var(--dd-duration) var(--dd-ease);
  white-space: nowrap;
}
.dd-wikis__link:is(:hover, :focus) {
  color: #FFFFFF;
}
.dd-wikis__link--active {
  border-bottom-color: var(--dd-green-light);
  color: #FFFFFF;
}
.dd-wikis__link:focus-visible {
  outline: 2px solid var(--dd-green-light);
  outline-offset: 2px;
}
@media screen and (max-width: 29.984375em) {
  .dd-wikis__inner {
    gap: .9rem;
  }
  .dd-wikis__link {
    font-size: .65rem;
  }
}

/* ---------- Navigation ---------- */

/* Small uppercase labels (brand h4 style) */
.dd-eyebrow,
.md-nav--secondary > .md-nav__title,
.md-typeset h2#in-this-section {
  color: var(--md-default-fg-color--light);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.md-nav__link {
  transition: color var(--dd-duration) var(--dd-ease),
    background-color var(--dd-duration) var(--dd-ease);
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  font-weight: 600;
}

@media screen and (min-width: 76.25em) {
  /* Wiki name at the top of the sidebar */
  .md-nav--primary > .md-nav__title {
    color: var(--md-default-fg-color);
    font-weight: 800;
    letter-spacing: -.01em;
  }

  /* Compact rows; the current page gets a soft green pill */
  .md-sidebar--primary .md-nav__link {
    border-radius: var(--dd-radius-sm);
    margin-left: -.4rem;
    margin-top: .1rem;
    padding: .25rem .4rem;
  }
  /* Section rows wrap their link + toggle in a container that carries the spacing */
  .md-sidebar--primary .md-nav__container {
    padding-block: 0;
  }
  .md-sidebar--primary .md-nav__container > .md-nav__link {
    margin: 0;
    padding-left: 0;
  }
  .md-sidebar--primary .md-nav__link--active:not(.md-nav__container > *),
  .md-sidebar--primary .md-nav__container:has(> .md-nav__link--active) {
    background-color: var(--dd-tint);
  }
  .md-sidebar--primary .md-nav__link:not(.md-nav__container, .md-nav__container > *, .md-nav__link--active):hover,
  .md-sidebar--primary .md-nav__container:not(:has(> .md-nav__link--active)):hover {
    background-color: var(--md-default-fg-color--lightest);
  }

  /* Guide line for nested sections */
  .md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__list {
    border-left: 1px solid var(--dd-hairline);
    margin-left: .2rem;
    padding-left: .4rem;
  }
}

/* Table of contents: active heading gets a green marker */
@media screen and (min-width: 60em) {
  .md-nav--secondary > .md-nav__list {
    border-left: 1px solid var(--dd-hairline);
  }
  .md-nav--secondary .md-nav__link {
    border-left: 2px solid transparent;
    margin-left: -1px;
    padding-left: .6rem;
  }
  .md-nav--secondary .md-nav__link--active {
    border-left-color: var(--dd-link);
  }
  .md-nav--secondary .md-nav .md-nav__link {
    padding-left: 1.2rem;
  }
}

/* Breadcrumbs (navigation.path) */
.md-path {
  font-size: .65rem;
}
.md-path__link:is(:hover, :focus) {
  color: var(--dd-link);
}

/* ---------- Content ---------- */

.md-typeset {
  line-height: 1.7;
}

.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-size: 2.2em;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: .9em;
}

.md-typeset h2 {
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 2em 0 .7em;
}

.md-typeset h3 {
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.md-typeset h4 {
  font-weight: 700;
}

.md-typeset .headerlink {
  color: var(--md-default-fg-color--lighter);
}
.md-typeset .headerlink:is(:hover, :focus),
.md-typeset :target > .headerlink {
  color: var(--dd-link);
}

/* Links: soft underline that firms up on hover */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--dd-duration) var(--dd-ease),
    text-decoration-color var(--dd-duration) var(--dd-ease);
}
.md-typeset a:is(:hover, :focus) {
  text-decoration-color: currentColor;
}
.md-typeset a:is(.headerlink, .md-button, .md-content__button, .footnote-ref, .footnote-backref) {
  text-decoration: none;
}
.md-typeset a:focus-visible,
.dd-auth-btn:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--dd-link);
  outline-offset: 2px;
}

/* Edit / view icons next to the title */
.md-typeset .md-content__button {
  color: var(--md-default-fg-color--lighter);
  transition: color var(--dd-duration) var(--dd-ease);
}
.md-typeset .md-content__button:is(:hover, :focus) {
  color: var(--dd-link);
}

.md-typeset blockquote {
  border-left: 3px solid var(--dd-link);
  color: var(--md-default-fg-color--light);
}

.md-typeset hr {
  border-bottom-color: var(--dd-hairline);
}

.md-typeset img {
  border-radius: var(--dd-radius);
}

/* Code */
.md-typeset code {
  border-radius: var(--dd-radius-sm);
}
.md-typeset pre {
  border-radius: var(--dd-radius);
}
.md-typeset pre > code {
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-radius);
}

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-radius);
  font-size: .7rem;
}
.md-typeset table:not([class]) th {
  background-color: var(--dd-surface);
  font-weight: 600;
}

/* Buttons (brand: system font, 15px, 600) */
.md-typeset .md-button {
  border: 1px solid var(--dd-link);
  border-radius: var(--dd-radius);
  color: var(--dd-link);
  font-family: var(--dd-button-font);
  font-size: .75rem;
  font-weight: 600;
  padding: .55em 1.3em;
  transition: color var(--dd-duration) var(--dd-ease),
    background-color var(--dd-duration) var(--dd-ease),
    border-color var(--dd-duration) var(--dd-ease);
}
.md-typeset .md-button--primary {
  background-color: var(--dd-green);
  border-color: var(--dd-green);
  color: #FFFFFF;
}
.md-typeset .md-button:is(:hover, :focus) {
  background-color: var(--dd-green-dark);
  border-color: var(--dd-green-dark);
  color: #FFFFFF;
}

/* ---------- Callouts ---------- */

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--dd-radius);
  border-width: 1px;
  box-shadow: none;
  font-size: .72rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  border-top-left-radius: calc(var(--dd-radius) - 1px);
  border-top-right-radius: calc(var(--dd-radius) - 1px);
  font-weight: 600;
}
.md-typeset details:not([open]) > summary {
  border-radius: calc(var(--dd-radius) - 1px);
}

/* note / info: neutral charcoal, so green stays meaningful */
.md-typeset :is(.admonition, details):is(.note, .info) {
  border-color: var(--dd-border);
}
.md-typeset :is(.note, .info) > :is(.admonition-title, summary) {
  background-color: var(--dd-surface);
}
.md-typeset :is(.note, .info) > :is(.admonition-title, summary)::before {
  background-color: var(--md-default-fg-color);
}
[data-md-color-scheme="slate"] .md-typeset :is(.admonition, details):is(.note, .info) {
  border-color: #FFFFFF2E;
}

/* success / tip: brand green */
.md-typeset :is(.admonition, details):is(.success, .tip) {
  border-color: var(--dd-link);
}
.md-typeset :is(.success, .tip) > :is(.admonition-title, summary) {
  background-color: var(--dd-tint);
}
.md-typeset :is(.success, .tip) > :is(.admonition-title, summary)::before {
  background-color: var(--dd-link);
}

/* ---------- Section listings ("In this section", from rebuild_indexes.py) ---------- */

.md-typeset h2#in-this-section {
  margin-top: 2.5em;
}

.md-typeset h2#in-this-section + ul {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset h2#in-this-section + ul > li {
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-radius);
  margin: 0;
  transition: border-color var(--dd-duration) var(--dd-ease),
    box-shadow var(--dd-duration) var(--dd-ease),
    transform var(--dd-duration) var(--dd-ease);
}

.md-typeset h2#in-this-section + ul > li > a {
  align-items: center;
  color: var(--md-default-fg-color);
  display: flex;
  font-weight: 600;
  gap: .6rem;
  height: 100%;
  justify-content: space-between;
  line-height: 1.4;
  padding: .7rem .9rem;
  text-decoration: none;
}

.md-typeset h2#in-this-section + ul > li > a::after {
  background-color: currentColor;
  content: "";
  flex: none;
  height: .9rem;
  -webkit-mask: var(--dd-arrow-icon) center / contain no-repeat;
  mask: var(--dd-arrow-icon) center / contain no-repeat;
  opacity: .35;
  transition: opacity var(--dd-duration) var(--dd-ease),
    transform var(--dd-duration) var(--dd-ease);
  width: .9rem;
}

.md-typeset h2#in-this-section + ul > li:is(:hover, :focus-within) {
  border-color: var(--dd-link);
  box-shadow: var(--md-shadow-z2);
  transform: translateY(-2px);
}

.md-typeset h2#in-this-section + ul > li:is(:hover, :focus-within) > a {
  color: var(--dd-link);
}

.md-typeset h2#in-this-section + ul > li:is(:hover, :focus-within) > a::after {
  opacity: 1;
  transform: translateX(2px);
}

/* Pages nobody has written yet (hooks/placeholders.py) */
.md-typeset h2#in-this-section + ul > li:has(> a.dd-unwritten) {
  background-color: transparent;
  border-style: dashed;
}
.md-typeset h2#in-this-section + ul > li > a.dd-unwritten {
  color: var(--dd-subtle);
  font-weight: 500;
}
.md-typeset h2#in-this-section + ul > li > a.dd-unwritten::after {
  background: none;
  content: "Not written yet";
  font-size: .55rem;
  font-weight: 600;
  height: auto;
  letter-spacing: .04em;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  text-transform: uppercase;
  transform: none;
  white-space: nowrap;
  width: auto;
}

:root {
  --md-status--empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='3 3.3'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
}
.md-status--empty::after {
  -webkit-mask-image: var(--md-status--empty);
  mask-image: var(--md-status--empty);
}
.md-nav__link:has(> .md-status--empty) {
  color: var(--dd-subtle);
}

/* ---------- Page footer ---------- */

/* "Last update / Created" line */
.md-source-file {
  border-top: 1px solid var(--dd-hairline);
  color: var(--md-default-fg-color--light);
  margin-top: 3em;
  padding-top: 1em;
}

.md-footer__link {
  transition: opacity var(--dd-duration) var(--dd-ease);
}
.md-footer__link:is(:hover, :focus) .md-footer__title {
  color: var(--dd-green-light);
}

.md-copyright {
  color: var(--md-footer-fg-color--lighter);
}

/* ---------- 404 ---------- */

.dd-not-found {
  margin: 3rem 0 4rem;
  max-width: 32rem;
}
.md-typeset .dd-not-found .dd-eyebrow {
  color: var(--dd-link);
  margin: 0 0 .4em;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .md-typeset h2#in-this-section + ul > li,
  .md-typeset h2#in-this-section + ul > li > a::after {
    transform: none !important;
    transition: none;
  }
}