/* CORA deep teal palette. Primary drives the top banner; accent drives links. */
:root {
  --md-primary-fg-color: #0A7E8C;
  --md-primary-fg-color--light: #2BA0AE;
  --md-primary-fg-color--dark: #075964;
  --md-accent-fg-color: #14B8A6;
  --md-accent-fg-color--transparent: rgba(20, 184, 166, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0A7E8C;
  --md-primary-fg-color--light: #2BA0AE;
  --md-primary-fg-color--dark: #075964;
  --md-accent-fg-color: #2DD4BF;
  --md-accent-fg-color--transparent: rgba(45, 212, 191, 0.1);
}

/* Magazine-style homepage hero. Playfair Display masthead, Inter for kickers. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap");

/* Hero with normal scroll. Image scrolls away naturally; text layer is
   position: fixed, anchored to the viewport area below header+tabs, and
   fades via hero-fade.js as the user scrolls through the hero's height.
   Negative margin pulls the image up behind the (transparent-on-load)
   header + tabs strip so the hero feels like the page's true top. */
.cora-hero {
  position: relative;
  width: 100%;
  margin: -4.8rem 0 0 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  height: 100vh;
  min-height: 600px;
}

/* Single fixed backdrop spanning header + tabs. Both bars are transparent
   and sit on top of this one surface, so they share an identical backdrop
   and fade as one visual unit. Without this, each bar paints its own teal
   over a different slice of the hero image and the chrome inside the header
   (search field bg) makes the header read as a different surface than the
   tabs strip even at identical alpha. hero-fade.js drives the overlay var
   0->1; on non-hero pages the var is unset and defaults to 1 (solid teal). */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4.8rem;
  background-color: rgba(10, 126, 140, var(--cora-header-overlay, 1));
  z-index: 2;
  pointer-events: none;
}

.md-header,
.md-tabs {
  background-color: transparent;
}

/* Override Material's .md-header--shadow rule. Material adds this class on
   scroll and applies a 250ms box-shadow transition, which makes the header
   look like it arrives late vs the tabs strip. We tie the shadow to the
   same scroll variable as the bg, and kill the transition so they snap
   together every animation frame. */
.md-header.md-header--shadow {
  box-shadow:
    0 0 0.2rem rgba(0, 0, 0, calc(var(--cora-header-overlay, 1) * 0.1)),
    0 0.2rem 0.4rem rgba(0, 0, 0, calc(var(--cora-header-overlay, 1) * 0.2));
  transition: none;
}

.cora-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cora-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--md-default-bg-color));
  pointer-events: none;
  z-index: 1;
}

/* Layer is fixed to the viewport so it stays put while the image scrolls.
   hero-fade.js drives opacity from 1 (scroll=0) to 0 (scroll=heroHeight). */
.cora-hero__layer {
  position: fixed;
  top: 4.8rem;
  left: 0;
  right: 0;
  height: calc(100vh - 4.8rem);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 2;
  will-change: opacity;
}

/* Inner = .md-grid (max-width: 61rem, centered) so text aligns with header nav. */
.cora-hero__inner {
  width: 100%;
  position: relative;
  color: #fff;
}

.cora-hero__kicker {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.65rem, 0.75vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.cora-hero__masthead {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1rem 0;
}

.cora-hero__tagline {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  line-height: 1.3;
  margin: 0;
  max-width: 22ch;
  color: #fff;
}

/* Bottom-anchored link strip inside the hero. Lives in the same fixed layer
   as the masthead so it shares the scroll fade. Sits above the bottom gradient
   (96px) with breathing room. md-grid keeps it left-aligned to the masthead.
   Wrapper is pointer-events: none so background area still scrolls; only the
   anchors re-enable pointer events. */
.cora-hero__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7rem;
  pointer-events: none;
}

.cora-hero__strip-inner {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.6rem, 0.7vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.cora-hero__strip a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  pointer-events: auto;
  transition:
    color 150ms ease,
    border-color 150ms ease;
}

.cora-hero__strip a:hover,
.cora-hero__strip a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.cora-hero__strip span {
  opacity: 0.5;
  margin-right: 0.6rem;
}

/* Tables run a pinch smaller than body (~0.92em) so dense reference tables
   keep multi-cell rows on a single visual line. Material's default
   (~0.64rem) felt too small here; body-inherit felt too generous when
   tables carry 4-5 columns of mixed identifiers + narrative. */
.md-typeset table:not([class]) {
  font-size: 0.92em;
  line-height: 1.45;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  font-size: inherit;
}

/* Inline code in tables should not break mid-token (BC names, file paths). */
.md-typeset table:not([class]) code {
  white-space: nowrap;
}

/* One row = one line. Long-gist columns would otherwise wrap to 2-3 lines
   and break the table's scan-rhythm; Material wraps the table in an
   overflow-x container, so anything wider than the viewport horizontally
   scrolls instead of wrapping. */
.md-typeset table:not([class]) td {
  white-space: nowrap;
}

/* ---- Modern table styling ----
   Stripe / Linear / Vercel pattern: borderless body, single header divider,
   subtle row hover. Material's default cell borders make data tables read
   as busy grids; pulling them lets the type carry the structure. */
.md-typeset table:not([class]) {
  width: 100%;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
  box-shadow: none;
  margin: 1.2em 0;
}

.md-typeset table:not([class]) thead {
  background: transparent;
}

.md-typeset table:not([class]) th {
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: bottom;
}

.md-typeset table:not([class]) td {
  border: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.55rem 0.7rem;
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: none;
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color 120ms ease;
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* First column reads as the "key" / identifier in most CORA reference tables;
   slight weight bump (500 vs 400) makes it scan-able without going bold. */
.md-typeset table:not([class]) tbody td:first-child {
  font-weight: 500;
  color: var(--md-default-fg-color);
}

/* Dark mode: softer borders so the divider doesn't feel like a hard rule. */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th,
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset table:not([class]) tbody tr {
    transition: none;
  }
}

/* ---- Code block polish ----
   Rounded corners, soft shadow, subtle border on the .highlight wrapper
   that holds <pre> + the copy button. Dark mode gets a deeper shadow so
   blocks read as raised cards rather than embossed wells. */
.md-typeset .highlight {
  background-color: var(--md-code-bg-color);
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Material's default leaves <pre> with 1em top/bottom margin; inside the
   painted .highlight box that margin showed through as darker stripes
   against the page background. Collapse it so <code> fills the box edge
   to edge. */
.md-typeset .highlight > pre {
  margin: 0;
}

[data-md-color-scheme="slate"] .md-typeset .highlight {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.06);
}

.md-typeset pre > code {
  border-radius: 0;
}

/* Inline code: pill shape, gentle padding so it sits inside the line. */
.md-typeset :not(pre) > code {
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}

/* ---- Grid cards: subtle lift on hover ----
   Material ships grid cards but the default has no motion. Cards lift 2px
   and the shadow deepens, mirroring the code-block chrome. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition:
    transform 180ms ease-out,
    box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset .grid > .card {
  border-color: rgba(255, 255, 255, 0.06);
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
  border-color: var(--md-accent-fg-color);
}

/* Whole-card click target. The last <p> in each grid card holds the
   "Read →" link; we expand that anchor's hit area to cover the full tile
   via ::after so clicking anywhere on the card navigates. li becomes the
   positioning context; cursor: pointer signals it's clickable. */
.md-typeset .grid.cards > ul > li {
  position: relative;
  cursor: pointer;
}

.md-typeset .grid.cards > ul > li > p:last-child a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

/* Keep the visible "Read →" text underline hover working — the cover is
   transparent so the link styles still apply. Focus ring lives on the
   card via focus-within so keyboard users see where they are. */
.md-typeset .grid.cards > ul > li:focus-within {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid > .card {
    transition: none;
  }
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid > .card:hover {
    transform: none;
  }
}

/* ---- Talks page: download icon in the top-right corner ----
   Card body click goes to the slides (handled by the existing
   p:last-child a::after stretched-link rule above). The download
   icon sits ABOVE that overlay (z-index: 2 > 1) so clicks on it
   trigger the PDF download instead. */
.md-typeset .grid.cards > ul > li > p > a.talk-download {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--md-default-fg-color);
  opacity: 0.45;
  background: transparent;
  transition:
    opacity 150ms ease-out,
    background-color 150ms ease-out,
    color 150ms ease-out;
}

.md-typeset .grid.cards > ul > li > p > a.talk-download:hover,
.md-typeset .grid.cards > ul > li > p > a.talk-download:focus-visible {
  opacity: 1;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  outline: none;
}

.md-typeset .grid.cards > ul > li > p > a.talk-download svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

/* The wrapping <p> for the absolutely-positioned download anchor would
   otherwise add a vertical gap between the description and the slides
   link. display: contents removes the <p> from layout while keeping
   the anchor in the tree. */
.md-typeset .grid.cards > ul > li > p:has(> a.talk-download:only-child) {
  display: contents;
}

/* ---- Labelled aside ----
   Left teal rule + small uppercase kicker, ported from the talks deck
   (border-l-2 / pl-5 / tracking-[0.22em]). Lighter than a Material
   admonition; meant for short labelled lists where a heading anchor is
   not wanted. Pair the wrapper with .cora-aside and the label paragraph
   with .cora-kicker via attr_list. */
.md-typeset .cora-aside {
  border-left: 2px solid var(--md-primary-fg-color);
  padding: 0.1rem 0 0.1rem 1.25rem;
  margin: 1.5rem 0;
}

.md-typeset .cora-aside--soft {
  border-left-color: color-mix(in srgb, var(--md-primary-fg-color) 50%, transparent);
}

.md-typeset .cora-aside > .cora-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--md-primary-fg-color);
  margin: 0 0 0.6rem 0;
}

.md-typeset .cora-aside ul,
.md-typeset .cora-aside ol {
  margin: 0;
}

.md-typeset .cora-aside li {
  margin-bottom: 0.25rem;
}

.md-typeset .cora-aside li:last-child {
  margin-bottom: 0;
}

/* Bolded lead in a list item reads as the "name" of the item; bump it
   to the brand teal so the eye lands on the term before the description. */
.md-typeset .cora-aside li > strong:first-child {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

/* ---- Left-nav section-head breathing room ----
   Add a small top margin to any sibling that follows a nested item, so the
   boundary between a section head (Clusters under Scenarios; Argonne/APS/
   2-BM/35-BM under Deployments) and the next row reads as a soft group
   break regardless of whether the next sibling is nested or a leaf. */
.md-nav--primary .md-nav__item--nested + .md-nav__item {
  margin-top: 1rem;
}

/* ---- Right-rail TOC active accent ----
   Tailwind's on-this-page pattern: a 2px brand-teal bar + weight bump on
   the currently-scrolled section. toc-active.js sets .cora-toc-active on
   the matching <a>; the bar is a left-positioned pseudo-element so the
   text doesn't shift when the class flips on. */
.md-nav--secondary .md-nav__link {
  position: relative;
  transition:
    color 120ms ease,
    font-weight 120ms ease;
}

.md-nav--secondary .md-nav__link.cora-toc-active {
  color: var(--md-primary-fg-color);
  font-weight: 500;
}

.md-nav--secondary .md-nav__link.cora-toc-active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  background: var(--md-primary-fg-color);
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .md-nav--secondary .md-nav__link {
    transition: none;
  }
}

/* ---- Aside variants beyond --soft ----
   Same teal monochrome family. Each variant prepends a small uppercase
   tag to the .cora-kicker via ::before, so the wrapper only needs a
   class swap. Pair every variant with a .cora-kicker label, otherwise
   the tag has nowhere to render. */
.md-typeset .cora-aside--locked > .cora-kicker::before,
.md-typeset .cora-aside--deferred > .cora-kicker::before {
  display: inline-block;
  margin-right: 0.65em;
  padding: 0.12em 0.5em;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-radius: 0.2rem;
  vertical-align: 1px;
}

.md-typeset .cora-aside--locked > .cora-kicker::before {
  content: "Locked";
  background: var(--md-primary-fg-color);
  color: #fff;
}

.md-typeset .cora-aside--deferred {
  border-left-color: color-mix(in srgb, var(--md-default-fg-color) 30%, transparent);
}

.md-typeset .cora-aside--deferred > .cora-kicker {
  color: var(--md-default-fg-color--light);
}

.md-typeset .cora-aside--deferred > .cora-kicker::before {
  content: "Deferred";
  background: transparent;
  color: var(--md-default-fg-color--light);
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 30%, transparent);
}

/* In the deferred variant, mute the teal on bolded list leads so the
   muted rule is consistent end-to-end. */
.md-typeset .cora-aside--deferred li > strong:first-child {
  color: var(--md-default-fg-color);
}

/* ---- Section reveal-on-scroll ----
   section-reveal.js adds .cora-revealed when an element scrolls into view.
   Pre-reveal state is opacity 0 + 8px down; revealed state animates back
   to natural. Reduced-motion users see no offset. */
.md-content .cora-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 360ms ease-out,
    transform 360ms ease-out;
}

.md-content .cora-reveal.cora-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .md-content .cora-reveal,
  .md-content .cora-reveal.cora-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- View Transitions for theme toggle ----
   nav-theme.js wraps the palette swap in document.startViewTransition; the
   browser cross-fades old/new automatically. Tuning duration keeps it from
   feeling heavy. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: ease-out;
}

/* ───────────────────────────────────────────────────────────────────────
   Module-page maturity pill.

   Surfaced just below the H1 on every docs/architecture/modules/<slug>/
   page. Semantic color per the alpha / beta / stable / deprecated
   convention (Kubernetes-style single-axis). Pill chip styling — small,
   rounded, uppercase letterform — chosen over an admonition box so it sits
   inline near the title without dominating the page.
   ─────────────────────────────────────────────────────────────────────── */
.md-maturity {
  display: inline-block;
  margin-left: 0.65em;
  padding: 0.12em 0.55em;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}

/* Inside the H1 the pill sits slightly above the baseline so the larger
   line height doesn't drop it onto the descender row. */
.md-typeset h1 > .md-maturity {
  vertical-align: 0.35em;
}

.md-maturity--alpha {
  color: #B45309;
  background-color: rgba(217, 119, 6, 0.10);
}

.md-maturity--beta {
  color: #1D4ED8;
  background-color: rgba(59, 130, 246, 0.10);
}

.md-maturity--stable {
  color: var(--md-primary-fg-color--dark);
  background-color: var(--md-accent-fg-color--transparent);
}

.md-maturity--deprecated {
  color: #4B5563;
  background-color: rgba(107, 114, 128, 0.10);
}

[data-md-color-scheme="slate"] .md-maturity--alpha {
  color: #FBBF24;
  background-color: rgba(251, 191, 36, 0.12);
}

[data-md-color-scheme="slate"] .md-maturity--beta {
  color: #93C5FD;
  background-color: rgba(147, 197, 253, 0.12);
}

[data-md-color-scheme="slate"] .md-maturity--stable {
  color: var(--md-accent-fg-color);
  background-color: var(--md-accent-fg-color--transparent);
}

[data-md-color-scheme="slate"] .md-maturity--deprecated {
  color: #9CA3AF;
  background-color: rgba(156, 163, 175, 0.12);
}