/*
 * One orange thing per screen — and it is the voice.
 *
 * WHY
 * Orange was on everything: the top promo strip, the bottom bar, the chat pill,
 * "Start Earning", "Log In", the ScanSquad avatar. Measured live at phone width,
 * Book, Partner and Profile each painted three orange surfaces. On Partner two of
 * them were both "Ask AI"; on Profile "Log In" and "Continue - Sign in to unlock
 * your QR pass" were both sign-in. The same action, twice, in the loudest colour.
 * When everything is the primary action, nothing is.
 *
 * Worse, #sg-usp-banner is orange and cannot be clicked at all, so the brightest
 * thing on the page was not an action.
 *
 * THE RULE
 * Orange marks the one thing we want you to do. The product's whole premise is
 * that you say what you want rather than hunting for a button, so the voice
 * affordance keeps the orange and every other call to action steps down to a
 * legible neutral. Nothing is hidden or disabled — tapping still works exactly as
 * before, it simply stops shouting over the microphone.
 *
 * HOW
 * This file loads last and uses !important because the colours it overrides are
 * inline gradients written by a dozen different scripts. Restyling each of those
 * call sites would touch app.ctr576.js, round4-ui.js, continue-cta-flow.js,
 * partner-editable.js and more; a single late stylesheet is reversible by deleting
 * one <link>, which matters more here than purity.
 */

:root {
  /* Neutral for demoted actions: reads as a real button on the dark theme,
     clearly secondary next to orange, still WCAG-legible against #0f172a. */
  --sg-secondary-bg: #1e293b;
  --sg-secondary-bg-hover: #334155;
  --sg-secondary-border: #475569;
  --sg-secondary-fg: #e2e8f0;
}

/* ─── 1. The one orange thing: the voice pill ────────────────────────────────
   Left orange on purpose, and lifted slightly so it reads as the primary
   action now that it no longer competes with three other orange surfaces. */
#bchat-fab,
#pchat-fab,
#schat-fab,
#rchat-fab,
#mchat-fab,
#chat-fab {
  background: linear-gradient(135deg, #FF6D00, #E66200) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(255, 109, 0, .38) !important;
  font-weight: 700 !important;
}

/* ─── 2. The promo strip is information, not an action ──────────────────────
   It cannot be clicked, so it must not wear the colour that means "press me". */
#sg-usp-banner {
  background: #111827 !important;
  background-image: none !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid #1f2937 !important;
}

/* ─── 3. Bottom bar: still the tap path, no longer the loudest thing ────────
   This is the duplicate on Partner ("Ask AI" twice) and Profile ("Log In" plus
   "Sign in"). Demoted rather than deleted: the tap route keeps working for
   anyone who cannot or does not want to speak, which includes every visitor
   with the microphone blocked. */
#sg-continue-banner {
  background: var(--sg-secondary-bg) !important;
  background-image: none !important;
  color: var(--sg-secondary-fg) !important;
  border-top: 1px solid var(--sg-secondary-border) !important;
  box-shadow: none !important;
}
#sg-continue-banner * {
  color: var(--sg-secondary-fg) !important;
}

/* ─── 4. In-page primaries step down ────────────────────────────────────────
   "Start Earning" (ScanSquad) and anything using the brand fill, e.g. "Log In". */
#join-btn,
#sg-aff-continue-btn,
.bg-brand:not(#bchat-fab):not(#pchat-fab):not(#schat-fab):not(#rchat-fab):not(#mchat-fab) {
  background: var(--sg-secondary-bg) !important;
  background-image: none !important;
  color: var(--sg-secondary-fg) !important;
  border: 1px solid var(--sg-secondary-border) !important;
  box-shadow: none !important;
}
#join-btn:hover,
#sg-aff-continue-btn:hover,
.bg-brand:not(#bchat-fab):not(#pchat-fab):not(#schat-fab):not(#rchat-fab):not(#mchat-fab):hover {
  background: var(--sg-secondary-bg-hover) !important;
}

/* ─── 5. Decoration should never be orange ──────────────────────────────────
   The ScanSquad avatar is an identity chip, not a button, but it was pulling
   the eye as hard as the real call to action beside it. */
.dash-avatar {
  background: var(--sg-secondary-bg) !important;
  background-image: none !important;
  color: var(--sg-secondary-fg) !important;
  border: 1px solid var(--sg-secondary-border) !important;
}

/* ─── 6. The catch-all: orange written straight into a style attribute ──────
   The first pass of this file missed two elements, and the live audit caught
   them: the ScanSquad avatar and Profile's "Log In" button both carry
   `background:#FF6D00` inline with no id and no class, so there was nothing to
   select them by.
   Matching the style attribute itself fixes those two and, more usefully, any
   future element that paints itself brand orange inline — which is how every
   one of these got here. Restricted to `background`, so an element merely using
   orange for text or a border is left alone, and the pills are exempt. */
[style*="background:#FF6D00"]:not([id$="-fab"]),
[style*="background: #FF6D00"]:not([id$="-fab"]),
[style*="background:#FF6D00"] :not([id$="-fab"]),
[style*="background:linear-gradient(135deg,#FF6D00"]:not([id$="-fab"]),
[style*="background: linear-gradient(135deg, #FF6D00"]:not([id$="-fab"]) {
  background: var(--sg-secondary-bg) !important;
  background-image: none !important;
  color: var(--sg-secondary-fg) !important;
  box-shadow: none !important;
}

/* The "Finding new gyms…" toast is a status message, not something to press. */
#sg-pull-refresh {
  background: rgba(30, 41, 59, .95) !important;
  background-image: none !important;
  color: var(--sg-secondary-fg) !important;
}

/* ─── 7. Respect reduced motion on the pill's live dot ──────────────────────
   The pill is now the single focal point, so its pulse is more noticeable. */
@media (prefers-reduced-motion: reduce) {
  #bchat-fab .pchat-fab-dot,
  #pchat-fab .pchat-fab-dot,
  #schat-fab .pchat-fab-dot,
  #rchat-fab .pchat-fab-dot,
  #mchat-fab .pchat-fab-dot {
    animation: none !important;
  }
}

/* ─── 8. The two the static tests could never see ───────────────────────────
   Sections 1–7 were written by reading the source. These two were found by
   driving the live site in a mobile browser and counting the orange surfaces
   the user can actually see — which is the only measurement that matches the
   rule. Both escaped every existing test because those tests grep this
   stylesheet, and an element that was never added to this stylesheet is
   invisible to them.

   8a. #sg-sps — the "No membership needed · Instant QR · Free cancel" strip.
   app-patches-v3.js injects it three seconds after paint with an orange wash
   and an orange bottom border, full width, directly above the content. It is
   reassurance copy, not a call to action, and on Book and Profile it was the
   second orange surface on the screen. Keep the strip, drop the orange. */
#sg-sps {
  background: var(--sg-secondary-bg) !important;
  border-bottom-color: rgba(255, 255, 255, .10) !important;
}

/* ─── The location prompt ────────────────────────────────────────────────────
   #sg-location-banner is a full-width bar at the very top of Book, and it is
   orange — but as a gradient in the amber family, rgb(120,53,15) to
   rgb(146,64,14), not #FF6D00. Every rule above keys on the brand hex, so
   nothing here caught it and no static test could: the colour is set inline
   from JS. A rendered-page audit is what found it.

   It reads as a second orange bar on the tab. Keep the prompt, drop the hue. */
#sg-location-banner {
  background-image: none !important;
  background-color: var(--sg-secondary-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}