/* ── Serials (templates/books/serials.html, serial.html, serial_day.html) ──
   The library's own look (books.css); here only what serials add: lists of
   entries, the months of a calendar, the following box and the zone form. */
/* What the script hides stays hidden, whatever a button's own display is. */
.serial [hidden] { display: none !important; }
.serial-by { color: var(--text-muted); margin: 0 0 0.75rem; font-size: var(--step--1); }
.serial-note, .serial-standing { color: var(--text-muted); max-width: 46rem; text-wrap: pretty; }
.serial-today, .serial-calendar, .serial-mine, .serial-list { padding-inline: var(--gutter); max-width: 60rem; }
.serial-today .section-title, .serial-calendar .section-title, .serial-mine .section-title, .serial-list .section-title { padding-inline: 0; }

.serial-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.serial-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.serial-entry-link, .serial-entry-day a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.serial-entry-link { color: var(--text); text-decoration-color: color-mix(in oklab, var(--text) 45%, transparent); }
.serial-entry-link:hover { text-decoration-color: currentColor; }
.serial-entry-day { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 7.5rem; }
.serial-entry-day a { color: var(--accent-text); }
.serial-entry-of { font-weight: 400; color: var(--text-muted); }
.serial-entry-read { font-size: var(--step--1); color: var(--text-muted); }
.serial-entry--read .serial-entry-link { color: var(--text-muted); }
.serial-badge { align-self: center; }
.serial-undated { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.serial-undated a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }

.serial-month { border-bottom: 1px solid var(--hairline); }
.serial-month > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
}
.serial-month-n { color: var(--text-muted); font-weight: 400; }
.serial-month > .serial-entries { padding: 0 0 0.75rem 1rem; }

.serial-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.serial-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1rem;
  min-width: 0;
}
.serial-card-title { margin: 0 0 0.25rem; font-size: var(--step-1); }
.serial-card-title a { color: var(--text); text-decoration: underline; text-underline-offset: 0.15em; }
.serial-followed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.serial-followed a { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }

.serial-mine-state { color: var(--text-muted); margin: 0 0 0.75rem; }
.serial-mine-actions, .serial-catch [data-nav-row] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.serial-catch-title { font-size: var(--step-0); margin: 1rem 0 0.25rem; }
.serial-off { color: var(--text-muted); }
.serial-off a { color: var(--accent-text); text-decoration: underline; }

/* The zone form, as Tonight's: the device's zone is offered in a line that
   is always there, so showing it moves nothing. */
.serial-zone { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0 0.25rem; }
.serial-zone select { min-height: 44px; max-width: 100%; font: inherit; border-radius: var(--field-radius, 8px); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); padding: 0 0.5rem; }
.serial-device { min-height: 2lh; margin: 0.25rem 0 0; color: var(--text-muted); font-size: var(--step--1); visibility: hidden; }
.serial-device[data-shown] { visibility: visible; }
.serial-device a { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 40rem) {
  .serial-device { min-height: 3lh; }
  .serial-entry-day { min-width: 0; }
}
.serial-zones { padding-inline: var(--gutter); max-width: 60rem; }
.serial-zones .section-title { padding-inline: 0; }
.serial-standing a { color: var(--accent-text); text-decoration: underline; }