/* ── Series jump bar (set-header handoff Phase 7, README section 9, mocks 9a,
   9d and 11b, 2026-09-30) ──
   templates/shared/tcg/jump-bar.php + public/js/shared/tcg/jump-bar.js.
   A sticky row of chips under the navbar on the index pages: it sticks at the
   navbar's height (80px, 64px under 1024) and takes top 0 in the navbar's
   0.3 s once nav.js hides it (.jump-bar--top). z-index 97, as the compact
   bar's (DECISIONS Phase 4 item 3): under the navbar (100), its menu (99), its
   scrim (98) and its floating buttons (101); README's --z-sticky (101) would
   paint over the navbar. The hairline tokens repeat the header's, because the
   bar sits outside .set-header. */
.jump-bar {
  --sh-hairline: color-mix(in srgb, var(--colour-text) 8%, transparent);
  --sh-hover: color-mix(in srgb, var(--colour-text) 12%, transparent);
  position: sticky;
  top: 64px;
  z-index: 97;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  height: 64px;
  margin: 0 auto;
  padding: 0 16px;
  border-bottom: 1px solid var(--sh-hairline);
  border-radius: 12px;
  background: var(--colour-paper);
  background: color-mix(in srgb, var(--colour-paper) 94%, transparent);
  box-shadow: var(--shadow-resting);
  transition: top 0.3s ease;
}

@media (min-width: 1024px) {
  .jump-bar {
    top: 80px;
    height: 56px;
  }
}

/* nav.js has hidden the navbar: the bar takes its slot. */
.jump-bar.jump-bar--top {
  top: 0;
}

/* The author display above would beat the UA's [hidden] rule: no group left
   to show (the toolbar's search) hides the bar. */
.jump-bar[hidden],
.jump-bar [hidden] {
  display: none;
}

/* ☰ and the arrows: 36px round (44 under 1024), Feather icons at 18px. */
.jump-bar__button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--colour-border);
  border-radius: 999px;
  background: var(--colour-paper);
  color: var(--colour-text);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.jump-bar__button:hover {
  border-color: var(--colour-secondary);
  background: color-mix(in srgb, var(--colour-text) 12%, var(--colour-paper));
}

.jump-bar__button:focus-visible {
  outline: 3px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* The ☰ shows wherever the page has a drawer, at every width, and
   jump-bar.js reveals it. Until the script runs it keeps its place, unseen,
   so the chips do not move when it appears. With scripting off nothing
   could open the drawer, so it takes no space. */
@media (scripting: enabled) {
  .jump-bar[data-jb-drawer] > .jump-bar__menu[hidden] {
    display: inline-flex;
    visibility: hidden;
  }
}

/* The strip scrolls sideways; its padding keeps the chips' focus rings (3px
   at a 2px offset, and 1px to spare for a chip at a fractional position)
   inside the scroll box, and the negative margin gives the width back. The mask fades an edge only while there is more past it: the
   left once scrolled, the right while more is to the right (README's
   gradient when both). */
.jump-bar__strip {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  margin: 0 -6px;
  padding: 5px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.jump-bar__strip::-webkit-scrollbar {
  display: none;
}

.jump-bar__strip.is-fade-end {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}

.jump-bar__strip.is-fade-start {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
}

.jump-bar__strip.is-fade-start.is-fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%);
}

.jump-bar__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--colour-border);
  border-radius: 999px;
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-header);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.jump-bar__chip:hover {
  border-color: var(--colour-secondary);
  background: var(--sh-hover);
  color: var(--colour-text);
}

.jump-bar__chip[aria-current="true"],
.jump-bar__chip[aria-current="true"]:hover {
  border-color: var(--colour-primary);
  background: var(--colour-primary);
  color: #FAFAFA;
}

.jump-bar__chip:focus-visible {
  outline: 3px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

/* 11b: the game's name and Beta between the ☰ and the chips, the counts
   at the right end; desktop only. */
.jump-bar__eyebrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-header);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--colour-secondary-text);
}

.jump-bar__eyebrow .beta-pill {
  margin-left: 0;
  letter-spacing: 0.5px;
}

.jump-bar__meta {
  flex: none;
  margin-left: auto;
  font-family: var(--font-paragraph);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--colour-text-muted);
}

/* While the bar is stuck: the navbar's floating buttons (nav.css, top 16px at
   both ends, z 101) would sit on the bar's ☰ and arrow, so they go (the
   compact bar does the same with its own class); focus scrolls land under the
   bar (navbar + bar + 16: 80 + 56 + 16, 64 + 64 + 16 under 1024). */
html.has-jump-bar .sticky-back-btn.is-visible,
html.has-jump-bar .sticky-theme-toggle.is-visible {
  display: none;
}

html.has-jump-bar {
  scroll-padding-top: 152px;
}

/* A group a chip or a hash lands on sits under the bar, not behind it
   (jump-bar.js repeats this per group for any page structure). */
.tcg-set-list:has(> .jump-bar) .series {
  scroll-margin-top: 152px;
}

/* The toolbar's open Sort or View list drops over the bar (which sits right
   under the toolbar): while a list is open the toolbar stacks above it, still
   under the navbar (100). Not while the bar is stuck, when the toolbar could
   scroll up under it. */
html:not(.has-jump-bar) .set-toolbar:has(.tb-menu__button[aria-expanded="true"]) {
  position: relative;
  z-index: 98;
}

@media (max-width: 1023px) {
  .jump-bar__button {
    width: 44px;
    height: 44px;
  }

  .jump-bar__chip {
    min-height: 44px;
  }

  .jump-bar__eyebrow,
  .jump-bar__meta {
    display: none;
  }

  html.has-jump-bar {
    scroll-padding-top: 144px;
  }

  .tcg-set-list:has(> .jump-bar) .series {
    scroll-margin-top: 144px;
  }
}

/* ── Series drawer (set-header handoff Phase 7, README section 10 with
   decision 10, mocks 10a and 11a) ──
   templates/shared/tcg/series-drawer.php + public/js/shared/tcg/jump-bar.js.
   A left panel from 1024px, a bottom sheet under it. The scrim is the modal
   scrim (--colour-popup-bg) at --z-overlay (900), the drawer at --z-modal
   (1000), so it covers the navbar and every bar. It slides in with the
   navbar dropdowns' timings (150 ms in, 100 ms out). */
.series-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 900);
  background: var(--colour-popup-bg);
  opacity: 0;
  transition: opacity var(--dropdown-close-duration) ease-in;
}

.series-drawer-scrim.is-open {
  opacity: 1;
  transition: opacity var(--dropdown-open-duration) ease-out;
}

.series-drawer {
  --sh-hairline: color-mix(in srgb, var(--colour-text) 8%, transparent);
  --sh-hover: color-mix(in srgb, var(--colour-text) 12%, transparent);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal, 1000);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 20px 16px;
  overflow: hidden;
  background: var(--nav-dropdown-bg);
  box-shadow: var(--nav-dropdown-shadow);
  color: var(--colour-text);
  transform: translateX(-100%);
  transition: transform var(--dropdown-close-duration) ease-in;
}

.series-drawer.is-open {
  transform: none;
  transition: transform var(--dropdown-open-duration) ease-out;
}

.series-drawer[hidden],
.series-drawer-scrim[hidden],
.series-drawer [hidden] {
  display: none;
}

/* The page behind stays where it is: jump-bar.js adds the scrollbar's width
   as padding while the class is on. */
html.ttcg-drawer-open {
  overflow: hidden;
}

.series-drawer__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.series-drawer__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--font-header);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-secondary-text);
}

.series-drawer__eyebrow .beta-pill {
  margin-left: 0;
  letter-spacing: 0.5px;
}

.series-drawer__title {
  margin: 0;
  font-family: var(--font-header);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--colour-text);
}

.series-drawer__title:focus:not(:focus-visible) {
  outline: none;
}

.series-drawer__title:focus-visible {
  outline: 3px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

.series-drawer__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-header);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.series-drawer__close:hover {
  background: var(--sh-hover);
}

.series-drawer__close:focus-visible {
  outline: 3px solid var(--colour-focus-ring);
  outline-offset: -3px;
}

.series-drawer__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.series-drawer__search {
  position: relative;
  flex: none;
}

.series-drawer__resume {
  flex: none;
  display: flex;
  gap: 10px;
}

.series-drawer__resume-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sh-hairline);
  color: var(--colour-text);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.series-drawer__resume-card:hover {
  background: var(--sh-hover);
}

.series-drawer__resume-card:focus-visible {
  outline: 3px solid var(--colour-focus-ring);
  outline-offset: 2px;
}

.series-drawer__kicker {
  font-family: var(--font-header);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.series-drawer__resume-name {
  font-family: var(--font-header);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--colour-text);
}

.series-drawer__resume-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.series-drawer__resume-progress .series-drawer__bar {
  flex: 1 1 auto;
  min-width: 32px;
}

/* The mini bar (set-detail.css .mini-bar) in the tier's colour. */
.series-drawer__bar[data-tier="base"]   { --sh-tier: var(--colour-chart-1); }
.series-drawer__bar[data-tier="master"] { --sh-tier: var(--colour-chart-2); }
.series-drawer__bar[data-tier="grand"]  { --sh-tier: var(--colour-chart-3); }

/* On a group row the bar is the only progress a sighted visitor gets (the
   count is for screen readers), so its fill must stand out from its track
   (WCAG 1.4.11, 3:1). The tier's 35% tint gave 1.6 to 2.4:1 in light theme
   and 2.8:1 for Base in dark: the track is the site's neutral bar track
   here, and in light theme the fill is the tier colour at 75% (mixed with
   black), because the teal and the gold reach only 2.1:1 and 1.8:1 on any
   light track. Light: 5.0, 3.5 and 3.1:1; dark: 3.0, 4.6 and 4.8:1. */
.series-drawer .series-drawer__bar {
  background: var(--bar-track);
}

.series-drawer .series-drawer__bar .mini-bar__fill {
  background: color-mix(in srgb, var(--sh-tier) 75%, #000);
}

[data-theme="dark"] .series-drawer .series-drawer__bar .mini-bar__fill {
  background: var(--sh-tier);
}

.series-drawer__count {
  font-family: var(--font-paragraph);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--colour-text-muted);
}

.series-drawer__list-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
}

.series-drawer__label {
  margin: 0;
  font-family: var(--font-header);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

/* The segmented control, tighter than the toolbar's (README: track 3px / 2px,
   buttons 6px 12px). */
.series-drawer__status {
  flex: none;
  gap: 2px;
  padding: 3px;
}

.series-drawer__status .seg-switch__option {
  padding: 6px 12px;
}

/* The list scrolls; the bottom fades, and its padding lets the last row
   scroll clear of the fade. */
.series-drawer__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px 32px;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent);
}

.series-drawer__list::-webkit-scrollbar {
  display: none;
}

.series-drawer__group + .series-drawer__group {
  margin-top: 2px;
}

.series-drawer__group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px 18px;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-header);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* A guest sees no bars: name, meta and the chevron. */
.series-drawer__group-row--plain {
  grid-template-columns: minmax(0, 1fr) auto 18px;
}

.series-drawer__group-row:hover {
  background: var(--sh-hover);
}

.series-drawer__group-row[aria-current="true"] {
  font-weight: 700;
  background: var(--sh-hairline);
}

.series-drawer__group-row[aria-current="true"]:hover {
  background: var(--sh-hover);
}

.series-drawer__group-row:focus-visible,
.series-drawer__set:focus-visible,
.series-drawer__more:focus-visible {
  outline: 3px solid var(--colour-focus-ring);
  outline-offset: -3px;
}

.series-drawer__group-name {
  min-width: 0;
}

.series-drawer__meta {
  font-family: var(--font-paragraph);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--colour-text-muted);
}

.series-drawer__chevron {
  transition: transform var(--dropdown-open-duration) ease-out;
}

.series-drawer__group-row[aria-expanded="true"] .series-drawer__chevron {
  transform: rotate(180deg);
}

/* Every part of a set row sits on the name's first line: the chip, the
   count and the bar (offsets below), so a wrapped name grows downwards and
   the row still reads as one line. align-content centres that line in the
   row's minimum height, so a one-line row is placed as before. */
.series-drawer__set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  align-items: start;
  align-content: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 6px 12px 6px 28px;
  border-radius: 8px;
  color: var(--colour-text);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.series-drawer__set--plain {
  grid-template-columns: minmax(0, 1fr) auto;
}

.series-drawer__set:hover {
  background: var(--sh-hover);
}

/* Centred on the name's first line box (14px at line-height 1.3: 18.2px):
   the count's 16.9px line box and the 6px bar. */
.series-drawer__set > .series-drawer__count {
  margin-top: 0.65px;
}

.series-drawer__set > .series-drawer__bar {
  margin-top: 6.1px;
}

/* The code chip has its own column, one width for the whole list (the
   owner's answer, 1 Oct 2026, review D2, a deviation from mocks 10a and
   11a, which set the chip inline before the name): jump-bar.js sets
   --sd-code-w on the list to the widest chip showing, so every chip lines
   up and every name starts on one edge. Until the script has measured,
   each row sizes the column by its own chip. The chip sits level with the
   name's first line, not centred on a wrapped name. */
.series-drawer__set-label {
  display: grid;
  grid-template-columns: var(--sd-code-w, auto) minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  min-width: 0;
}

/* Left in its column; the top margin centres the 16px chip on the name's
   first line box (14px at line-height 1.3: 18.2px). */
.series-drawer__code {
  justify-self: start;
  margin-top: 1.1px;
  padding: 1px 5px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-family: var(--font-header);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--colour-text-muted);
}

/* The name wraps; it is never cut short. Column 2 even when a set has no
   code, so it still starts on the list's one edge. */
.series-drawer__set-name {
  grid-column: 2;
  min-width: 0;
  font-family: var(--font-paragraph);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.series-drawer__more {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 2px 0 4px;
  padding: 4px 12px 4px 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--colour-secondary-text);
  font-family: var(--font-paragraph);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.series-drawer__more:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.series-drawer__empty {
  flex: none;
  margin: 0;
  padding: 0 12px;
  font-family: var(--font-paragraph);
  font-size: 14px;
  font-weight: 400;
  color: var(--colour-text-muted);
}

.series-drawer__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--sh-hairline);
  font-family: var(--font-paragraph);
  font-size: 13px;
  font-weight: 400;
  color: var(--colour-text-muted);
}

/* Two classes: style.css (.ttcg-textlink, 16px) loads after this file. */
.series-drawer .series-drawer__sort {
  font-size: 13px;
}

/* Under 1024px: a bottom sheet, full width, up to 85% of the screen, every
   control a 44px target. */
@media (max-width: 1023px) {
  .series-drawer {
    top: auto;
    right: 0;
    width: 100%;
    max-width: none;
    max-height: 85vh;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .series-drawer.is-open {
    transform: none;
  }

  .series-drawer__status .seg-switch__option,
  .series-drawer__set,
  .series-drawer__more,
  .series-drawer .series-drawer__sort {
    min-height: 44px;
  }

  .series-drawer__status .seg-switch__option {
    min-width: 44px;
    justify-content: center;
  }
}

/* Under 380px the 64px bar gives way, so the names keep room beside the
   one-width code column (the owner's answer, 1 Oct 2026; with the bar, One
   Piece names broke mid-word at 320 and 360px). The count stays, and so does
   every screen-reader sentence. */
@media (max-width: 379px) {
  .series-drawer__set {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .series-drawer__set > .series-drawer__bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jump-bar,
  .jump-bar__chip,
  .jump-bar__button,
  .series-drawer,
  .series-drawer.is-open,
  .series-drawer-scrim,
  .series-drawer-scrim.is-open,
  .series-drawer__chevron {
    transition: none;
  }
}