/* The third copy of the brand palette that used to live here is gone —
   tokens.css (which every shell loads) carries --brand-gold now, and the two
   blues and the gold tint below were the same values --accent, --accent-ring
   and --provisional-tint already hold. */

html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body { font-family: var(--font-ui); background: var(--surface-2); color: var(--ink-2); line-height: 1.6; }
.docs-layout { display: flex; padding-top: 85px; max-width: var(--nh-page-measure); margin: 0 auto; }
/* The sidebar takes 340px of the measure, so the article column grows with
   it — which is what the tables, code blocks and figures wanted. The RUNNING
   TEXT does not grow with it: paragraphs and list items are held to the
   reading measure, because a wider shell must never buy a longer line. */
.docs-content p, .docs-content li, .docs-lede { max-width: var(--nh-read-measure); }
.docs-content td p, .docs-content th p, .docs-content figcaption { max-width: none; }
.docs-sidebar { width: 340px; flex-shrink: 0; padding: 2rem 1.5rem; border-right: 1px solid var(--line); height: calc(100vh - 85px); position: sticky; top: 85px; overflow-y: auto; background-color: var(--surface-2); transition: width 0.2s ease, padding 0.2s ease; }
.docs-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.docs-sidebar h2 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--ink); }
.docs-nav-toggle { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.docs-nav-toggle:hover { background-color: #f0f0f0; color: var(--accent); }
/* Collapsed: shrink to a slim rail showing only the toggle button. Desktop
   only — on a phone the sidebar is the <details> disclosure below, and a 56px
   rail left over from a desktop visit (the state is remembered in
   localStorage) would have fought it for the same nav. */
@media (min-width: 769px) {
  .docs-sidebar.collapsed { width: 56px; padding-left: 0.75rem; padding-right: 0.75rem; overflow: hidden; }
  .docs-sidebar.collapsed .docs-sidebar-header { justify-content: center; margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .docs-sidebar.collapsed h2, .docs-sidebar.collapsed nav { display: none; }
}
.docs-sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.docs-sidebar nav ul ul { padding-left: 15px; margin-top: 5px; }
.docs-sidebar nav li a { display: block; padding: 0.5rem 0; text-decoration: none; color: var(--ink-2); font-weight: 400; border-left: 3px solid transparent; padding-left: 10px; transition: all 0.2s ease-in-out; }
.docs-sidebar nav li a:hover { color: var(--accent); background-color: #f0f0f0; }
.docs-sidebar nav li a.active-section { color: var(--accent); font-weight: 600; border-left: 3px solid var(--brand-gold); background-color: var(--provisional-tint); }
.docs-content { flex-grow: 1; padding: 2rem 2.5rem; background-color: var(--surface); }
.docs-content section { margin-bottom: 3rem; }
.docs-content h1 { margin-top: 0; font-size: 2.2rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
.docs-content h2 { font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1.2rem; color: var(--ink); padding-bottom: 0.3rem; border-bottom: 1px solid #e8e8e8; }
.docs-content h2:first-child { margin-top: 0; }
.docs-content h3 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: 1rem; color: #34495e; }
.docs-content p { margin-bottom: 1rem; }
.docs-content a { color: var(--accent); text-decoration: none; }
.docs-content a:hover { text-decoration: underline; }
.docs-content ul, .docs-content ol { padding-left: 25px; margin-bottom: 1rem; }
.docs-content li { margin-bottom: 0.6rem; }
.docs-content pre { background-color: var(--surface-2); border: 1px solid var(--line); padding: 1rem; border-radius: var(--r-xs); overflow-x: auto; font-size: 0.9em; line-height: 1.5; }
.docs-content code { font-family: var(--font-data); background-color: var(--surface-2); padding: 0.2em 0.4em; border-radius: var(--r-xs); color: var(--critical-ink); font-size: 0.9em; }
.docs-content pre code { background-color: transparent; padding: 0; color: inherit; }
.docs-content figure { margin: 2rem auto; text-align: center; border: 1px solid var(--line); border-radius: var(--r-xs); padding: 15px; display: block; max-width: 600px; width: 100%; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.docs-content figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.docs-content figure.figure-wide { max-width: 100%; }
.docs-content figcaption { margin-top: 1rem; font-size: 0.88em; color: var(--ink-3); text-align: center; }
.docs-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; }
.docs-content th, .docs-content td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.docs-content thead th { background-color: var(--surface-2); font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--line); }
.docs-content tbody tr:nth-child(even) { background-color: var(--surface-2); }
.docs-content tbody tr:last-child td { border-bottom: none; }

/* Dark mode */
.dark-mode .docs-sidebar { background-color: var(--surface-2); border-right-color: var(--line); }
.dark-mode .docs-sidebar-header { border-bottom-color: var(--line); }
.dark-mode .docs-sidebar h2 { color: var(--ink); }
.dark-mode .docs-nav-toggle { border-color: var(--line); color: var(--ink-2); }
.dark-mode .docs-nav-toggle:hover { background-color: var(--paper); color: #ffffff; }
.dark-mode .docs-sidebar nav li a { color: var(--ink-2); }
.dark-mode .docs-sidebar nav li a:hover { color: #ffffff; background-color: var(--paper); }
.dark-mode .docs-sidebar nav li a.active-section { color: #ffc9c4; border-left-color: #ff9a92; background-color: #3f5b78; }
.dark-mode .docs-content { background-color: var(--paper); }
.dark-mode .docs-content h1, .dark-mode .docs-content h2, .dark-mode .docs-content h3 { color: #ffffff; border-color: var(--line); }
.dark-mode .docs-content a { color: #ff9a92; }
.dark-mode .docs-content pre { background-color: var(--surface-2); border-color: var(--line); color: #f0f0f0; }
.dark-mode .docs-content code { background-color: #4a4a4a; color: #f5c26b; }
.dark-mode .docs-content figure { border-color: var(--line); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.dark-mode .docs-content figcaption { color: #a0a0a0; }
.dark-mode .docs-content table { border-color: var(--line); }
.dark-mode .docs-content th, .dark-mode .docs-content td { border-color: var(--line); }
.dark-mode .docs-content thead th { background-color: var(--surface-2); color: var(--ink); border-bottom-color: #52708f; }
.dark-mode .docs-content tbody tr:nth-child(even) { background-color: #35485a; }

/* Footer logo area */
.footer-logo-container { text-align: center; padding: 2rem 0; background-color: var(--surface-2); margin-top: 3rem; }
.footer-logo-container img { display: block; margin: 0 auto; max-width: 150px; height: auto; }
.dark-mode .footer-logo-container { background-color: var(--surface-2); }
.dark-mode .footer-logo-container img { filter: invert(85%) hue-rotate(180deg) brightness(1.5); }

/* Responsive */
@media (max-width: 992px) { .docs-sidebar { width: 280px; } .docs-content { padding: 1.5rem; } .docs-content figure { max-width: 90%; } }
@media (min-width: 769px) and (max-width: 992px) { .docs-sidebar.collapsed { width: 56px; } }
@media (max-width: 768px) { .docs-layout { flex-direction: column; padding-top: 75px; } .docs-sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); padding: 1rem; } .dark-mode .docs-sidebar { border-bottom-color: var(--line); } .docs-content { padding: 1.5rem 1rem; } .docs-content figure { max-width: 100%; padding: 10px; } }
/* ---- Docs shell (base/templates/base/docs/_shell.html) ------------------
   Section navigation across pages, the generated "On this page" list, the
   lede/crumb above each article, the prev/next pager and the index cards.
   Everything reads from tokens.css so dark mode needs no second palette. */
.docs-sidebar-header h2 a { color: inherit; text-decoration: none; }
.docs-sidebar-header h2 a:hover { color: var(--accent); }
.docs-section-label { margin: 1.1rem 0 0.25rem; padding-left: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.docs-section-label:first-child { margin-top: 0; }
.docs-sidebar nav ul.docs-section-nav { margin: 0; }
.docs-sidebar nav ul.docs-section-nav > li > a { padding-top: 0.35rem; padding-bottom: 0.35rem; border-radius: 0 var(--r-xs, 4px) var(--r-xs, 4px) 0; }
.docs-sidebar nav li a.is-current { color: var(--ink); font-weight: 700; border-left-color: var(--accent); background-color: var(--accent-tint); }
.docs-sidebar nav ul.docs-toc { margin: 0.15rem 0 0.5rem; padding-left: 12px; border-left: 1px solid var(--line); }
.docs-sidebar nav ul.docs-toc li a { font-size: 0.9rem; padding: 0.25rem 0 0.25rem 10px; }
.docs-sidebar nav ul.docs-toc li.docs-toc__h3 a { padding-left: 22px; font-size: 0.85rem; color: var(--ink-3); }
.docs-sidebar nav ul.docs-toc li a.active-section { color: var(--accent); font-weight: 600; border-left-color: var(--brand-gold); background-color: var(--provisional-tint); }
.docs-sidebar nav li a:hover { background-color: var(--surface); }
.docs-nav-toggle:hover { background-color: var(--surface); }

.docs-crumb { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.docs-lede { font-size: 1.12rem; color: var(--ink-2); margin: -0.5rem 0 2rem; max-width: 52rem; }
.docs-content { max-width: 62rem; }
.docs-content h2 { border-bottom-color: var(--line); }
.docs-content h3 { color: var(--ink); }
.docs-content h4 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; color: var(--ink); }
.docs-content figure.figure-pair { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; max-width: 100%; }
.docs-content figure.figure-pair img { flex: 1 1 240px; min-width: 0; margin: 0; }
.docs-content figure.figure-pair figcaption { flex-basis: 100%; }
.docs-content table td:first-child { white-space: nowrap; }
.docs-content table.docs-table--wrap td:first-child { white-space: normal; }

/* Callouts: a note that must not be skimmed past.

   Set in from the left, not boxed. A tinted fill behind a coloured edge is a
   highlighter, and a docs page carrying six of them reads as a striped page
   rather than as prose. What makes a note a note here is that it is INDENTED
   and that its body is --ink where the running text around it is --ink-2: it
   is darker than its surroundings, so it reads as more important and not as a
   footnote. The note/warn distinction is unchanged and still carried where it
   always really was — the colour of the lead-in word ("Note." / "Careful."),
   which now sits on --surface rather than on a tint and so measures BETTER
   than before: 8.16:1 and 5.92:1 light, 10.33:1 and 8.4:1 dark. */
.docs-note { margin: 1.2rem 0; padding: 0 0 0 1.4rem; color: var(--ink); }
.docs-note p:last-child { margin-bottom: 0; }
.docs-note strong:first-child { color: var(--accent-tint-ink); }
.docs-note--warn strong:first-child { color: var(--warning-ink); }

/* Keyboard / UI-element chips: "click **Save curve**" reads better as a chip. */
.docs-content kbd, .docs-content .ui { font-family: var(--font-ui); font-size: 0.88em; padding: 0.1em 0.45em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-xs, 4px); background: var(--surface); color: var(--ink); white-space: nowrap; }

.docs-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.docs-pager a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); text-decoration: none; color: var(--ink); max-width: 48%; }
.docs-pager a span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.docs-pager a:hover { border-color: var(--accent); text-decoration: none; }
.docs-pager__next { margin-left: auto; text-align: right; }

/* Index page (base/templates/base/docs.html). */
.docs-index { max-width: var(--nh-page-measure); margin: 0 auto; padding: 110px 1.25rem 3rem; }
.docs-index > h1 { font-size: 2.2rem; color: var(--ink); margin: 0 0 0.5rem; }
.docs-index > p { color: var(--ink-2); margin: 0 0 2rem; max-width: 46rem; font-size: 1.05rem; }
.docs-index h2 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 2rem 0 0.75rem; }
.docs-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.docs-card { display: block; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: border-color .15s ease, box-shadow .15s ease; }
.docs-card:hover, .docs-card:focus-visible { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,0.08); text-decoration: none; outline: none; }
.docs-card:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.docs-card h3 { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--ink); }
.docs-card p { margin: 0; font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }

/* Dark-mode overrides for the new pieces that have hard-coded light values above. */
.dark-mode .docs-sidebar nav li a.is-current { background-color: var(--accent-tint); color: var(--ink); border-left-color: var(--accent-ring); }
.dark-mode .docs-sidebar nav ul.docs-toc li a.active-section { color: var(--accent-tint-ink); border-left-color: var(--provisional); background-color: var(--provisional-tint); }
.dark-mode .docs-sidebar nav li a:hover { background-color: var(--surface); color: var(--ink); }
.dark-mode .docs-content a { color: var(--link); }
.dark-mode .docs-content code { background-color: var(--surface-2); color: var(--provisional); }
.dark-mode .docs-content tbody tr:nth-child(even) { background-color: var(--surface-2); }
.dark-mode .docs-content thead th { border-bottom-color: var(--line-strong); }
.dark-mode .docs-content h1, .dark-mode .docs-content h2, .dark-mode .docs-content h3, .dark-mode .docs-content h4 { color: var(--ink); }
.dark-mode .docs-card { box-shadow: none; }
.dark-mode .docs-content kbd, .dark-mode .docs-content .ui { background: var(--surface-2); }

/* ---- Narrow screens: a table must be reachable, not clipped (W25 L4-1) ----
   Measured at 360x780 through nginx: 12 of the 16 docs pages laid out a table
   or a long <code> wider than the viewport, `body.scrollWidth` up to 1015 px —
   and the public shell's `html, body { overflow-x: hidden }` (static/css/site.css)
   swallowed the overflow, so `window.scrollTo(600, 0)` left `scrollX` at 0.
   The right-hand column was not merely awkward on a phone: it could not be
   panned to at all. On /docs/alerts-advanced/ the last header cell "What it
   does" ran x=225..447 on a 360 px screen.

   The fix is a scroll container, not smaller text — these are reference tables
   and shrinking the type to fit trades one unreadable state for another.
   Making the TABLE itself the scroller (`display: block; overflow-x: auto`)
   avoids touching all sixteen page templates to add a wrapper div; the rows
   still form a table inside the anonymous table box the browser creates, so
   nothing about the desktop rendering changes — this whole block is behind a
   media query.

   `overflow-x: auto` also overrides the `overflow: hidden` the base rule uses
   to clip the corners against the border radius, which is cosmetic and only at
   this width. `td:first-child` loses its `nowrap` here for the same reason the
   audit gives: it is what makes a first column wide enough to push the last one
   off-screen. Long inline <code> (API paths, credential strings) is allowed to
   break anywhere rather than force the page wide; `pre` already scrolls. */
@media (max-width: 768px) {
  .docs-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .docs-content table td:first-child { white-space: normal; }
  .docs-content code { overflow-wrap: anywhere; word-break: break-word; }
  .docs-content figure { max-width: 100%; }
  /* A long UI-element chip ("Add a column of the same variable") is one
     unbreakable line by design; at 360 px that alone pushed the page 19 px
     wide. A chip that wraps reads worse than one that does not, and much
     better than one whose end is off the screen. */
  .docs-content kbd, .docs-content .ui { white-space: normal; }
}

/* ---- Narrow screens: the section nav is a disclosure, not a wall ---------
   Measured at 390x844 and 360x800: every one of the 21 docs pages opened on
   the full section list, so the first word of the article sat 1,404 px
   (/docs/legal/) to 2,143 px (/docs/api/) down the page — three to five
   screenfuls of links before the thing the reader tapped through to read.

   The nav is wrapped in a <details> (base/templates/base/docs/_shell.html).
   Below 769px it is closed: the sidebar is one "Documentation contents" line
   the reader can open, and the article starts at the top. This is CSS and
   markup only — no script decides what is visible, so a reader with
   JavaScript off gets the same collapsed nav and can still open it, which a
   button-and-class panel could not offer without shipping a nav that only
   script can reveal.

   ORDER MATTERS in the two blocks below: a media query adds no specificity,
   so the desktop overrides have to come after the narrow-screen rules they
   override. Written the other way round (they were, for one measurement) the
   summary shows and the nav hides at every width, desktop included. */
.docs-nav-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.25rem; margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.docs-nav-summary::-webkit-details-marker { display: none; }
.docs-nav-summary:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--r-xs, 4px); }
.docs-nav-summary__mark { flex-shrink: 0; color: var(--ink-3); transition: transform 0.15s ease; }
.docs-nav-disclosure[open] > .docs-nav-summary { margin-bottom: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.docs-nav-disclosure[open] .docs-nav-summary__mark { transform: rotate(180deg); }

@media (max-width: 768px) {
  /* The rail toggle is the desktop control; here the summary does that job. */
  .docs-nav-toggle { display: none; }
  .docs-sidebar { padding: 0.25rem 1rem; }
  .docs-sidebar .docs-sidebar-header { margin-bottom: 0.5rem; }
}

/* Above 768px there is no disclosure at all: the summary is hidden and the
   <details> is forced open, so the desktop sidebar renders exactly as before.
   Both mechanisms for forcing it are stated — `display` on the children is
   what older engines honour, `::details-content` is what current ones use
   (Chrome 131+, Firefox 139+, Safari 18.4+) — and either alone is enough.
   The rail-collapse rules stay stronger (`.docs-sidebar.collapsed nav` is one
   class heavier), so the desktop toggle button still works. */
@media (min-width: 769px) {
  .docs-nav-summary { display: none; }
  .docs-nav-disclosure > .docs-sidebar-header { display: flex; }
  .docs-nav-disclosure > nav { display: block; }
  .docs-nav-disclosure::details-content { content-visibility: visible; }
}