.issues-page { max-width: 100rem; }
.issues-search .input-group-text { border-color: var(--bs-border-color); }
.issues-search .form-control:focus { box-shadow: none; }
.issues-chips { display: flex; flex-direction: column; gap: .5rem; }
.issues-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.issues-chip-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color); margin-right: .25rem; }
.issues-chip { border: 1px solid var(--bs-border-color); background: transparent;
  color: var(--bs-body-color); border-radius: 999px; padding: .15rem .65rem;
  font-size: .8rem; cursor: pointer; transition: background .12s, color .12s; }
.issues-chip:hover { background: var(--bs-tertiary-bg); }
.issues-chip.is-active { background: var(--accent-canonical, var(--bs-primary));
  color: #fff; border-color: transparent; }
.issues-grid { margin-top: .5rem; }
/* The week fold's inner box clips overflow, which would cut the cards' hover
   shadow; pad it and pull the padding back off (as series.css does). */
.issues-grid-collapse > .cc-motion-collapse-inner { padding: 10px; margin: -10px; }

/* Bucket toggle: the shared underline tabs, tinted with this page's accent
   (set here rather than inline on the element, which the inline-style ratchet
   counts). */
.issues-tabs { --cc-tab-accent: var(--accent-canonical, var(--bs-primary)); }
.issues-tabs[data-cc-variant="underline"] { gap: 1.6rem; }

/* Week sections, after the tracker's .omni-foc-header: a real <button> so the
   fold is keyboard-reachable, pinned under the navbar while its group scrolls. */
.issues-week-group { margin-bottom: 1.5rem; }
.issues-week-header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .6rem 0;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  /* Frosted like the tracker's week header, so the page atmosphere shows
     through the pinned strip instead of an opaque bar cutting across it. */
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky;
  top: var(--nav-h, 0);
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
.issues-week-header:hover { border-bottom-color: var(--accent-canonical, var(--bs-primary)); }
.issues-week-chevron { font-size: .8rem; color: var(--bs-secondary-color); }
.issues-week-label { font-size: 1.05rem; font-weight: 600;
  color: var(--accent-canonical, var(--bs-primary)); letter-spacing: .01em; }
.issues-week-count { font-size: .8rem; color: var(--bs-secondary-color); }
@media (max-height: 480px) {
  .issues-week-header { position: static; }
}
/* A week's publisher runs: a quiet label under the pinned week header, not a
   second sticky strip competing with it. */
.issues-publisher-group + .issues-publisher-group { margin-top: 1.25rem; }
.issues-publisher-header {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .9rem 0 .6rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.issues-publisher-count { font-size: .78rem; font-weight: 400; color: var(--bs-secondary-color); }
.issues-card { border-radius: 6px; overflow: hidden; transition: box-shadow .15s; }
.issues-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.issues-card-cover { aspect-ratio: 2/3; object-fit: cover; width: 100%;
  background: var(--bs-secondary-bg, #eee); }
.issues-card-name { font-size: .85rem; line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.issues-collected { font-size: .65rem; font-weight: 500; }
/* The release date is the fact a single-issue reader scans for, so it sits
   above the publisher in full ink rather than muted. */
.issues-card-date { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  margin-bottom: .1rem; }

.issues-chip-more {
  border-color: color-mix(in srgb, var(--accent-canonical, var(--bs-primary)) 45%, var(--bs-border-color));
  color: var(--accent-canonical, var(--bs-primary));
  font-weight: 600;
}

.issues-publisher-panel {
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  background: var(--bs-body-bg);
  padding: .75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* The collapsed wrapper still takes an .issues-chips gap slot: cancel it and
   carry the spacing inside. The clip margin lets the panel's shadow land. */
.issues-publisher-collapse { margin-top: -.5rem; }
.issues-publisher-collapse .issues-publisher-panel { margin-top: .5rem; }
.issues-publisher-collapse > .cc-motion-collapse-inner { overflow: clip; overflow-clip-margin: 12px; }

.issues-publisher-filter {
  max-width: 24rem;
  margin-bottom: .6rem;
}

.issues-publisher-panel-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-height: 12rem;
  overflow-y: auto;
  padding-right: .15rem;
}

@media (max-width: 575.98px) {
  .issues-publisher-panel {
    padding: .6rem;
  }

  .issues-publisher-panel-list {
    max-height: 10rem;
  }
}

/* Run link under each browse card. Sibling of the card anchor (an <a> may not
   nest in an <a>), so it is styled as its own quiet secondary line. */
.issues-card-run {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  line-height: 1.25;
  color: var(--bs-secondary-color);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issues-card-run:hover,
.issues-card-run:focus-visible {
  color: var(--bs-body-color, inherit);
  text-decoration: underline;
}


/* GH-115. Mobile tap targets.

   The chips stay visually 26px -- there are up to 905 on one page and a wall of
   44px pills would read as a completely different control -- so the target is
   carried by a transparent ::after instead of the box.

   The row gap is the other half, and it is not cosmetic. A 44px hit area on a
   26px chip reaches 9px past it on each side; at the old .35rem gap those areas
   would OVERLAP their neighbours, so a tap near a chip's edge could land on the
   row above. That is the same defect as #112 and #126 -- a control that
   hit-tests to something else -- so the gap is opened to 18px, making the row
   pitch exactly 44px and the expanded areas meet without ever crossing. */
@media (max-width: 640px) {
  /* Stated per axis: shorthand `gap` takes ROW first, and only the row axis
     needs opening -- the ::after does not widen the chip, so the horizontal
     gap stays as it was. */
  .issues-chip-row { row-gap: 18px; column-gap: .35rem; }
  /* BOTH containers have to open, and this one is easy to miss: .issues-chip-row
     spaces chips that WRAP inside one row, while .issues-chips spaces the rows
     themselves. Measured with the row gap alone, chips on a row boundary got
     34px instead of 44 -- the publisher row's lower hit area and the year row's
     upper one were contesting the 8px between them. */
  .issues-chips { row-gap: 18px; }
  .issues-publisher-collapse { margin-top: -18px; }
  .issues-publisher-collapse .issues-publisher-panel { margin-top: 18px; }
  .issues-chip { position: relative; }
  .issues-chip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}