/*
 * web/static/css/docs.css
 * =======================
 * Docs surface stylesheet (Commit 30, re-coupled).
 *
 * Class names follow the Finsweet Client-First convention so a future
 * Webflow port of these pages drops in cleanly under a project that
 * already loads Client-First.
 *
 * The stylesheet inherits the IADTX app design system. It loads after
 * fonts.css, tokens.css, app.css, and components.css. Every colour,
 * font, and weight pulls from var(--color--*), var(--font--*) so docs
 * and app stay in lockstep automatically when the design system is
 * updated.
 *
 * Breakpoints follow the Client-First standard: 991, 767, 478.
 *
 * Semantic neutrality on band readings: the closed band readings
 * (below_band, inside_tie_band, above_band) are inputs to the
 * verdict, not verdicts themselves. They are styled in greyscale to
 * avoid being mistaken for a verdict pill (red for additive, green
 * for multiplicative).
 */

/* ──────────────────────────────────────────────────────────────
 * Reset and base
 * ────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font--primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color--black);
  background-color: var(--color--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color--secondary-dark);
  text-decoration: none;
}

p {
  margin: 0 0 1em 0;
}

ul {
  margin: 0 0 1em 0;
  padding-left: 1.25em;
}

code, pre {
  font-family: var(--font--mono);
}

/* ──────────────────────────────────────────────────────────────
 * Page wrapper and Client-First layout primitives
 * ────────────────────────────────────────────────────────────── */

.page_main {
  display: block;
  width: 100%;
}

.padding-global {
  padding-left: 5%;
  padding-right: 5%;
}

.container-large {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.padding-section-large {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.padding-section-medium {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* ──────────────────────────────────────────────────────────────
 * Typography. Headings use Altone SemiBold via the app token
 * ladder. Wordmark stays untouched (Cal Sans is reserved).
 * ────────────────────────────────────────────────────────────── */

.heading-group > * + * {
  margin-top: 1rem;
}

.heading-style-h1 {
  margin: 0;
  font-family: var(--font--primary);
  font-size: 3rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color--primary);
}

.heading-style-h2 {
  margin: 0 0 1rem 0;
  font-family: var(--font--primary);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color--primary);
}

.heading-style-h3 {
  margin: 1.5rem 0 0.5rem 0;
  font-family: var(--font--primary);
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color--primary);
}

.text-size-large {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color--black);
}

.text-size-medium {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color--black);
}

.text-color-faded {
  color: var(--color--gray-600);
}

/* Subcode identifiers and technical strings. DM Mono per app rule. */
.subcode__id,
.band__id,
code {
  font-family: var(--font--mono);
  font-size: 0.9375em;
  color: var(--color--gray-700);
}

/* ──────────────────────────────────────────────────────────────
 * Lists
 * ────────────────────────────────────────────────────────────── */

.list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.list-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color--gray-100);
}

.list-item:last-child {
  border-bottom: none;
}

.toc-list .list-item a {
  display: inline-block;
  padding: 0.25rem 0;
}

/* ──────────────────────────────────────────────────────────────
 * Subcode and band articles
 * ────────────────────────────────────────────────────────────── */

.subcode {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--color--gray-100);
  scroll-margin-top: 2rem;
}

.subcode:last-child {
  border-bottom: none;
}

.band {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--color--gray-100);
  scroll-margin-top: 2rem;
}

.band:last-child {
  border-bottom: none;
}

.attestation-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color--gray-100);
  font-size: 0.875rem;
  color: var(--color--gray-600);
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────
 * CTA block and button. Primary action follows the app rule:
 * green action background, white foreground, green-dark on hover.
 * ────────────────────────────────────────────────────────────── */

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 2.5rem;
  background-color: var(--color--tile-grey);
  border-radius: 0.5rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--font--primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.button.is-primary {
  background-color: var(--color--secondary);
  color: var(--color--white);
  border-color: var(--color--secondary);
}

.button.is-primary:hover {
  background-color: var(--color--secondary-dark);
  border-color: var(--color--secondary-dark);
  color: var(--color--white);
  text-decoration: none;
}

/* ──────────────────────────────────────────────────────────────
 * Section spacing helpers. Tile-grey alternates section
 * backgrounds on the docs surface, mirroring the app rhythm.
 * ────────────────────────────────────────────────────────────── */

.section_hero {
  background-color: var(--color--white);
}

.section_toc {
  background-color: var(--color--tile-grey);
}

.section_subcodes,
.section_bands {
  background-color: var(--color--white);
}

.section_disclosure {
  background-color: var(--color--tile-grey);
}

.section_cta {
  background-color: var(--color--white);
}

/* ──────────────────────────────────────────────────────────────
 * Breakpoints. Client-First standard rhythm: 991, 767, 478.
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .heading-style-h1 {
    font-size: 2.5rem;
  }
  .heading-style-h2 {
    font-size: 1.75rem;
  }
  .padding-section-large {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .padding-section-medium {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 767px) {
  .padding-global {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .heading-style-h1 {
    font-size: 2rem;
  }
  .heading-style-h2 {
    font-size: 1.5rem;
  }
  .text-size-large {
    font-size: 1.125rem;
  }
  .padding-section-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .cta-block {
    padding: 1.75rem;
  }
}

@media (max-width: 478px) {
  .heading-style-h1 {
    font-size: 1.75rem;
  }
  .heading-style-h2 {
    font-size: 1.375rem;
  }
  .heading-style-h3 {
    font-size: 1.0625rem;
  }
  .padding-section-large {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .subcode,
  .band {
    padding: 1.75rem 0;
  }
}

/* ──────────────────────────────────────────────────────────────
 * Reduced-motion default. The docs surface has no motion to begin
 * with, but the rule is set explicitly so future additions inherit
 * the discipline.
 * ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────
 * C32 additions: docs landing chrome
 *
 * Class names are .docs-* prefixed so they cannot collide with the
 * app component CSS or the existing Client-First scaffolding above.
 * No app token mutation; everything pulls from var(--color--*) and
 * var(--font--*).
 *
 * Sections: nav, hero, section label, card grid, footer, mobile
 * breakpoints, reduced-motion gate.
 * ────────────────────────────────────────────────────────────── */

/* Nav
 * ────────────────────────────────────────────────────────────── */

.docs-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color--white);
  border-bottom: 1px solid var(--color--gray-100);
}

.docs-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.docs-nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color--primary);
}

.docs-nav__wordmark {
  display: block;
  height: 24px;
  width: auto;
}

.docs-nav__brand-suffix {
  font-family: var(--font--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color--gray-600);
  position: relative;
  top: -2px;
}

.docs-nav__links {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
}

.docs-nav__link {
  font-family: var(--font--primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--color--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.docs-nav__link:hover {
  color: var(--color--secondary-dark);
}

.docs-nav__link-icon {
  font-size: 12px;
  line-height: 1;
  color: var(--color--gray-600);
  transition: color 120ms ease;
}

.docs-nav__link--external:hover .docs-nav__link-icon {
  color: var(--color--secondary-dark);
}

/* Hero
 * ────────────────────────────────────────────────────────────── */

.docs-hero {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
  overflow: hidden;
}

.docs-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.docs-hero__eyebrow {
  font-family: var(--font--mono);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color--gray-600);
  margin: 0 0 1.5rem 0;
}

.docs-hero__h1 {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color--primary);
  margin: 0 0 1.5rem 0;
}

.docs-hero__body {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color--gray-700);
  max-width: 56ch;
  margin: 0 auto 2rem auto;
}

.docs-hero__ctas {
  display: inline-flex;
  align-items: baseline;
  gap: 2rem;
  margin: 0;
}

.docs-hero__cta {
  font-family: var(--font--primary);
  font-weight: 600;
  font-size: 15px;
  color: var(--color--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.docs-hero__cta--mono {
  font-family: var(--font--mono);
  font-size: 14px;
}

.docs-hero__cta:hover {
  color: var(--color--secondary-dark);
  border-bottom-color: var(--color--secondary-dark);
}

.docs-hero__cta-arrow {
  display: inline-block;
  transition: transform 160ms ease;
}

.docs-hero__cta:hover .docs-hero__cta-arrow {
  transform: translateX(2px);
}

/* Section label
 * ────────────────────────────────────────────────────────────── */

.docs-section__label {
  font-family: var(--font--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color--gray-600);
  margin: 0 0 2rem 0;
  text-align: center;
}

/* Inline variant. Used inside the API surface column where the
 * eyebrow sits left-aligned above the H1, sharing the column axis
 * with the endpoint cards. Tighter bottom margin so it reads as a
 * label paired with the H1, not as a section break. */
.docs-section__label--inline {
  text-align: left;
  margin: 0 0 1rem 0;
}

/* Card grid
 * ────────────────────────────────────────────────────────────── */

.docs-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-card {
  display: flex;
}

.docs-card > .docs-card__link {
  flex: 1 1 auto;
  width: 100%;
}

.docs-card__link {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 1.75rem;
  background-color: var(--color--white);
  border: 1px solid var(--color--gray-200);
  border-radius: 16px;
  text-decoration: none;
  color: var(--color--primary);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  position: relative;
  overflow: hidden;
}

.docs-card__link:hover {
  transform: translateY(-2px);
  border-color: var(--color--gray-500);
  box-shadow: 0 4px 16px rgba(27, 42, 74, 0.06);
}

.docs-card__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  margin: 0 0 1.25rem 0;
  color: var(--color--primary);
  transition: color 160ms ease;
}

.docs-card__icon svg {
  width: 100%;
  height: 100%;
}

.docs-card__link:hover .docs-card__icon {
  color: var(--color--secondary);
}

.docs-card__title {
  font-family: var(--font--primary);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color--primary);
  margin: 0 0 0.5rem 0;
}

.docs-card__body {
  font-family: var(--font--primary);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color--gray-700);
  margin: 0 0 1rem 0;
}

.docs-card__cta {
  font-family: var(--font--primary);
  font-weight: 600;
  font-size: 14px;
  color: var(--color--primary);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1rem;
}

.docs-card__cta-arrow {
  display: inline-block;
  transition: transform 160ms ease;
}

.docs-card__link:hover .docs-card__cta-arrow {
  transform: translateX(2px);
}

/* Footer
 * ────────────────────────────────────────────────────────────── */

.docs-footer {
  border-top: 1px solid var(--color--gray-100);
  background-color: var(--color--white);
  margin-top: 4rem;
}

.docs-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.docs-footer__brand {
  flex: 0 0 auto;
}

.docs-footer__wordmark {
  display: block;
  height: 24px;
  width: auto;
}

.docs-footer__attribution {
  flex: 1 1 auto;
  text-align: center;
}

.docs-footer__line {
  font-family: var(--font--primary);
  font-size: 13px;
  color: var(--color--gray-700);
  margin: 0;
}

.docs-footer__line + .docs-footer__line {
  margin-top: 0.25rem;
}

.docs-footer__links {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}

.docs-footer__link {
  font-family: var(--font--primary);
  font-size: 13px;
  color: var(--color--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.docs-footer__link:hover {
  border-bottom-color: var(--color--primary);
}

/* Mobile breakpoints
 * Client-First standard: 991, 767, 478.
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .docs-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .docs-hero__h1 {
    font-size: 52px;
  }
}

@media (max-width: 767px) {
  .docs-nav__row {
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .docs-nav__links {
    width: 100%;
    justify-content: flex-start;
    gap: 1.5rem;
  }
  .docs-hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .docs-hero__h1 {
    font-size: 44px;
  }
  .docs-hero__body {
    font-size: 17px;
  }
  .docs-footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .docs-footer__attribution {
    text-align: left;
  }
}

@media (max-width: 478px) {
  .docs-card-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .docs-card__link {
    height: auto;
    min-height: 220px;
    padding: 1.5rem;
  }
  .docs-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .docs-hero__h1 {
    font-size: 36px;
  }
  .docs-hero__eyebrow {
    font-size: 12px;
    margin-bottom: 1rem;
  }
  .docs-hero__body {
    font-size: 16px;
  }
  .docs-hero__ctas {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .docs-hero__inner {
    text-align: left;
  }
  .docs-hero__body {
    margin-left: 0;
    margin-right: 0;
  }
  .docs-section__label {
    text-align: left;
  }
  .docs-nav__brand-suffix {
    font-size: 12px;
  }
}

/* Reduced motion. The C32 motion is limited to 2 px hover lifts and
 * 2 px arrow translates. Both wrapped here so users with the OS-level
 * preference get a static surface.
 * ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .docs-card__link,
  .docs-card__icon,
  .docs-card__cta-arrow,
  .docs-hero__cta-arrow {
    transition: none;
  }
  .docs-card__link:hover {
    transform: none;
  }
  .docs-card__link:hover .docs-card__cta-arrow,
  .docs-hero__cta:hover .docs-hero__cta-arrow {
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────
 * C33 API reference page (.docs-api-*)
 *
 * Two-column layout at 1024 and above. Left rail is a sticky table
 * of contents. Right column carries the lede then one card per
 * endpoint. At 768 the sidebar is replaced by a sticky inline
 * select. At 375 the page is single column.
 *
 * All colour comes from tokens.css. No hex literals appear in this
 * block; that is the same discipline the rest of docs.css follows.
 * ────────────────────────────────────────────────────────────── */

.section_api {
  background: var(--color--white);
}

/* Header lives inside the content column (.docs-api__main). Its
 * outer width is bounded by the grid track. Per-element caps below
 * keep each line at a comfortable measure without forcing the whole
 * header into a narrow strip floating in the gutter. */
.docs-api__header {
  margin: 0 0 2.5rem 0;
}

.docs-api__h1 {
  margin: 0 0 1rem 0;
  max-width: 18ch;
  color: var(--color--primary);
}

.docs-api__lede {
  margin: 0 0 1rem 0;
  max-width: 65ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color--gray-700);
}

.docs-api__meta {
  margin: 0;
  max-width: 75ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color--gray-600);
}

.docs-api__meta-code {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--color--gray-50);
  border: 1px solid var(--color--gray-200);
  border-radius: 6px;
  font-family: var(--font--mono);
  font-size: 13px;
  color: var(--color--primary);
}

/* Two-column grid. Sidebar fixed at 220 px, body fills the rest.
 * The select shell is hidden at this breakpoint. */
.docs-api__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4rem;
  align-items: start;
}

.docs-api__select-shell {
  display: none;
}

.docs-api__toc {
  position: sticky;
  top: 96px;
  align-self: start;
}

.docs-api__toc-label {
  margin: 0 0 0.75rem 0;
  font-family: var(--font--primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color--gray-500);
}

.docs-api__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--color--gray-200);
}

.docs-api__toc-list li {
  margin: 0;
}

.docs-api__toc-link {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color--gray-600);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.docs-api__toc-link:hover,
.docs-api__toc-link:focus-visible {
  color: var(--color--primary);
  border-left-color: var(--color--secondary);
  outline: none;
}

/* Content column. Holds the page header (eyebrow, H1, lede, meta)
 * stacked above the endpoint card list. min-width: 0 so the column
 * does not blow out the grid track when a long unbroken token (a
 * URL or a fenced code block) sits inside. */
.docs-api__main {
  min-width: 0;
}

/* Endpoint card. Soft surround so the cards form a vertical rhythm
 * without becoming heavy. The radius matches docs-card at 16 px. */
.docs-api__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.docs-api__section,
.docs-api__endpoint {
  scroll-margin-top: 96px;
  padding: 2rem;
  background: var(--color--white);
  border: 1px solid var(--color--gray-200);
  border-radius: 16px;
}

.docs-api__section-title {
  margin: 0 0 0.75rem 0;
  font-family: var(--font--primary);
  font-size: 24px;
  font-weight: 600;
  color: var(--color--primary);
}

.docs-api__section-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color--gray-700);
}

.docs-api__endpoint-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem 0;
}

.docs-api__method {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  font-family: var(--font--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docs-api__method--get {
  background: var(--color--tile-sky);
  color: var(--color--chart-sky-blue);
}

.docs-api__method--post {
  background: var(--color--tile-green);
  color: var(--color--secondary-dark);
}

.docs-api__path {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font--mono);
  font-size: 16px;
  color: var(--color--primary);
  word-break: break-all;
}

.docs-api__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docs-api__chip--anonymous {
  background: var(--color--gray-100);
  color: var(--color--gray-700);
}

.docs-api__chip--authenticated {
  background: var(--color--primary);
  color: var(--color--white);
}

.docs-api__endpoint-title {
  margin: 0 0 0.5rem 0;
  font-family: var(--font--primary);
  font-size: 22px;
  font-weight: 600;
  color: var(--color--primary);
}

.docs-api__endpoint-body {
  margin: 0 0 1.25rem 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color--gray-700);
}

.docs-api__sub {
  margin: 1.5rem 0 0.5rem 0;
  font-family: var(--font--primary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color--gray-600);
}

.docs-api__field-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  list-style: disc;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color--gray-700);
}

.docs-api__field-list code {
  padding: 0.0625rem 0.375rem;
  background: var(--color--gray-50);
  border: 1px solid var(--color--gray-200);
  border-radius: 4px;
  font-family: var(--font--mono);
  font-size: 13px;
  color: var(--color--primary);
}

.docs-api__code {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--color--gray-50);
  border: 1px solid var(--color--gray-200);
  border-radius: 12px;
  overflow-x: auto;
  font-family: var(--font--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color--primary);
  white-space: pre;
}

.docs-api__code code {
  font: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}

.docs-api__note {
  margin: 1rem 0 0 0;
  padding: 0.75rem 1rem;
  background: var(--color--tile-grey);
  border-left: 3px solid var(--color--secondary);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color--gray-700);
}

.docs-api__inline-link {
  color: var(--color--primary);
  text-decoration: underline;
  text-decoration-color: var(--color--gray-200);
  text-underline-offset: 3px;
}

.docs-api__inline-link:hover {
  text-decoration-color: var(--color--secondary);
}

.docs-api__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 0.75rem 0 0 0;
}

.docs-api__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.docs-api__table th,
.docs-api__table td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color--gray-200);
  vertical-align: top;
  color: var(--color--gray-700);
}

.docs-api__table th {
  font-family: var(--font--primary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color--gray-600);
  border-bottom-color: var(--color--gray-500);
}

.docs-api__table code {
  font-family: var(--font--mono);
  font-size: 13px;
  color: var(--color--primary);
}

/* 768 breakpoint. Sidebar collapses to a sticky select shell pinned
 * under the chrome. Endpoint cards drop interior padding slightly. */
@media (max-width: 1023px) {
  .docs-api__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .docs-api__toc {
    display: none;
  }
  .docs-api__select-shell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 72px;
    z-index: 1;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--color--white);
    border: 1px solid var(--color--gray-200);
    border-radius: 12px;
    box-shadow: 0 1px 0 var(--color--gray-100);
  }
  .docs-api__select-label {
    font-family: var(--font--primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color--gray-600);
  }
  .docs-api__select {
    flex: 1 1 auto;
    padding: 0.375rem 0.5rem;
    background: var(--color--white);
    border: 1px solid var(--color--gray-200);
    border-radius: 8px;
    font-family: var(--font--primary);
    font-size: 14px;
    color: var(--color--primary);
  }
}

/* 375 breakpoint. Endpoint cards lose horizontal padding and the
 * lede font shrinks to keep the page readable on a phone. */
@media (max-width: 767px) {
  .docs-api__lede {
    font-size: 16px;
  }
  .docs-api__section,
  .docs-api__endpoint {
    padding: 1.5rem 1.25rem;
  }
  .docs-api__endpoint-title {
    font-size: 20px;
  }
  .docs-api__section-title {
    font-size: 22px;
  }
  .docs-api__code {
    font-size: 12px;
    padding: 0.875rem 1rem;
  }
  .docs-api__path {
    font-size: 14px;
  }
}

/* Reduced motion. The toc-link colour transition and the inline link
 * underline transition are wrapped here so the OS-level preference
 * gives users a static surface on this page too. */
@media (prefers-reduced-motion: reduce) {
  .docs-api__toc-link,
  .docs-api__inline-link {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────
 * C34b additions
 *
 * Three new chip variants for tier gating, a copy button on every
 * pre.docs-api__code block, and a small motion vocabulary on the
 * landing card icons plus the API method chips. All motion is
 * wrapped in @media (prefers-reduced-motion: no-preference) so the
 * OS-level preference suppresses it cleanly. No new colour tokens.
 * Every value pulls from var(--color--*).
 * ────────────────────────────────────────────────────────────── */

.docs-api__chip--business {
  background: var(--color--tile-green);
  color: var(--color--secondary-dark);
}

.docs-api__chip--enterprise {
  background: var(--color--primary);
  color: var(--color--white);
}

.docs-api__chip--deprecated {
  background: var(--color--tile-gold);
  color: var(--color--gray-700);
}

/* Inline Deprecated tag. Smaller than the docs-api__chip family and
 * intended for inline use inside field-lists and notes where the
 * chip footprint is too tall. Renders as a navy hairline outline on
 * a tile-gold tint with monospace-flavoured uppercase. No margin so
 * the field-list bullet alignment holds. Used by the api reference
 * to mark legacy parameter and field spellings retained for backward
 * compatibility (organization, substrate_a_name, substrate_b_name,
 * substrate_a, substrate_b, substrate_a_value, substrate_b_value).
 */
.docs-api__tag--deprecated {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  margin-left: 0.375rem;
  background: var(--color--tile-gold);
  color: var(--color--primary);
  border: 1px solid var(--color--gray-200);
  border-radius: 0.25rem;
  font-family: var(--font--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Copy button. The script wraps every pre.docs-api__code in a
 * .docs-api__code-wrap and injects a button absolutely positioned
 * in the top right corner. The wrapper carries position relative;
 * the pre keeps its own paddings. The button surfaces an aria label
 * for screen readers and a visible label that shifts to a confirmed
 * state for two seconds after a successful copy. */
.docs-api__code-wrap {
  position: relative;
}

.docs-api__copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font-family: var(--font--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color--gray-600);
  background: var(--color--white);
  border: 1px solid var(--color--gray-200);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.0;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}

.docs-api__code-wrap:hover .docs-api__copy-btn,
.docs-api__copy-btn:focus-visible {
  opacity: 1;
}

.docs-api__copy-btn:hover {
  color: var(--color--primary);
  border-color: var(--color--gray-500);
}

.docs-api__copy-btn[data-state="copied"] {
  color: var(--color--secondary-dark);
  border-color: var(--color--secondary);
  opacity: 1;
}

.docs-api__copy-btn-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex: 0 0 auto;
}

/* On touch surfaces hover does not exist; reveal the button at all
 * times below 768 so it is reachable. */
@media (max-width: 767px) {
  .docs-api__copy-btn {
    opacity: 1;
  }
}

/* Motion. Two pieces only.
 *
 * Landing card icons get a slow ambient glow on hover. The icon
 * pulse from C20 is reused; this layer adds a 1 px lift on the icon
 * itself so the docs landing reads as alive without competing with
 * the larger card hover.
 *
 * API method chips on the API page get a gentle in-bound translate
 * when the chip first enters the viewport. The translate is two
 * pixels and the duration is 240 ms; both fall well below the
 * Commit 20 motion vetoes (no entrance motion on tier pills, no
 * decoration on the upgrade pill, no tile-grid entrance, no
 * download button motion).
 *
 * Both are wrapped in @media (prefers-reduced-motion: no-preference)
 * so the OS-level preference suppresses them. */
@media (prefers-reduced-motion: no-preference) {
  .docs-card__link:hover .docs-card__icon {
    transform: translateY(-1px);
  }
  .docs-card__icon {
    transition: color 160ms ease, transform 240ms ease;
  }
  .docs-api__method {
    animation: docsApiMethodEnter 240ms ease-out both;
  }
  .docs-api__chip {
    animation: docsApiMethodEnter 280ms ease-out both;
    animation-delay: 60ms;
  }
}

@keyframes docsApiMethodEnter {
  from {
    transform: translateX(-2px);
    opacity: 0.0;
  }
  to {
    transform: translateX(0);
    opacity: 1.0;
  }
}

/* ──────────────────────────────────────────────────────────────
 * C34c additions
 *
 * Two new chip variants and a pager primitive shared by the
 * uploads and bands pages. Both pages reuse the docs-api__*
 * scaffolding (grid, toc, select-shell, section, endpoint,
 * code-wrap, table, table-wrap, chip, note) so the surface reads
 * as one coherent system across /api, /uploads, and /bands.
 *
 * Subcode chip is the closed upload-validation key surfaced on
 * the upload error card. Reading chip is the closed band reading
 * surfaced on the result page. Both render as inline-flex pills
 * sitting in the docs-api__endpoint-head row, identical metric
 * footprint to the API method chip so the cards line up.
 *
 * Tier-ref chip is rendered as an anchor on cap-related upload
 * subcodes only (file_too_large, max_rows_exceeded). It points
 * at iadtx.com/pricing and reads as a navy outline pill so it
 * does not compete with the subcode chip on its left.
 *
 * Pager primitive is a flex row with prev on the left and next
 * on the right, separated by a top border so it reads as a
 * footer inside each card. Placeholder spans keep the spacing
 * symmetric on the first and last cards.
 * ────────────────────────────────────────────────────────────── */

.docs-api__chip--subcode {
  background: var(--color--gray-100);
  color: var(--color--primary);
  font-family: var(--font--mono);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}

.docs-api__chip--reading {
  background: var(--color--tile-green);
  color: var(--color--secondary-dark);
  font-family: var(--font--mono);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}

.docs-api__chip--tier-ref {
  background: var(--color--white);
  color: var(--color--primary);
  border: 1px solid var(--color--primary);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.docs-api__chip--tier-ref:hover,
.docs-api__chip--tier-ref:focus-visible {
  background: var(--color--primary);
  color: var(--color--white);
  outline: none;
}

.docs-api__pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0 0;
  padding: 1rem 0 0 0;
  border-top: 1px solid var(--color--gray-200);
  font-size: 14px;
}

.docs-api__pager-prev,
.docs-api__pager-next {
  color: var(--color--gray-600);
  text-decoration: none;
  line-height: 1.4;
  transition: color 160ms ease;
}

.docs-api__pager-prev:hover,
.docs-api__pager-prev:focus-visible,
.docs-api__pager-next:hover,
.docs-api__pager-next:focus-visible {
  color: var(--color--primary);
  outline: none;
}

.docs-api__pager-next {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 767px) {
  .docs-api__pager {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .docs-api__pager-next {
    text-align: left;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-api__chip--tier-ref,
  .docs-api__pager-prev,
  .docs-api__pager-next {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   C40 docs-1: layout shell + sidebar primitive
   ──────────────────────────────────────────────────────────── */

.docs-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.docs-shell__content {
  min-width: 0;
}

@media (max-width: 1023px) {
  .docs-shell {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.docs-sidebar {
  position: sticky;
  top: 5rem;
  align-self: start;
}

.docs-sidebar__accordion {
  border: 1px solid var(--color--gray-100);
  border-radius: 0.5rem;
  background: var(--color--white);
}

.docs-sidebar__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color--primary);
  display: none;
  align-items: center;
  justify-content: space-between;
}

.docs-sidebar__summary::-webkit-details-marker {
  display: none;
}

.docs-sidebar__summary-icon {
  font-size: 0.625rem;
  transition: transform 0.15s ease;
}

.docs-sidebar__accordion:not([open]) .docs-sidebar__summary-icon {
  transform: rotate(-90deg);
}

.docs-sidebar__inner {
  padding: 1rem;
}

.docs-sidebar__group-heading {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--primary);
  margin: 1.25rem 0 0.5rem 0;
}

.docs-sidebar__group-heading:first-child {
  margin-top: 0;
}

.docs-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.docs-sidebar__link {
  display: block;
  padding: 0.375rem 0.75rem;
  font-family: 'Altone', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color--gray-700);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 0.25rem 0.25rem 0;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

a.docs-sidebar__link:hover,
a.docs-sidebar__link:focus-visible {
  color: var(--color--primary);
  background: var(--color--gray-50);
  outline: none;
}

.docs-sidebar__link--active {
  color: var(--color--primary);
  font-weight: 600;
  border-left-color: var(--color--secondary);
  background: var(--color--gray-50);
}

.docs-sidebar__link--pending {
  color: var(--color--gray-500);
  cursor: default;
}

.docs-sidebar__link--pending::after {
  content: " · Coming next";
  color: var(--color--gray-500);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.02em;
}

@media (max-width: 1023px) {
  .docs-sidebar {
    position: static;
  }
  .docs-sidebar__summary {
    display: flex;
  }
  .docs-sidebar__inner {
    border-top: 1px solid var(--color--gray-100);
  }
  .docs-sidebar__accordion:not([open]) .docs-sidebar__inner {
    display: none;
  }
}

@media (max-width: 374px) {
  .docs-sidebar__accordion[open] .docs-sidebar__summary-icon {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-sidebar__link,
  .docs-sidebar__summary-icon {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   C40 docs-1: section overview block on landing
   ──────────────────────────────────────────────────────────── */

.docs-section-overview {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.docs-section-overview__item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color--gray-100);
}

.docs-section-overview__item:last-child {
  border-bottom: none;
}

.docs-section-overview__label {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--primary);
  margin: 0;
}

.docs-section-overview__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color--gray-700);
  margin: 0;
}

.docs-section-overview__cta {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.docs-section-overview__cta:hover,
.docs-section-overview__cta:focus-visible {
  color: var(--color--secondary-dark);
  outline: none;
}

.docs-section-overview__cta-arrow {
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 0.15s ease;
}

.docs-section-overview__cta:hover .docs-section-overview__cta-arrow {
  transform: translateX(2px);
}

.docs-section-overview__pending {
  font-family: 'Altone', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--color--gray-500);
  font-style: normal;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .docs-section-overview__item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem 0;
  }
  .docs-section-overview__cta,
  .docs-section-overview__pending {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-section-overview__cta,
  .docs-section-overview__cta-arrow {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   C40 docs-1: get-started article layout (single-column reading)
   ──────────────────────────────────────────────────────────── */

.docs-article {
  max-width: 720px;
}

.docs-article__eyebrow {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--secondary-dark);
  margin: 0 0 0.5rem 0;
}

.docs-article__h1 {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color--primary);
  margin: 0 0 1rem 0;
}

.docs-article__lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color--gray-700);
  margin: 0 0 2rem 0;
}

/* Tier badge sitting between the H1 and the lede on lens pages where
 * the tier scope is the primary thing a buyer needs to see at a glance.
 * Hosts a docs-api__chip variant; no new colour token. */
.docs-article__tier-badge {
  margin: -0.25rem 0 1rem 0;
}

.docs-article h2 {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--color--primary);
  margin: 2.5rem 0 0.75rem 0;
  scroll-margin-top: 5rem;
}

.docs-article h3 {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color--primary);
  margin: 1.5rem 0 0.5rem 0;
}

.docs-article p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color--gray-700);
  margin: 0 0 1rem 0;
}

.docs-article ul,
.docs-article ol {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color--gray-700);
  padding-left: 1.25rem;
  margin: 0 0 1rem 0;
}

.docs-article li {
  margin-bottom: 0.375rem;
}

.docs-article a {
  color: var(--color--primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.docs-article a:hover,
.docs-article a:focus-visible {
  color: var(--color--secondary-dark);
}

.docs-article__figure {
  margin: 1.5rem 0 2rem 0;
}

.docs-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.docs-article__figure figcaption {
  font-size: 0.8125rem;
  color: var(--color--gray-500);
  margin-top: 0.5rem;
  line-height: 1.45;
}

.docs-article__cross-links {
  margin: 2.5rem 0 0 0;
  padding: 1.25rem 1.25rem;
  background: var(--color--gray-50);
  border-radius: 0.5rem;
}

.docs-article__cross-links-label {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--primary);
  margin: 0 0 0.5rem 0;
}

.docs-article__cross-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-article__cross-links li {
  margin: 0.25rem 0;
}

/* C42a polish (S-04): Related-tile component for leaf lens pages.
 * Compact three-up tile shelf that replaces the bullet-list cross-link
 * footer. Each tile renders as a hover-lifting anchor with an eyebrow,
 * a title, and a trailing arrow. The tiles are lighter than the docs
 * landing cards (no icon, no body text, no 220px min-height) so the
 * shelf sits as a quiet closing affordance rather than a second hero.
 * No new colour token; every value pulls from var(--color--*). */
.docs-related-tiles {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.docs-related-tiles__item {
  display: flex;
  margin: 0;
}

.docs-related-tiles__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.875rem 1rem;
  background: var(--color--white);
  border: 1px solid var(--color--gray-200);
  border-radius: 8px;
  color: var(--color--primary);
  position: relative;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* Override the .docs-article a underline. Selector specificity has to
 * beat .docs-article a (0,1,1) so the tile reads as a card and not as
 * an underlined inline link. */
.docs-article a.docs-related-tiles__link,
.docs-article a.docs-related-tiles__link:hover,
.docs-article a.docs-related-tiles__link:focus-visible {
  text-decoration: none;
  color: var(--color--primary);
}

.docs-related-tiles__link:hover,
.docs-related-tiles__link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--color--gray-500);
  box-shadow: 0 2px 8px rgba(27, 42, 74, 0.05);
  outline: none;
}

.docs-related-tiles__eyebrow {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--secondary-dark);
  margin: 0 0 0.25rem 0;
}

.docs-related-tiles__title {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color--primary);
  padding-right: 1.25rem;
}

.docs-related-tiles__arrow {
  position: absolute;
  right: 1rem;
  bottom: 0.875rem;
  font-size: 0.9375rem;
  color: var(--color--gray-500);
  transition: transform 160ms ease, color 160ms ease;
}

.docs-related-tiles__link:hover .docs-related-tiles__arrow,
.docs-related-tiles__link:focus-visible .docs-related-tiles__arrow {
  transform: translateX(2px);
  color: var(--color--primary);
}

@media (max-width: 991px) {
  .docs-related-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .docs-related-tiles {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-related-tiles__link,
  .docs-related-tiles__arrow {
    transition: none;
  }
  .docs-related-tiles__link:hover,
  .docs-related-tiles__link:focus-visible {
    transform: none;
  }
  .docs-related-tiles__link:hover .docs-related-tiles__arrow,
  .docs-related-tiles__link:focus-visible .docs-related-tiles__arrow {
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   C41 docs-2: shared partials (breadcrumbs, page ToC, pagination)
   plus sidebar additions (linked group heading, cross-links block)
   plus pages under Reading the diagnosis (palette walkthrough,
   verdicts table, substrate table, improvement two-head).
   ──────────────────────────────────────────────────────────── */

/* Breadcrumbs ------------------------------------------------- */

.docs-breadcrumbs {
  margin: 0 0 1rem 0;
}

.docs-breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Altone', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--color--gray-500);
}

.docs-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.docs-breadcrumbs__link {
  color: var(--color--gray-500);
  text-decoration: none;
  transition: color 0.15s ease;
}

.docs-breadcrumbs__link:hover,
.docs-breadcrumbs__link:focus-visible {
  color: var(--color--primary);
  outline: none;
}

.docs-breadcrumbs__separator {
  color: var(--color--gray-200);
  font-size: 0.875rem;
  line-height: 1;
}

.docs-breadcrumbs__segment--current {
  color: var(--color--gray-700);
}

/* Per-page ToC ------------------------------------------------ */

.docs-shell--with-toc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 200px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 1199px) {
  .docs-shell--with-toc {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .docs-shell--with-toc {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.docs-toc {
  position: sticky;
  top: 5rem;
  align-self: start;
  font-family: 'Altone', system-ui, sans-serif;
}

@media (max-width: 1199px) {
  .docs-toc {
    display: none;
  }
}

.docs-toc__label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color--primary);
  margin: 0 0 0.5rem 0;
}

.docs-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-left: 1px solid var(--color--gray-100);
}

.docs-toc__item {
  margin: 0;
}

.docs-toc__link {
  display: block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color--gray-500);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.docs-toc__link:hover,
.docs-toc__link:focus-visible {
  color: var(--color--primary);
  outline: none;
}

.docs-toc__link--active {
  color: var(--color--primary);
  font-weight: 600;
  border-left-color: var(--color--secondary);
}

@media (prefers-reduced-motion: reduce) {
  .docs-toc__link {
    transition: none;
  }
}

/* Pagination -------------------------------------------------- */

.docs-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3rem 0 0 0;
}

.docs-pagination__card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color--gray-200);
  border-radius: 0.25rem;
  background: var(--color--white);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.docs-pagination__card--prev {
  text-align: left;
}

.docs-pagination__card--next {
  text-align: right;
  grid-column: 2;
}

.docs-pagination__card--prev:only-child {
  grid-column: 1;
}

a.docs-pagination__card:hover,
a.docs-pagination__card:focus-visible {
  border-color: var(--color--gray-500);
  outline: none;
}

a.docs-pagination__card:hover .docs-pagination__eyebrow,
a.docs-pagination__card:focus-visible .docs-pagination__eyebrow {
  color: var(--color--primary);
}

.docs-pagination__eyebrow {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--gray-500);
  transition: color 0.15s ease;
}

.docs-pagination__title {
  font-family: 'Altone', system-ui, sans-serif;
  font-size: 0.9375rem;
  color: var(--color--primary);
}

.docs-pagination__pending {
  font-size: 0.75rem;
  color: var(--color--gray-500);
  font-weight: 400;
}

.docs-pagination__card--placeholder {
  cursor: default;
  background: var(--color--gray-50);
}

.docs-pagination__card--placeholder .docs-pagination__title {
  color: var(--color--gray-700);
}

@media (max-width: 767px) {
  .docs-pagination {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .docs-pagination__card--next {
    grid-column: 1;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-pagination__card,
  .docs-pagination__eyebrow {
    transition: none;
  }
}

/* Sidebar additions ------------------------------------------- */

a.docs-sidebar__group-heading--linked {
  display: block;
  text-decoration: none;
  color: var(--color--primary);
  transition: color 0.15s ease;
}

a.docs-sidebar__group-heading--linked:hover,
a.docs-sidebar__group-heading--linked:focus-visible {
  color: var(--color--secondary-dark);
  outline: none;
}

.docs-sidebar__cross-links {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color--gray-100);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.docs-sidebar__cross-links-label {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--gray-500);
  margin: 0 0 0.375rem 0;
}

.docs-sidebar__cross-link {
  display: block;
  padding: 0.25rem 0.75rem;
  font-family: 'Altone', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--color--gray-700);
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 0.15s ease, background 0.15s ease;
}

a.docs-sidebar__cross-link:hover,
a.docs-sidebar__cross-link:focus-visible {
  color: var(--color--primary);
  background: var(--color--gray-50);
  outline: none;
}

.docs-sidebar__cross-link--active {
  color: var(--color--primary);
  font-weight: 600;
}

/* Palette walkthrough on /verdict-pills ---------------------- */

.docs-pill-walkthrough {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.docs-pill-walkthrough__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color--gray-100);
}

.docs-pill-walkthrough__row:last-child {
  border-bottom: none;
}

.docs-pill-walkthrough__pill-cell {
  display: flex;
  align-items: center;
}

.docs-pill-walkthrough__slug {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--color--gray-700);
}

@media (max-width: 600px) {
  .docs-pill-walkthrough__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Verdicts table on /verdicts -------------------------------- */

.docs-verdicts-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.docs-verdicts-table--lens-matrix {
  table-layout: fixed;
}

.docs-verdicts-table--lens-matrix th:first-child,
.docs-verdicts-table--lens-matrix td:first-child {
  width: 38%;
}

.docs-verdicts-table--lens-matrix th:not(:first-child),
.docs-verdicts-table--lens-matrix td:not(:first-child) {
  width: 12.4%;
  text-align: center;
}

@media (max-width: 540px) {
  .docs-verdicts-table--lens-matrix {
    font-size: 0.75rem;
  }
  .docs-verdicts-table--lens-matrix th:first-child,
  .docs-verdicts-table--lens-matrix td:first-child {
    width: 32%;
    padding-left: 0.5rem;
    padding-right: 0.25rem;
  }
  .docs-verdicts-table--lens-matrix th:not(:first-child),
  .docs-verdicts-table--lens-matrix td:not(:first-child) {
    width: 13.6%;
  }
  .docs-verdicts-table--lens-matrix th:not(:first-child) {
    font-size: 0.5rem;
    letter-spacing: 0;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }
  .docs-verdicts-table--lens-matrix td:not(:first-child) {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }
}

.docs-verdicts-table th,
.docs-verdicts-table td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color--gray-100);
  vertical-align: top;
}

.docs-verdicts-table th {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color--primary);
  border-bottom: 1px solid var(--color--gray-200);
}

.docs-verdicts-table td code {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--color--gray-700);
}

.docs-verdicts-table__path-unreachable {
  color: var(--color--gray-500);
}

.docs-verdicts-table__path-tag {
  display: inline-block;
  font-family: 'Altone', system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.125rem;
  background: var(--color--gray-100);
  color: var(--color--gray-700);
}

.docs-verdicts-table__path-tag--unreachable {
  background: var(--color--tile-gold);
  color: var(--color--gray-700);
}

/* Substrate table on /substrate-panel ------------------------ */

.docs-substrate-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.docs-substrate-table th,
.docs-substrate-table td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color--gray-100);
  vertical-align: top;
}

.docs-substrate-table th {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color--primary);
  border-bottom: 1px solid var(--color--gray-200);
}

.docs-substrate-table td code {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--color--gray-700);
}

/* Improvement two-head on /improvement-blocks ---------------- */

.docs-improvement-twohead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.docs-improvement-head {
  border: 1px solid var(--color--gray-100);
  border-radius: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--color--white);
}

.docs-improvement-head__label {
  font-family: 'Altone', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color--primary);
  margin: 0 0 0.5rem 0;
}

.docs-improvement-head__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.docs-improvement-head__list li {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color--gray-700);
  margin: 0;
}

@media (max-width: 767px) {
  .docs-improvement-twohead {
    grid-template-columns: 1fr;
  }
}

/* Locked colour-discipline call-out (verdict-pills page) ----- */

.docs-callout {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--color--gray-50);
  border-left: 3px solid var(--color--secondary);
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color--gray-700);
}

.docs-callout p {
  margin: 0;
}

/* Pair of figures (1440 + 375 mobile crops on screenshot pages) */

.docs-figure-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

/* Legal-copy block on /operations/reports-and-attestation-language. */
/* Soft-wraps the verbatim five-framework strip on narrow viewports so */
/* the legal copy stays fully visible on mobile. */
.docs-legal-block {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color--gray-50, #F2F2F2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color--gray-700, #3A3A3A);
  overflow-x: auto;
}

.docs-legal-block code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}

/* Section status banner on Operations leaves (C43a V-06). A single quiet */
/* line sitting between the H1 and the lede, naming the v0.1 lock state. */
/* Lighter than docs-callout (no left border, smaller type, less padding) */
/* so it reads as a status row rather than a second hero. */
.docs-article__section-status {
  display: block;
  margin: -0.25rem 0 1.25rem 0;
  padding: 0.5rem 0.875rem;
  background: var(--color--gray-50);
  border-radius: 6px;
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color--gray-700);
}

.docs-article__section-status strong {
  color: var(--color--primary);
  font-weight: 600;
}