/* marketing/assets/ds/chrome.css: the one nav and the one footer on every page (spec
   docs/superpowers/specs/2026-10-04-unified-chrome-design.md, U1-U5), in theme D's language: an aubergine-950 bar and
   footer, the design system's type (Regular 400 for nav and button labels, Semibold eyebrow labels, Text Book for
   running text), sentence case. Markup: scripts/build.mjs (renderHeader, renderFooter, renderCrumb). Behaviour:
   chrome.js.
   Every selector carries the .ac- prefix, so site.css's global .nav and .foot rules and v3.css's .home rules never
   reach the chrome, and the chrome never reaches a page body. Loaded after every page stylesheet (the CHROME:HEAD
   region sits just before </head>).
   Raw colours live only in this block (alphas of aubergine-950, bone and ink); below the marker, tokens only. */
:root {
  --ac-glass: rgba(36, 17, 24, .94);   /* aubergine-950 at 94 %: the bar once the page scrolls under it */
  --ac-line: rgba(247, 241, 239, .12);   /* bone hairlines on aubergine */
  --ac-line-2: rgba(247, 241, 239, .24);
  --ac-shadow: rgba(10, 4, 7, .5);
}
/* END CHROME STOPS */

/* ── shared ── */
/* anchor jumps clear the sticky 64 px bar, with air */
html { scroll-padding-top: 80px; }
/* the phone sheet is open: the page under it stays put. The lock goes on <body>, never <html>: an overflow on <html> stops
   body's own (overflow-x: hidden in site.css) propagating to the viewport, body becomes the scroller, the sticky bar
   un-sticks and the reader's place is lost (fix round 1) */
html.ac-lock body { overflow: hidden; }
.ac-nav, .ac-foot, .ac-skip { --ac-margin: clamp(20px, 4vw, 48px); --ac-wrap: 1280px; --ac-bar: 64px;
  --au-focus-ring: var(--au-color-neutral-50); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ac-nav *, .ac-nav *::before, .ac-nav *::after, .ac-foot *, .ac-foot *::before, .ac-foot *::after { box-sizing: border-box; }
.ac-nav :focus-visible, .ac-foot :focus-visible, .ac-skip:focus-visible { outline: 2px solid var(--au-focus-ring); outline-offset: 2px; }
.ac-nav .ac-wrap, .ac-foot .ac-wrap { max-width: calc(var(--ac-wrap) + 2 * var(--ac-margin)); margin-inline: auto; padding-inline: var(--ac-margin); }
.ac-nav ul, .ac-foot ul { margin: 0; padding: 0; list-style: none; }
.ac-nav a, .ac-foot a { color: inherit; text-decoration: none; }
.ac-nav img, .ac-foot img { display: block; max-width: 100%; height: auto; }
.ac-nav [aria-current="page"], .ac-foot ul [aria-current="page"], .ac-foot .ac-label [aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--au-color-red-500); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ac-nav .ac-logo[aria-current="page"] { text-decoration: none; }
/* the eyebrow-style labels: Semibold 11 px capitals at +10 %, the system's only capitals */
.ac-nav .ac-glabel, .ac-foot .ac-label { margin: 0; font: 600 11px/1.2 'PP Neue Montreal', 'PPNM Fallback', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--au-color-neutral-300); }

/* ── skip link: off-screen until focused, then a bone label over the bar ── */
.ac-skip { position: absolute; left: var(--au-space-4); top: var(--au-space-2); z-index: 110; padding: var(--au-space-2) var(--au-space-4);
  background: var(--au-color-neutral-50); color: var(--au-color-neutral-950); border-radius: var(--au-radius-card);
  font: 400 14px/1.4 'PP Neue Montreal', 'PPNM Fallback', system-ui, sans-serif; text-decoration: none; transform: translateY(-200%);
  --au-focus-ring: var(--au-color-neutral-950); }
.ac-skip:focus { transform: none; }

/* ── the bar (U4): sticky and in flow, 64 px, aubergine-950; aubergine glass and a bone hairline once the page
   scrolls under it. z-index 100: above the product pages' .pbar (90) and every body layer ── */
.ac-nav { position: sticky; top: 0; z-index: 100; background: var(--au-color-aubergine-950); color: var(--au-color-neutral-50);
  font: 400 14px/1.2 'PP Neue Montreal', 'PPNM Fallback', system-ui, sans-serif; letter-spacing: 0;
  transition: background-color var(--au-motion-duration-quick) var(--au-motion-easing-standard), box-shadow var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
.ac-nav.is-scrolled { background: var(--ac-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 var(--ac-line); }
/* focusing something in the bar while scrolled down never scrolls the page to it: the bar is always in view */
.ac-nav, .ac-nav * { scroll-margin-top: -80px; }
.ac-nav-in { position: relative; display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--au-space-8); align-items: center; height: var(--ac-bar); }
.ac-logo { display: block; }
.ac-logo img { width: 156px; height: 24px; }
.ac-items { display: flex; align-items: center; gap: var(--au-space-6); }
.ac-nav .ac-link, .ac-disc { display: inline-flex; align-items: center; gap: var(--au-space-1); min-height: 44px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
  transition: color var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
.ac-nav .ac-link:hover, .ac-disc:hover, .ac-disc[aria-expanded="true"] { color: var(--au-color-red-400); }
.ac-caret { flex: none; transition: transform var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
.ac-disc[aria-expanded="true"] .ac-caret { transform: rotate(180deg); }
/* the disclosure that holds the current section carries its underline */
.ac-group:has([aria-current="page"]) > .ac-disc { text-decoration: underline; text-decoration-color: var(--au-color-red-500); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ac-glabel { display: none; }
/* a disclosure's list (desktop): a raised dark panel under its button, closed until chrome.js opens it */
.ac-group { position: relative; }
.ac-list { display: none; position: absolute; top: calc(100% + var(--au-space-1)); left: calc(-1 * var(--au-space-3)); min-width: 220px; padding: var(--au-space-2);
  background: var(--au-color-surface-dark-raised); border-radius: 14px; box-shadow: 0 0 0 1px var(--ac-line), 0 16px 32px var(--ac-shadow); }
.ac-group.is-open .ac-list { display: grid; }
.ac-list a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--au-space-3); border-radius: 10px; font-size: 15px;
  transition: background-color var(--au-motion-duration-quick) var(--au-motion-easing-standard), color var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
.ac-list a:hover { background: var(--au-color-aubergine-900); color: var(--au-color-red-400); }
.ac-end { display: flex; align-items: center; gap: var(--au-space-2); }
/* Reserve: the sanguine primary, a white Regular label, a pill; 44 px drawn at every width (council 2026-10-04), inside the
   64 px bar */
.ac-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--au-space-4); border-radius: var(--au-radius-pill);
  background: var(--au-action-primary-fill); color: var(--au-action-primary-label); font: 400 13px/1 'PP Neue Montreal', 'PPNM Fallback', system-ui, sans-serif; white-space: nowrap;
  transition: background-color var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
.ac-btn:hover { background: var(--au-color-red-800); }
.ac-btn:active { transform: scale(.98); }
.ac-menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }

/* ── phones and tablets (U1 on a phone): one menu button opens a sheet with every item; the groups open,
   their labels as eyebrows, every row at least 44 px ── */
@media (max-width: 899px) {
  .ac-nav-in { grid-template-columns: 1fr auto; }
  .ac-menu-btn { display: inline-grid; place-items: center; }
  .ac-menu { display: none; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--ac-bar)); max-height: calc(100dvh - var(--ac-bar)); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--au-space-2) var(--ac-margin) var(--au-space-6); background: var(--au-color-surface-dark-raised);
    box-shadow: inset 0 1px 0 var(--ac-line), 0 16px 32px var(--ac-shadow); }
  .ac-nav.is-open .ac-menu { display: block; }
  .ac-items { display: grid; gap: 0; }
  .ac-disc { display: none; }
  .ac-glabel { display: block; padding: var(--au-space-5) 0 var(--au-space-2); }
  .ac-list { display: grid; position: static; min-width: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .ac-list a, .ac-nav .ac-top .ac-link { display: flex; min-height: 52px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--ac-line); font-size: 18px; }
  .ac-list a:hover { background: none; }
  .ac-top { margin-top: var(--au-space-3); }
  .ac-nav.is-open { background: var(--au-color-aubergine-950); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ac-nav.is-open .ac-bar1 { transform: translateY(4px); }
  .ac-nav.is-open .ac-bar2 { transform: translateY(-4px); }
  .ac-bar1, .ac-bar2 { transition: transform var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
}
@media (max-width: 359px) {
  .ac-logo img { width: 120px; height: auto; }
  .ac-end { gap: var(--au-space-1); }
  .ac-btn { padding-inline: var(--au-space-3); }
}

/* ── the footer (U3): aubergine, the reversed logo, a red tile and a raised quiet tile, four columns, the
   collapsible All guides, the legal lines over a giant faint wordmark ── */
.ac-foot { position: relative; overflow: hidden; background: var(--au-color-aubergine-950); color: var(--au-color-neutral-50); color-scheme: dark;
  font: 350 16px/1.5 'PP Neue Montreal Text', 'PPNM Fallback', system-ui, sans-serif; letter-spacing: 0; }
.ac-foot p { margin: 0; }
.ac-foot-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: var(--au-space-8) 24px; padding-block: var(--au-space-10); }
/* the top rule spans the content, not the wrap's padding box (v3's footer) */
.ac-foot-grid::before { content: ''; position: absolute; top: 0; left: var(--ac-margin); right: var(--ac-margin); border-top: 1px solid var(--ac-line); }
.ac-foot-brand { grid-column: 1 / span 4; grid-row: 1; }
.ac-foot-brand img { width: min(100%, 234px); }
.ac-tiles { grid-column: 1 / span 4; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-self: start; }
.ac-tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--au-space-4); min-height: 120px; padding: var(--au-space-5); border-radius: var(--au-radius-card);
  transition: background-color var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
.ac-tile svg { align-self: flex-end; }
.ac-tile-t { font: 400 clamp(20px, 18.59px + .376vw, 24px)/1.2 'PP Neue Montreal', 'PPNM Fallback', system-ui, sans-serif; letter-spacing: -0.01em; }
.ac-tile-red { background: var(--au-action-primary-fill); color: var(--au-action-primary-label); }
.ac-tile-red:hover { background: var(--au-color-red-800); }
.ac-tile-quiet { background: var(--au-color-aubergine-900); color: var(--au-color-neutral-50); box-shadow: inset 0 0 0 1px var(--ac-line); }
.ac-tile-quiet:hover { background: var(--au-color-aubergine-800); }
.ac-cols { grid-column: 6 / span 7; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ac-cols > div { display: grid; gap: var(--au-space-3); align-content: start; }
.ac-cols ul, .ac-guide-groups ul { display: grid; gap: var(--au-space-2); font-size: 14px; }
.ac-foot ul a { display: inline-block; transition: color var(--au-motion-duration-quick) var(--au-motion-easing-standard); }
.ac-foot ul a:hover, .ac-foot .ac-label a:hover { color: var(--au-color-red-400); }
/* All guides: a disclosure row on a hairline; open, the groups as the hubs group them */
.ac-guides { border-top: 1px solid var(--ac-line); border-bottom: 1px solid var(--ac-line); }
.ac-guides > summary { display: flex; align-items: center; gap: var(--au-space-2); min-height: 52px; cursor: pointer; list-style: none; }
.ac-guides > summary::-webkit-details-marker { display: none; }
.ac-guides > summary:hover .ac-label { color: var(--au-color-neutral-50); }
.ac-guides[open] > summary .ac-caret { transform: rotate(180deg); }
.ac-guide-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--au-space-8) 24px; padding-block: var(--au-space-4) var(--au-space-10); }
.ac-guide-groups > div { display: grid; gap: var(--au-space-3); align-content: start; }
.ac-guide-groups .ac-label a { color: inherit; }
/* the legal lines sit above the wordmark, in secondary text (neutral-300, AA over the wordmark's raised aubergine) */
.ac-legal { position: relative; z-index: 1; display: grid; gap: var(--au-space-2); padding-block: var(--au-space-6) var(--au-space-8); color: var(--au-color-neutral-300); font-size: 14px; }
.ac-legal .ac-copy { font-size: 12px; line-height: 1.4; }
.ac-mark-wrap { position: relative; z-index: 0; margin-top: calc(-1 * clamp(8px, 1.6vw, 24px)); }
.ac-mark { display: block; width: 100%; height: auto; fill: var(--au-color-surface-dark-raised); pointer-events: none; }
@media (max-width: 1279px) { .ac-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--au-space-8); } }
@media (max-width: 899px) {
  .ac-tiles, .ac-foot-brand, .ac-cols { grid-column: 1 / -1; grid-row: auto; }
  .ac-foot-grid { row-gap: var(--au-space-8); }
}
@media (max-width: 479px) { .ac-tiles { grid-template-columns: 1fr; } .ac-tile { min-height: 112px; } }

/* ── the breadcrumb (renderCrumb): a list in the old line's inline flow; its place and type stay the body's ── */
.ac-crumb ol, .ac-crumb li { display: inline; margin: 0; padding: 0; list-style: none; }

/* reduced motion: no transitions in the chrome */
@media (prefers-reduced-motion: reduce) {
  .ac-nav, .ac-nav *, .ac-foot, .ac-foot * { transition: none; }
  .ac-btn:active { transform: none; }
}