/* ══════════════════════════════════════════════════════════════════
   CODEX COUNT INFO BAR (redesign step 5)
   See design_handoff_codex_redesign/README.md §Component Vocabulary 7.

   Slim single-row toolbar above the cards grid:
     Batch · Search · Counts · CSV · Reorder · Sort + ↑↓ · Auto + XL/L/S/XS

   The legacy #cardCountInfo classes (.display-count-bar /
   .display-actions-left / .display-counts-center / .display-controls-
   right) are preserved on the markup so any selector still depending on
   them keeps matching. The .codex-countbar class layered on top
   applies the Codex chrome.
   ══════════════════════════════════════════════════════════════════ */

.codex-countbar.display-count-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Wrap-capable so the counts can sit on their own full-width row (the
     toolbar + search + counts only fit on one line above ~1920px, so a
     single nowrap row clipped the counts at every realistic width). */
  flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text);
  min-height: 42px;
  /* Wipe any legacy gradient/shadow from base.css */
  background-image: none;
  box-shadow: none;
}

.codex-countbar > .display-actions-left,
.codex-countbar > .display-counts-center,
.codex-countbar > .display-controls-right,
.codex-countbar > .filter-search-row {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  flex-shrink: 0;
}

/* ── Batch toggle (compact icon-first chip) ───────────────────────── */
.codex-countbar .btn-batch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  /* Wipe legacy gradient */
  background-image: none;
  box-shadow: none;
}
.codex-countbar .btn-batch-toggle:hover {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--border-hi);
}
.codex-countbar .btn-batch-toggle.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.codex-countbar .btn-batch-icon {
  font-size: 13px;
  line-height: 1;
}
.codex-countbar .btn-batch-label {
  white-space: nowrap;
}

/* ── Search input (relocated from rail) ───────────────────────────── */
.codex-countbar-search {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex: 0 1 336px;
  min-width: 196px;
  max-width: 392px;
  height: 28px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  position: relative;
}
.codex-countbar-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.codex-countbar-search-icon {
  flex-shrink: 0;
  color: var(--text-dim);
}
.codex-countbar-search .search-box {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 0 0 0 10px;
  height: 26px;
  min-height: 0;
}
.codex-countbar-search .search-box::placeholder {
  color: var(--text-mute);
  text-indent: 3px;
}
.codex-countbar-search .clear-search-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.codex-countbar-search .clear-search-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ── Counts (mono numbers, status-tinted) ─────────────────────────── */
.codex-countbar .display-counts-center {
  display: flex;
  align-items: center;
  gap: 10px;
  row-gap: 2px;
  /* Inline by default (single-row layout). When the cards column is too
     narrow for one row, the container queries below move these counts to
     their own full-width row so they're never clipped. flex-wrap + no
     overflow is a safety net so a value wraps rather than getting cut off. */
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-dim);
}
.codex-countbar .count-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.codex-countbar .count-value,
.codex-countbar .count-item > span:first-child,
.codex-countbar #displayCount,
.codex-countbar #totalCount,
.codex-countbar #ownedCountDisplay,
.codex-countbar #wishlistCountDisplay,
.codex-countbar #orderedCountDisplay,
.codex-countbar #completionPercentDisplay {
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.codex-countbar .count-label {
  color: var(--text-dim);
  font-size: 10.5px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.codex-countbar .count-icon {
  font-size: 11px;
  opacity: 0.7;
}
.codex-countbar .count-separator {
  color: var(--text-mute);
  font-size: 10px;
}
/* Status-tinted numbers — pos for owned, warm for wishlist, cool for ordered. */
.codex-countbar #ownedCountDisplay { color: var(--pos); }
.codex-countbar #wishlistCountDisplay { color: var(--warm); }
.codex-countbar #orderedCountDisplay { color: var(--cool); }

/* ── Right controls (CSV, reorder, sort, grid) ────────────────────── */
.codex-countbar .display-controls-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* CSV + Reorder icon buttons */
.codex-countbar .dev-csv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.codex-countbar .dev-csv-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border-hi);
}
.codex-countbar .dev-csv-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Card-info visibility toggle — same footprint as the icon buttons,
   but always visible (not dev-gated). Gets .active when images-only
   mode is on. */
.codex-countbar .card-info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.codex-countbar .card-info-toggle:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border-hi);
}
.codex-countbar .card-info-toggle.active {
  background: var(--accent-soft, rgba(127, 224, 214, 0.14));
  border-color: var(--accent, #7fe0d6);
  color: var(--accent, #7fe0d6);
}
.codex-countbar .card-info-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Grid image-mode switch — same footprint/skin as .card-info-toggle, but a
   2-option compact switch (Best Quality / Current Lang) using the lang-switch
   expand/collapse pattern: collapsed it shows only the active option (reads as
   a single icon button); a click expands to reveal both, and picking one
   selects it and re-collapses (see initCompactSwitches). */
.codex-countbar .image-mode-switch {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.codex-countbar .image-mode-switch:hover {
  border-color: var(--border-hi);
}
.codex-countbar .image-mode-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 26px keeps the collapsed chip (26 + 2px container border) at the same
     28px footprint as .card-info-toggle. */
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.codex-countbar .image-mode-option:hover {
  background: var(--surface2);
  color: var(--text);
}
.codex-countbar .image-mode-option svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Collapsed: hide the inactive option so the chip reads as one button. */
.codex-countbar .image-mode-switch:not([data-switch-expanded]) .image-mode-option:not(.active) {
  display: none;
}
/* Expanded: highlight the currently-selected option so the user can see which
   one is active before choosing. */
.codex-countbar .image-mode-switch[data-switch-expanded] .image-mode-option.active {
  background: var(--accent-soft, rgba(127, 224, 214, 0.14));
  color: var(--accent, #7fe0d6);
}

/* Sort dropdown + ↑↓ */
.codex-countbar .sort-control {
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface2);
}
.codex-countbar .sort-select {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 11.5px;
  padding: 0 26px 0 10px;
  height: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a929e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px 12px;
}
.codex-countbar .sort-select:focus {
  outline: none;
}
.codex-countbar .sort-order-toggle-inline {
  width: 28px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 0;
}
.codex-countbar .sort-order-toggle-inline:hover {
  background: var(--surface3);
  color: var(--text);
}

/* Divider */
.codex-countbar .bar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
}

/* ── Grid size control (Auto toggle + stepped slider) ─────────────── */
.codex-countbar .grid-size-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Auto toggle (legacy switch styled as Codex compact toggle) */
.codex-countbar .grid-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-dim);
}
.codex-countbar .grid-auto-toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.codex-countbar .grid-auto-toggle-track {
  display: inline-block;
  width: 28px;
  height: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.codex-countbar .grid-auto-toggle-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  background: var(--text-mute);
  color: var(--bg);
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.codex-countbar .grid-auto-toggle input:checked + .grid-auto-toggle-track {
  /* Quiet "on" state — no neon accent. Just a slightly lifted surface
     so it reads as engaged. */
  background: var(--surface3);
  border-color: var(--border-hi);
}
.codex-countbar .grid-auto-toggle input:checked + .grid-auto-toggle-track .grid-auto-toggle-thumb {
  transform: translateX(12px);
  background: var(--text);
  color: var(--surface);
}
.codex-countbar .grid-auto-toggle-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* XL/L/S/XS slider — disabled while Auto is on, becomes interactive
   when Auto is off. The legacy slider+labels still drive
   updateGridSize() in src/gridControls.js. */
.codex-countbar .grid-size-slider-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
  width: 140px;
  align-self: center;
}

/* Bookend "fewer columns / more columns" icons flanking the slider.
   They replace the numeric tick labels — direction is conveyed by the
   big-cards vs small-cards glyph. */
.codex-countbar .grid-size-bookend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  flex-shrink: 0;
}
.codex-countbar .grid-size-bookend svg {
  display: block;
}

/* Per-section help icon next to the auto toggle — uses the same look
   as the rail .codex-section-help so the tooltip cue is consistent. */
.codex-countbar .grid-size-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: help;
  opacity: 0.85;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.codex-countbar .grid-size-help:hover {
  color: var(--text);
  opacity: 1;
}
/* In dark mode the chip background is very dark, so push the icon
   even lighter for a stronger contrast cue. */
body.dark-mode .codex-countbar .grid-size-help {
  color: #c8c8d0;
  opacity: 1;
}
body.dark-mode .codex-countbar .grid-size-help:hover {
  color: #ffffff;
}
/* Native range as the primary control — draggable stepped slider.
   Styled with a clean track + accent thumb; dots below act as
   visual tick markers (still clickable as a jump-to-stop fallback). */
.codex-countbar .grid-size-slider {
  display: block;
  width: 140px;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}
.codex-countbar .grid-size-slider:active {
  cursor: grabbing;
}
.codex-countbar .grid-size-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.codex-countbar .grid-size-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--surface3);
  border-radius: 2px;
}
.codex-countbar .grid-size-slider::-moz-range-track {
  height: 3px;
  background: var(--surface3);
  border-radius: 2px;
  border: 0;
}
.codex-countbar .grid-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: -4.5px;
  cursor: grab;
  border: 0;
}
.codex-countbar .grid-size-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: grab;
}
.codex-countbar .grid-size-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.15);
}
.codex-countbar .grid-size-slider:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.15);
}

.codex-countbar .grid-size-slider-labels {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.codex-countbar .grid-size-slider-labels span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-mute);
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.15s ease, color 0.15s ease;
  letter-spacing: 0.02em;
}
.codex-countbar .grid-size-slider-labels span:hover {
  color: var(--text);
  background: var(--surface3);
}
.codex-countbar .grid-size-slider-labels span.active {
  color: var(--text);
  background: var(--surface3);
}
/* When Auto is on, the slider labels look muted (still clickable to
   disable auto via JS). */
.codex-countbar .grid-size-control:has(input:checked) .grid-size-slider-labels span {
  opacity: 0.45;
}

/* ── Tick markers under the slider (7 stops: 1/2/4/6/8/10/12) ──────
   The range input above is the primary drag surface; these dots are
   now visible ticks under the track with a tiny column-count label
   for self-documentation. */
.codex-countbar .grid-size-slider-labels.grid-size-dots {
  width: 140px;
  justify-content: space-between;
  padding: 0 6px;
  margin-top: 0;
  box-sizing: border-box;
}
.codex-countbar .grid-size-slider-labels.grid-size-dots span {
  position: relative;
  width: 4px;
  height: 4px;
  padding: 0;
  border-radius: 50%;
  background: var(--text-dim);
  border: 0;
  font-size: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.codex-countbar .grid-size-slider-labels.grid-size-dots span:hover {
  background: var(--text);
  transform: scale(1.25);
}
.codex-countbar .grid-size-slider-labels.grid-size-dots span.active {
  background: var(--text);
  transform: scale(1.4);
}
/* Out-of-range stops (set per-viewport by applyUsableSliderRange in
   gridControls.js — e.g. the 1- and 2-col stops at 2K, where a card
   would be larger than ~600px and the UI feels broken). */
.codex-countbar .grid-size-slider-labels.grid-size-dots span.out-of-range {
  display: none;
}

/* Note: per-viewport stop hiding is now dynamic — driven by
   applyUsableSliderRange() in src/gridControls.js, which measures the
   actual cards container width and toggles .out-of-range on dots
   outside [MIN_CARD_PX, MAX_CARD_PX]. The previous static @media
   ladder fought with the slider min/max and could lock the slider to
   the wrong range when the container reflowed (e.g. rail collapse). */

/* ── Responsive (container-query driven) ──────────────────────────────
   The count bar reflows on its OWN available width (the cards column), not
   the viewport — so it stays a single row whenever it fits and reacts
   correctly when the filter rail collapses/expands (which the viewport can't
   see). .cards-sticky-stack wraps only the count bar + toolbar + breadcrumbs,
   so making it the container has no effect on the grid or any overlay.

   Default (above ~1450px column): everything on one row.
   ≤1450px: counts drop to their own full-width row (toolbar + search stay up).
   ≤900px:  search also drops to its own row.
   Numbers stay visible at every width — they wrap, never clip. */
.codex-cards-main > .cards-sticky-stack {
  container: cardbar / inline-size;
}

/* ~1590px = batch + search + full-label counts + controls. Below it the full
   labels no longer fit on one row, so switch the counts to a compact
   icon + number form (drop the text labels). This keeps a single row a few
   hundred px longer. The two counts that have no icon of their own (displayed
   X/Y, completion %) get a glyph so every chip stays self-explanatory. */
@container cardbar (max-width: 1590px) {
  .codex-countbar .count-label {
    display: none;
  }
  .codex-countbar .count-display::before {
    content: "👁";
  }
  .codex-countbar .count-progress::before {
    content: "🎯";
  }
  .codex-countbar .count-display::before,
  .codex-countbar .count-progress::before {
    margin-right: 4px;
    font-size: 11px;
    opacity: 0.7;
  }
}

/* ~1315px = batch + search + compact counts + controls. Below it even the
   compact counts can't share the row, so they take their own full-width row —
   where there's room to bring the full text labels back. */
@container cardbar (max-width: 1315px) {
  .codex-countbar.display-count-bar {
    gap: 8px;
  }
  .codex-countbar .display-counts-center {
    order: 5;
    flex: 1 1 100%;
  }
  .codex-countbar .count-label {
    display: inline;
  }
  .codex-countbar .count-display::before,
  .codex-countbar .count-progress::before {
    content: none;
  }
}

/* ~1030px = batch + search + controls. Below it the toolbar row itself can't
   fit, so the search drops to its own row too (row 1 = batch + controls). */
@container cardbar (max-width: 1030px) {
  .codex-countbar-search {
    order: 99;
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ── Override the legacy dark-mode hardcoded #cardCountInfo bg ────── */
body.dark-mode .codex-countbar.display-count-bar {
  background: var(--surface);
  background-image: none;
}

/* ── Chase-list landing banner ─────────────────────────────────────
   Shown only on #/chase (body.chase-active), above the cards grid. Frames
   the filtered grid as "valuable cards you don't own yet" with a live
   count + curated value range. */
.chase-banner {
  display: none;
}
body.chase-active .chase-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-2, 6px);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
}
.chase-banner .chase-banner-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.chase-banner .chase-banner-text strong {
  color: var(--accent);
  font-weight: 600;
}
.chase-banner .chase-banner-scope {
  color: var(--text-dim);
  font-size: 11.5px;
  font-style: italic;
}

/* ── Active-filters breadcrumbs (above the cards grid) ──────────────
   Replaces the old in-rail location: the user always sees what's
   filtering the result they're looking at. JS toggles display:flex
   when filters exist; hidden otherwise so it doesn't eat vertical
   space when nothing is filtered. */
.codex-cards-main .cards-breadcrumbs {
  display: none; /* JS toggles to flex when filters exist */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 6px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2, 6px);
  background: var(--surface);
}
.codex-cards-main .cards-breadcrumbs .persist-checkbox {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.codex-cards-main .cards-breadcrumbs .breadcrumb-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex: 0 0 auto;
}
.codex-cards-main .cards-breadcrumbs .breadcrumbs-items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ── Sticky stack: count bar + batch toolbar + breadcrumbs ──────────
   Floats over the cards grid while the user scrolls. Solid background
   so cards don't bleed through. z-index sits above grid + lightbox
   chrome but below modals (var(--z-modal, 1000)+). */
.codex-cards-main > .cards-sticky-stack {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  /* Bleed a hair past the cards grid container so scrolled card content
     doesn't peek through the gap on sub-pixel rounding. */
  margin: 0 -2px;
  padding: 0 2px;
}
/* Drop the breadcrumbs' own top margin when sitting inside the stack —
   the count bar above already provides spacing rhythm. */
.cards-sticky-stack > .cards-breadcrumbs {
  margin-top: 0;
}