/* ==========================================================================
   Radio Workflow website: shared chrome (announcement bar, header, footer)

   Loaded by every public page (index.php and pages/*.php) after their own
   stylesheets. The design is the Buddy family's (Voice Buddy's dark tokens,
   primitives and lockup), dark only, in the Radio Workflow green.

   EVERYTHING HERE IS NAMESPACED bw- (classes, keyframes, custom
   properties). It began so because the pages it first shipped on still ran
   Tailwind's CDN and assets/css/styles.css; no page loads either now, but
   bw- stays the site's namespace. Element resets are scoped to .bw-chrome
   through :where(), so they cost no specificity and never reach a page body.

   Tokens: the neutral ramp (--bw-color-neutral-950 is the page, 900 cards,
   800 hairlines), the brand ramp (500 fills, 400 text on dark), and
   --bw-btn-primary-bg/-fg, which are never derived from the ramp so primary
   buttons always keep readable text. Buddy's headphones are black
   (--bw-buddy-ink) and read on the dark page by a green rim of light
   (--bw-buddy-rim), not by being lightened.

   Built from the approved mockup (I:\Code2026\_mockups\rwf-home-v2); see
   docs/dev/website-homepage.md.
   ========================================================================== */

/* ---------- Tokens: dark (default) ---------- */
:root {
  --bw-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bw-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The app switcher's panel reads this name when a host defines it. */
  --font-geist-sans: "Geist";

  --bw-color-neutral-950: #0a0a0a;
  --bw-color-neutral-900: #171717;
  --bw-color-neutral-800: #262626;
  --bw-color-neutral-700: #404040;
  --bw-color-neutral-600: #525252;
  --bw-color-neutral-500: #8f8f8f;
  --bw-color-neutral-400: #a3a3a3;
  --bw-color-neutral-300: #d4d4d4;
  --bw-color-neutral-200: #e5e5e5;
  --bw-color-neutral-100: #f5f5f5;
  --bw-color-white: #ffffff;

  /* Radio Workflow green. 500 is the fill (buttons, tints, Buddy's head),
     400 is text, rings and eyebrows on the dark ground. */
  --bw-color-brand-200: #99e7d3;
  --bw-color-brand-300: #66dbbd;
  --bw-color-brand-400: #33cfa7;
  --bw-color-brand-500: #109875;
  --bw-color-brand-600: #0d7a5e;
  --bw-color-brand-700: #0a5c46;
  --bw-color-lime: #80ff44;

  --bw-color-amber-text: #fbbf24;
  --bw-color-amber-500: #f59e0b;

  /* Never remapped by the neutral ramp: see note 1 above. */
  --bw-btn-primary-bg: #109875;
  --bw-btn-primary-bg-hover: #13ad86;
  --bw-btn-primary-fg: #04110d;

  --bw-buddy-ink: #0b0b0b;
  --bw-buddy-rim: drop-shadow(0 0 1px rgb(51 207 167 / 0.9)) drop-shadow(0 0 5px rgb(51 207 167 / 0.35));

  --bw-shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.35);
  --bw-shadow-overlay: 0 2px 4px rgb(0 0 0 / 0.6), 0 24px 64px rgb(0 0 0 / 0.5);

  --bw-wash-strong: rgb(16 152 117 / 0.16);
  --bw-wash-soft: rgb(16 152 117 / 0.06);

  /* Plain rgb() so the sticky header, the announcement bar and the neutral
     pill render in browsers without color-mix(). Brand and amber tints are
     rgb() everywhere, as those two colours are the same in both themes. */
  --bw-header-bg: rgb(10 10 10 / 0.85);
  --bw-announce-bg: rgb(11 27 23);
  --bw-pill-neutral-bg: rgb(143 143 143 / 0.15);

  --bw-container: 72rem; /* max-w-6xl */
  --bw-header-h: 4rem;
  /* The announcement bar's tallest height at each width (three lines on a
     phone). The phone menu subtracts it so its last button stays on screen. */
  --bw-announce-h: 4.625rem;

  color-scheme: dark;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bw-header-h) + 1rem);
}

@media (min-width: 640px) {
  :root {
    --bw-announce-h: 3.5rem;
  }
}

html.rwf-announce-off {
  --bw-announce-h: 0px;
}

.bw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bw-skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--bw-btn-primary-bg);
  color: var(--bw-btn-primary-fg);
  font-size: 0.875rem;
  font-weight: 600;
}

.bw-skip-link:focus {
  top: 0.75rem;
}

.bw-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bw-icon-sm {
  width: 0.875rem;
  height: 0.875rem;
}

.bw-icon-xs {
  width: 0.75rem;
  height: 0.75rem;
}

.bw-icon-filled {
  fill: currentColor;
  stroke: none;
}

.bw-container {
  width: 100%;
  max-width: var(--bw-container);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .bw-container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .bw-container {
    padding-inline: 2rem;
  }
}

/* ---------- Scoped base for the chrome ---------- */
/* :where() keeps these at element specificity: any bw- class beats them
   outright, and they never reach a page body. */
.bw-chrome {
  font-family: var(--bw-font-sans);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: var(--bw-color-neutral-200);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(.bw-chrome) *,
:where(.bw-chrome) *::before,
:where(.bw-chrome) *::after {
  box-sizing: border-box;
}

:where(.bw-chrome) :is(h1, h2, h3, p, ul, ol, li, figure) {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:where(.bw-chrome) :is(ul, ol) {
  padding: 0;
  list-style: none;
}

:where(.bw-chrome) a {
  color: inherit;
  text-decoration: none;
}

:where(.bw-chrome) button {
  margin: 0;
  font: inherit;
  color: inherit;
}

:where(.bw-chrome) :focus-visible {
  outline: 2px solid var(--bw-color-brand-400);
  outline-offset: 2px;
}

/* ---------- Buttons (primitives.tsx buttonClass) ---------- */
.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bw-btn-sm {
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.bw-btn-md {
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.bw-btn-lg {
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.bw-btn-primary {
  background: var(--bw-btn-primary-bg);
  color: var(--bw-btn-primary-fg);
  font-weight: 600;
}

.bw-btn-primary:hover {
  background: var(--bw-btn-primary-bg-hover);
  color: var(--bw-btn-primary-fg); /* never a page's own a:hover colour */
}

.bw-btn-secondary {
  border-color: var(--bw-color-neutral-700);
  background: var(--bw-color-neutral-800);
  background: color-mix(in srgb, var(--bw-color-neutral-800) 60%, transparent);
  color: var(--bw-color-neutral-200);
}

.bw-btn-secondary:hover {
  border-color: var(--bw-color-neutral-600);
  background: var(--bw-color-neutral-800);
  color: var(--bw-color-white);
}

.bw-btn-ghost {
  color: var(--bw-color-neutral-400);
}

.bw-btn-ghost:hover,
.bw-btn-ghost[aria-expanded="true"] {
  background: var(--bw-color-neutral-800);
  background: color-mix(in srgb, var(--bw-color-neutral-800) 60%, transparent);
  color: var(--bw-color-white);
}

.bw-btn-block {
  width: 100%;
}

.bw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--bw-color-neutral-400);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bw-icon-btn:hover {
  background: var(--bw-color-neutral-800);
  background: color-mix(in srgb, var(--bw-color-neutral-800) 60%, transparent);
  color: var(--bw-color-white);
}

.bw-icon-btn .bw-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------- Pills (primitives.tsx Pill) ---------- */
.bw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.bw-pill-brand {
  background: rgb(16 152 117 / 0.15);
  color: var(--bw-color-brand-300);
}

.bw-pill-neutral {
  background: var(--bw-pill-neutral-bg);
  color: var(--bw-color-neutral-300);
}

.bw-pill-hiring {
  padding: 0 0.4rem;
  border: 1px solid rgb(16 152 117 / 0.4);
  background: rgb(16 152 117 / 0.12);
  color: var(--bw-color-brand-300);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bw-status-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
}

/* ---------- Brand lockup (brand.tsx BrandLockup) ---------- */
.bw-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  border-radius: 0.5rem;
}

.bw-brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--bw-buddy-ink);
  filter: var(--bw-buddy-rim);
}

.bw-brand-text {
  display: block;
  min-width: 0;
  line-height: 1.25;
}

.bw-brand-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bw-color-white);
  white-space: nowrap;
}

.bw-brand-subtitle {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
  white-space: nowrap;
}

.bw-buddy-art {
  color: var(--bw-buddy-ink);
}

/* ---------- Announcement bar (kept from the live site) ---------- */
.bw-announce {
  position: relative;
  border-bottom: 1px solid rgb(16 152 117 / 0.3);
  background: var(--bw-announce-bg);
  color: var(--bw-color-neutral-200);
}

.bw-announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.5rem;
  padding-block: 0.5rem;
  padding-right: 3rem;
}

.bw-announce-text {
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: center;
}

.bw-announce-text .bw-pill {
  margin-right: 0.5rem;
  vertical-align: 1px;
}

.bw-announce-lead {
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-announce-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.25rem;
  color: var(--bw-color-brand-400);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bw-announce-link:hover {
  color: var(--bw-color-brand-300);
}

.bw-announce-close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  translate: 0 -50%;
  width: 2rem;
  height: 2rem;
}

html.rwf-announce-off .bw-announce {
  display: none;
}

@media (max-width: 639px) {
  .bw-announce-extra {
    display: none;
  }
}

/* ---------- Header ---------- */
.bw-site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--bw-color-neutral-800);
  border-bottom: 1px solid color-mix(in srgb, var(--bw-color-neutral-800) 70%, transparent);
  background: var(--bw-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.bw-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--bw-header-h);
}

.bw-primary-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.bw-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bw-nav-link:hover {
  background: var(--bw-color-neutral-800);
  background: color-mix(in srgb, var(--bw-color-neutral-800) 60%, transparent);
  color: var(--bw-color-white);
}

.bw-nav-link-active {
  color: var(--bw-color-white);
}

/* The header takes focus (tabindex -1) when the announcement is dismissed on
   a page without a <main>; it is a landmark, not a control, so no ring. */
.bw-site-header:focus {
  outline: none;
}

.bw-nav-link-join {
  color: var(--bw-color-brand-400);
}

.bw-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.bw-header-cta {
  margin-left: 0.25rem;
}

/* The switcher is currentColor; this reserves its 36px box before the deferred
   script upgrades the element, so the header never shifts. */
.bw-app-switcher {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--bw-color-neutral-400);
}

.bw-app-switcher:hover {
  color: var(--bw-color-white);
}

.bw-signin {
  position: relative;
  display: none;
}

.bw-signin-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 50;
  width: 13rem;
  padding: 0.375rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.75rem;
  background: var(--bw-color-neutral-900);
  box-shadow: var(--bw-shadow-overlay);
  /* On a short window (a phone on its side, a zoomed desktop) the list runs
     past the bottom, and the sticky header means the page cannot scroll it
     into view, so the menu scrolls itself, sized like the phone menu less the
     gap above it. Thin scrollbar: a classic 15px one wraps User Login's hint.
     The scroll padding keeps a focused link's ring inside the box. No
     overscroll-behavior: it stops the wheel scrolling the page over the menu. */
  max-height: calc(100vh - var(--bw-header-h) - var(--bw-announce-h) - 1.5rem);
  max-height: calc(100dvh - var(--bw-header-h) - var(--bw-announce-h) - 1.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-padding-block: 0.375rem;
}

.bw-signin-menu[hidden] {
  display: none;
}

.bw-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-300);
}

.bw-menu-link:hover {
  background: var(--bw-color-neutral-800);
  background: color-mix(in srgb, var(--bw-color-neutral-800) 70%, transparent);
  color: var(--bw-color-white);
}

.bw-menu-link-primary {
  color: var(--bw-color-white);
  font-weight: 500;
}

.bw-menu-hint {
  font-size: 0.6875rem;
  color: var(--bw-color-neutral-500);
}

.bw-menu-divider {
  height: 1px;
  margin: 0.375rem 0.25rem;
  background: var(--bw-color-neutral-800);
}

.bw-menu-label {
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-signin-chevron {
  transition: transform 0.15s ease;
}

.bw-btn[aria-expanded="true"] .bw-signin-chevron {
  transform: rotate(180deg);
}

.bw-menu-toggle .bw-icon-close {
  display: none;
}

.bw-menu-toggle[aria-expanded="true"] .bw-icon-open {
  display: none;
}

.bw-menu-toggle[aria-expanded="true"] .bw-icon-close {
  display: block;
}

.bw-mobile-menu {
  border-top: 1px solid var(--bw-color-neutral-800);
  background: var(--bw-color-neutral-950);
  max-height: calc(100vh - var(--bw-header-h) - var(--bw-announce-h));
  max-height: calc(100dvh - var(--bw-header-h) - var(--bw-announce-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bw-mobile-menu[hidden] {
  display: none;
}

.bw-mobile-menu-inner {
  display: grid;
  gap: 1.25rem;
  padding-block: 1rem 1.5rem;
}

.bw-mobile-nav-list {
  display: grid;
  gap: 0.125rem;
}

.bw-mobile-nav-list .bw-nav-link {
  display: flex;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  color: var(--bw-color-neutral-300);
}

.bw-mobile-nav-list .bw-nav-link-join {
  color: var(--bw-color-brand-400);
}

/* The current page reads white in both menus, Join Us included. */
.bw-nav-link-join.bw-nav-link-active,
.bw-mobile-nav-list .bw-nav-link-active {
  color: var(--bw-color-white);
}

.bw-mobile-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.bw-mobile-login-grid .bw-btn {
  white-space: normal;
  text-align: center;
}

.bw-mobile-cta {
  display: grid;
  gap: 0.5rem;
}

/* Phone header: lockup, app switcher, Get Started and the menu button in
   one row (dark only, so no theme toggle). Measured at 375px: about 300px of
   the 343px available. Below 340px the Get Started button steps into the
   menu (the hero's Start Free Trial sits directly underneath). */
@media (max-width: 639px) {
  .bw-header-bar {
    gap: 0.5rem;
  }
  .bw-header-actions {
    gap: 0;
  }
  .bw-site-header .bw-brand {
    gap: 0.5rem;
  }
  .bw-site-header .bw-brand-mark {
    width: 2rem;
    height: 2rem;
  }
  .bw-header-actions .bw-icon-btn,
  .bw-header-actions .bw-app-switcher {
    width: 2rem;
    height: 2rem;
  }
  .bw-app-switcher {
    --rw-apps-size: 32px;
  }
  .bw-header-cta {
    margin-inline: 0.125rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (max-width: 479px) {
  .bw-site-header .bw-brand-subtitle {
    display: none;
  }
  .bw-site-header .bw-brand-name {
    font-size: 0.8125rem;
  }
}

@media (max-width: 339px) {
  .bw-header-cta {
    display: none;
  }
}

@media (min-width: 640px) {
  .bw-signin {
    display: block;
  }
  .bw-mobile-signin {
    display: none;
  }
}

@media (min-width: 1024px) {
  .bw-primary-nav {
    display: flex;
  }
  .bw-menu-toggle,
  .bw-mobile-menu {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1159px) {
  /* The full row needs about 990px; at 1024 the container gives 960. */
  .bw-nav-link {
    padding-inline: 0.5rem;
  }
  .bw-pill-hiring {
    display: none;
  }
}

/* ---------- Footer ---------- */
.bw-site-footer {
  border-top: 1px solid var(--bw-color-neutral-800);
  background: var(--bw-color-neutral-900);
  background: color-mix(in srgb, var(--bw-color-neutral-900) 30%, transparent);
}

.bw-footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 3rem;
}

@media (min-width: 640px) {
  .bw-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bw-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.bw-footer-slogan {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bw-color-brand-400);
}

.bw-footer-blurb {
  margin-top: 0.375rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-500);
}

.bw-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.bw-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 999px;
  color: var(--bw-color-neutral-400);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bw-social a:hover {
  border-color: var(--bw-color-neutral-700);
  color: var(--bw-color-white);
}

.bw-footer-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-footer-links {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.bw-footer-links a {
  color: var(--bw-color-neutral-400);
  transition: color 0.15s ease;
}

.bw-footer-links a:hover {
  color: var(--bw-color-white);
}

.bw-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

.bw-footer-bottom a:hover {
  color: var(--bw-color-white);
}

@media (min-width: 640px) {
  .bw-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}