/* Romp brand colors, dark-only site. Links and every selected/highlighted cue use
   romp's in-app highlight blue #9cd2ff (--accent in the dashboard), so the docs
   read in the same accent the product uses for "this is selected". */

/* Type scale: Material's stock sizes run small for a code-heavy dark site —
   body .8rem (16px), nav .7rem (14px), and code .85em (~13.6px, the smallest
   thing on a page that is mostly code). One modest bump per information type,
   nothing else: body to 17px, nav to 15px, and code to .9em of the new body
   (~15.3px), which is where the readability is actually won. */
.md-typeset {
  font-size: 0.85rem;
}
.md-nav {
  font-size: 0.75rem;
}
.md-typeset code {
  font-size: 0.9em;
}

:root {
  --md-primary-fg-color: #1ea1eb;
  --md-primary-fg-color--light: #56b8f1;
  --md-primary-fg-color--dark: #1683c4;
  --md-primary-bg-color: #ffffff;            /* text/icons on the header */
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
  --md-accent-fg-color: #9cd2ff;             /* hover / interactive highlight */
  --md-accent-fg-color--transparent: rgba(156, 210, 255, 0.12);
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #9cd2ff;             /* body links */
}

/* Quiet header: a near-black bar the wordmark reads on, with the highlight blue
   kept for accents (active tab, links, focus) instead of the whole banner. */
.md-header {
  background-color: #12171e;
}

/* Header brand: the full wordmark stands in for the swirl glyph + "Romp" text,
   sized to sit at about the height of the title text it replaces. The wordmark
   itself reads "Romp", so the site-name text is hidden to avoid saying it twice.
   Material hides the header logo below its tabs breakpoint (the drawer carries it
   instead); keep it shown at every width so the wordmark is always the brand. */
.md-header__button.md-logo {
  display: block;
}
.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
}
/* Top-level nav tabs, rendered inline in the header row (overrides/partials/
   header.html) between the wordmark and the search box. The nav grows to fill the
   middle, so the search box and repo link stay right-justified. Below Material's
   tabs breakpoint the drawer carries the nav, so the inline row hides. */
.md-header__tabs {
  flex-grow: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 1.2rem;
}
.md-header__tabs .md-tabs__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}
.md-header__tabs .md-tabs__item {
  height: auto;
  margin: 0;
  padding: 0;
}
.md-header__tabs .md-tabs__link {
  margin: 0;
  padding: 0 0.7rem;
  font-size: 0.76rem;
  opacity: 1;
  color: #ffffff;                              /* unselected tabs: white, normal weight */
  font-weight: 400;
  transition: color 0.2s;
}
.md-header__tabs .md-tabs__link:hover,
.md-header__tabs .md-tabs__link:focus {
  color: var(--md-accent-fg-color);            /* romp highlight blue */
}
/* Selected tab: romp highlight blue, and bold to carry the selection. */
.md-header__tabs .md-tabs__item--active .md-tabs__link {
  color: var(--md-accent-fg-color);
  font-weight: 700;
}
@media screen and (max-width: 59.9375em) {
  .md-header__tabs {
    display: none;
  }
  /* The slide-out nav drawer's header band + repo row: match the desktop header's
     near-black instead of Material's primary blue, so the wordmark sits on the same
     bar. Material colors these with the primary at higher specificity (the
     [for=__drawer] title and .md-nav__source), so match that here. */
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: #12171e;
    /* hide the "Romp" site-name text; the wordmark logo is an absolutely-positioned
       img, unaffected by the indent. */
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
    /* Material's band is 5.6rem with 3rem of top padding reserved for that text.
       With the text gone, shrink it to hug the wordmark (logo sits at .4rem tall
       ~3rem, so ~3.8rem leaves even breathing room above and below). */
    height: 3.8rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .md-nav__source {
    background-color: #12171e;
  }
  /* Material grows the nav list (flex:1) and orders the repo link (order:99) to the
     drawer bottom. Pin it right under the wordmark band instead, mirroring the
     desktop header where the repo link sits up top. The order:99 wins on
     specificity, so override with !important. */
  .md-nav--primary > .md-nav__title {
    order: 0;
  }
  .md-nav--primary > .md-nav__source {
    order: 1 !important;
  }
  .md-nav--primary > .md-nav__list {
    order: 2;
  }
}

/* The wordmark banner on the home page: no permalink icon, small gap below. */
.md-typeset h1 .headerlink {
  display: none;
}
.md-typeset h1:has(.romp-wordmark) {
  margin: 0 0 0.4em;
}
.romp-wordmark {
  display: block;
  margin: 0 auto;
  max-width: 420px;
  width: 70%;
}

/* Home-page feature headers: the in-app highlight blue, so each feature reads as a
   distinct section at a glance (the same accent the product uses for "selected"). */
.md-typeset h2.feature-h {
  color: var(--md-accent-fg-color);
}

/* The task-card tab-cycle demo (home: Context where you need it): render it at the
   card's own size, centered, rather than stretched across the page. */
.md-typeset video.romp-card-demo {
  display: block;
  margin: 0.6em auto;
  max-width: 700px;
  width: 100%;
}

/* Side-by-side pair of captures (home: a card's background + summary). */
.md-typeset .romp-pair {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
}
.md-typeset .romp-pair p {
  width: 44%;
  margin: 0;
}
.md-typeset .romp-pair img {
  width: 100%;
}

/* A capture that shouldn't span the page. */
.md-typeset img.romp-narrow {
  display: block;
  width: 72%;
  margin: 0.6em auto;
}

/* Screenshots: soften edges. */
.md-typeset img {
  border-radius: 6px;
}

/* The header always says Romp: no swap to the page heading on scroll (the
   sidebar already shows where you are). */
.md-header__topic + .md-header__topic {
  display: none;
}
.md-header__title--active .md-header__topic:first-child {
  transform: none;
  opacity: 1;
}

/* The header title is clickable and goes home, like the logo. */
.md-header__title {
  cursor: pointer;
}

/* Mobile drawer brand (2026-07-20): the wordmark logo already reads "Romp", so the
   drawer's site-name text said it twice — hide the text (font-size 0 keeps the
   logo <img>, which sizes itself) exactly as the header does above. And the repo
   link moves to the BOTTOM of the drawer: the drawer is for getting around the
   docs; the GitHub pointer is reference, not navigation. The drawer's primary nav
   becomes a flex column so `order` + margin-top:auto pin the source link last —
   scoped to Material's drawer breakpoint, so desktop keeps its header repo link. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    font-size: 0;
    line-height: 0;
    padding-bottom: 0.6rem;
  }
  .md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button.md-logo img {
    height: 2.2rem;
    width: auto;
  }
  .md-sidebar--primary .md-nav--primary {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__source {
    order: 99;
    margin-top: auto;
  }
}

/* Hold the DESKTOP header down to where its items actually run out of room (the
   user 2026-07-20): Material flips to the drawer at 76.25em (~1220px) while the
   header still shows a wide gap between the last tab and the search box. Down to
   60em (~960px — wordmark + five tabs + search + repo link still fit) keep the
   desktop layout: tabs stay (their hide rule above now fires below 60em only),
   the hamburger stays hidden, the repo link stays shown. Below 60em the theme's
   drawer takes over exactly as before. */
@media screen and (min-width: 60em) and (max-width: 76.234375em) {
  .md-header__button[for="__drawer"] {
    display: none;
  }
  .md-header__source {
    display: block;
  }
}

/* Inline status chips for prose: naming a chip in the text draws it the way the
   UI draws it, so the reader matches word to pixel without a legend lookup. The
   hexes are mirrored from the app (feed.css .fcol-chip-*, styles.css --st-*)
   because the docs site does not load the app's stylesheet — keep them in step.
   Working/Blocked/Completed are the feed's column chips; Ready shares the
   completed blue; Awaiting is the romp brand green (--st-awaitbg-bg). */
.romp-chip {
  border-radius: 999px;
  padding: 0.05em 0.5em;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}
/* Buttons named in prose, drawn the way the card draws them: an outlined pill,
   dim until hover. Mirrors feed.css .fask-secbtn / .fdismiss (1px border on
   --card-border, 6px radius, dim text). Use for Background, Summary, Sub-goals,
   Clear — anything the reader is meant to go and click. */
.romp-btn {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 0.05em 0.55em;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light, #9aa0a6);
  white-space: nowrap;
  line-height: 1.5;
}

.romp-chip-working   { background: #e0b020; color: #332600; }
.romp-chip-blocked   { background: #c0392b; color: #ffffff; }
.romp-chip-completed { background: #2b7fb8; color: #ffffff; }
.romp-chip-ready     { background: #2b7fb8; color: #ffffff; }
.romp-chip-await     { background: #54b204; color: #0c1a00; }

/* The kind chip a postal card carries, drawn the way the card draws it: an
   outlined pill in the kind's own colour, uppercase, with the border taking the
   text colour. Mirrors styles.css .postal-service-intent and its three colours.
   The app sets 0.7em against a card's own type; in body prose that lands smaller
   than every other inline chip here, so this reuses the 0.85em the chips and
   buttons above already share. */
.romp-chip-kind {
  border: 1px solid currentColor;
  border-radius: 9px;
  padding: 0.05em 0.5em;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.romp-chip-delegate   { color: #b08cff; }   /* delegation — a peer handed off work */
.romp-chip-coordinate { color: #14b8a6; }   /* coordination — a heads-up */
.romp-chip-question   { color: #e0b020; }   /* question — an answer is needed */

/* ── Mermaid legibility ───────────────────────────────────────────────
   Every node in our diagrams carries an explicit LIGHT fill (the classDef
   `fill:` values in architecture.md and judge-pipeline.md), so its label has to
   be dark. Three parties fight over that colour — the diagram's own
   `theme:'dark'` directive, Material's --md-mermaid-* variables, and the
   classDef `color:` — and on the dark scheme the light one was winning, leaving
   near-white text on pale boxes that could not be read (2026-07-24).

   Settle it here rather than upstream of the cascade: these rules apply to the
   rendered SVG, so they hold whichever party would otherwise win. Node labels
   go dark; EDGE labels are deliberately separate, since they sit on the page's
   dark background and get a light chip of their own instead. */
   Material defines its --md-mermaid-* variables under `:root>*`, i.e. on <body>,
   not on <html>. A `:root` override therefore LOSES: not on specificity, but on
   tree position, since the closer ancestor's value is the one the diagram
   inherits. Match their selector so ours is the closer-or-equal definition and,
   loading later, the winning one. */
:root, :root > * {
  --md-mermaid-label-fg-color: #111827;
  --md-mermaid-label-bg-color: #e5e7eb;
}
.mermaid .node .nodeLabel,
.mermaid .node .nodeLabel p,
.mermaid .node .nodeLabel code,
.mermaid .node text,
.mermaid .cluster .nodeLabel {
  color: #111827 !important;
  fill: #111827 !important;
}
/* Edge labels: dark text on a light chip, and a size up — at the inherited size
   a two-line label like "its card has open sub-goals" was the smallest type on
   the page. */
.mermaid .edgeLabel,
.mermaid .edgeLabel p,
.mermaid .edgeLabel span,
.mermaid .edgeLabel foreignObject div {
  color: #111827 !important;
  fill: #111827 !important;
  background: #e5e7eb !important;
  font-size: 0.95em !important;
  line-height: 1.35 !important;
}
/* `<code>` inside a node label must not keep the site's code colours, which are
   tuned for the dark page, not for a pale node. */
.mermaid .node code,
.mermaid .edgeLabel code {
  background: rgba(0, 0, 0, 0.07) !important;
  color: #111827 !important;
}

/* A federated session's name, rendered the way the interface renders it
   (ui/webview/host-prefix.ts + the .host-prefix rule in ui/webview/styles.css):
   the "host:" part is metadata, so it is quiet, unbolded, italic and a step
   smaller, while the session name carries its identity colour at full weight.
   The colour is one of the romp identity palette's (the kernel's /palette);
   #4EA8A9 rather than the palette's #1EA1EB, which is the site header's blue. */
.romp-sid {
  font-family: var(--md-code-font-family);
  font-weight: 700;
  color: #4EA8A9;
  white-space: nowrap;
}
.romp-sid .host {
  color: var(--md-default-fg-color--light);
  font-weight: 400;
  font-style: italic;
  font-size: 0.88em;
}