/* ============================================================
   chonky.cards — Tech Preview trim layer
   Loaded ONLY by preview/index.html (a frozen, read-only,
   cards-only build published before launch).

   Hides every collection / navigation / footer / sync surface so
   the preview is a strictly read-only card browser. KEEPS: the
   brand + tagline, the "Cards" tab, the language / currency /
   theme switches, the filter rail (minus the status filter), the
   card grid, and the read-only card-detail modal + image lightbox.

   The JS side (previewMode.js + guards) additionally blocks all
   writes, restricts routing to cards, and skips sync/SW/collection
   boot — so the elements hidden here are also unreachable.
   ============================================================ */

/* ---- Header: keep brand + Cards tab + lang/currency/theme ---- */
html[data-preview] .mobile-hamburger,
html[data-preview] #homeViewBtn,
html[data-preview] #bindersViewBtn,
html[data-preview] #ordersViewBtn,
html[data-preview] #statsViewBtn,
html[data-preview] #dataSourceGroup,
html[data-preview] #historyViewBtn,
html[data-preview] #triviaViewBtn,
html[data-preview] #helpViewBtn,
html[data-preview] #devSwitch,
html[data-preview] .ds-contact-btn {
  display: none !important;
}

/* ---- Stats summary bar (removed in the mini version) ---- */
html[data-preview] .stats-summary-bar,
html[data-preview] #statsSummaryBar {
  display: none !important;
}

/* ---- Ownership / status filter (no status filter) ---- */
html[data-preview] .filter-section[data-section-key='status'] {
  display: none !important;
}

/* ---- Collection-related filters (condition, duplicates, purchase price,
        copy count, binder status, profile scope) — the whole "Collection"
        filter group header + its row. ---- */
html[data-preview] [data-section-key='group-collection'],
html[data-preview] [data-section-key='row-collection'] {
  display: none !important;
}

/* ---- Batch / multi-select (collection management) ---- */
html[data-preview] #batchModeToggle,
html[data-preview] .btn-batch-toggle,
html[data-preview] #batchToolbar {
  display: none !important;
}

/* ---- Footer + mobile navigation to other views ---- */
html[data-preview] .site-footer,
html[data-preview] .mobile-tabbar,
html[data-preview] #navDrawer,
html[data-preview] #navDrawerBackdrop,
html[data-preview] .codex-nav-drawer,
html[data-preview] .codex-nav-drawer-backdrop {
  display: none !important;
}

/* ---- Card-detail modal: strictly read-only ----
   Remove collection management (Add / Wishlist / Order) and the
   report-error / propose-a-modification affordances. */
html[data-preview] .card-modal-actions,
html[data-preview] .card-report-notice {
  display: none !important;
}

/* ---- Card-detail modal: hide the "About this card" (trivia) section ---- */
html[data-preview] #cardTriviaSection {
  display: none !important;
}

/* The card grid normally leaves bottom room for the mobile tabbar;
   reclaim it since the tabbar is gone. */
html[data-preview] #cardsContainer {
  padding-bottom: 24px;
}

/* ---- Header "Tech Preview" notice ---- */
html[data-preview] .preview-notice {
  display: inline-flex;
  align-items: center;
  /* Centre the chip on the header's vertical axis so it lines up with the
     .codex-logo (which stretches full height and centres its content).
     Without this the fixed-height chip falls to the cross-start (top). */
  align-self: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  margin-left: 2px;
  border: 1px solid var(--accent, #7fe0d6);
  border-radius: 999px;
  background: var(--accent-soft, rgba(127, 224, 214, 0.14));
  color: var(--accent, #7fe0d6);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
}
html[data-preview] .preview-notice-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #7fe0d6);
  flex-shrink: 0;
}
/* On narrow screens keep just "Tech Preview" so the header stays tidy. */
@media (max-width: 680px) {
  html[data-preview] .preview-notice-sub {
    display: none;
  }
}