/* Shared nav and footer styles, extracted from spectrum.css for pages that do not use the full sheet. */
:root {
  --ink: #0b0d12;
  --navy: #1e2d40;
  --slate: #3d5a80;
  --teal: #2a7f6f;
  --amber: #c8871e;
  --orange: #d4701a;
  --coral: #d94f2a;
  --link: #c4471f;
  --gray: #b0bec5;
  --paper: #fafaf8;
  --font-display: "Outfit", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --page: #0b0d12;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; color: var(--ink); padding: 0.5rem 1rem; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; }   /* fixed, or it sits at the top of the document and is off screen once you have scrolled */
/* ---------- Nav ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  transition: background-color 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
.top.is-scrolled {
  background: rgba(11, 13, 18, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.5rem;
}
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--slate), var(--teal) 45%, var(--amber) 70%, var(--coral)); }
.top-links { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: 0.25rem; }
.top-links > li { position: relative; }
.top-links a, .top-toggle {
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85); padding: 0.75rem 0.75rem; min-height: 44px; border-radius: 999px; white-space: nowrap;
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  transition: background-color 0.2s, color 0.2s;
}
.top-links a:hover, .top-toggle:hover { color: #fff; background: rgba(255,255,255,0.1); }
.top:not(.is-scrolled) .top-links a, .top:not(.is-scrolled) .top-toggle, .top:not(.is-scrolled) .brand { text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.5); }
.top-toggle svg { width: 12px; height: 12px; }
.top-sub {
  position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 13rem;
  list-style: none; margin: 0; padding: 0.4rem;
  background: rgba(11, 13, 18, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.7);
  display: none;
}
.top-sub a { display: block; padding: 0.7rem 0.8rem; border-radius: 10px; font-weight: 500; }
.top-sub .soon { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.8rem; color: rgba(255,255,255,0.45); font-family: var(--font-display); font-size: 0.875rem; }
.soon-badge { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 0.1rem 0.45rem; align-self: center; }
/* Focus alone does not open a submenu; the button does. Same disclosure behaviour as spectrum.css, and the same
   reason: eight submenu links behind three buttons made seventeen tab stops before the page began. */
.top-links > li:hover > .top-sub, .top-links > li.open > .top-sub { display: block; }
.top-coffee svg { width: 18px; height: 18px; }
.menu-btn { background: none; border: 0; color: #fff; cursor: pointer; padding: 0.5rem; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.menu-btn svg { width: 26px; height: 26px; }
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 39;
  background: rgba(11, 13, 18, 0.96); padding: 5rem 1.5rem 2rem; overflow: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mobile-menu a, .mobile-menu .mobile-soon { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: #fff; display: block; padding: 0.55rem 0; }
.mobile-menu .mobile-group { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 1rem; }
.mobile-menu .mobile-sub { padding-left: 0.75rem; }
.mobile-menu .mobile-soon { padding-left: 0.75rem; color: rgba(255,255,255,0.45); display: flex; gap: 0.6rem; align-items: center; }
.mobile-menu .mobile-divider { border-top: 1px solid rgba(255,255,255,0.12); margin: 0.75rem 0; }
@media (min-width: 64rem) { .top-links { display: flex; } .menu-btn { display: none; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid rgba(255,255,255,0.1); padding: 3rem clamp(1rem, 4vw, 3rem) 2.5rem; color: rgba(255,255,255,0.7); }
.footer-inner { max-width: 96rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; font-size: 0.875rem; }
.footer-nav a { padding: 0.75rem 0.5rem; display: inline-block; }   /* 44px wide even for "Email" */
.footer-nav a:hover { color: #fff; }
.footer-copy { font-size: 0.875rem; color: rgba(255,255,255,0.45); }
@media (min-width: 48rem) { .footer-inner { flex-direction: row; justify-content: space-between; } }
/* A page with a light ground keeps the nav solid */
body.page-guide { padding-top: 4.6rem; }
body.page-guide .top { background: rgba(11, 13, 18, 0.94); }
body.page-guide .top .brand, body.page-guide .top-links a, body.page-guide .top-toggle { text-shadow: none; }
body.page-guide .footer { background: #0b0d12; color: rgba(255,255,255,0.7); }
/* The guides have nothing that loops, so the control does nothing and is not shown, but it keeps its box: with
   display:none the whole menu sat 87px further right here than on the other eleven pages, which is the jump
   between page kinds this file exists to prevent. */
#deck-pause { visibility: hidden; pointer-events: none; }

/* the current page in the menus */
.top-sub a[aria-current], .mobile-menu a[aria-current] { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.top-toggle.active { box-shadow: inset 0 -2px 0 var(--amber); border-radius: 999px 999px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; border: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* the same complete recipe as spectrum.css */

/* At 320 the wordmark broke onto a second line and grew the nav from 73 to 80px. A slightly smaller letter and a
   tighter gutter keep "Sounds & Colors" on one line; every control still clears 44px. */
@media (max-width: 20.5rem) {
  .top { padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.3rem; }
  .brand { font-size: 0.95rem; white-space: nowrap; }
  .brand .brand-dot { margin-right: -0.15rem; }
}

/* The user guides load the old styles.css as well as this file, and its --sc-navy reached .top .brand: the wordmark
   was #1e2d40 on the nav's near-black, 1.23:1, invisible, and it is the only link home in a guide's nav. A shared
   component carries its own colours rather than inheriting whatever else the page happens to load. */
.top .brand, .top .brand:visited { color: #fff; }
.top .brand-dot { background: linear-gradient(135deg, #3d5a80, #2a7f6f, #c8871e, #d94f2a); }

/* ---------- Everything the shared nav partial needs and this file had not caught up with ----------
   THE GUIDES ARE THE SECOND CONSUMER OF ONE PARTIAL. partials/nav.html is pulled onto all fifteen pages; eleven
   of them style it with spectrum.css and the four user guides style it with this file, so every rule added to the
   partial since this file was written was missing here and only here. Measured on /audiodesc/help/ at 390px: three
   menu glyphs in the header instead of one (the close icon never hidden, and the no-script fallback link rendered
   for everybody), a 97px nav instead of 73px, "CLOSE" as a menu item, and the app names shouting in caps because
   a legacy uppercase rule in styles.css had nothing to lose to.
   The probes now walk a guide as well as an app page, so the next rule that lands on the partial cannot land on
   only one of its two consumers. */
.menu-btn .ico-close { display: none; }
.menu-btn[aria-expanded="true"] .ico-open { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: block; }
/* the two fallbacks exist only for the path where no script runs; scoped to "the script has run", so nothing that
   styles the links themselves can out-specify it */
html:not(.no-js) .menu-link-nojs, html:not(.no-js) .mobile-close-nojs { display: none !important; }
.no-js .menu-link-nojs { display: grid; }
.no-js .mobile-menu:target { display: block; z-index: 41; }
.no-js .mobile-close-nojs { display: inline-block; position: absolute; top: 1.1rem; right: 1.5rem; z-index: 1;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff;
  min-height: 44px; min-width: 44px; padding: 0.6rem 0.75rem; }
@media (min-width: 64rem) { .no-js .menu-link-nojs { display: none; } }
/* styles.css uppercases links inside the guide, and the menu is not inside the guide's content */
/* styles.css uppercases links inside the guide and the menu is not inside the guide's content. Only the case is
   reset: setting letter-spacing to normal here also overrode the 0.02em the nav links carry above, which put the
   whole menu 4px off where it sits on the other eleven pages. */
.mobile-menu a, .mobile-menu .mobile-soon, .top-links a, .top-sub a, .brand { text-transform: none; }
.mobile-menu { background: #0b0d12; }   /* opaque: over a white page the guide's own text ghosted through it */
.brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.brand .brand-dot, .menu-btn, .top-coffee { flex: 0 0 auto; }
.top-links .top-coffee { min-width: 44px; justify-content: center; }
.menu-btn, .top-coffee, .deck-pause { flex: 0 0 auto; }
.deck-pause .ico-play { display: none; }
.deck-pause:hover { background: rgba(255,255,255,0.14); }
.deck-pause.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.deck-pause.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0s 0.3s; }
.deck-pause[aria-pressed="true"] .ico-play { display: block; }
.deck-pause[aria-pressed="true"] .ico-pause { display: none; }

/* Ported from spectrum.css, which the other eleven pages use for the same partial. Probing the guides alongside
   an app page found the submenu closing on the way down (no bridge across the gap) and the menu sitting 106px
   further right (no auto margin, and an unstyled pause control taking the wrong width). */
.top { gap: 0.5rem; flex-wrap: wrap; row-gap: 0.4rem; }   /* text-only zoom keeps the wide window and doubles the labels; the bar takes a second row rather than clipping the wordmark */
.top-links { margin: 0 0 0 auto; }
body:not(.has-demos) #deck-pause { visibility: hidden; pointer-events: none; }

/* The gap between the button and its panel belongs to the panel, or a pointer travelling down to an item crosses
   half a rem of nothing and the menu shuts under it. */
.top-sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.5rem; }
/* The pause control's own box, so it measures the same 87px here as everywhere else even while it is hidden. */
.deck-pause {
  height: 44px; padding: 0 0.9rem 0 0.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.01em; line-height: 1;
  margin-left: 0.25rem; flex: 0 0 auto;
}
.deck-pause svg { width: 16px; height: 16px; }
.no-js .top { background: rgba(11,13,18,0.92); backdrop-filter: blur(8px); }
.no-js .menu-btn, .no-js .deck-pause { display: none; }