* { box-sizing: border-box; }

/*
 * What the browser paints itself - the text selection highlight, scrollbars,
 * the internals of the search field - follows the colour scheme in force, and
 * the <meta> in the head offers it both. The browser then picks from the
 * operating system rather than from the theme this page is actually painted
 * in, so a reader whose system is dark and who chose light got a dark-scheme
 * selection over a light page: the highlight and the text underneath were the
 * same colour and selecting text appeared to do nothing at all.
 *
 * Binding the property to data-theme makes the browser's half agree with ours.
 * The property beats the meta tag, which stays as the pre-stylesheet default.
 */
:root { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Same treatment as the marketing nav: a full-bleed frosted bar whose content
   stops at the measure. The blur is wide enough that text passing underneath
   becomes a wash rather than ghosting through. */
.docsnav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--background-color) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .docsnav { background: var(--background-color); }
}

.docsnav .inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wordmark,
a.wordmark:link,
a.wordmark:visited {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-color);
  text-decoration: none;
}

.wordmark .accent { color: var(--link-color); }

/* A real control, not a decorative pill: it opens the dialog and reports that
   it does so to assistive technology. */
.docsearch {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--secondary-text-color);
  background: var(--card-background);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  min-width: 210px;
  cursor: pointer;
}

.docsearch:hover { border-color: var(--link-color); }

.docsearch .k {
  margin-left: auto;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.64rem;
}

.docs-console-pill,
a.docs-console-pill:link,
a.docs-console-pill:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  color: var(--text-color);
  background: var(--button-light-bg);
  border: 1px solid var(--button-light-border, currentColor);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.docs-console-pill:hover {
  color: var(--accent-tint-text);
  background: var(--accent-tint);
  border-color: var(--link-color);
}

.docs-auth-signed-out {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.docs-auth-signed-out a {
  color: var(--link-color);
  text-decoration: none;
}

.docs-auth-signed-out a + a {
  padding-left: 10px;
  border-left: 1px solid var(--border-color);
}

.docs-console-pill:focus-visible,
.docs-auth-signed-out a:focus-visible,
.docs-sign-in-actions a:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 3px;
}

/* Sidebar, article, on-this-page. The rail goes first when there is no room
   for it, then the sidebar - the article is the only column that must survive
   at every width. */
.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 190px;
  gap: 36px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 26px 0 40px;
  border-right: 1px solid var(--border-color);
}

/* Native details always hides descendants while closed, even when a child is
   forced to display. Desktop therefore gets its own nav; the disclosure is a
   mobile-only presentation of the same generated links. */
.docsmenu { display: none; }

.sidebar h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
  margin: 22px 0 8px;
  font-weight: 500;
}

.sidebar h4:first-child { margin-top: 0; }

.sidebar a {
  display: block;
  font-size: 0.86rem;
  color: var(--secondary-text-color);
  text-decoration: none;
  padding: 5px 12px 5px 10px;
  border-left: 2px solid transparent;
  margin-left: -2px;
}

.sidebar a:hover { color: var(--text-color); }

.sidebar a[aria-current='page'] {
  color: var(--link-color);
  border-left-color: var(--link-color);
  font-weight: 600;
}

/*
 * Narrow layout. These sit AFTER the rules they override: they were above
 * them, so at equal specificity the later base rule won and the sidebar stayed
 * sticky and full height on a phone - the whole menu ahead of the article,
 * which is the bug this section exists to fix.
 */
@media (max-width: 1080px) {
  .shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .onthis {
    display: none;
  }
}

@media (max-width: 740px) {
  .shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: 0;
    padding: 0;
  }

  .desktop-sidebarnav { display: none; }
  .docsmenu { display: block; }

  /* Collapsed by default: the article is what the reader came for. */
  .docsmenu {
    border-bottom: 1px solid var(--border-color);
  }

  .docsmenu > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 2px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-text-color);
    cursor: pointer;
    list-style: none;
  }

  /* Safari draws its own triangle through the shadow DOM. */
  .docsmenu > summary::-webkit-details-marker {
    display: none;
  }

  .docsmenu > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
  }

  .docsmenu[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .docsmenu > .mobile-sidebarnav {
    padding-bottom: 18px;
  }

  /* Tap targets, not a dense desktop list. */
  .sidebar a {
    padding: 9px 12px 9px 10px;
    font-size: 0.92rem;
  }
}

.article {
  padding: 30px 0 70px;
  max-width: 74ch;
}

.article .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
}

.article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  margin: 0.5rem 0 0.6rem;
  text-wrap: balance;
}

.article .standfirst {
  font-size: 1.02rem;
  color: var(--secondary-text-color);
  margin: 0 0 26px;
}

/* A page-local route builder, not global account chrome. It stays visually
   quiet until the reader needs a product link, then makes that destination
   concrete without interrupting the article. */
.docs-context {
  scroll-margin-top: 84px;
  margin: 0 0 28px;
  padding: 14px 16px 15px;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.docs-sign-in-callout {
  margin: 0 0 28px;
  padding: 15px 16px 16px;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

#docs-sign-in-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 650;
}

.docs-sign-in-callout p {
  margin: 5px 0 12px;
  color: var(--secondary-text-color);
  font-size: 0.82rem;
  line-height: 1.5;
}

.docs-sign-in-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-sign-in-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  color: var(--text-color);
  background: var(--button-light-bg);
  border: 1px solid var(--button-light-border, currentColor);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
}

.docs-sign-in-actions a:hover {
  color: var(--accent-tint-text);
  background: var(--accent-tint);
  border-color: var(--link-color);
}

.docs-context-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

#docs-context-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 650;
}

.docs-context-status {
  color: var(--secondary-text-color);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: right;
}

.docs-context-status a { color: var(--link-color); }

.docs-context-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.docs-context-field {
  min-width: 0;
  color: var(--secondary-text-color);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.docs-context-field span { display: block; margin-bottom: 4px; }

.docs-context-field select {
  width: 100%;
  min-height: 34px;
  color: var(--text-color);
  background: var(--background-color);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 5px 28px 5px 8px;
  font: 0.8rem var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}

.docs-context-field select:disabled {
  color: var(--secondary-text-color);
  cursor: not-allowed;
  opacity: 0.72;
}

.article a[data-app-href][aria-disabled='true'] {
  color: var(--secondary-text-color);
  text-decoration-style: dotted;
  cursor: help;
}

/* scroll-margin so a heading jumped to from the rail clears the sticky bar. */
.article h2 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.3rem;
  margin: 34px 0 10px;
  scroll-margin-top: 84px;
}

.article h3 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.02rem;
  margin: 22px 0 6px;
  scroll-margin-top: 84px;
}

@media (max-width: 740px) {
  /* The navigation wraps to three rows here, so desktop's 84px anchor
     clearance leaves linked headings underneath the sticky bar. Kept after
     the base heading rule so the narrow override wins the cascade. */
  .article h2,
  .article h3 {
    scroll-margin-top: 170px;
  }

  .docs-context {
    scroll-margin-top: 170px;
    padding: 13px 14px 14px;
  }

  .docs-sign-in-callout {
    padding: 13px 14px 14px;
  }

  .docs-context-heading {
    display: block;
  }

  .docs-context-status {
    display: block;
    margin-top: 3px;
    text-align: left;
  }

  .docs-context-fields { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .docsnav .inner { gap: 10px; }
  .docsearch {
    flex: 1 1 175px;
    min-width: 0;
  }
  .docs-console-pill { padding-inline: 11px; }
  .docs-auth-signed-out { gap: 7px; }
  .docs-auth-signed-out a + a { padding-left: 7px; }
}

.article p { margin: 0 0 14px; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 20px; }
.article li { margin: 5px 0; }
.article a { color: var(--link-color); }

.article code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 5px;
}

.article pre {
  background: var(--terminal-bg);
  color: var(--terminal-text);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  margin: 0 0 18px;
}

.article pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* Wide content scrolls inside its own box so the page never scrolls sideways. */
.tablewrap { overflow-x: auto; margin: 0 0 18px; }

.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.article th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
  border-bottom: 1px solid var(--border-strong);
  padding: 6px 10px 6px 0;
  font-weight: 500;
}

.article td {
  border-bottom: 1px solid var(--border-color);
  padding: 8px 10px 8px 0;
  vertical-align: top;
}

.article blockquote {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--link-color);
  border-radius: var(--radius-sm);
  background: var(--card-background);
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 0.94rem;
}

.article blockquote p:last-child { margin-bottom: 0; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-color);
  margin-top: 36px;
  padding-top: 18px;
  font-size: 0.9rem;
}

.pager a { color: var(--link-color); text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.pager .next { text-align: right; margin-left: auto; }

.pager .sm {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
}

.onthis {
  position: sticky;
  top: 72px;
  padding: 34px 0;
  font-size: 0.8rem;
}

.onthis h5 {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
  margin: 0 0 8px;
  font-weight: 500;
}

.onthis a {
  display: block;
  color: var(--secondary-text-color);
  text-decoration: none;
  padding: 3px 0;
}

.onthis a:hover { color: var(--text-color); }
.onthis a.on { color: var(--link-color); }

/* Index */
.docsindex { padding: 40px 0 70px; }

.indexgrid {
  display: grid;
  /* Sized so the three sections stand side by side in the column the article
     text occupies. At the old 260px minimum the third wrapped onto a row of
     its own with two card-widths of nothing beside it. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 26px;
  /* Cards size to their contents, so a shorter description does not stretch
     its card to match the longest one beside it. */
  align-items: start;
}

.indexcard {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 18px 20px;
  /* Anchors the heading link's overlay, which makes the whole card clickable. */
  position: relative;
}

.indexcard:hover { border-color: var(--link-color); }

.indexcard h2 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.05rem;
  margin: 0 0 8px;
}

/* The section name is the link, and it opens the first page of that section.
   The whole card is the target so the description is not dead space beside a
   live heading. */
.indexcard a {
  color: var(--link-color);
  text-decoration: none;
}

.indexcard a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.indexcard a:hover { text-decoration: underline; }

.indexcard p {
  margin: 0;
  color: var(--secondary-text-color);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Search dialog. <dialog> supplies Escape, focus containment and the top
   layer, so the script only has to open it and filter. */
.searchdlg {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--background-color);
  color: var(--text-color);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  margin-top: 12vh;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.22);
}

.searchdlg::backdrop {
  background: rgb(0 0 0 / 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.searchdlg input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 16px 18px;
  outline: none;
}

.searchdlg ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }

.searchdlg a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-color);
}

.searchdlg a:hover,
.searchdlg li.on a {
  background: var(--accent-tint);
  color: var(--accent-tint-text);
}

.searchdlg .sec {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-text-color);
  display: block;
}

.searchdlg .none {
  padding: 16px 18px;
  color: var(--secondary-text-color);
  font-size: 0.9rem;
}

/*
 * Footer. .footer-content, .theme-toggle-container and the two toggle buttons
 * are styled by the shared theme, which these pages already load, so only the
 * frame around them is repeated here - that part lives in the application's
 * own stylesheet, which the documentation does not load.
 */
.docsfooter {
  max-width: 1240px;
  margin: 3rem auto 2rem;
  padding: 1rem 22px;
  color: var(--footer-text-color);
  font-size: 0.8rem;
  text-align: left;
}

/* The shared rule holds the footer to the 900px column the application's
   content sits in. The documentation shell is wider, so left alone the footer
   stood inset from the text it belongs to. */
.docsfooter .footer-content { max-width: none; }

.docsfooter p { margin: 0 0 0.35rem; font-size: 0.85rem; }
.docsfooter p:last-child { margin-bottom: 0; }
.docsfooter a { color: var(--link-color); }

/* Buttons do not inherit the page font. */
.docsfooter button { font-family: var(--font-body); }

/*
 * Both labels and both icons are in the markup; this shows the pair that
 * matches the theme. Written as "hide the dark half unless dark", so a reader
 * with no JavaScript - and therefore no data-theme attribute - still sees one
 * label rather than both, and it is the one that matches the light default.
 */
.docs-when-dark { display: none; }
[data-theme='dark'] .docs-when-dark { display: initial; }
[data-theme='dark'] .docs-when-light { display: none; }

:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}