/* ===== YCT Chapter picker (simple pill row) ===== */
#yct-chapter-picker { padding: 0; }
#yct-chapter-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.jm-pill {
  min-width: 52px;
  height: 44px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 2px solid var(--md-sys-color-outline-variant, #DDE7EF);
  background: var(--md-sys-color-surface-container-lowest, #fff);
  color: var(--md-sys-color-on-surface-variant, #465A64);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 3px 0 var(--md-sys-color-outline-variant, #DDE7EF);
  transition: transform .1s, box-shadow .1s, background .12s, border-color .12s;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.jm-pill:active { transform: translateY(3px); box-shadow: 0 0 0 var(--md-sys-color-outline-variant, #DDE7EF); }
.jm-pill:focus-visible { outline: 3px solid var(--md-sys-color-primary, #5DB2FF); outline-offset: 2px; }
.jm-pill:hover { background: #F0F7FD; box-shadow: 0 4px 0 var(--md-sys-color-outline-variant, #DDE7EF); }
.jm-sel {
  background: var(--md-sys-color-primary-fixed-dim, #B4DDFF);
  border-color: var(--md-sys-color-primary, #5DB2FF);
  color: var(--md-sys-color-on-primary-fixed-variant, #004B70);
  box-shadow: 0 4px 10px rgba(93,178,255,.35);
}
.jm-pill-all { padding: 0 16px; }
.jm-star { font-size: 12px; }
.jm-sel { box-shadow: 0 3px 0 var(--md-sys-color-primary, #5DB2FF); }
.jm-pill.jm-sel:active { transform: translateY(3px); box-shadow: 0 0 0 var(--md-sys-color-primary, #5DB2FF); }