.resource-card-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-gap-tight); }
.resource-card {
  min-width:0;
  color:inherit;
  text-decoration:none;
  border:1px solid var(--resource-card-border);
  border-radius:var(--resource-card-radius);
  background:var(--resource-card-surface);
  box-shadow:var(--resource-card-edge-shadow);
  transition:background .15s ease;
}
/* Hover, press and keyboard focus are one response on every card, locked or not, the same as the home card:
   gold border, lighter surface, gold left rail. Keyboard focus lights the card's own border to full gold
   (rule below the pack rules) instead of drawing a second ring. */
.resource-card:hover,
.resource-card:active,
.resource-card:focus-within {
  border-color:var(--resource-card-hover-border);
  background:var(--resource-card-hover-surface);
  box-shadow:var(--resource-card-hover-shadow);
}
.resource-card--hub { display:grid; grid-template-columns:var(--resource-card-hub-kind) minmax(0,1fr) minmax(var(--resource-card-hub-actions-min),var(--resource-card-hub-actions-max)); gap:var(--resource-card-gap); align-items:center; min-height:var(--resource-card-hub-min-height); padding:var(--resource-card-pad-block) var(--resource-card-pad-inline); }
.resource-card--compact { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:var(--resource-card-compact-gap-row) var(--resource-card-compact-gap-column); align-items:start; padding:var(--resource-card-nested-pad-block) var(--resource-card-nested-pad-inline); }
.resource-card--nested { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:var(--resource-card-compact-gap-row) var(--resource-card-compact-gap-column); align-items:center; padding:var(--resource-card-nested-pad-block) var(--resource-card-nested-pad-inline); }
.resource-card--series-pack,
.resource-card--season-pack { box-shadow:var(--shadow-resource-season-pack); }
.resource-card--series-pack { border-color:var(--resource-series-pack-border); box-shadow:var(--shadow-resource-series-pack); }
/* Its own gold border is stronger than the shared hover border, so it keeps it when it responds. */
.resource-card--series-pack:is(:hover, :active, :focus-within) { border-color:var(--resource-series-pack-border); }
/* Keyboard focus on the card, or on the card's main link (detail-page versions). */
.resource-card:focus-visible,
.resource-card:has(> .resource-card__main:focus-visible) { outline:none; border-color:var(--resource-card-focus-border); }
.resource-card__main:focus-visible { outline:none; }
.resource-card--nested .resource-card__actions,
.resource-card--nested .resource-card__facts { justify-content:flex-end; }
.resource-card__kind { align-self:start; padding-top:var(--space-ui-0-5); }
.resource-card__main { min-width:0; display:grid; gap:var(--resource-title-stack-gap); }
.resource-card__title { display:block; min-width:0; color:var(--text-primary); font-size:var(--resource-title-compact-size); line-height:var(--resource-title-line-height); font-weight:var(--resource-title-weight); overflow-wrap:anywhere; }
.resource-card--hub .resource-card__title { font-size:var(--resource-title-size); font-weight:var(--resource-title-hub-weight); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.resource-card__release,
.resource-card__name { min-width:0; color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-meta); font-weight:var(--resource-hub-release-weight); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
/* The other-version card: its whole main column (tags, size / seeders / access label, release file name) is the link to that version's detail page. */
a.resource-card__main { color:inherit; text-decoration:none; }
/* A version with no known source and no spec tag has no first line, rather than a blank one. */
.resource-card--compact .resource-badge-row:empty { display:none; }
/* Its third line is the release file name, in the same muted one-line style as the release line of the other cards. */
.resource-card__facts { min-width:0; min-height:var(--resource-badge-height); display:flex; flex-wrap:wrap; gap:var(--space-ui-1); align-items:center; justify-content:flex-end; }
.resource-card__actions { display:flex; align-items:center; gap:var(--space-ui-2); flex-wrap:wrap; }
/* The one shape of a small tag-like box inside a resource card: spec and processing tags, the
   access label, the kind pill, the source label, the episode counter. Same font size, weight, line height, letter spacing,
   padding, height, radius and border width on every card type at every width; only colour classes differ.
   `.resource-badge` is the same base under its old name, still carried by the size and seeders
   boxes, which keep their own per-variant rules below until their batches. */
.resource-tag,
.resource-badge { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:var(--resource-badge-height); padding:var(--resource-spec-padding-block) var(--resource-spec-padding-inline); border-radius:var(--resource-spec-radius); font-size:var(--type-resource-badge); line-height:var(--resource-spec-line-height); font-weight:var(--resource-spec-weight); white-space:nowrap; letter-spacing:var(--resource-spec-letter-spacing); border:var(--resource-spec-border-width) solid var(--resource-spec-border); box-shadow:var(--resource-spec-shadow); }
.resource-card__empty { display:block; color:var(--text-muted); text-align:center; padding:var(--space-ui-6); }
.resource-kind-pill { min-width:var(--resource-kind-min-width); }
.resource-kind-pill--movie { background:var(--resource-kind-movie-bg); color:var(--resource-kind-movie-text); border-color:var(--resource-kind-movie-border); }
.resource-kind-pill--tv { background:var(--resource-kind-tv-bg); color:var(--resource-kind-tv-text); border-color:var(--resource-kind-tv-border); }
.resource-kind-pill--doc { background:var(--resource-kind-doc-bg); color:var(--resource-kind-doc-text); border-color:var(--resource-kind-doc-border); }
.resource-badge-row { display:flex; flex-wrap:wrap; gap:var(--resource-badge-gap); min-height:var(--resource-badge-height); align-items:center; }
.resource-badge--neutral { background:var(--resource-badge-neutral-bg); color:var(--resource-badge-neutral-text); }
.resource-badge--remux { background:var(--resource-badge-remux-bg); color:var(--resource-badge-remux-text); }
.resource-badge--webdl { background:var(--resource-badge-webdl-bg); color:var(--resource-badge-webdl-text); }
.resource-badge--webrip,
.resource-badge--bdrip { background:var(--resource-badge-disc-bg); color:var(--resource-badge-disc-text); }
.resource-badge--dv { background:var(--resource-badge-dv-bg); color:var(--resource-badge-dv-text); }
.resource-badge--hdr10p,
.resource-badge--hdr { background:var(--resource-badge-hdr-bg); color:var(--resource-badge-hdr-text); }
.resource-badge--atmos,
.resource-badge--dtshd,
.resource-badge--truehd { background:var(--resource-badge-audio-bg); color:var(--resource-badge-audio-text); }
.resource-badge--hevc { background:var(--resource-badge-hevc-bg); color:var(--resource-badge-hevc-text); }
.resource-badge--av1 { background:var(--resource-badge-av1-bg); color:var(--resource-badge-av1-text); }
.resource-badge--lock { background:var(--resource-badge-lock-bg); color:var(--resource-badge-lock-text); border-color:var(--resource-lock-badge-border); }
/* The size · seeders · date line of every card (built by assets-src/shared/resource-meta.js): plain text, one style on
   every card type at every width. The number of seeders is the only coloured part: green above zero, faint at zero. */
.resource-meta-line { display:inline-flex; align-items:baseline; min-width:0; max-width:100%; overflow:hidden; white-space:nowrap; color:var(--text-primary); font-size:var(--type-resource-meta); font-weight:var(--resource-meta-weight); line-height:var(--leading-meta); font-variant-numeric:tabular-nums; }
.resource-meta-separator { margin-inline:var(--space-resource-meta-separator); color:var(--text-muted); }
.resource-meta-count--active { color:var(--resource-fact-seed-hot-text); }
.resource-meta-count--zero { color:var(--text-faint); }
.resource-lock-action {
  min-width:var(--resource-source-min-width);
  min-height:var(--resource-action-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-ui-1-5);
  padding:0 var(--space-ui-2-5);
  color:var(--text-muted);
  border:1px solid var(--resource-lock-action-border);
  border-radius:var(--resource-action-radius);
  background:var(--resource-lock-action-bg);
  font-size:var(--type-control);
  line-height:1;
  font-weight:var(--resource-count-weight);
  text-decoration:none;
}
.resource-lock-action:hover { border-color:var(--resource-lock-action-hover-border); color:var(--accent); background:var(--resource-lock-action-hover-bg); }
.resource-lock-action svg { width:var(--resource-action-icon); height:var(--resource-action-icon); display:block; flex:0 0 auto; }
.resource-action-glyph { display:block; flex:0 0 auto; object-fit:contain; overflow:visible; }
.resource-icon-action-track {
  width:var(--resource-icon-action-rail);
  display:grid;
  grid-template-columns:repeat(2,var(--resource-icon-action-control));
  align-items:center;
  justify-content:end;
  gap:var(--resource-icon-action-gap);
  flex:0 0 auto;
}
.resource-icon-action-track--locked {
  grid-template-columns:var(--resource-icon-action-lock-control);
  justify-content:center;
}
.resource-icon-action-control {
  position:relative;
  width:var(--resource-icon-action-control);
  min-width:var(--resource-icon-action-control);
  height:var(--resource-icon-action-control);
  padding:0;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--accent-mid);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  text-decoration:none;
  transition:color .15s ease;
}
.resource-icon-action-control::after {
  content:"";
  position:absolute;
  inset:min(calc(-1 * var(--size-scale-px-2)),calc((var(--resource-icon-action-control) - var(--size-tap-target-min)) / 2));
}
.resource-icon-action-control:hover,
.resource-icon-action-control:active { color:var(--accent); background:transparent; }
.resource-icon-action-control:focus-visible {
  outline:var(--focus-ring-width) solid var(--accent);
  outline-offset:var(--focus-ring-offset);
  background:transparent;
}
.resource-icon-action-control > svg,
.resource-icon-action-control > .resource-action-glyph {
  width:var(--resource-icon-action-size);
  height:var(--resource-icon-action-size);
  display:block;
  flex:0 0 auto;
  overflow:visible;
}
.resource-icon-action-track--unlocked > .resource-icon-action-control:first-child > .resource-action-glyph {
  transform:translateX(var(--resource-icon-action-nudge));
}
.resource-icon-action-track--unlocked > .resource-icon-action-control:nth-child(2) > .resource-action-glyph {
  transform:translateX(calc(-1 * var(--resource-icon-action-nudge)));
}
.resource-icon-action-track--unlocked > .resource-action-link::before {
  content:"";
  position:absolute;
  top:50%;
  left:calc(var(--resource-icon-action-gap) / -2);
  width:var(--size-scale-px-1);
  height:calc(var(--resource-icon-action-size) / 2);
  background:var(--border);
  transform:translateY(-50%);
  pointer-events:none;
}
.resource-icon-action-lock-control {
  width:var(--resource-icon-action-lock-control);
  min-width:var(--resource-icon-action-lock-control);
  grid-column:1 / -1;
  justify-self:center;
  color:var(--text-muted);
}
.resource-icon-action-lock-control::after {
  inset:min(calc(-1 * var(--size-scale-px-2)),calc((var(--resource-icon-action-control) - var(--size-tap-target-min) - var(--size-scale-px-1)) / 2));
}
@media (max-width: 900px) {
  /* UI-005 3a: padding no longer pinned to --space-ui-3/-2-5 here -- that was a second,
     independent hardcoded pair that produced its own 640/641 and 900/901 steps on top of the
     600->768 jump already fixed on --resource-card-pad-block/-inline above. Dropping it lets
     the unconditional base rule's (now continuous) padding apply through this range too. */
  .resource-card--hub { grid-template-columns:var(--resource-card-hub-kind) minmax(0,1fr); gap:var(--space-ui-2); align-items:start; min-height:0; }
  .resource-card--hub .resource-card__facts { grid-column:2; justify-content:flex-start; margin-top:var(--space-ui-0-5); }
  .resource-card--hub .resource-card__title { -webkit-line-clamp:3; }
}
@media (max-width: 640px) {
  .resource-card--hub { grid-template-columns:var(--resource-card-hub-kind) minmax(0,1fr); gap:var(--space-mobile-gap) var(--space-mobile-card-pad); padding:var(--resource-card-pad-block) var(--resource-card-pad-inline); }
  .resource-card--hub .resource-card__kind { padding-top:0; }
  .resource-card--hub .resource-card__main { gap:var(--space-ui-0-5); }
  .resource-card--hub .resource-card__title { display:block; font-size:var(--resource-title-compact-size); line-height:var(--resource-title-mobile-line-height); font-weight:var(--resource-title-hub-weight); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; }
  .resource-card--hub .resource-card__release { font-size:var(--type-meta); line-height:1.2; }
  .resource-card--hub .resource-badge-row { min-height:var(--resource-badge-height); max-height:var(--resource-badge-height); flex-wrap:nowrap; gap:var(--resource-badge-gap); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .resource-card--hub .resource-badge-row::-webkit-scrollbar { display:none; }
  .resource-card--hub .resource-badge { min-height:var(--resource-badge-height); font-size:var(--type-label); }
  .resource-card--hub .resource-card__facts { margin-top:0; flex-wrap:nowrap; gap:var(--space-ui-1); overflow-x:auto; scrollbar-width:none; }
  .resource-card--hub .resource-card__facts::-webkit-scrollbar { display:none; }
  .resource-card--hub .resource-card__actions { grid-column:2; gap:var(--space-ui-1); }
  .resource-card--nested { grid-template-columns:minmax(0,1fr); }
  .resource-card--nested .resource-card__title { font-size:var(--resource-title-compact-size); line-height:var(--resource-title-mobile-line-height); }
  .resource-card--nested .resource-card__actions,
  .resource-card--nested .resource-card__facts { justify-content:flex-start; }
  .resource-card--compact { gap:var(--resource-card-compact-gap-row) var(--resource-card-compact-gap-column); padding:var(--resource-card-nested-pad-block) var(--resource-card-nested-pad-inline); }
  .resource-card--compact .resource-card__facts { grid-column:2; justify-content:flex-start; }
  .resource-card--compact .resource-badge { height:var(--resource-fact-height); padding:0 var(--space-ui-1); }
  .resource-lock-action { min-height:var(--resource-action-height); padding-inline:var(--space-ui-1-5); font-size:var(--type-compact-label); }
  .resource-lock-action svg { width:var(--resource-action-icon); height:var(--resource-action-icon); }
}
/* Where the facts line sits under the name and tags (the narrow layout, both ranges above), the divider between the
   two parts runs across the whole card, edge to edge inside the border, with the same space above and below it. */
@media (max-width: 900px) {
  .resource-card--hub { row-gap:0; }
  .resource-card--hub .resource-card__kind,
  .resource-card--hub .resource-card__main { grid-row:1; }
  .resource-card--hub::before {
    content:"";
    grid-column:1 / -1;
    grid-row:2;
    height:0;
    margin:var(--resource-card-rule-gap) calc(-1 * var(--resource-card-pad-inline));
    border-top:1px solid var(--border-row);
  }
  .resource-card--hub .resource-card__facts { grid-row:3; margin-top:0; }
}