/* series — the series page's own chrome and the SHARED read-card grid (.b-read-cards) */

/* the shared mono-label voice: meta, section strip */
.b-series .series-meta,
.b-series .series-sections {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* the done bars' count voice (hero bar + series section heads) */
.b-post .read-progress,
.b-series .section-progress {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* the hero's done bar; :not([hidden]) keeps the pre-JS seat hidden */
.b-post .read-progress:not([hidden]) {
  margin-block-start: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-tertiary);
}
/* the bar itself — hero track 9rem, the section heads narrow it */
.b-post .progress-track {
  inline-size: 9rem;
  block-size: 0.25rem;
  border-radius: 999px;
  background: var(--border-secondary);
  overflow: hidden;
}
.b-post .progress-fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--utility-green-700);
}

/*** custom-series.hbs — the series page's own chrome ***/
@scope (.b-series) {
  /* full content width — the card grid spans like every read list */
  :scope {
    inline-size: 100%;
    padding-block-end: clamp(4rem, 8vi, 6rem); /* the sections' shared footer clamp */
  }
  /* hero meta: LEVEL · CATEGORY · N SECTIONS · N READS, CSS middots, centered */
  .series-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .series-meta span + span::before {
    content: "· ";
    color: var(--fg-quaternary);
  }
  /* the section strip: series.js filter buttons; the active pick underlines */
  .series-sections {
    margin-block-start: clamp(2rem, 5vi, 3rem);
    display: flex;
    align-items: baseline;
    column-gap: 1.75rem;
    row-gap: 0.5rem;
    flex-wrap: wrap;
    border-block-end: 1px solid var(--border-secondary);
    padding-block: 0.375rem;
    font-size: 0.75rem;
  }
  .series-sections button {
    border: 0;
    background: none;
    /* block padding lives on the buttons for tap room */
    padding: 0.5rem 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--text-primary);
    white-space: nowrap;
  }
  .series-sections button:hover {
    color: var(--text-brand-secondary);
  }
  .series-sections [aria-current] {
    text-decoration: underline;
    text-underline-offset: 0.375em;
  }
  .section-number {
    color: var(--text-brand-secondary);
  }
  .series-list {
    margin-block-end: clamp(3rem, 7vi, 5rem);
  }
  /* a section group: mono "NN NAME" head, its done bar on the end edge */
  .series-section {
    padding-block-start: 2.5rem;
  }
  .series-section > header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block-end: 1rem;
  }
  .series-section > header .section-number,
  .series-section > header h2 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.09em;
  }
  .series-section > header h2 {
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .section-progress {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text-tertiary);
  }
  .section-progress .progress-track {
    inline-size: 6rem;
  }
  /* phones: the strip scrolls sideways */
  @media (width <= 44rem) {
    .series-sections {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .series-section {
      padding-block-start: 2rem;
    }
  }
}

/*** the shared read-card grid (.b-read-cards): series, collection, tag + author lists ***/
@scope (.b-read-cards) {
  :scope {
    list-style: none;
    margin: 0;
    padding: 0;
    inline-size: 100%;
  }
  /* the grid: fixed 3/2/1 tracks down the breakpoints */
  :scope:not(:has(.series-section)),
  .section-reads {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
  @media (width <= 64rem) {
    :scope:not(:has(.series-section)),
    .section-reads {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  /* the numbered collection ol: CSS counters, the server order is the numbering */
  :scope.is-numbered {
    counter-reset: reads;
  }
  :scope.is-numbered .read-card {
    counter-increment: reads;
  }
  :scope.is-numbered .read-number::before {
    content: counter(reads, decimal-leading-zero);
  }
  /* one read card (also the JS-off face); the whole card is the door (read-cards.js) */
  .read-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-block-size: 8.5rem;
    padding: 1.125rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
      transform 0.15s ease, box-shadow 0.15s ease;
  }
  /* hover lifts the card: shadow + a nudge up, the face unchanged */
  .read-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 4px 6px -2px light-dark(rgb(var(--shadow-rgb) / 0.03), rgb(var(--shadow-rgb) / 0.2)),
      0 12px 16px -4px light-dark(rgb(var(--shadow-rgb) / 0.08), rgb(var(--shadow-rgb) / 0.45));
  }
  /* top row: the read number · the done chip */
  .read-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
  }
  /* the parent ref in the number's seat (tag/author cards) */
  .read-parent {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-ref {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--utility-blue-light-700);
    text-decoration: none;
  }
  .card-ref:hover,
  .card-ref:focus-visible {
    text-decoration: underline;
  }
  /* the done chip: bare mono button, the box is CSS content (read-cards.js toggles) */
  .read-done {
    position: relative;
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    transition: color 0.15s ease;
  }
  .read-done::before {
    content: "[ ] ";
  }
  /* the chip's 14px line gets an invisible 44px tap box */
  .read-done::after {
    content: "";
    position: absolute;
    inset: -0.9375rem -0.5rem;
  }
  .read-done:hover {
    color: var(--text-primary);
  }
  .read-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .read-card h3 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .read-card h3 a:hover {
    color: var(--text-brand-secondary);
  }
  .read-tags {
    margin-block-start: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: end;
    gap: 0.5rem;
    /* two chip rows reserved; chips past row two hide (read-cards.js) */
    min-block-size: 3.5rem;
  }
  .read-tags:empty {
    display: none;
  }
  /* a tag chip: bordered pill, the badges.js hash tint on the dot */
  .card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .card-tag::before {
    content: "";
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: color-mix(in oklch,
      var(--utility-brand-700) var(--badge-mix, 100%),
      var(--badge-to, var(--utility-brand-700)));
  }
  .card-tag:hover,
  .card-tag:focus-visible {
    border-color: var(--fg-quaternary);
    color: var(--text-primary);
  }
  /* the done face: green ground + border, muted title, checked box */
  .read-card.is-done {
    background-color: color-mix(in srgb, var(--utility-green-700) 8%, transparent);
    border-color: color-mix(in srgb, var(--utility-green-700) 24%, transparent);
  }
  /* hover deepens the done green */
  .read-card.is-done:hover {
    background-color: color-mix(in srgb, var(--utility-green-700) 14%, transparent);
    border-color: color-mix(in srgb, var(--utility-green-700) 40%, transparent);
  }
  .read-card.is-done h3 a {
    color: var(--text-tertiary);
  }
  /* the muted title still answers the brand hover */
  .read-card.is-done h3 a:hover {
    color: var(--text-brand-secondary);
  }
  .read-card.is-done .read-done {
    color: var(--utility-green-700);
    font-weight: 700;
  }
  .read-card.is-done .read-done::before {
    content: "[x] ";
  }
  /* phones: one column at a tighter scale */
  @media (width <= 44rem) {
    :scope:not(:has(.series-section)),
    .section-reads {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.75rem;
    }
    .read-card {
      min-block-size: 7.75rem;
      padding: 1rem;
    }
    .read-card h3 {
      font-size: 1.0625rem;
    }
  }
}