/* ==========================================================================
   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);
}

.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;
  }
}