/* ============================================================
   Year Detail — Cardstock theme overrides

   year_detail.html still carries its own inline <style> block
   covering the range chart, hover popups, Young Guns hover state,
   and per-format accent colors (--c1/--c2/--tint). This sibling
   stylesheet only OVERRIDES the structural chrome: page header,
   format picker, panel shells, tile cards, toolbar buttons, and
   Young Guns strip head. Anything not touched here keeps its
   inline styling.

   All rules are scoped under .cardstock so the inline rules win
   on pages that aren't wrapped.
   ============================================================ */

.cardstock.cardstock-year-detail {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.0em 1.4em 3em;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

/* ===================================================================
   PAGE HEADER — big-bold title above a single-line audience subhead.
   Title uses the same painted-ink treatment as product detail (opacity
   + text stroke + soft drop shadow) so "2023-24 Hockey" reads as the
   page's hero. Subhead is forced to one line; a fit-to-width JS shrinks
   the font on narrow viewports so the full sentence always shows.
   =================================================================== */
.cardstock .yd-header {
  margin: 0 0 0.3em;
}
.cardstock .yd-sub {
  font-family: var(--font-stack);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #6c6c6c;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
}
.cardstock .yd-title {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 60px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.0;
  text-transform: uppercase;
  color: #1a1a1a;
  opacity: 0.55;
  -webkit-text-stroke: 1px rgba(120, 120, 118, 0.55);
          text-stroke: 1px rgba(120, 120, 118, 0.55);
  paint-order: stroke fill;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================================================================
   PANEL STACK — picker bar sits inside the same paper card as the
   active format-panel so the year / releases / format dropdowns read
   as the card's header chrome rather than floating chrome above it.
   =================================================================== */
.cardstock .yd-panel-stack {
  position: relative;
  background: var(--paper);
  border-radius: 5px;
  box-shadow:
    0 24px 36px -14px rgba(15, 15, 15, 0.36),
    0 6px 10px -2px rgba(15, 15, 15, 0.22),
    0 1px 0 rgba(15, 15, 15, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(40, 40, 40, 0.08);
  isolation: isolate;
}
.cardstock .yd-panel-stack::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("/static/images/paper-2.png");
  background-size: 720px 720px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
}
.cardstock .yd-panel-stack > * { position: relative; z-index: 1; }
/* Picker bar sits above the format-panel sibling so its dropdown menus
   (year / releases / format) overlay the panel content instead of being
   clipped behind it. Both are children of the same isolated stacking
   context — same z-index would let later-painted format-panel win. */
.cardstock .yd-panel-stack > .yd-picker-bar { z-index: 5; }

/* Picker bar — flex row of paper-pill dropdowns. Sits at the top of
   the panel-stack card with a soft divider below it. The native
   <select id="format-select"> is `hidden` in the template so this
   doesn't need to hide it. */
.cardstock .yd-picker-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 0.9em 1.2em;
  border-bottom: 1px solid var(--rule-soft);
}

/* ===================================================================
   FORMAT PANEL — transparent content section inside the panel-stack.
   The paper background + texture is owned by the wrapper above, so
   each panel keeps its padding but drops its own card chrome.
   =================================================================== */
.cardstock .format-panel {
  position: relative;
  background: transparent;
  border-radius: 0 0 5px 5px;
  padding: 1.1em 1.2em 1.2em;
  isolation: isolate;
}
.cardstock .format-panel > * { position: relative; z-index: 2; }

/* Range-chart head + meta + legend — recolor to ink palette */
.cardstock .range-chart {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid var(--rule-soft);
  border-radius: 5px;
  box-shadow: none;
}
.cardstock .range-chart-head h3 { color: var(--accent); }
.cardstock .range-chart-head .meta { color: var(--ink-3); }
.cardstock .rchart-legend { color: var(--ink-2); }
.cardstock .range-chart-toolbar { border-bottom-color: var(--rule-soft); }
.cardstock .rchart-toggle {
  background: rgba(255, 255, 255, 0.45);
  border-color: var(--paper-edge);
  color: var(--ink-num);
}
.cardstock .rchart-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.cardstock .grid-toolbar { color: var(--ink-2); }

/* Out-of-stock toggle button */
.cardstock .format-panel .rchart-toggle[data-oos-toggle] {
  background: rgba(255, 255, 255, 0.45);
  border-color: var(--paper-edge);
  color: var(--ink-num);
}

/* ===================================================================
   TILE — neutralize inline .prod-card-compact rules (aspect-ratio,
   border, background, box-shadow) so the .ck-tile-* inner markup from
   genre_home.css takes over. The outer keeps its .prod-card-compact
   class for the hover-popup JS hook.
   =================================================================== */
.cardstock .prod-card-compact {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  /* Genre-landing-style tile width is fixed (220px); on the year-detail
     grid we want it to fill the grid cell. Restore auto sizing here. */
  width: auto;
  flex: initial;
}
.cardstock .prod-card-compact:hover {
  border: 0;
  box-shadow: none;
  transform: translateY(-2px);
}
/* Info "i" badge — overlay the bottom-right corner of the image area.
   Inline CSS positions it via the old card frame; we re-anchor it
   inside the new .ck-tile-image wrapper. */
.cardstock .ck-tile-image { position: relative; }
.cardstock .prod-card-compact .card-info-btn {
  position: absolute;
  bottom: 0.45em;
  right: 0.45em;
  z-index: 3;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--rule);
  color: var(--accent);
}
.cardstock .prod-card-compact .card-info-btn:hover,
.cardstock .prod-card-compact .card-info-btn:focus-visible {
  background: var(--paper-hi);
  color: var(--accent-deep);
}
/* The grid wrapper from year_detail.html: bump cell min from 140px to
   180px so the tiles read at a comfortable size on the cardstock paper. */
.cardstock .card-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* ===================================================================
   ROOKIE PAPER CARD — wraps the public "Rookie chases" pill rail and the
   admin-only collapsed "Rookie cards" drill-down on a single paper tile,
   matching the panel-stack chrome below it (same paper fill + texture +
   layered shadow).
   =================================================================== */
.cardstock .yd-paper-card {
  position: relative;
  background: var(--paper);
  border-radius: 5px;
  padding: 1.1em 1.3em;
  box-shadow:
    0 24px 36px -14px rgba(15, 15, 15, 0.36),
    0 6px 10px -2px rgba(15, 15, 15, 0.22),
    0 1px 0 rgba(15, 15, 15, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(40, 40, 40, 0.08);
  isolation: isolate;
}
.cardstock .yd-paper-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("/static/images/paper-2.png");
  background-size: 720px 720px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
}
.cardstock .yd-paper-card > * { position: relative; z-index: 1; }

/* Chase strip sits flush on the paper; recolor heading to the ink palette. */
.cardstock .chase-card .chase-strip { margin: 0; }
.cardstock .chase-card .chase-strip-label { color: var(--ink); }
.cardstock .chase-card .chase-strip-count { color: var(--ink-3); }

/* When the admin YG drill-down follows the chase strip, drop its dashed
   bottom rule and divide with a soft top rule instead, so it reads as a
   second section inside the same card. */
.cardstock .chase-card .yg-strip-compact { border-bottom: 0; }
.cardstock .chase-card .chase-strip + .yg-strip-compact {
  margin-top: 0.95em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule-soft);
}

/* ===================================================================
   YOUNG GUNS STRIP (admin-only) — collapsed by default to a single-line
   trigger styled like a small inline detail row (similar in vibe to the
   collapsed charts trigger on product detail). Expanded state still
   shows the existing horizontal scroll of YG tiles; their hover popup
   keeps its inline styling.
   =================================================================== */
.cardstock .yg-strip-compact {
  margin: 0;
  padding: 0.4em 0.2em;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-bottom: 1px dashed var(--rule-soft);
}
.cardstock .yg-strip-compact > .yg-strip-head {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 140ms ease;
}
.cardstock .yg-strip-compact > .yg-strip-head:hover { color: var(--accent-deep); }
.cardstock .yg-strip-compact > .yg-strip-head h3 { display: none; }
.cardstock .yg-strip-compact .yg-strip-label {
  font: inherit;
  color: inherit;
}
.cardstock .yg-strip-compact .yg-strip-link {
  margin-left: 0.5em;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--accent);
  text-decoration: none;
}
.cardstock .yg-strip-compact .yg-strip-link:hover { color: var(--accent-deep); }
.cardstock .yg-strip-compact .collapse-caret { color: var(--ink-3); }
/* Expanded scroll keeps its inline-CSS chrome; just add some top
   breathing room so the tiles don't crowd the trigger line. */
.cardstock .yg-strip-compact[open] .yg-strip-scroll {
  margin-top: 0.7em;
}

/* Empty state */
.cardstock .empty-state {
  background: var(--paper);
  border-radius: 5px;
  padding: 2em 1em;
  color: var(--ink-3);
  text-align: center;
  box-shadow:
    0 24px 36px -14px rgba(15, 15, 15, 0.36),
    0 6px 10px -2px rgba(15, 15, 15, 0.22);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 880px) {
  .cardstock.cardstock-year-detail {
    padding: 0.8em 1em 2em;
    gap: 1em;
  }
  .cardstock .yd-title { font-size: 45px; line-height: 1.0; }
  .cardstock .yd-sub { font-size: 15px; }
  .cardstock .yd-picker-bar { padding: 0.7em 0.9em; }
  .cardstock .format-panel,
  .cardstock .yg-strip { padding: 0.9em 0.9em 0.8em; }
}
@media (max-width: 560px) {
  .cardstock .yd-title { font-size: 39px; letter-spacing: 0; }
  .cardstock .yd-sub { font-size: 13px; letter-spacing: 0.04em; }
  /* Drop the tile floor so phones always render at least two columns. */
  .cardstock .card-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6em;
  }
  .cardstock .format-panel { padding: 0.8em 0.7em 0.9em; }
}
@media (max-width: 380px) {
  .cardstock .card-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5em;
  }
}