/* Profound Collective brand palette
 *
 * Treats green as an ACCENT, not a background:
 *   - Header / nav background: near-black (matches profoundcollective.com's nav)
 *   - Links, buttons, focus rings: Tailwind green-600 (#16a34a) / green-500 (#22c55e)
 *
 * This keeps the white "PROFOUND" wordmark legible on the header bar.
 */

:root {
  --pc-green-500: #22c55e;
  --pc-green-600: #16a34a;
  --pc-green-700: #15803d;
  --pc-ink:       #0b1220;
  --pc-ink-2:     #111827;
}

/* ---------------------------------------------------------------------------
 * Scheme-aware semantic variables
 *
 * Both schemes keep the near-black brand header (matching profoundcollective.com)
 * and the green accent. What flips between them is the reading surface: the dark
 * `slate` scheme is the original design; the light `default` scheme is a warm
 * "paper" surface for comfortable long-form reading.
 *
 * The component rules further down reference these vars instead of hardcoding
 * colors, so a value like a heading or a hairline rule resolves correctly in
 * whichever scheme is active. Anything hardcoded to white/black would otherwise
 * vanish in the opposite scheme.
 *   --pc-heading          headings & sidebar labels (was hardcoded #fff)
 *   --pc-rule             hairline section dividers (was rgba(255,255,255,.08))
 *   --pc-gloss-underline  glossary dotted underline (was rgba(255,255,255,.35))
 *   --pc-code-bg          inline build-stamp code background
 *   --pc-switcher-*       appearance pill styling
 * ------------------------------------------------------------------------- */

/* Dark scheme — the original design. */
[data-md-color-scheme="slate"] {
  /* Header / top bar */
  --md-primary-fg-color:         var(--pc-ink);
  --md-primary-fg-color--light:  var(--pc-ink-2);
  --md-primary-fg-color--dark:   #05080f;
  --md-primary-bg-color:         #ffffff;
  --md-primary-bg-color--light:  #ffffffcc;

  /* Accents: links, focus, interactive */
  --md-accent-fg-color:              var(--pc-green-500);
  --md-accent-fg-color--transparent: rgba(34, 197, 94, 0.12);
  --md-typeset-a-color:              var(--pc-green-500);

  /* Semantic (see block comment above) */
  --pc-heading:          #ffffff;
  --pc-rule:             rgba(255, 255, 255, 0.08);
  --pc-gloss-underline:  rgba(255, 255, 255, 0.35);
  --pc-code-bg:          rgba(255, 255, 255, 0.06);
  --pc-search-hl:        rgba(34, 197, 94, 0.10);

  --pc-switcher-bg:        var(--md-default-bg-color);
  --pc-switcher-track:     rgba(255, 255, 255, 0.06);
  --pc-switcher-border:    rgba(255, 255, 255, 0.10);
  --pc-switcher-fg-muted:  rgba(255, 255, 255, 0.55);
}

/* Light scheme — warm "paper" reading surface. */
[data-md-color-scheme="default"] {
  /* Header / top bar: stays near-black so the white wordmark/logo remain
   * legible, exactly as in dark mode. */
  --md-primary-fg-color:         var(--pc-ink);
  --md-primary-fg-color--light:  var(--pc-ink-2);
  --md-primary-fg-color--dark:   #05080f;
  --md-primary-bg-color:         #ffffff;
  --md-primary-bg-color--light:  #ffffffcc;

  /* Warm paper surface + warm ink prose. The sidebar gets a slightly deeper
   * warm tone (--pc-sidebar-bg) so the nav reads as a distinct column. */
  --md-default-bg-color:         #faf8f3;
  --md-typeset-color:            #2a2620;

  /* Accents: shift one step darker than dark mode (green-600/700) for adequate
   * contrast against the light surface. */
  --md-accent-fg-color:              var(--pc-green-600);
  --md-accent-fg-color--transparent: rgba(22, 163, 74, 0.12);
  --md-typeset-a-color:              var(--pc-green-700);

  /* Semantic (see block comment above) */
  --pc-heading:          #2a2620;
  --pc-rule:             rgba(0, 0, 0, 0.10);
  --pc-gloss-underline:  rgba(0, 0, 0, 0.40);
  --pc-code-bg:          rgba(0, 0, 0, 0.06);
  --pc-search-hl:        rgba(22, 163, 74, 0.10);

  --pc-switcher-bg:        var(--md-default-bg-color);
  --pc-switcher-track:     rgba(0, 0, 0, 0.05);
  --pc-switcher-border:    rgba(0, 0, 0, 0.10);
  --pc-switcher-fg-muted:  rgba(0, 0, 0, 0.50);
}

/* The sidebars share the page's reading surface — no separate column tint.
 * (An earlier attempt to tint the sidebar only painted Material's 48px-tall
 * sticky .md-sidebar box at the top; the chapter list overflows that box and
 * shows the page background, so a tint produced a mismatched band rather than
 * a uniform column. A single surface plus the hairline separators below is
 * cleaner and side-steps the framework's sticky/overflow structure.)
 *
 * Material's sticky sidebar titles (the book title above the left nav and the
 * "Table of contents" header on the right) ship a masking box-shadow whose 8px
 * spread spilled past the sidebar's left edge (the "notches"), bled under the
 * scrollbar on the right, and faded out below the title. The titles already
 * have an opaque background (the page surface) that masks content scrolling
 * beneath them, so we drop the shadow entirely and separate each title from
 * its list with a clean hairline rule instead. */
.md-sidebar--primary .md-nav--primary > .md-nav__title,
.md-sidebar--secondary .md-nav__title {
  box-shadow: none;
  border-bottom: 1px solid var(--pc-rule);
}

/* Desktop: confine the sidebar scrollbar to the chapter list. By default
 * Material scrolls the whole .md-sidebar__scrollwrap, so its scrollbar runs the
 * full column height — over the sticky title at the top and the appearance pill
 * at the bottom. Instead we make the nav a flex column whose chapter list is
 * the scroll container, with the title pinned above it and the pill below it
 * (both outside the scroll), so the scrollbar spans only the list.
 *
 * Scoped to the desktop breakpoint: the mobile drawer uses a different,
 * transform-based sliding nav structure that this flex layout would disrupt.
 * 76.25em matches Material's own sidebar breakpoint. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .md-sidebar--primary .md-sidebar__inner,
  .md-sidebar--primary .md-nav--primary {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* The chapter list is the only scrolling element. Give it Material's thin,
   * themed scrollbar (Material only styles .md-sidebar__scrollwrap, so without
   * this the list would fall back to the chunky default scrollbar). It sits
   * flush between the title and the (now non-sticky) pill, so the scrollbar
   * runs edge-to-edge of the visible scroll frame with no gap. */
  .md-sidebar--primary .md-nav--primary > .md-nav__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--md-default-fg-color--lighter) transparent;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.3rem;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list::-webkit-scrollbar-thumb {
    background-color: var(--md-default-fg-color--lighter);
    border-radius: 0.3rem;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list::-webkit-scrollbar-thumb:hover {
    background-color: var(--md-accent-fg-color);
  }
  /* Title and pill keep their natural height, fixed above/below the scroll. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title,
  .md-sidebar--primary .md-nav--primary > .pc-theme-switcher {
    flex: 0 0 auto;
  }
  /* Give the book title breathing room above its divider. Material ships the
   * title with zero vertical padding, so the hairline hugged the text — out of
   * step with the section dividers and the footer pill, which both sit on a
   * clear gap. (Desktop only; the mobile drawer banner sets its own padding.) */
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    padding-bottom: 0.8rem;
  }
  /* On desktop the pill is a plain flex footer; drop the sticky positioning
   * (only needed in the mobile drawer) so the list's bottom margin creates a
   * real gap, insetting the scrollbar from the pill. */
  .md-sidebar--primary .md-nav--primary > .pc-theme-switcher {
    position: static;
  }
}

/* Logo sizing: keep proportions reasonable in the header */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  width: auto;
}

/* Brand-consistent search highlights */
.md-search__input:focus,
.md-search__input:hover {
  background-color: var(--pc-search-hl);
}

/* Modest bump to prose. mkdocs-material's default is 0.8rem (~12.8px),
 * which feels small for a prose-heavy guide. 0.85rem (~13.6px) is a
 * meaningful step up without forcing line-length renegotiation. Most
 * other sizes (headings, admonition titles, code, tables) are
 * expressed in em relative to .md-typeset, so they scale with this. */
.md-typeset {
  font-size: 0.85rem;
}

/* Page title (h1): Material's default is font-weight 300 (light), which
 * reads as visually subordinate to the bold uppercase section labels in
 * the sidebar. Heavier weight and full white restores the page title as
 * the dominant element in the visual hierarchy. */
.md-typeset h1 {
  font-weight: 600;
  color: var(--pc-heading);
  /* Material's defaults (line-height ~1.3, margin-bottom 1.25em) leave a large,
   * title-length-dependent gap between the title and the body — pronounced when
   * a long title wraps to two lines. Tighten both so the top reads consistently. */
  line-height: 1.2;
  margin-bottom: 0.7em;
}
/* No permalink "¶" on the page title: it isn't useful there (the page URL is the
 * link), and on a long title it wraps onto its own line — doubling the title's
 * height and inflating the gap below it. Section headings (h2–h6) keep theirs. */
.md-typeset h1 .headerlink { display: none; }

/* Build-stamp footer line: smaller, muted, monospace SHA */
.md-copyright__buildinfo {
  margin-top: 0.2rem;
  font-size: 0.62rem;
  opacity: 0.7;
}
.md-copyright__buildinfo code {
  font-size: 0.62rem;
  padding: 0 0.25em;
  background-color: var(--pc-code-bg);
  border-radius: 2px;
}

/* Tooltips (Material's content.tooltips, "tooltips2"). The visible card is
 * .md-tooltip2__inner; its defaults are a tight, bold 10px bubble with a faint
 * shadow. This styling applies to ALL tooltips (glossary definitions plus the
 * permalink, code-copy, and nav tooltips) — Material renders them as identical
 * body-level elements with no source marker, so they can't be styled
 * separately. So we keep it tasteful at both extremes: regular-weight,
 * readable text with room to breathe, and a modest scheme-aware border + shadow
 * that lifts a multi-sentence glossary card off the page without bloating a
 * two-word UI tooltip. */
.md-tooltip2__inner.md-typeset {
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.5rem 0.7rem;
  border-radius: 0.25rem;
  max-width: 22rem;
}
[data-md-color-scheme="default"] .md-tooltip2__inner {
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12);
}
[data-md-color-scheme="slate"] .md-tooltip2__inner {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

/* Book title above the left sidebar nav (Material renders this in
 * the primary nav as a .md-nav__title). The default color is heavily
 * muted (~56% opacity light gray); bumping to full white at a slightly
 * larger size restores it as the visual root of the sidebar hierarchy.
 *
 * Our JS wraps the title text in an <a class="md-book-title-link"> so
 * clicking it returns to the Home page; the styling below makes that
 * anchor look like the surrounding label rather than a default link. */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  color: var(--pc-heading);
  font-size: 1.05em;
}
.md-sidebar--primary .md-nav--primary > .md-nav__title a.md-book-title-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.md-sidebar--primary .md-nav--primary > .md-nav__title a.md-book-title-link:hover {
  color: var(--md-accent-fg-color);
}

/* Space the first nav item ("Home") away from the book title, mirroring the
 * breathing room above the section dividers further down the list. Without it
 * the title's hairline sits right on top of the first link. */
.md-sidebar--primary .md-nav--primary > .md-nav__list {
  padding-top: 0.9em;
}

/* Top-level section labels in the left sidebar (Foundations,
 * Engineering, etc.): uppercase, letter-spaced, bolder, with extra
 * breathing room above each section so the groups of chapters read
 * as distinct blocks rather than one long list. A faint top rule
 * separates each section block, and the label color is pushed to
 * full white so the headers visually outrank the chapter links. */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section {
  margin-top: 1.4em;
  padding-top: 1em;
  border-top: 1px solid var(--pc-rule);
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section:first-of-type {
  margin-top: 0.4em;
  padding-top: 0;
  border-top: none;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85em;
  color: var(--pc-heading);
  opacity: 1;
  cursor: pointer;
}
/* Material sets pointer-events: none on nested-section labels so clicks
 * pass through to the toggle checkbox. Our JS replaces those labels with
 * real anchors, so we have to re-enable pointer events on them (and on
 * their descendants, e.g. the ellipsis span and the expand-icon span). */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section > a.md-nav__link,
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section > a.md-nav__link * {
  pointer-events: auto;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

/* Mobile drawer headers. Material's nested-nav titles default to a very tall
 * header (~112px: 60px top padding + a 48px line) with the back arrow stacked
 * above the title — far too big on a phone. Compact them to a single ~one-row
 * header with the back arrow vertically centered to the left of the title. */
@media screen and (max-width: 76.1875em) {
  /* Lay the header out as a flex row so the back arrow and the title text are
   * vertically centered together on one line — absolutely positioning the icon
   * left it misaligned with the text by a few px. */
  .md-sidebar--primary .md-nav__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: auto;
    padding: 0.7rem 0.8rem;
    line-height: 1.3;
    font-size: 0.95rem;
  }
  .md-sidebar--primary .md-nav__title .md-nav__icon {
    position: static;
    transform: none;
    margin: 0;
    flex: 0 0 auto;
  }

  /* The primary drawer banner (top of the open drawer) carries the logo +
   * book title rather than a back arrow. Material ships that logo as an
   * absolutely-positioned 64px-tall block — a full-width banner background —
   * which overflows our compacted ~48px title bar: its bottom is clipped by
   * the bar's overflow:hidden (the "cut off" logo) and, being out of flow, it
   * collides with the title text stacked underneath. Pull the logo back into
   * the flex row and size it to the bar so the logo and title sit side by side
   * on one line, like a continuation of the page header above. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    gap: 0.6rem;
    /* Tighter than the nested back-arrow titles so the 1.8rem logo row stays
     * within one compact bar (header logo height + this padding + the hairline
     * border below). */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__title a.md-logo {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__title a.md-logo img,
  .md-sidebar--primary .md-nav--primary > .md-nav__title a.md-logo svg {
    height: 1.8rem;
    width: auto;
  }
  /* Drop the book title text from the drawer banner. The full title never fits
   * on one line beside the logo in the ~242px drawer (it truncated to "Modern
   * Software Produc…"), and on the paper scheme its dark page-heading color sat
   * dark-on-dark against the banner's near-black bar. The page header already
   * shows the full title, so the banner just carries the logo as the brand mark. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title a.md-book-title-link {
    display: none;
  }

  /* Even, tight rhythm for the drawer's top-level rows. The section styling
   * (margin-top + padding-top + divider) is authored for the desktop sidebar,
   * where the generous gaps group long chapter lists — but those rules aren't
   * media-scoped, so in the drawer they pile ~38px above each section label and
   * nothing below it, leaving sections wildly spaced while plain rows (Home,
   * The Map) sit tight. Flatten the section spacing on mobile so every row keeps
   * the link's symmetric padding and the rows read as one even list, separated
   * only by the hairline divider (which we restore on the first section). */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section {
    margin-top: 0;
    padding-top: 0;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section:first-of-type {
    border-top: 1px solid var(--pc-rule);
  }
  /* Center the section label in its row. The label is a smaller uppercase font
   * (~13.6px, line-height ~20.4px), but the row is driven to ~24px tall by the
   * expand chevron beside it — so the shorter text line sat high, leaving more
   * space below the word than above. Matching the plain links' 24px line-height
   * lets the label center in the row: an even 12px above and below, like every
   * other row. */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
    line-height: 24px;
  }
  /* Optically center the all-caps label against the drill-in chevron. The line
   * box is already geometrically centered, but capital letters sit high in it
   * (no descenders fill the space below the baseline), so the label reads ~1.7px
   * high next to the geometrically-centered chevron. Nudge just the text down to
   * match. (Line-height alone can't fix this — the baseline offset is constant
   * regardless of line-height.) */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link .md-ellipsis {
    position: relative;
    top: 1.7px;
  }
  /* Drop the list's desktop top-padding in the drawer. It's there to float the
   * first item below the book title on desktop, but in the drawer it stacks on
   * the first row's own padding, leaving more space above "Home" than below it.
   * Zeroing it makes Home sit an even 12px below the banner divider. */
  .md-sidebar--primary .md-nav--primary > .md-nav__list {
    padding-top: 0;
  }
}

/* Right sidebar "Table of contents" header: match the visual language
 * of the left-sidebar section labels (uppercase, letter-spaced, white)
 * so the two columns feel like part of the same design system. */
.md-sidebar--secondary .md-nav__title {
  color: var(--pc-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85em;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Appearance switcher
 *
 * Material's palette config (mkdocs.yml) renders a set of hidden <input>
 * radios plus a default toggle button in the header. We keep the inputs (they
 * carry the data-md-color-* attributes the palette engine reads, and our JS
 * drives them), but hide the header toggle — the only switcher we expose is
 * the icon pill that theme-switcher.js injects at the bottom of the sidebar.
 *
 * display:none keeps the inputs in the DOM (so querySelector + dispatched
 * change events still work) while removing the header control from view.
 * ------------------------------------------------------------------------- */
.md-header__option[data-md-component="palette"] {
  display: none;
}

/* The pill is the last child of the primary nav, below the scrolling chapter
 * list (sticky-bottom on mobile, a fixed flex footer on desktop). It sits
 * flush against the list — its border-top is the separator and its own padding
 * gives the breathing room — so the list's scrollbar reaches all the way down
 * to it with no gap. The background masks nav links scrolling beneath it. */
.pc-theme-switcher {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 0.8rem 0.6rem;
  background-color: var(--pc-switcher-bg);
  border-top: 1px solid var(--pc-rule);
}

.pc-theme-switcher__group {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background-color: var(--pc-switcher-track);
  border: 1px solid var(--pc-switcher-border);
  border-radius: 999px;
}

.pc-theme-switcher__btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--pc-switcher-fg-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pc-theme-switcher__btn svg {
  width: 0.95rem;
  height: 0.95rem;
}
.pc-theme-switcher__btn:hover {
  color: var(--md-accent-fg-color);
}
.pc-theme-switcher__btn--active,
.pc-theme-switcher__btn--active:hover {
  background-color: var(--pc-green-600);
  color: #ffffff;
}
.pc-theme-switcher__btn:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}


/* Series identity: the same blurb heads all ten guides, so it reads as a quiet
 * standing note rather than a callout — a hairline rule and muted text, sized
 * below the prose so it never competes with the opening section. */
.md-typeset .pc-series-identity {
  margin: 1.2rem 0 1.6rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--pc-rule);
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  line-height: 1.6;
}
.md-typeset .pc-series-identity p {
  margin: 0;
}
.md-typeset .pc-series-identity strong {
  color: var(--pc-heading);
  font-weight: 600;
}

/* "Use this guide to" / "PDSA emphasis": the guide's orientation pair, set as a
 * bordered block so a reader can decide whether this is the right guide before
 * committing to the body. */
.md-typeset .pc-guide-meta {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--pc-rule);
  border-radius: 0.2rem;
  background-color: var(--pc-code-bg);
  font-size: 0.76rem;
}
.md-typeset .pc-guide-meta p {
  margin: 0.35rem 0;
}
.md-typeset .pc-guide-meta strong {
  color: var(--pc-heading);
  font-weight: 600;
}

/* Worksheet: label/value grid. The source table is a fill-in form, so its
 * header row is intentionally empty — hide it rather than render an empty
 * band above the first field. */
.md-typeset .pc-cycle-header table thead {
  display: none;
}
/* Material wraps tables in an inline-block .md-typeset__table, which
 * shrink-wraps. The worksheet's blank second column IS the writing space, so it
 * has to span the measure. */
.md-typeset .pc-cycle-header .md-typeset__table {
  display: block;
  width: 100%;
}
.md-typeset .pc-cycle-header table {
  width: 100%;
}
.md-typeset .pc-cycle-header td:first-child {
  width: 34%;
  font-weight: 600;
  color: var(--pc-heading);
}
.md-typeset .pc-cycle-header td:last-child {
  min-height: 2rem;
}

/* Worksheet: a ruled area to write into, under each Plan/Do/Study/Act prompt.
 * Kept deliberately plain so the page prints as a usable working sheet. */
.md-typeset .pc-field {
  height: 3.2rem;
  margin: -0.4rem 0 1.6rem;
  border-bottom: 1px solid var(--pc-rule);
}

@media print {
  .md-typeset .pc-field {
    height: 4rem;
  }
}