/* Oneserve brand palette + Verdana font.
   Sourced from branding/palette.md (2026-05-11). */

:root {
  --md-primary-fg-color:        #0C0565;
  --md-primary-fg-color--light: #0C0565;
  --md-primary-fg-color--dark:  #0C0565;
  --md-accent-fg-color:         #0AB826;

  /* Brand Vibrant Green (#0AB826) fails WCAG AA against white (~2.7:1), so
     CTAs and green text on light backgrounds use this darker shade (~5.5:1
     with white text). Dark mode overrides back to the vibrant shade, which
     reads fine against slate. */
  --os-cta-green:               #067A1A;

  --md-text-font-family:        Verdana, Geneva, sans-serif;
  --md-code-font-family:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-md-color-scheme="slate"] {
  /* Navy is illegible on a dark background — use a lightened navy/lavender
     for links and primary accents in dark mode. Vibrant Green still works as
     the accent. Header bar stays navy via the .md-header rule below. */
  --md-primary-fg-color:        #9590E0;
  --md-accent-fg-color:         #0AB826;
  --md-typeset-a-color:         #9590E0;
  --os-cta-green:               #0AB826;
}

/* Header bar stays navy in both schemes for brand consistency. */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #0C0565;
}

/* Code elements INSIDE links need to inherit the link colour; Material's
   default code styling can otherwise stomp it. */
[data-md-color-scheme="slate"] .md-typeset a code {
  color: #9590E0;
}

body, input {
  font-family: var(--md-text-font-family);
}

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

/* Headings: Navy on light, lifted on dark. */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  color: #0C0565;
  font-weight: 700;
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #FFFFFF;
}

/* Embedded legacy reference content (extracted from Google Sites HTML).
   The source uses <div> per line of text, which would otherwise produce
   uneven block-margin gaps. Tighten spacing without losing line breaks. */
.legacy-content > div,
.legacy-content div > div {
  margin: 0;
}
.legacy-content br + br {
  display: block;
  margin-top: 0.4em;
  content: "";
}
.legacy-content pre {
  margin: 0.6em 0;
}
/* Wrap legacy code blocks instead of horizontal scroll. Preserves the
   indentation we re-flowed during extraction, but lets long lines wrap to
   fit the viewport so users don't need to scroll the example horizontally. */
.legacy-content pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.legacy-content ul, .legacy-content ol {
  margin: 0.4em 0;
}
.legacy-content h2, .legacy-content h3, .legacy-content h4 {
  margin-top: 1em;
}

/* Collapsible "View legacy reference" — appears on replaced endpoints,
   demoting the legacy content so the CTA above it is the primary action.
   Padding lives on the summary and the open-content, not on the wrapper, so
   the disclosure row has even spacing regardless of state. */
details.legacy-reference {
  margin: 1.5em 0;
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-radius: 6px;
  background: var(--md-code-bg-color, #f5f5f5);
}
details.legacy-reference > summary {
  cursor: pointer;
  padding: 0.85em 1em;
  font-weight: 600;
  color: #0C0565;
  list-style: revert;
}
[data-md-color-scheme="slate"] details.legacy-reference > summary {
  color: #FFFFFF;
}
details.legacy-reference[open] > summary {
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
}
details.legacy-reference[open] > *:not(summary) {
  padding: 0.85em 1em;
}

/* Primary CTA button below the deprecation banner. Brand palette uses
   Vibrant Green for callouts (per 2024 brand guidelines); hover snaps to
   Navy. Inline <code> inside the button text inherits button colour so it
   doesn't fight Material's default code styling. */
.md-typeset .md-button.md-button--primary {
  background-color: var(--os-cta-green);
  border-color: var(--os-cta-green);
  color: #FFFFFF;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  font-weight: 700;
  padding: 0.55em 1.4em;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.md-typeset .md-button.md-button--primary:hover,
.md-typeset .md-button.md-button--primary:focus {
  background-color: #0C0565;
  border-color: #0C0565;
  color: #FFFFFF;
}
.md-typeset .md-button.md-button--primary code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Migration matrix tables: fixed layout with explicit column proportions.
   Scoped via :has(th:nth-child(4)) so these rules only apply to 4-column
   tables — leaves the 2-column Status legend on the home page free to
   size its columns by content rather than inheriting matrix widths.
   Notes is the column that does the heavy lifting on these pages, so it
   gets ~45% of the width; col 1 (endpoint name) gets enough room to fit
   the longest legacy name (`uploadPartsInvoiceDocument`, 26 chars) without
   wrapping at typical widths. On narrow viewports Material wraps the table
   in a scrollable container, so this stays responsive. */
.md-typeset table:not([class]):has(th:nth-child(4)) {
  table-layout: fixed;
  width: 100%;
}
.md-typeset table:not([class]):has(th:nth-child(4)) th:nth-child(1),
.md-typeset table:not([class]):has(th:nth-child(4)) td:nth-child(1) {
  width: 22%;
  white-space: nowrap;
}
.md-typeset table:not([class]):has(th:nth-child(4)) th:nth-child(2),
.md-typeset table:not([class]):has(th:nth-child(4)) td:nth-child(2) {
  width: 11%;
  white-space: nowrap;
}
.md-typeset table:not([class]):has(th:nth-child(4)) th:nth-child(3),
.md-typeset table:not([class]):has(th:nth-child(4)) td:nth-child(3) {
  width: 22%;
}
.md-typeset table:not([class]):has(th:nth-child(4)) td:nth-child(3) code {
  /* Allow wrapping for very long paths at slashes. */
  word-break: break-word;
}
.md-typeset table:not([class]):has(th:nth-child(4)) th:nth-child(4),
.md-typeset table:not([class]):has(th:nth-child(4)) td:nth-child(4) {
  width: 45%;
}
/* Notes column often contains inline paths like `/rest/docs/addDocuments` —
   one long token with no spaces. Without this, the cell can't break the
   token and forces the whole table wider than the viewport. */
.md-typeset table:not([class]):has(th:nth-child(4)) td:nth-child(4) code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Status badges in the matrix Status column. Colour-coded to match the
   banner on the corresponding endpoint page: red for replaced, amber for
   no-replacement, blue for active. Inline-block pill, no monospace. */
.status-badge {
  display: inline-block;
  padding: 0.15em 0.65em;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Colour tracks action urgency, so a skimming reader's first-glance read is
   correct:
   Replaced = amber (action required: this endpoint will be switched off).
   No replacement = neutral grey (informational: nothing to do yet).
   Active = blue (informational).
   The earlier green/red mapping inverted this — the safe all-unreplaced
   categories rendered as walls of red while the endpoints that will actually
   break looked green. */
.status-deprecated-replaced {
  background-color: #FEF3C7;
  color: #92400E;
  border-color: #FCD34D;
}
.status-deprecated-no-replacement {
  background-color: #F3F4F6;
  color: #4B5563;
  border-color: #D1D5DB;
}
.status-active {
  background-color: #DBEAFE;
  color: #1E40AF;
  border-color: #93C5FD;
}

/* Home page category cards: fully clickable CTAs. Each card contains
   exactly one anchor (the title), so stretching that anchor's ::after over
   the card makes the whole card the click target without wrapper HTML.
   Hover lifts the card and snaps the border to Vibrant Green to match the
   primary button affordance. */
.md-typeset .grid.cards > ul > li {
  position: relative;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
              transform 0.15s ease-in-out;
}
.md-typeset .grid.cards > ul > li a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  border-color: var(--os-cta-green);
  box-shadow: var(--md-shadow-z2);
  transform: translateY(-2px);
}
.md-typeset .grid.cards > ul > li a {
  text-decoration: none;
}
.md-typeset .grid.cards > ul > li:hover a {
  color: var(--os-cta-green);
}
/* Resting-state affordance: a green arrow on every card title so the cards
   read as links before any hover. (The anchor's ::after is the stretched
   click overlay, so the arrow lives on the surrounding <strong>.) Nudges
   right on hover. */
.md-typeset .grid.cards > ul > li > p:first-child strong::after {
  /* \2192 = →. Escaped rather than a literal glyph: the stylesheet can be
     served without a charset, and a raw multi-byte character then renders
     as mojibake. */
  content: "\2192";
  color: var(--os-cta-green);
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.15s ease-in-out;
}
.md-typeset .grid.cards > ul > li:hover > p:first-child strong::after {
  transform: translateX(4px);
}

/* Dark-mode variants: tinted backgrounds against the slate scheme, lighter
   text for contrast. */
[data-md-color-scheme="slate"] .status-deprecated-replaced {
  background-color: rgba(251, 191, 36, 0.15);
  color: #FCD34D;
  border-color: rgba(251, 191, 36, 0.35);
}
[data-md-color-scheme="slate"] .status-deprecated-no-replacement {
  background-color: rgba(156, 163, 175, 0.15);
  color: #D1D5DB;
  border-color: rgba(156, 163, 175, 0.35);
}
[data-md-color-scheme="slate"] .status-active {
  background-color: rgba(96, 165, 250, 0.15);
  color: #93C5FD;
  border-color: rgba(96, 165, 250, 0.35);
}