/* ═══════════════════════════════════════════════════════════
   TenK Pulse — Override: hide old topbar, use new tk-header
   ═══════════════════════════════════════════════════════════ */

/* Hide the old topbar — replaced by tk-header */
.main > .topbar { display: none !important; }

/* Story row should only appear on dashboard, hidden on other views */
.tk-story-row.tk-hidden { display: none !important; }

/* Hero banner only on dashboard */
.tk-hero.tk-hidden { display: none !important; }

/* Footer only on dashboard */
.tk-footer.tk-hidden { display: none !important; }

/* Mobile: hide old bottom-nav, use tk-bottom-nav */
@media(max-width:1024px) {
  .bottom-nav { display: none !important; }
  /* Ensure content doesn't overlap with fixed bottom nav */
  .content { padding-bottom: 80px; }
}

/* Fix footer margin on dashboard */
.tk-footer { margin-top: 0; }

/* ── CRITICAL LAYOUT FIX ────────────────────────────────────
   .app was display:flex (horizontal) because the old layout had
   only ONE in-flow child (.main); the fixed sidebar stayed out
   of flow. The redesign added tk-story-row / tk-header /
   tk-search-row / tk-footer as DIRECT children of .app, so flex
   laid them out SIDE BY SIDE horizontally — the page looked
   torn into fragments. Stack them vertically instead:
   ────────────────────────────────────────────────────────── */
.app { display: block; }
.app > .tk-story-row,
.app > .tk-header,
.app > .tk-search-row,
.app > footer.tk-footer { width: 100%; }

/* Desktop: keep these full-width bars clear of the fixed right sidebar */
@media(min-width:1025px) {
  .app > .tk-story-row,
  .app > .tk-header,
  .app > .tk-search-row,
  .app > footer.tk-footer { margin-right: var(--sidebar-w); }
}

/* Ensure tk-header doesn't interfere with sidebar on desktop */
@media(min-width:1025px) {
  .main { margin-right: var(--sidebar-w); }
}