/* extra fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

h1,h2,h3 {
  font-family: "Oswald", sans-serif;
}

/* CodeCrew palette, taken from the logo artwork: deep purple-black ground
   (#0a0012 to #200040), cyan accent (#00d0f8), white type. Both palette
   entries in zensical.toml use primary/accent "custom", which hands colour
   control to the variables below. */
:root {
  --cc-ink: #0a0012;
  --cc-purple: #1a0a3a;
  --cc-purple-light: #2d1458;
  --cc-cyan: #00d0f8;
  --cc-cyan-deep: #0087a8;
  /* The cyan at 20% alpha: a soft fill for the primary button on the hero's
     dark ground, where the full cyan is too stark for a control. */
  --cc-cyan-tint: #00d0f833;
  /* Second accent, sampled from the "docs" text in the docs icon: the
     colour of links on the home page in slate (6:1 on the page ground,
     4.8:1 on the hero's glow at its brightest). Its deeper companion
     carries the light scheme, where the sampled pink reads at 3.1:1 (6.2:1
     on the page, 5.2:1 on the darker bands). */
  --cc-pink: #ce5ae9;
  --cc-pink-deep: #9327ae;
}

/* Header, nav tabs and buttons in both schemes. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--cc-purple);
  --md-primary-fg-color--light: var(--cc-purple-light);
  --md-primary-fg-color--dark: var(--cc-ink);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

/* Light scheme: cool off-white ground, deep cyan links for contrast. */
[data-md-color-scheme="default"][data-md-color-accent="custom"] {
  --md-default-bg-color: #f7f5fb;
  --md-accent-fg-color: var(--cc-cyan-deep);
  --md-accent-fg-color--transparent: #0087a81a;
  --md-typeset-a-color: var(--cc-cyan-deep);
  --md-footer-bg-color: var(--cc-purple);
  --md-footer-bg-color--dark: var(--cc-ink);
}

/* Dark scheme: the logo's purple-black ground with bright cyan links. */
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-hue: 270;
  --md-default-bg-color: #0c0418;
  --md-default-bg-color--light: #0c0418b3;
  --md-default-bg-color--lighter: #0c041866;
  --md-default-bg-color--lightest: #0c04181a;
  --md-default-fg-color: #f2eefaf2;
  --md-default-fg-color--light: #f2eefab3;
  --md-default-fg-color--lighter: #f2eefa4d;
  --md-default-fg-color--lightest: #f2eefa1f;
  --md-code-bg-color: #180a30;
  --md-accent-fg-color: var(--cc-cyan);
  --md-accent-fg-color--transparent: #00d0f81a;
  --md-typeset-a-color: var(--cc-cyan);
  --md-footer-bg-color: #100020;
  --md-footer-bg-color--dark: var(--cc-ink);
}

/* Zensical's header takes the page background, which in the light scheme
   would swallow the white logo. Keep the header on the brand purple in both
   schemes by redefining the theme variables inside it. */
[data-md-color-scheme="default"] .md-header {
  --md-default-bg-color: var(--cc-purple);
  --md-default-bg-color--light: var(--cc-purple);
  --md-default-bg-color--lighter: #ffffff1f;
  --md-default-bg-color--lightest: #ffffff0d;
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #ffffffb3;
  --md-default-fg-color--lighter: #ffffff4d;
  --md-default-fg-color--lightest: #ffffff1f;
  --md-accent-fg-color: var(--cc-cyan);
}

/* navigation.sections renders second-level entries as always-open groups,
   ignoring the toggle. Honor the aria-expanded Zensical already sets. */
.md-nav__item--section > nav.md-nav[aria-expanded="false"] > .md-nav__list {
  display: none;
}

.md-copyright__registration {
  margin-top: 0.4rem;
  opacity: 0.7;
}

/* The invitation to say how a first try went (M23-R5), opening the footer's
   left-hand column on every page: body-sized and full-strength, so it reads
   as a line addressed to the reader rather than as more small print. */
.md-typeset .cc-invite {
  max-width: 42rem;
  margin: 0 0 0.8rem;
  color: var(--md-default-fg-color);
  font-size: 0.7rem;
  line-height: 1.5;
}

.md-typeset .cc-invite a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.md-typeset .cc-invite a:is(:hover, :focus-visible) {
  color: var(--md-accent-fg-color);
}

/* "All posts..." archive link in the nav: right-align and dim. */
.md-nav__link[href$="archive/"] {
  justify-content: flex-end;
  text-align: right;
  font-style: italic;
}

/* Date suffix injected into nav titles by main.py:regenerate_nav. */
.md-nav__link .muted {
  opacity: 0.55;
  margin-left: 0.25rem;
  font-weight: 400;
}

/* Page metadata line rendered below the H1 by overrides/partials/content.html. */
.rr-page-meta {
  margin: -0.6rem 0 1.2rem;
  font-size: 0.85em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}

.rr-page-meta__item {
  white-space: nowrap;
}

.rr-page-meta__label {
  opacity: 0.6;
  margin-right: 0.15rem;
}

.rr-page-meta__value {
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Home page: docs/index.md rendered by overrides/home.html.           */
/* Full-bleed sections; colours come from the palette variables above. */
/* ------------------------------------------------------------------ */

/* The home template drops the sidebars and the reading column, so let the
   page escape the 61rem grid and the top margin: sections run edge to edge
   and the hero sits flush under the nav tabs. */
.md-main__inner:has(> .cc-home) {
  max-width: none;
  margin-top: 0;
}

.cc-home .headerlink {
  display: none;
}

/* Links on the home page take the pink, so links and buttons no longer
   share the cyan; buttons, the step rule, the receipts' rule and the
   hero's bold keep it. Hover mixes the pink towards the scheme's text
   colour; buttons are excluded so their own colours hold. */
.cc-home {
  --md-typeset-a-color: var(--cc-pink-deep);
}

[data-md-color-scheme="slate"] .cc-home {
  --md-typeset-a-color: var(--cc-pink);
}

.cc-home .md-typeset a:not(.cc-button):is(:hover, :focus) {
  color: color-mix(in srgb, var(--cc-pink-deep) 80%, black);
}

[data-md-color-scheme="slate"] .cc-home .md-typeset a:not(.cc-button):is(:hover, :focus),
.cc-home .cc-hero a:not(.cc-button):is(:hover, :focus) {
  color: color-mix(in srgb, var(--cc-pink) 70%, white);
}

.cc-section {
  padding: 3rem 1rem;
}

.cc-section__inner {
  max-width: 56rem;
  margin: 0 auto;
}

/* Alternate sections (Why, the worked example, Start now) sit darker than the page ground and
   carry a radial glow in the spirit of the logo artwork: a soft light
   centre on the purple-black. In slate the band runs from --cc-purple-light
   at the centre to --cc-ink at the edges (body text stays above 10:1, the
   muted text above 5.8:1); in default the off-white darkens a step and the
   same shape shows at low strength (body text above 11:1). */
.cc-section--alt {
  background: radial-gradient(60% 75% at 50% 40%, #eeeaf5 0%, #e6e1f0 55%, #ddd6ea 100%);
}

[data-md-color-scheme="slate"] .cc-section--alt {
  background: radial-gradient(60% 75% at 50% 40%, var(--cc-purple-light) 0%, var(--cc-purple) 45%, var(--cc-ink) 100%);
}

.md-typeset .cc-section h2 {
  margin: 0 0 1.6rem;
  font-size: 2rem;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -0.01em;
}

.md-typeset .cc-section h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  line-height: 1.2;
}

.md-typeset .cc-section p {
  margin: 0 0 0.8rem;
}

/* Hero. The section carries the slate scheme attributes in the Markdown so
   the type, links and buttons take the dark palette whichever scheme the
   visitor chose; the ground is the logo's ink, which the hero glow (at the
   end of this file) lights along the top edge.

   Layout is a grid: stacked and centred on narrow viewports; from 60em
   (Zensical's own breakpoint) two columns, the logo on the left and the
   headline, sub-headline and calls to action on the right, left-aligned. */
.cc-hero {
  padding: 2.4rem 1rem 3rem;
  text-align: center;
  background: var(--cc-ink);
  color: var(--md-primary-bg-color);
}

.cc-hero .cc-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.4rem;
}

/* Markdown wraps the image in a <p>; the wrapper carries no margin so the
   grid gap alone spaces the logo from the headline. */
.md-typeset .cc-hero__logo p {
  margin: 0;
}

/* The logo is a transparent export (www#83): the hero's own glow shows
   through it, so it takes no rounded frame. Its width and height attributes
   reserve the square before it loads; height: auto keeps it square once
   max-width scales it down. */
.md-typeset .cc-logo {
  display: block;
  max-width: 13rem;
  height: auto;
  margin: 0;
  border-radius: 0;
}

/* The body is the centred grid item that carries the measure; the headline
   and paragraphs fill it, so none of them needs auto side margins. The
   paragraph rules below name .cc-hero so they outrank the general
   `.md-typeset .cc-section p` margin rule (specificity (0,2,1)), which used
   to strip the sub-headline's auto margins and leave it flush left. */
.cc-hero__body {
  max-width: 34rem;
}

.md-typeset .cc-hero .cc-hero__headline {
  margin: 0 0 1rem;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-primary-bg-color);
}

.md-typeset .cc-hero .cc-hero__sub {
  margin: 0 0 1.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--md-primary-bg-color--light);
}

@media screen and (min-width: 60em) {
  .cc-hero {
    text-align: left;
  }
  .cc-hero .cc-section__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 3rem;
  }
  .md-typeset .cc-logo {
    max-width: 19rem;
  }
  /* The column bounds the body: 56rem inner, less the logo and the gap. */
  .cc-hero__body {
    max-width: none;
  }
}

/* The wordmark colours "Code" cyan and "Crew" white; echo it in the lead. */
.md-typeset .cc-hero__sub strong {
  color: var(--cc-cyan);
}

/* Calls to action: centred when stacked, flush left beside the logo. */
.md-typeset .cc-hero .cc-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
}

@media screen and (min-width: 60em) {
  .md-typeset .cc-hero .cc-cta {
    justify-content: flex-start;
  }
}

/* Buttons: two equal actions on the dark hero. The primary takes the soft
   translucent cyan, the secondary a quiet light border; both carry light
   text and no underline in any state (Zensical underlines every
   `.md-typeset a`). Hover and keyboard focus stay subtle: the primary's
   border firms up to the deep cyan, the secondary takes a faint wash. */
.md-typeset .cc-button {
  display: inline-block;
  padding: 0.55em 1.4em;
  border: 0.1rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: background-color 125ms, border-color 125ms;
}

.md-typeset .cc-button--primary {
  background: var(--cc-cyan-tint);
  border-color: transparent;
}

.md-typeset .cc-button:is(:hover, :focus, :focus-visible) {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .cc-button:is(:hover, :focus-visible) {
  background: var(--md-default-fg-color--lightest);
  border-color: var(--md-default-fg-color--light);
}

.md-typeset .cc-button--primary:is(:hover, :focus-visible) {
  background: var(--cc-cyan-tint);
  border-color: var(--cc-cyan-deep);
}

.md-typeset .cc-button:focus-visible {
  outline: 0.1rem solid var(--cc-cyan-deep);
  outline-offset: 0.1rem;
}

/* Plain links inside the hero take the pink whichever scheme is on: the
   section carries the slate attributes, whose selector sets the link
   colour at specificity (0,2,0); two classes match it, and this rule is
   later. The pink reads at 4.8:1 or more on the hero's glow (Hero glow,
   below), so it needs no lightening there. The commodity line's link is the
   one such link today. */
.cc-section.cc-hero {
  --md-typeset-a-color: var(--cc-pink);
}

/* The install block at the close, as a terminal window: always on the ink,
   whichever scheme, with a title bar and three muted dots. Each command is
   a line span; the `$` prompt is ::before and the dim "output" beneath it
   is ::after from the span's data-out attribute, so neither is in the DOM
   text: Zensical's copy button (clipboard.js reads the selection's text)
   yields the six commands and nothing else. The window sizes to its
   longest line plus the prompt (fit-content), centred in the band, and is
   the positioned box, so Zensical's copy button (nav.md-code__nav) lands in
   the title bar. The light-type variables are set here as the header does,
   since the window is dark in the light scheme too. The chrome and type
   scale up from 45em; phones keep the tighter sizes that fit the
   42-character line plus prompt in the 420px column. */
.cc-install {
  max-width: 44rem;
  margin: 0 auto;
  text-align: left;
}

.cc-term {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  --md-default-fg-color: #f2eefaf2;
  --md-default-fg-color--light: #f2eefab3;
  --md-default-fg-color--lighter: #f2eefa4d;
  --md-default-fg-color--lightest: #f2eefa1f;
  --md-code-bg-color: var(--cc-ink);
  --md-code-fg-color: #f2eefaf2;
  --md-accent-fg-color: var(--cc-cyan);
  position: relative;
  overflow: hidden;
  border: 0.05rem solid #f2eefa33;
  border-radius: 0.5rem;
  background: var(--cc-ink);
  box-shadow: 0 1rem 2rem #0a001266;
}

.cc-term__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 0.05rem solid #f2eefa1f;
  background: #180a30;
}

.cc-term__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #f2eefa33;
}

.cc-term__title {
  margin-left: 0.4rem;
  font: 0.65rem/1 var(--md-code-font-family);
  color: #f2eefa80;
}

.md-typeset .cc-term pre {
  position: static;
  margin: 0;
}

.md-typeset .cc-term pre > code {
  display: block;
  padding: 0.8rem 0.6rem;
  border-radius: 0;
  background: var(--cc-ink);
  color: #f2eefaf2;
}

.cc-term__line::before {
  content: "$";
  display: inline-block;
  width: 1.5ch;
  color: var(--cc-cyan);
}

/* A shell continuation (Start now's `identity new`, split to keep to the
   page's 42-character code line): no prompt, the same indent as one. */
.cc-term__line--cont::before {
  content: "";
}

.cc-term__line[data-out]::after {
  content: "\A" attr(data-out);
  white-space: pre;
  color: #f2eefa80;
}

.cc-term .md-code__nav {
  top: 0.25rem;
  right: 0.5rem;
  background: transparent;
}

@media screen and (min-width: 45em) {
  .cc-term__bar {
    gap: 0.45rem;
    padding: 0.7rem 1rem;
  }
  .cc-term__dot {
    width: 0.7rem;
    height: 0.7rem;
  }
  .cc-term__title {
    margin-left: 0.5rem;
    font-size: 0.8rem;
  }
  .md-typeset .cc-term pre > code {
    padding: 1rem 1.6rem 1rem 1.2rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .cc-term .md-code__nav {
    top: 0.45rem;
    right: 0.7rem;
  }
}

/* The worked example (M19-R3): a small label over the title, the lead,
   then the loop as a thread, one turn per speaker, and one closing line.
   The label and lead name .cc-example for the same specificity reason as
   the hero paragraphs. */
.md-typeset .cc-example .cc-example__label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-example .cc-example__lead,
.md-typeset .cc-example .cc-example__close {
  max-width: 40rem;
  margin: -0.8rem auto 2rem;
  text-align: center;
}

.md-typeset .cc-example .cc-example__close {
  margin: 2rem auto 0;
}

/* The thread: each turn is the speaker's avatar beside a name line, a
   speech bubble and, for some, a note on what the protocol did. A hairline
   down the avatar column joins the turns into one conversation. */
.md-typeset ol.cc-thread {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.md-typeset ol.cc-thread::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  left: 1.2rem;
  border-left: 0.1rem solid var(--md-default-fg-color--lightest);
}

.md-typeset .cc-thread li.cc-turn {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.8rem;
  margin: 0 0 1.2rem;
  padding: 0;
}

.md-typeset .cc-thread li.cc-turn:last-child {
  margin-bottom: 0;
}

/* The avatar: the crew artwork is white marks, so it sits on the purple
   the crew badges use; the person glyph gets the same disc. */
.md-typeset .cc-example .cc-turn__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0.3rem;
  border-radius: 50%;
  background: var(--cc-purple);
  color: #ffffff;
}

.md-typeset .cc-turn__avatar .twemoji,
.md-typeset .cc-turn__avatar .twemoji svg {
  width: 1.2rem;
  height: 1.2rem;
}

.md-typeset .cc-turn__body {
  min-width: 0;
}

.md-typeset .cc-example .cc-turn__who {
  margin: 0.15rem 0 0.3rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  overflow-wrap: anywhere;
}

.md-typeset .cc-turn__who strong {
  color: var(--md-default-fg-color);
}

/* The App login wraps as one piece: `overflow-wrap: anywhere` above broke
   it at its hyphen on a phone ("radiusred-" / "cody[bot]"), which reads
   as two names (M19-R7). */
.md-typeset .cc-turn__app {
  white-space: nowrap;
}

/* The bubble: its tail is the square top-left corner, pointing back at
   the avatar. Grounds from the palette: a faint fg tint for you, the cyan
   tint for Cody, the review seat's pink (as on the cc:needs-decision
   label) for Checky; the text is the scheme's own on all three. */
.md-typeset .cc-example .cc-bubble {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-radius: 0.15rem 0.7rem 0.7rem 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--md-default-fg-color);
}

.md-typeset .cc-turn--you .cc-bubble {
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .cc-turn--cody .cc-bubble {
  background: var(--cc-cyan-tint);
}

.md-typeset .cc-turn--checky .cc-bubble {
  background: color-mix(in srgb, var(--cc-pink) 18%, transparent);
}

.md-typeset .cc-example .cc-bubble code {
  padding: 0;
  background: transparent;
  color: inherit;
  white-space: nowrap;
}

.md-typeset .cc-example .cc-turn__note {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* The crew: five role badges over the copy, on the page ground between the
   Why band and the worked example's (M22 moved both, and the bands still
   alternate). Each badge carries its role and a one-line summary in visible
   text (M19-R5). The badges form an org chart (M22, #71): the coordinator,
   first in the markup so reading and Tab order match, centred on top, and
   the four roles it dispatches beneath it, two by two on a phone and in one
   row from 45em, where thin connector lines join them. The lines are
   pseudo-elements, so they add nothing a screen reader announces. */
.cc-crew__badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 7.5rem));
  justify-content: center;
  align-items: start;
  gap: 1.2rem;
  margin: 0 0 1.6rem;
}

.md-typeset .cc-crew__badge {
  position: relative;
  margin: 0;
  padding: 0.4rem 0.2rem;
  text-align: center;
}

.md-typeset .cc-crew__badge:first-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 11rem;
}

@media screen and (min-width: 45em) {
  .cc-crew__badges {
    grid-template-columns: repeat(4, minmax(0, 7.5rem));
    gap: 2.4rem 1.2rem;
  }

  /* The stem down from the coordinator, the bar across the four (each
     badge draws its own stretch, half a gap either side, trimmed at the
     ends), and a tick up to each badge. */
  .md-typeset .cc-crew__badge:first-child::after,
  .md-typeset .cc-crew__badge:not(:first-child)::before,
  .md-typeset .cc-crew__badge:not(:first-child)::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .md-typeset .cc-crew__badge:first-child::after {
    top: 100%;
    left: 50%;
    height: 1.2rem;
    border-left: 0.05rem solid var(--md-default-fg-color--lighter);
  }

  .md-typeset .cc-crew__badge:not(:first-child)::before {
    top: -1.2rem;
    left: -0.6rem;
    right: -0.6rem;
    border-top: 0.05rem solid var(--md-default-fg-color--lighter);
  }

  .md-typeset .cc-crew__badge:nth-child(2)::before {
    left: 50%;
  }

  .md-typeset .cc-crew__badge:last-child::before {
    right: 50%;
  }

  .md-typeset .cc-crew__badge:not(:first-child)::after {
    top: -1.2rem;
    left: 50%;
    height: 1.6rem;
    border-left: 0.05rem solid var(--md-default-fg-color--lighter);
  }
}

/* The badges are white marks on transparency (the hub's -t variants), so
   each sits on a rounded tile of the brand purple in both schemes: on the
   light ground the marks would otherwise vanish, and the tile is the
   ground the App avatars carry. */
.md-typeset .cc-crew__badge img {
  display: block;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 0.5rem;
  padding: 0.5rem;
  border-radius: 1.2rem;
  background: var(--cc-purple);
}

.md-typeset .cc-crew__badge figcaption {
  margin: 0;
  max-width: none;
  font-style: normal;
}

.md-typeset .cc-crew__role {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset .cc-crew__summary {
  display: block;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
}

.cc-crew__copy {
  max-width: 40rem;
  margin: 0 auto;
}

.md-typeset .cc-crew .cc-crew__verb {
  margin: 0 0 0.8rem;
}

/* Why: five panels on the glowing band, on the page ground (M22). One
   column on a phone; two from 45em, the fifth across both; from 60em a
   six-track grid, three panels and then two wider ones, so the odd count
   leaves no hole. */
.cc-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.cc-panel {
  padding: 1.2rem 1.2rem 0.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  background: var(--md-default-bg-color);
}

@media screen and (min-width: 45em) {
  .cc-panels {
    grid-template-columns: repeat(2, 1fr);
  }

  .cc-panel:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media screen and (min-width: 60em) {
  .cc-panels {
    grid-template-columns: repeat(6, 1fr);
  }

  .cc-panel {
    grid-column: span 2;
  }

  .cc-panel:nth-child(n+4),
  .cc-panel:last-child:nth-child(odd) {
    grid-column: span 3;
  }
}

/* One large glyph at the top of each panel, in the accent, nothing else. */
.md-typeset .cc-panel .cc-panel__glyph {
  margin: 0 0 0.6rem;
  line-height: 1;
}

.md-typeset .cc-panel__glyph .twemoji {
  height: 2.4rem;
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-panel__glyph .twemoji svg {
  width: 2.4rem;
}

/* New here? (M23-R8): under the panels, a group of four small cards, one
   per introductory page under /why/, then one line inviting a reader who has
   tried CodeCrew to say how it went (M23-R5). The lead labels the group (the
   list's aria-labelledby). Each card wears the glyph of the Why panel it
   expands on, in the accent as the panels do, hidden from assistive tech so
   the link's name is its search phrase alone. Four across from 60em, two
   from 45em, one per row on a phone. The whole card is the link, and an
   exception to the site's link style: no underline in any state, the
   scheme's text colour, and a hover and keyboard focus that firm the border
   up to the accent with a faint wash, plus a ring for the keyboard. */
.md-typeset .cc-newhere {
  margin: 3rem auto 0;
  text-align: center;
}

.md-typeset .cc-section .cc-newhere__lead {
  margin: 0 0 1.2rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .cc-newhere__lead strong {
  display: block;
  margin: 0 0 0.2rem;
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--md-default-fg-color);
}

.md-typeset ul.cc-newhere__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media screen and (min-width: 45em) {
  .md-typeset ul.cc-newhere__links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 60em) {
  .md-typeset ul.cc-newhere__links {
    grid-template-columns: repeat(4, 1fr);
  }
}

.md-typeset ul.cc-newhere__links > li {
  display: flex;
  margin: 0;
}

.md-typeset .cc-newhere__links a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 125ms, border-color 125ms;
}

/* :not(.cc-button) matches the specificity of the home page's slate link hover. */
.cc-home .md-typeset .cc-newhere__links a:not(.cc-button):is(:hover, :focus, :focus-visible) {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.cc-home .md-typeset .cc-newhere__links a:is(:hover, :focus-visible) {
  border-color: var(--md-accent-fg-color);
  background: color-mix(in srgb, var(--md-accent-fg-color) 8%, var(--md-default-bg-color));
}

.md-typeset .cc-newhere__links a:focus-visible {
  outline: 0.1rem solid var(--md-accent-fg-color);
  outline-offset: 0.1rem;
}

.md-typeset .cc-newhere__glyph {
  flex: none;
  display: flex;
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-newhere__glyph .twemoji {
  height: 1.6rem;
}

.md-typeset .cc-newhere__glyph .twemoji svg {
  width: 1.6rem;
}

.md-typeset .cc-newhere__invite {
  margin: 0;
}

/* The introductory pages' one screenshot: a readable width, centred, framed. */
.md-typeset img.cc-intro-shot {
  display: block;
  width: 32rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
}

/* Proof: the case under the captures, in visible text (M19-R4): which PR,
   which App wrote it and which reviewed it, then the finding, the fix and
   the approval, each linked to its event on GitHub. A readable column,
   centred under the pair, above the receipts. */
.md-typeset .cc-proof__case {
  max-width: 38rem;
  margin: -0.8rem auto 2.4rem;
  font-size: 0.8rem;
  line-height: 1.6;
}

.md-typeset .cc-proof__case p {
  margin: 0 0 0.8rem;
}

/* A login or a score split across two lines reads as two things. */
.md-typeset .cc-proof__case code {
  white-space: nowrap;
}

.md-typeset .cc-proof__case ul.cc-proof__steps {
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}

.md-typeset .cc-proof__case ul.cc-proof__steps li {
  margin: 0 0 0.6rem;
  padding-left: 0.8rem;
  border-left: 0.15rem solid var(--md-accent-fg-color);
}

.md-typeset .cc-proof__case .cc-proof__example {
  margin-bottom: 0;
  color: var(--md-default-fg-color--light);
}

/* Proof: the receipts, two columns on desktop. */

/* Proof captures: one PR review split across two panels, the upper and
   lower halves of the same page (overlapping by about 100px), as cards
   under the heading in a thin rounded frame with a soft shadow, angled
   towards each other with a perspective on the row and a mirrored 8deg
   rotateY. The continuity cue is a mask fade, not baked into the files:
   the first card fades out over its bottom 14%, the second in over its
   top 14%, on the whole card so the frame fades with the image. At
   26.5rem each the cards are readable; to fit the section the second
   overlaps the first's right edge by 4rem and sits above it (z-index),
   which covers the left capture's GitHub sidebar, with its shadow selling
   the depth. Flat, full-width and unoverlapped on phones with the fades
   kept (the media query at the end). */
.cc-captures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2.4rem;
  perspective: 60rem;
}

.md-typeset .cc-capture {
  position: relative;
  flex: 0 1 26.5rem;
  margin: 0;
  overflow: hidden;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.6rem;
  background: var(--cc-ink);
  box-shadow: 0 1.2rem 2.4rem #0a001259;
}

.md-typeset .cc-capture img {
  display: block;
  width: 100%;
  height: auto;
}

.md-typeset .cc-capture:nth-child(1) {
  transform: rotateY(8deg);
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}

.md-typeset .cc-capture:nth-child(2) {
  z-index: 1;
  margin-left: -4rem;
  transform: rotateY(-8deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}

.cc-receipts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem 2rem;
}

.cc-receipt {
  padding-top: 0.8rem;
  border-top: 0.15rem solid var(--md-accent-fg-color);
}

.md-typeset .cc-receipt p {
  margin: 0;
}

/* Each receipt: a glyph in the accent, a short header, a strapline, and
   its detail as visible text (M19-R4: nothing in the proof is behind a
   hover). */
.md-typeset .cc-receipt .cc-receipt__glyph {
  margin: 0 0 0.3rem;
  line-height: 1;
}

.md-typeset .cc-receipt__glyph .twemoji {
  height: 1.4rem;
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-receipt__glyph .twemoji svg {
  width: 1.4rem;
}

.md-typeset .cc-receipt .cc-receipt__strap {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .cc-receipt .cc-receipt__detail {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
}

@media screen and (min-width: 45em) {
  .cc-receipts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.md-typeset .cc-proof .cc-proof__not-yet {
  margin: 1.6rem 0 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* Closing install call to action. */
.cc-start {
  text-align: center;
}

.md-typeset .cc-start p {
  max-width: 40rem;
  margin: 1rem auto 0;
}

/* Two steps, solo then the reviewer's App (M19-R6): each a small heading
   and a lead, then its terminal with what goes beside it. The follow-up
   list and the required-review note are prose to read, so they sit left
   aligned in a reading column rather than centred. */
.cc-start__step + .cc-start__step {
  margin-top: 3.2rem;
}

.md-typeset .cc-start h3 {
  margin: 2rem 0 0;
  font-size: 1.1rem;
}

.md-typeset .cc-start .cc-start__step-lead {
  margin-bottom: 1.6rem;
}

.md-typeset .cc-start .cc-start__next {
  max-width: 30rem;
  margin: 0 auto;
  padding-left: 1.2rem;
  text-align: left;
}

.md-typeset .cc-start .cc-start__next li {
  margin-bottom: 0.6rem;
}

/* What to have before the terminal (M23-R4): the gh floor and a check on
   pull requests. Prose to read, so left aligned in the same reading column
   as the follow-up list, with the lead's gap before the terminal. */
.md-typeset .cc-start .cc-start__needs {
  max-width: 30rem;
  margin: 0 auto 1.6rem;
  padding-left: 1.2rem;
  text-align: left;
}

.md-typeset .cc-start .cc-start__needs li {
  margin-bottom: 0.6rem;
}

.md-typeset .cc-start .cc-start__approval {
  margin-top: 2rem;
  padding: 0.8rem 1rem;
  border-left: 0.2rem solid var(--cc-pink);
  text-align: left;
  font-size: 0.75rem;
}

/* The terminal and the payoff line: stacked and centred on phones, two
   columns from 60em with the terminal on the left and the line beside it,
   vertically centred. The line is the section's close: the quote in the
   heading face, the lead-in small and muted above it (kept because the
   quote alone does not say who it is said to); the quotes carry the
   emphasis, so the italic goes. */
.cc-start__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
  justify-items: center;
}

.md-typeset .cc-start .cc-start__payoff {
  max-width: 24rem;
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.cc-start__lead {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--md-text-font-family);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--md-default-fg-color--light);
}

@media screen and (min-width: 60em) {
  .cc-start__pair {
    grid-template-columns: auto 1fr;
    gap: 3rem;
    justify-items: start;
    text-align: left;
  }
  .cc-start__pair .cc-term {
    margin: 0;
  }
  .md-typeset .cc-start .cc-start__next {
    margin: 0;
  }
}

/* The footer meta strip after the Start now band. Zensical's modern
   stylesheet paints .md-footer with --md-default-bg-color and the strip
   with --md-default-fg-color--lightest (the --md-footer-bg-color values
   above never apply), which made the footer the page ground plus the same
   faint tint the old band had. The home footer takes the brand purple with
   light type in both schemes, the header's own trick, and a hairline. */
.cc-footer {
  --md-default-bg-color: var(--cc-purple);
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #ffffffb3;
  --md-default-fg-color--lighter: #ffffff4d;
  --md-default-fg-color--lightest: #ffffff1f;
  --md-accent-fg-color: var(--cc-cyan);
  border-top: 0.05rem solid var(--md-default-fg-color--lighter);
}

@media screen and (max-width: 44.9375em) {
  .cc-section {
    padding: 2rem 0.8rem;
  }
  .cc-captures {
    gap: 1.2rem;
    perspective: none;
  }
  .md-typeset .cc-capture {
    flex-basis: 100%;
  }
  /* Outranks the nth-child rules above, which are one class more specific. */
  .md-typeset .cc-capture:nth-child(n) {
    margin-left: 0;
    transform: none;
  }
  .md-typeset .cc-section h2 {
    font-size: 1.6rem;
  }
  .md-typeset .cc-hero .cc-hero__headline {
    font-size: 1.9rem;
  }
  /* On a phone the pitch, not the artwork, fills the first screen: at
     375px the headline and the whole first paragraph sit above the fold
     (M19-R7). The header already carries the name. */
  .md-typeset .cc-logo {
    max-width: 7rem;
  }
}

/* Below 420px, the width INSTALL_LINE_MAX was measured at, the page's two
   kinds of code block step down from 12.8px to 11.2px, so a 42-character
   line (the install command, the routing example's last row) fits at
   375px rather than scrolling sideways; a block that scrolls also takes a
   Tab stop of its own (M19-R7). */
@media screen and (max-width: 26.1875em) {
  .md-typeset .cc-term pre > code,
  .md-typeset .cc-crew .highlight pre > code {
    font-size: 0.56rem;
  }
}

/* The phone drawer, shut. Below the tab-collapse breakpoint the theme
   parks the primary sidebar off-canvas but leaves it in the tab order, so
   Tab walked through its links with the focus ring drawn off-screen. On
   every page it is hidden while the toggle is unchecked, which takes its
   links out of the tab order, and the burger is the keyboard's way in
   (partials/keyboard.html); the theme's own checked rule lists no
   visibility transition, so opening shows it at once, and the delay here
   lets it slide out before hiding. The theme sets `visibility: visible`
   on the nested navs it shows (the open section, the page's own contents),
   which would outlive an inherited hidden, so they are hidden by name too.
   Above the breakpoint, where the docs and the blog show the sidebar in
   place, the rule does not apply (M19-R7 on the home page, M24-R2
   everywhere). */
@media screen and (max-width: 76.234375em) {
  [data-md-toggle="drawer"]:not(:checked) ~ .md-container .md-sidebar--primary,
  [data-md-toggle="drawer"]:not(:checked) ~ .md-container .md-sidebar--primary .md-nav {
    visibility: hidden;
    transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 0), box-shadow 0.2s, visibility 0s 0.2s;
  }
}

/* The phone's "On this page" pop-up, shut. Below 60em the theme turns the
   table of contents into a floating button over a pop-up that, shut, is
   only faded out (opacity 0, pointer-events none), so Tab walked through its
   links with nothing on screen. Hidden while #__toc is unchecked, with the
   theme's own fade repeated and the hiding held back until it is over; its
   checked rule lists no visibility transition, so opening shows it at once,
   and partials/keyboard.html makes the button the keyboard's way in. From
   60em the contents sit in place and the rule does not apply (M24-R2). */
@media screen and (max-width: 59.984375em) {
  .md-sidebar--secondary [type="checkbox"]:not(:checked) ~ .md-sidebar__inner {
    visibility: hidden;
    transition: transform 0s 0.25s, opacity 0.25s, visibility 0s 0.25s;
  }
}

/* The palette toggle's focus ring. The toggle is two invisible radios, each
   followed by the label that switches to the other; the theme shows one
   label by un-hiding it and never checks a radio on load, and rings the
   label straight after the focused radio. Tab into the unchecked pair lands
   on the first radio and Shift+Tab on the last, so whenever the label on
   show is not the focused radio's own neighbour (the sun in a fresh OS-dark
   visit, for one), focus reached the toggle with no ring. On every page
   the label on show takes the theme's ring whichever radio has focus
   (M19-R7 on the home page, M24-R3 everywhere). */
.md-header__option:has(> .md-option:is(:focus-visible, .focus-visible)) > label:not([hidden]) {
  outline-style: auto;
  outline-color: var(--md-accent-fg-color);
}

/* Hero glow (www#85): a wide pink/purple/cyan gradient drifts side to side
   under a radial mask that fades to the hero's own ink, so the colour shows
   only near the top edge. --cc-glow-strength sets the intensity; the mask's
   75% stop sets how far down the glow reaches.

   Contrast at the brightest point of the 12s cycle, measured in Chromium
   behind each run of type (the lowest from 320px to 1920px wide): the white
   headline 7.7:1, the 70% white sub-headline 6.3:1, its cyan bold 6.2:1,
   the pink link 4.8:1, the button labels 10.5:1 or more. The type never
   reaches the top edge, where the mask is clear: there the lifted cyan at
   55% over ink would leave white at 6.3:1 but the sub-headline at 4.0:1 and
   the cyan bold at 3.4:1, so the strength and the mask's reach are tuned
   together with where the type sits.

   A browser without oklab gradients or color-mix() (before Chrome/Edge 111,
   Safari 16.2, Firefox 127) drops the ::before's background-image, and the
   hero is plain ink, where every colour above reads at 6:1 or more. Under
   prefers-reduced-motion the glow holds still. */
.cc-hero {
  position: relative;
  isolation: isolate;
  --cc-glow-strength: 0.55;
}

.cc-hero::before,
.cc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The cyan is lifted 20% toward the pink: the brand cyan has a red
   channel of 0, the sRGB gamut's edge, and any blend away from it bends
   sharply there, which the drift sweeps across the hero as a visible line.
   Each pair of stops eases in and out (smoothstep, eight steps) and the
   cyan holds over a broad plateau, so no stop is a narrow peak. */
.cc-hero::before {
  --cc-glow-cyan: color-mix(in srgb, var(--cc-cyan) 80%, var(--cc-pink));
  background-image: linear-gradient(96deg in oklab,
    var(--cc-pink) 0%,
    color-mix(in oklab, var(--cc-purple-light) 4.3%, var(--cc-pink)) 3.75%,
    color-mix(in oklab, var(--cc-purple-light) 15.6%, var(--cc-pink)) 7.50%,
    color-mix(in oklab, var(--cc-purple-light) 31.6%, var(--cc-pink)) 11.25%,
    color-mix(in oklab, var(--cc-purple-light) 50.0%, var(--cc-pink)) 15.00%,
    color-mix(in oklab, var(--cc-purple-light) 68.4%, var(--cc-pink)) 18.75%,
    color-mix(in oklab, var(--cc-purple-light) 84.4%, var(--cc-pink)) 22.50%,
    color-mix(in oklab, var(--cc-purple-light) 95.7%, var(--cc-pink)) 26.25%,
    var(--cc-purple-light) 30%,
    color-mix(in oklab, var(--cc-glow-cyan) 4.3%, var(--cc-purple-light)) 33.50%,
    color-mix(in oklab, var(--cc-glow-cyan) 15.6%, var(--cc-purple-light)) 37.00%,
    color-mix(in oklab, var(--cc-glow-cyan) 31.6%, var(--cc-purple-light)) 40.50%,
    color-mix(in oklab, var(--cc-glow-cyan) 50.0%, var(--cc-purple-light)) 44.00%,
    color-mix(in oklab, var(--cc-glow-cyan) 68.4%, var(--cc-purple-light)) 47.50%,
    color-mix(in oklab, var(--cc-glow-cyan) 84.4%, var(--cc-purple-light)) 51.00%,
    color-mix(in oklab, var(--cc-glow-cyan) 95.7%, var(--cc-purple-light)) 54.50%,
    var(--cc-glow-cyan) 58%,
    var(--cc-glow-cyan) 80%,
    color-mix(in oklab, var(--cc-pink) 4.3%, var(--cc-glow-cyan)) 82.50%,
    color-mix(in oklab, var(--cc-pink) 15.6%, var(--cc-glow-cyan)) 85.00%,
    color-mix(in oklab, var(--cc-pink) 31.6%, var(--cc-glow-cyan)) 87.50%,
    color-mix(in oklab, var(--cc-pink) 50.0%, var(--cc-glow-cyan)) 90.00%,
    color-mix(in oklab, var(--cc-pink) 68.4%, var(--cc-glow-cyan)) 92.50%,
    color-mix(in oklab, var(--cc-pink) 84.4%, var(--cc-glow-cyan)) 95.00%,
    color-mix(in oklab, var(--cc-pink) 95.7%, var(--cc-glow-cyan)) 97.50%,
    var(--cc-pink) 100%);
  background-size: 400% 400%;
  opacity: var(--cc-glow-strength);
  animation: cc-glow-drift 12s ease infinite;
}

.cc-hero::after {
  background: radial-gradient(100% 140% at 60% -10%, transparent 0%, var(--cc-ink) 75%);
}

@keyframes cc-glow-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-hero::before { animation: none; }
}