.content {
  flex: 1;
  overflow-y: auto;
  /* Reserves the scrollbar's space even when the content is short enough
     not to scroll, so the grids' width (and how many columns fit) doesn't
     jump when a list grows past one screen. */
  scrollbar-gutter: stable;
  padding: 36px 40px;
}

.section {
  display: none;
  animation: fade-in 0.25s ease;
}

.section.active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

/* The title block (sticker, h1, "Sorted by", drag hint) is always the
   header's first child; the actions and a stat strip may follow it. */
.section-header > div:first-child {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
}

.section-header h1 {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Open-collection title: "Collections › Name". The first part is the way
   back, so it reads as a quiet link; the collection's own name stays
   full-strength. */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.crumb-link {
  flex-shrink: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-muted);
  transition: color var(--transition);
}

.crumb-link:hover,
.crumb-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.crumb-sep {
  flex-shrink: 0;
  color: var(--text-muted);
  font-weight: 400;
}

/* With room to spare, keep "Collections ›" and the name on one row and let
   a long name wrap beside the crumb instead of dropping under a stranded ›.
   On narrow screens the crumb wraps as a whole (base rule above). */
@media (min-width: 769px) {
  .crumb {
    flex-wrap: nowrap;
  }

  .crumb-current {
    min-width: 0;
  }
}

.current-sort {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.current-sort span {
  color: var(--text);
  font-weight: 600;
}

.section-sub {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 15px;
  padding: 4px 14px 3px 11px;
  transform: rotate(-1.5deg);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sort-wrap {
  position: relative;
}

/* Paper counterpart to .add-btn's solid sticker — same stamped-shadow
   language and family shadow color, just unfilled, so the pair reads as
   primary/secondary siblings rather than two unrelated controls. */
.sort-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 3px 4px 0 var(--accent-deep);
  transform: rotate(-1deg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.sort-btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sort-btn:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 4px 6px 0 var(--accent-deep);
}

.sort-btn:active {
  transform: rotate(0deg) translateY(0);
  box-shadow: 1px 2px 0 var(--accent-deep);
}

/* Destructive sibling of .sort-btn (Delete collection): same sticker, red. */
.sort-btn-danger {
  color: #b42318;
  box-shadow: 3px 4px 0 #b42318;
}

.sort-btn-danger:hover {
  box-shadow: 4px 6px 0 #b42318;
}

.sort-btn-danger:active {
  box-shadow: 1px 2px 0 #b42318;
}

/* ---------- Surprise Me ---------- */

.surprise-btn {
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--accent-strong);
  box-shadow: 3px 5px 0 var(--accent-deep);
  transform: rotate(-1deg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.surprise-btn:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 4px 7px 0 var(--accent-deep);
}

.surprise-btn:active {
  transform: rotate(0deg) translateY(0);
  box-shadow: 1px 2px 0 var(--accent-deep);
}

/* Played on a Surprise Me button while it's picking, so a
   random choice reads as a little "roll" instead of an instant, flat swap. */
@keyframes surprise-roll {
  0% { transform: rotate(-1deg) scale(1); }
  25% { transform: rotate(14deg) scale(1.08); }
  50% { transform: rotate(-16deg) scale(1.05); }
  75% { transform: rotate(10deg) scale(1.06); }
  100% { transform: rotate(-1deg) scale(1); }
}

.surprise-btn.is-rolling {
  animation: surprise-roll 0.32s ease;
}

/* Sort menu: each option reads as a mini movie-ticket row (a symbol
   stub cut away from the label by a dashed perforation), grouped under
   small caps headers — the same "boleto" language as the sidebar nav. */
.sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 215px;
  padding: 8px;
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.sort-group-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 6px 4px;
}

.sort-group-label:first-child {
  padding-top: 2px;
}

.sort-option {
  display: flex;
  align-items: stretch;
  margin-bottom: 3px;
  border-radius: 2px;
  overflow: hidden;
  transition: background var(--transition);
}

.sort-stub {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  border-right: 1.5px dashed rgba(13, 12, 21, 0.28);
  color: var(--accent);
}

.sort-option-label {
  flex: 1;
  display: flex;
  align-items: center;
  font-family: var(--font-hand);
  font-size: 15px;
  padding: 6px 10px;
  color: var(--text-muted);
  transition: color var(--transition);
}

.sort-option:not(.active):hover {
  background: color-mix(in srgb, var(--accent-strong) 10%, transparent);
}

.sort-option.active {
  background: var(--accent-strong);
}

.sort-option.active .sort-stub {
  color: #fff;
  border-right-color: rgba(255, 255, 255, 0.4);
}

.sort-option.active .sort-option-label {
  color: #fff;
  font-weight: 700;
}

.subtabs {
  display: flex;
  gap: 8px;
  margin: -8px 0 20px;
}

.subtab-btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}

.subtab-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.subtab-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Status picker (Watched / Watching / Dropped): one paper ticket strip,
   perforated top and bottom, torn into three stubs by dashed dividers —
   the same "boleto" language as the sidebar nav and the sort menu, just
   laid out as a strip of admission stubs instead of a list. */
.subtabs.status-strip {
  gap: 0;
  width: fit-content;
  margin: -4px 0 22px 2px;
  background: var(--paper);
  color: var(--ink);
  border-top: 2px dashed rgba(13, 12, 21, 0.25);
  border-bottom: 2px dashed rgba(13, 12, 21, 0.25);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  transform: rotate(-0.5deg);
}

.status-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 9px 16px;
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--ink-muted);
  transition: background var(--transition), color var(--transition);
}

.status-tab + .status-tab {
  border-left: 2px dashed rgba(13, 12, 21, 0.25);
}

.status-tab-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.status-tab-count {
  min-width: 1.4em;
  padding: 0 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  background: rgba(13, 12, 21, 0.08);
  border-radius: 999px;
}

.status-tab.active .status-tab-count {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.status-tab:hover:not(.active) {
  background: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  color: var(--ink);
}

.status-tab.active {
  background: var(--accent-strong);
  color: #fff;
}

.card-grid.subtab-hidden,
.subtab-hidden {
  display: none !important;
}

/* ---------- open-collection stats strip (js/collections.js) ----------
   One slim paper ticket with three segments split by dashed perforations,
   instead of three separate cards. */
.col-stats {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 26px;
  padding: 8px 4px;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  transform: rotate(-0.25deg);
}

.col-stats[hidden] {
  display: none;
}

/* Tells the reader these numbers ignore the Movies | Shows tab below: the
   label sits on the strip's top edge like a legend. */
.cs-scope {
  position: absolute;
  top: -8px;
  left: 14px;
  padding: 0 7px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--paper);
  border: 1px solid var(--border);
  cursor: help;
}

.cs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 2px 16px;
}

.cs-item + .cs-item {
  border-left: 2px dashed rgba(13, 12, 21, 0.22);
}

.cs-progress {
  flex: 0 1 270px;
}

.cs-extremes {
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.cs-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cs-value small {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.cs-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 80px;
}

.cs-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Best & worst: two slim rows (arrow, title, score); each opens its title. */
.extreme-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  width: 100%;
  padding: 1px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  transition: color var(--transition);
}

.extreme-row:hover,
.extreme-row:focus-visible {
  color: var(--accent);
}

.extreme-arrow {
  flex: none;
  width: 8px;
  font-size: 9px;
  color: var(--accent);
}

.extreme-row:last-child .extreme-arrow {
  color: var(--text-muted);
}

/* Name, then its score, then how many others share that score, all side by
   side; only the name gives way (ellipsis) when there's no room. */
.extreme-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extreme-rating {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.extreme-ties {
  flex: none;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  cursor: help;
}

.stat-bar {
  height: 6px;
  overflow: hidden;
  background: rgba(13, 12, 21, 0.1);
  border: 1px solid rgba(13, 12, 21, 0.3);
}

.stat-bar > span {
  display: block;
  height: 100%;
  background: var(--accent-strong);
}

.stat-bar.is-complete > span {
  background: repeating-linear-gradient(
    45deg,
    var(--accent-deep) 0 6px,
    var(--accent-strong) 6px 12px
  );
}

/* Narrow screens: progress takes the first row, the other two share the next. */
@media (max-width: 768px) {
  .col-stats {
    flex-wrap: wrap;
    transform: none;
  }

  .cs-progress {
    flex: 1 1 100%;
    padding: 4px 12px 10px;
    border-bottom: 2px dashed rgba(13, 12, 21, 0.22);
  }

  .cs-item {
    padding: 8px 12px 4px;
  }

  .cs-progress + .cs-item {
    border-left: 0;
  }
}

/* Phones: the average's label goes under its value, leaving the room to the
   best / worst titles. */
@media (max-width: 480px) {
  .cs-item:not(.cs-progress):not(.cs-extremes) {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.placeholder-panel {
  display: grid;
  place-items: center;
  min-height: 260px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.placeholder-panel:hover {
  border-color: var(--accent);
}

.placeholder-panel p {
  font-size: 14px;
  color: var(--text-muted);
}

.under-construction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
}

.under-construction-icon {
  font-size: 56px;
  line-height: 1;
}

.under-construction-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ---------- Header stats (js/sectionHeaders.js) ----------
   The list headers use the room right of the title for a slim stat strip:
   the actions keep the top-right corner and the strip sits under them,
   bottom-aligned with the title block. Same paper ticket as the open
   collection's strip (.col-stats): segments split by dashed perforations. */
.section {
  container: section / inline-size;
}

.section-header.has-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title actions"
    "title stats";
  column-gap: 36px;
  row-gap: 10px;
}

.section-header.has-stats > div:first-child {
  grid-area: title;
}

.section-header.has-stats > .header-actions {
  grid-area: actions;
  justify-self: end;
}

.section-header.has-stats > .hstats {
  grid-area: stats;
  justify-self: end;
  align-self: end;
}

.hstats {
  display: flex;
  /* Items never squeeze into each other: what doesn't fit (longer labels,
     in some languages) goes on to a second row. */
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 100%;
  padding: 7px 2px;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  transform: rotate(-0.4deg);
}

.hstats[hidden] {
  display: none;
}

.hs-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 2px 18px;
  font: inherit;
  color: inherit;
  text-align: left;
}

.hs-item + .hs-item {
  border-left: 2px dashed rgba(13, 12, 21, 0.22);
}

.hs-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hs-value small {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.hs-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* A name instead of a number (a genre, a title, a collection): smaller,
   ink-colored, and cut short with an ellipsis rather than widening the strip. */
.hs-text .hs-value {
  display: block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 1.15;
  color: var(--text);
}

button.hs-item {
  cursor: pointer;
}

button.hs-item .hs-value {
  transition: color var(--transition);
}

button.hs-item:hover .hs-value,
button.hs-item:focus-visible .hs-value {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Shows Queue > Watching: shows started long ago get their count called out. */
.hs-item.is-alert .hs-label {
  color: var(--accent);
}

.hs-extremes {
  gap: 1px;
  /* The one item that fits itself to the room the others leave, rather
     than moving down a row. */
  flex: 1 1 0;
  min-width: 0;
}

.hs-progress {
  min-width: 130px;
}

/* Narrower sections: the strip drops under the title at full width, and the
   header goes back to wrapping like the others (actions beside the title
   while they fit). Last in the file so it beats the base rules above. */
@container section (max-width: 900px) {
  .section-header.has-stats {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 18px;
  }

  .section-header.has-stats > .hstats {
    flex: 1 1 100%;
    transform: none;
  }

  .hs-item {
    flex: 1 1 0;
  }

  .hs-text .hs-value {
    max-width: none;
  }

  .hs-extremes {
    width: auto;
  }
}

/* Phones: two segments per row, perforations between rows and columns; an
   odd one out takes the whole last row. */
@container section (max-width: 560px) {
  .section-header.has-stats {
    column-gap: 10px;
  }

  .hstats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2px 0;
  }

  .hs-item {
    padding: 10px 14px;
  }

  .hs-item + .hs-item {
    border-left: 0;
  }

  .hs-item:nth-child(even) {
    border-left: 2px dashed rgba(13, 12, 21, 0.22);
  }

  .hs-item:nth-child(n + 3) {
    border-top: 2px dashed rgba(13, 12, 21, 0.22);
  }

  .hs-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .hs-label {
    white-space: normal;
  }
}