/* ==========================================================================
   OgbonMath — Topbar + Sync Indicator Fixes
   --------------------------------------------------------------------------
   Addresses mobile screenshot findings:

   1. Title (#tbtitle) truncating to "W..." because the topbar's 10
      siblings were competing for space equally.
      Fix: flex:1 + min-width:0 on the title so it gets leftover space
      and ellipsizes cleanly.

   2. Sync indicator showed "✅ Synced" / "⚠️ Sync error" etc. with bright
      polychrome emoji — policy violation + palette clash.
      Fix: plain text labels (done in firebase-sync.js), add a themed
      colored dot via ::before pseudo-element here.

   3. Topbar too crowded on mobile — hide Home/Practice/Notes buttons
      below 480px (they're all reachable via sidebar/bottom-nav/⌘K).
   ========================================================================== */

/* ==========================================================================
   Topbar title — proper flex behavior so it claims leftover space + ellipses
   ==========================================================================
*/
#topbar {
  align-items: center;
  gap: var(--sp-2);
}

#topbar #tbtitle {
  flex: 1 1 0;
  min-width: 0;          /* critical: lets the title shrink below its
                             intrinsic width and ellipsize */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--tx);
  letter-spacing: var(--ls-tight);
  padding: 0 var(--sp-2);
}

/* ==========================================================================
   Sync indicator — colored dot (theme-aware), not polychrome emoji
   ==========================================================================
*/
#sync-status.sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--tx2);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  background: transparent;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Empty state — hide when no label */
#sync-status.sync-indicator:empty {
  display: none;
}

/* Colored dot via pseudo-element */
#sync-status.sync-indicator::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tx3);
  flex-shrink: 0;
}

/* State colors — muted, palette-friendly */
#sync-status.sync-synced::before {
  background: var(--gn);
  box-shadow: 0 0 0 3px var(--gn-bg);
}

#sync-status.sync-syncing::before {
  background: var(--ac);
  animation: sync-pulse 1.4s var(--ease-calm) infinite;
}

#sync-status.sync-error::before {
  background: var(--rd);
  box-shadow: 0 0 0 3px var(--rd-bg);
}

#sync-status.sync-error {
  color: var(--rd);
}

@keyframes sync-pulse {
  0%   { transform: scale(1);   opacity: 1;   }
  50%  { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1;   }
}

/* ==========================================================================
   Mobile — shrink sync indicator to just the dot
   ==========================================================================
*/
@media (max-width: 768px) {
  /* Hide the text, keep the dot — saves ~70px horizontal space */
  #sync-status.sync-indicator {
    font-size: 0;         /* hide text */
    padding: 6px;
    gap: 0;
  }
  #sync-status.sync-indicator::before {
    width: 8px;
    height: 8px;
  }
}

/* ==========================================================================
   Mobile — hide redundant topbar buttons below 480px
   ==========================================================================
   These are all reachable via sidebar / bottom-nav / ⌘K, so their topbar
   copies are redundant on small screens and crowd the title.
*/
@media (max-width: 480px) {
  #topbar #b-home,
  #topbar #b-prac,
  #topbar #b-notes {
    display: none;
  }

  /* On very small phones the Lightning Drill ⚡ moves too — it's in the
     Practice panel UI anyway and accessible via ⌘K */
  @media (max-width: 380px) {
    #topbar #b-drill {
      display: none;
    }
  }

  /* Theme toggle + account still essential */
}

/* ==========================================================================
   Mobile topbar — tighten the search pill so it fits alongside the title
   ==========================================================================
*/
@media (max-width: 640px) {
  #topbar #b-search.cmdp-trigger {
    padding: 6px 8px;
    margin-right: 0;
  }
  /* The ⌘K kbd hint is already hidden below 640px by command-palette.css */
}

/* ==========================================================================
   Ensure the topbar itself never wraps (it horizontal-scrolls if needed,
   set in styles.css mobile rules — preserve that behavior)
   ==========================================================================
*/
#topbar {
  flex-wrap: nowrap;
}