/* ==========================================================================
   Beta Sigma Pilot — Child 2 (Login + Home shell) scoped stylesheet
   ==========================================================================
   Governance:
     - docs/frontend/FROZEN_MIGRATION_PLAN.md  (Child 2 — Phase 1 Pilot;
       presentation-only, reversible, no npm/bundler/React, billing out).
     - docs/frontend/CONVENTIONS.md  (§2 Dash-stays-Dash, §3 consume semantic
       tokens, §4 dark-default, §10 no legacy-CSS cleanup, §13 owner gates).
   Visual authority:
     - docs/design-system/Beta_Sigma_Design_System_v1.0.html
       (§12 Navigation — Top Bar 56px / Sidebar 280px; §12.1 Buttons —
       sm 32 / md 40 / lg 48, primary text = color-text-on-accent;
       §12.2 Inputs — 40px md, radius-md; §22 dark is the default state).

   SCOPE CONTRACT (enforced — see the S3 validation in the migration log):
     - EVERY selector below is nested beneath `.bs-pilot` or `[data-bs-pilot]`.
       There are no global / bare element selectors.
     - Values come only from the semantic tokens defined in assets/tokens.css.
       No Design System token value is redefined here; tokens.css is not edited
       (CONVENTIONS.md §3). CSS custom properties resolve at computed-value
       time, so token usage here does not depend on stylesheet load order.
     - No @import. No url(). No external references. No fonts loaded here.
     - No feature-modal / plans-modal / admin-modal / legacy z_modal styling.

   STATUS (S3): INERT.
     No repository layout renders `.bs-pilot` or `[data-bs-pilot]` yet, so this
     file has ZERO visible effect. A later step (S4 Login, S5 Home shell) opts
     a single subtree in, behind the BS_PILOT_LOGIN_HOME feature flag.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Pilot root / canvas + typography inheritance
   -------------------------------------------------------------------------- */
.bs-pilot,
[data-bs-pilot] {
  box-sizing: border-box;
  min-height: 100vh;
  background: var(--bs-color-canvas);
  color: var(--bs-color-text-primary);
  font-family: var(--bs-font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.bs-pilot *,
.bs-pilot *::before,
.bs-pilot *::after,
[data-bs-pilot] *,
[data-bs-pilot] *::before,
[data-bs-pilot] *::after {
  box-sizing: border-box;
}

.bs-pilot h1,
.bs-pilot h2,
.bs-pilot h3,
.bs-pilot h4 {
  margin: 0 0 var(--bs-space-3);
  font-family: var(--bs-font-display);
  line-height: 1.2;
  color: var(--bs-color-text-primary);
}

.bs-pilot p {
  margin: 0 0 var(--bs-space-3);
  color: var(--bs-color-text-secondary);
}

.bs-pilot code,
.bs-pilot .bs-pilot__mono {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   1b. Display heading — Design System cover-title treatment
       (docs/design-system/Beta_Sigma_Design_System_v1.0.html: cover <h1>
       + global h1..h4 rule; Typography §07 "Display" row).
       Selector carries an extra class to win over the `.bs-pilot h1` rule.
   -------------------------------------------------------------------------- */
.bs-pilot h1.bs-pilot__display,
[data-bs-pilot] h1.bs-pilot__display {
  font-family: var(--bs-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  /* R7-A: font-size scaled down proportionally to the smaller auth card.
     Family (League Spartan via --bs-font-display), weight 800, color,
     alignment and wording are unchanged. */
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.02;
  text-wrap: balance;
  color: var(--bs-color-text-primary);
  text-align: center;
  margin: 0 0 var(--bs-space-4);
}

/* --------------------------------------------------------------------------
   1c. Brand lockup — official globe/network symbol + CSS wordmark
       (BETA / SIGMA / ANALYTICS). DS §01.1: the symbol is never recolored,
       distorted, rotated or shadowed — CSS only sizes it.
   -------------------------------------------------------------------------- */
.bs-pilot__brand {
  display: flex;
  align-items: center;
  gap: var(--bs-space-3);
}

.bs-pilot__brand-mark {
  display: block;
  width: auto;
  height: 56px;
  flex: 0 0 auto;
}

.bs-pilot__brand-word {
  display: flex;
  flex-direction: column;
  line-height: 0.92;
}

.bs-pilot__brand-word span {
  display: block;
  font-family: var(--bs-font-display);
  letter-spacing: 0.02em;
}

.bs-pilot__brand-beta {
  font-weight: 800;
  font-size: 26px;
  color: var(--bs-color-accent-text);
}

.bs-pilot__brand-sigma {
  font-weight: 800;
  font-size: 26px;
  color: var(--bs-color-text-primary);
}

.bs-pilot__brand-analytics {
  margin-top: 4px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bs-color-text-muted);
}

/* Reduced lockup for the Home top bar (DS §12.3 — top bar uses the reduced
   logo): symbol + BETA SIGMA inline, ANALYTICS dropped at this size. */
.bs-pilot__brand--sm .bs-pilot__brand-mark { height: 30px; }
.bs-pilot__brand--sm .bs-pilot__brand-word {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.bs-pilot__brand--sm .bs-pilot__brand-beta,
.bs-pilot__brand--sm .bs-pilot__brand-sigma { font-size: 16px; }
.bs-pilot__brand--sm .bs-pilot__brand-analytics { display: none; }

/* --------------------------------------------------------------------------
   2. Accessible focus-visible (scoped)
   -------------------------------------------------------------------------- */
.bs-pilot :focus-visible,
[data-bs-pilot] :focus-visible {
  outline: 2px solid var(--bs-color-accent);
  outline-offset: 2px;
  border-radius: var(--bs-radius-xs);
}

/* --------------------------------------------------------------------------
   3. Shell layout primitives — Top Bar + Sidebar + Content region
      DS §12 Navigation: Top Bar 56px; Sidebar 280px (collapsed 64px).
   -------------------------------------------------------------------------- */
.bs-pilot__shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar content";
  min-height: 100vh;
}

.bs-pilot__topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--bs-space-4);
  min-height: 56px;
  padding: 0 var(--bs-space-5);
  background: var(--bs-color-bg);
  border-bottom: 1px solid var(--bs-color-border);
}

.bs-pilot__topbar-spacer {
  flex: 1 1 auto;
}

.bs-pilot__sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: var(--bs-space-1);
  padding: var(--bs-space-4) var(--bs-space-3);
  background: var(--bs-color-bg);
  border-right: 1px solid var(--bs-color-border);
  overflow-y: auto;
}

.bs-pilot__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bs-space-7);
  min-height: calc(100vh - 56px);
  padding: var(--bs-space-9) var(--bs-space-7) var(--bs-space-12);
  overflow-y: auto;
}

/* Sidebar nav item — DS §12: active = surface bg + 3px left neon border */
.bs-pilot__nav-item {
  display: flex;
  align-items: center;
  gap: var(--bs-space-3);
  padding: var(--bs-space-3);
  border-left: 3px solid transparent;
  border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
  color: var(--bs-color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--bs-motion-fast) var(--bs-ease-standard),
              color var(--bs-motion-fast) var(--bs-ease-standard);
}

.bs-pilot__nav-item:hover {
  background: var(--bs-color-surface);
  color: var(--bs-color-text-primary);
}

.bs-pilot__nav-item.is-active,
.bs-pilot__nav-item[aria-current="page"] {
  background: var(--bs-color-surface);
  border-left-color: var(--bs-color-accent);
  color: var(--bs-color-text-primary);
}

/* --------------------------------------------------------------------------
   4. Login container / card + form field wrappers (DS §12.2 Inputs)
   -------------------------------------------------------------------------- */
.bs-pilot__login {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bs-space-7);
  min-height: 100vh;
  padding: var(--bs-space-9) var(--bs-space-6) var(--bs-space-11);
  background: var(--bs-color-canvas);
}

.bs-pilot__card {
  width: 100%;
  /* R7-A: scaled down from the R5 760px, which the owner found too large.
     460px is clearly smaller than 760px yet materially wider than the
     original 380px, giving the display title balanced horizontal room
     without unnecessary card height. `width: 100%` + border-box keeps it
     viewport-safe: it never exceeds the padded .bs-pilot__login content box
     on any screen, so no horizontal overflow / internal scrollbar. */
  max-width: 460px;
  padding: var(--bs-space-6);
  background: var(--bs-color-surface);
  border: 1px solid var(--bs-color-border);
  border-radius: var(--bs-radius-lg);
  box-shadow: 0 10px 30px var(--bs-color-shadow);
}

.bs-pilot__field {
  display: flex;
  flex-direction: column;
  gap: var(--bs-space-2);
  /* R7-A: tighter vertical rhythm for the smaller auth card. */
  margin-bottom: var(--bs-space-3);
}

.bs-pilot__label {
  /* R7-A: scaled down with the rest of the card. */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bs-color-text-secondary);
}

.bs-pilot__input {
  width: 100%;
  /* R7-A: field dimensions/typography scaled down with the auth card. */
  height: 36px;
  padding: 0 var(--bs-space-3);
  background: var(--bs-color-bg);
  border: 1px solid var(--bs-color-border-strong);
  border-radius: var(--bs-radius-md);
  color: var(--bs-color-text-primary);
  font-family: var(--bs-font-body);
  font-size: 13px;
  transition: border-color var(--bs-motion-fast) var(--bs-ease-standard);
}

.bs-pilot__input::placeholder {
  color: var(--bs-color-text-muted);
}

.bs-pilot__input:focus {
  border-color: var(--bs-color-accent);
  outline: none;
}

.bs-pilot__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bs-pilot__input--mono {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
}

.bs-pilot__form-message {
  min-height: 1.25em;
  margin-top: var(--bs-space-2);
  font-size: 13px;
  text-align: center;
  color: var(--bs-hot-500);
}

/* --------------------------------------------------------------------------
   5. Action styles — primary / secondary (DS §12.1 Buttons)
   -------------------------------------------------------------------------- */
.bs-pilot__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bs-space-2);
  height: 40px;
  padding: 0 var(--bs-space-4);
  border: 1px solid transparent;
  border-radius: var(--bs-radius-sm);
  font-family: var(--bs-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--bs-motion-fast) var(--bs-ease-standard),
              border-color var(--bs-motion-fast) var(--bs-ease-standard),
              opacity var(--bs-motion-fast) var(--bs-ease-standard);
}

.bs-pilot__btn--sm {
  height: 32px;
  padding: 0 var(--bs-space-3);
  font-size: 13px;
}

.bs-pilot__btn--lg {
  height: 48px;
  padding: 0 var(--bs-space-5);
  font-size: 15px;
}

.bs-pilot__btn--primary {
  background: var(--bs-color-accent);
  color: var(--bs-color-text-on-accent);
}

.bs-pilot__btn--primary:hover {
  background: var(--bs-color-accent-hover);
}

.bs-pilot__btn--primary:active {
  background: var(--bs-color-accent-pressed);
}

.bs-pilot__btn--secondary {
  background: transparent;
  border-color: var(--bs-color-border-strong);
  color: var(--bs-color-text-primary);
}

.bs-pilot__btn--secondary:hover {
  border-color: var(--bs-color-accent);
  color: var(--bs-color-accent-text);
}

.bs-pilot__btn:disabled,
.bs-pilot__btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bs-pilot__btn--block {
  display: flex;
  width: 100%;
}

/* R7-A: the auth card's own actions (Login + subscribe) scaled down with the
   rest of the card. Scoped to .bs-pilot__card so the shared .bs-pilot__btn
   used by the Home top bar is unaffected. */
.bs-pilot__card .bs-pilot__btn {
  height: 36px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   6. Home box navigation — large cards (btn-1..btn-5)
      Interaction energy is inspired by EA SPORTS FC only; no EA asset, icon,
      typeface or layout is used. Geometry, tokens, motion and icons are Beta
      Sigma's own (Design System §10 shape, §12.5 Card, §19.1 hover).
      Card selectors carry `.bs-pilot ` so they win over Bootstrap `.btn`.
   -------------------------------------------------------------------------- */
.bs-pilot__nav-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bs-space-5);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.bs-pilot .bs-pilot__nav-card,
[data-bs-pilot] .bs-pilot__nav-card {
  position: relative;
  display: flex;
  flex: 0 1 300px;
  flex-direction: column;
  gap: var(--bs-space-3);
  min-height: 168px;
  padding: var(--bs-space-6);
  background: var(--bs-color-surface);
  border: 1px solid var(--bs-color-border);
  border-radius: var(--bs-radius-lg);
  color: var(--bs-color-text-primary);
  font-family: var(--bs-font-display);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: transform var(--bs-motion-fast) var(--bs-ease-standard),
              background var(--bs-motion-fast) var(--bs-ease-standard),
              border-color var(--bs-motion-fast) var(--bs-ease-standard),
              box-shadow var(--bs-motion-fast) var(--bs-ease-standard);
}

.bs-pilot .bs-pilot__nav-card:hover,
.bs-pilot .bs-pilot__nav-card:focus-visible,
[data-bs-pilot] .bs-pilot__nav-card:hover,
[data-bs-pilot] .bs-pilot__nav-card:focus-visible {
  transform: translateY(-2px);
  background: var(--bs-color-surface-elevated);
  border-color: var(--bs-color-border-strong);
  box-shadow: 0 8px 24px var(--bs-color-shadow);
}

.bs-pilot .bs-pilot__nav-card:active,
[data-bs-pilot] .bs-pilot__nav-card:active {
  transform: translateY(0);
  box-shadow: none;
}

.bs-pilot .bs-pilot__nav-card.is-locked,
[data-bs-pilot] .bs-pilot__nav-card.is-locked {
  opacity: 0.6;
}

/* R5-C: sixth "Report" card — future feature, visibly disabled and inert.
   Reuses the existing card visual language: same dim as .is-locked, no hover
   energy, and a cursor that does not imply navigation. Applied to a plain
   <div> with no id / no callback. */
.bs-pilot .bs-pilot__nav-card--disabled,
[data-bs-pilot] .bs-pilot__nav-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.bs-pilot__nav-card-icon {
  display: block;
  width: 40px;
  height: 40px;
  /* R9-A: owner-requested navigation-card icon color #4CE896
     (= the --bs-neon-400 primitive). Geometry, size and position unchanged. */
  background-color: var(--bs-neon-400);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color var(--bs-motion-fast) var(--bs-ease-standard);
}

.bs-pilot .bs-pilot__nav-card:hover .bs-pilot__nav-card-icon,
.bs-pilot .bs-pilot__nav-card:focus-visible .bs-pilot__nav-card-icon,
[data-bs-pilot] .bs-pilot__nav-card:hover .bs-pilot__nav-card-icon,
[data-bs-pilot] .bs-pilot__nav-card:focus-visible .bs-pilot__nav-card-icon {
  /* R9-A: keep the icon a single color (#4CE896) in every state — no second
     icon color is introduced. The card lift/shadow hover motion is unchanged. */
  background-color: var(--bs-neon-400);
}

.bs-pilot__nav-card-label {
  font-family: var(--bs-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--bs-color-text-primary);
}

.bs-pilot__nav-card-hint,
.bs-pilot__nav-card-lock {
  font-family: var(--bs-font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--bs-color-text-muted);
}

.bs-pilot__nav-card-lock {
  margin-top: auto;
  font-weight: 600;
  color: var(--bs-color-accent-text);
}

/* --------------------------------------------------------------------------
   7. Language switcher primitives
   -------------------------------------------------------------------------- */
.bs-pilot__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--bs-space-2);
}

.bs-pilot__lang-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--bs-space-1);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--bs-motion-fast) var(--bs-ease-standard);
}

.bs-pilot__lang-option.is-active {
  opacity: 1;
}

.bs-pilot__lang-label {
  font-size: 10px;
  color: var(--bs-color-text-secondary);
}

.bs-pilot__lang-flag {
  display: block;
  width: 26px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   8. Footer / powered-by primitives
   -------------------------------------------------------------------------- */
.bs-pilot__footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bs-space-3);
  padding: var(--bs-space-3) var(--bs-space-4);
  padding-bottom: max(var(--bs-space-3), env(safe-area-inset-bottom));
}

.bs-pilot__powered {
  font-size: 12px;
  text-align: center;
  color: var(--bs-color-text-muted);
}

/* --------------------------------------------------------------------------
   9. Responsive primitives (DS §23). Home box grid: 3+3 desktop → 2 cols
      medium → 1 col mobile. Touch targets >= 44px on small screens (§20/§23).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bs-pilot .bs-pilot__nav-card,
  [data-bs-pilot] .bs-pilot__nav-card {
    flex-basis: calc(50% - var(--bs-space-5));
  }
}

@media (max-width: 768px) {
  .bs-pilot__shell {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }

  .bs-pilot__topbar {
    flex-wrap: wrap;
    height: auto;
    padding: var(--bs-space-2) var(--bs-space-4);
  }

  .bs-pilot__login {
    padding: var(--bs-space-8) var(--bs-space-5) var(--bs-space-11);
  }

  .bs-pilot__brand-mark { height: 44px; }
  .bs-pilot__brand-beta,
  .bs-pilot__brand-sigma { font-size: 22px; }

  .bs-pilot .bs-pilot__nav-card,
  [data-bs-pilot] .bs-pilot__nav-card {
    flex-basis: 100%;
    min-height: 128px;
  }

  .bs-pilot__lang-option {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .bs-pilot__topbar .bs-pilot__btn--sm {
    min-height: 44px;
  }

  .bs-pilot__sidebar {
    display: none;
  }

  .bs-pilot__sidebar.is-open {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    width: min(280px, 82vw);
  }

  .bs-pilot__content {
    padding: var(--bs-space-5);
  }

  .bs-pilot__card {
    padding: var(--bs-space-6);
  }

  .bs-pilot__nav-grid {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs-pilot *,
  [data-bs-pilot] * {
    transition-duration: 0.01ms !important;
  }

  .bs-pilot .bs-pilot__nav-card:hover,
  .bs-pilot .bs-pilot__nav-card:focus-visible,
  [data-bs-pilot] .bs-pilot__nav-card:hover,
  [data-bs-pilot] .bs-pilot__nav-card:focus-visible {
    transform: none;
  }
}