@layer components {
  /* ── Round 2 live ranking (admin "jury mode") ── */
  .ranking-hint {
    color: var(--ink-600);
    font-size: 0.9rem;
    margin-bottom: var(--s4);
  }

  .ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }

  .ranking-card {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    cursor: grab;
  }

  .ranking-card.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
  }

  .ranking-rank {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--forest-900);
    background: var(--forest-50);
    border-radius: var(--r-sm);
  }

  .ranking-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--ink-50);
  }

  .ranking-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ranking-meta {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
  }

  .ranking-title {
    font-weight: 500;
    color: var(--ink-950);
  }

  .ranking-caption {
    font-size: 0.8125rem;
    color: var(--ink-600);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .ranking-photo-id {
    font-size: 0.8125rem;
    color: var(--ink-400);
  }

  /* ── Portfolio ranking: the unit is a whole portfolio (a row of its photos) ── */
  .ranking-card--portfolio {
    align-items: flex-start;
  }

  .ranking-portfolio-thumbs {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--s2);
    min-width: 0;
  }

  /* ── Finalist pool header: title + its own "Review pool" action ── */
  .ranking-pool__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin: var(--s5) 0 var(--s3);
  }

  /* ── "Your selection": a compact read-only grid of the shortlisted photos ── */
  .ranking-selection__grid {
    margin-top: var(--s4);
  }

  .photo-card--compact {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .photo-card__id--compact {
    display: block;
    padding: var(--s1) var(--s2);
  }

  /* Wrapper so the remove "×" can sit over the card as a sibling of the review
     link (a button cannot be nested inside the anchor). */
  .ranking-selection__card {
    position: relative;
  }

  /* Per-card remove ("×"), mirroring .tiered-card__remove — unpick a photo
     without scrolling down to the pool toggle. Always visible so it stays usable
     on touch. */
  .ranking-selection__remove {
    position: absolute;
    top: var(--s1);
    right: var(--s1);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition, 0.15s), background var(--transition, 0.15s);
  }

  .ranking-selection__card:hover .ranking-selection__remove,
  .ranking-selection__remove:focus-visible {
    opacity: 1;
    background: var(--danger-600, #c0392b);
  }

  .ranking-selection__remove svg { width: 0.85rem; height: 0.85rem; }

  .ranking-selection__empty {
    margin-top: var(--s3);
    color: var(--ink-500);
    font-size: 0.9rem;
  }

  /* ── Tiered ranking surface: an ordered column (rank 1..5 by DOM order, with a
     labelled tier rail) beside the Top-10 pool. Cards drag between the two zones. ── */
  .tiered-ranking {
    --tiered-slot-h: 6.5rem;
    --tiered-gap: var(--s2);
    margin-top: var(--s4);
  }

  /* Live status: trim (over the limit), place-more (incomplete tiers), or set. */
  .tiered-status {
    margin: 0 0 var(--s4);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-md);
    background: var(--forest-50, var(--ink-50));
    color: var(--ink-600);
    font-size: 0.9rem;
  }

  /* Amber while there's still work to do — too many selected, or tiers unfilled. */
  .tiered-status.is-over,
  .tiered-status.is-incomplete {
    background: var(--amber-50, #fdf6e3);
    color: var(--amber-800, #8a6d00);
    font-weight: 500;
  }

  .tiered-ranking__zones {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: var(--s6, 32px);
    align-items: start;
  }

  @media (max-width: 900px) {
    .tiered-ranking__zones { grid-template-columns: 1fr; }
  }

  /* Per-card remove ("×") to trim an over-limit selection down to the top 10. */
  .tiered-card { position: relative; }

  /* Always visible (not hover-gated) so it stays usable on touch. */
  .tiered-card__remove {
    position: absolute;
    top: var(--s1);
    right: var(--s1);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition, 0.15s), background var(--transition, 0.15s);
  }

  .tiered-card:hover .tiered-card__remove,
  .tiered-card__remove:focus-visible {
    opacity: 1;
    background: var(--danger-600, #c0392b);
  }

  .tiered-card__remove svg { width: 0.85rem; height: 0.85rem; }

  /* ── Ordered zone: fixed tier rail + a drop field (hints behind, cards on top) ── */
  .tiered-ordered {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
    margin-top: var(--s3);
  }

  .tiered-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tiered-gap);
  }

  .tiered-rail__slot {
    box-sizing: border-box;
    height: var(--tiered-slot-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s1);
    padding: var(--s2);
    border-radius: var(--r-md);
    background: var(--forest-50);
  }

  .tiered-rail__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-weight: 600;
    color: var(--forest-900);
    background: #fff;
    border-radius: var(--r-sm);
  }

  .tiered-rail__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--forest-900);
  }

  .tiered-field {
    position: relative;
  }

  .tiered-field__hints {
    position: absolute;
    inset: 0;
    z-index: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tiered-gap);
  }

  .tiered-field__hint {
    box-sizing: border-box;
    height: var(--tiered-slot-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s3);
    color: var(--ink-400);
    font-size: 0.85rem;
    border: 1.5px dashed var(--ink-200);
    border-radius: var(--r-md);
    background: var(--ink-50);
  }

  .tiered-field__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tiered-gap);
    min-height: calc(var(--tiered-slot-h) * 5 + var(--tiered-gap) * 4);
  }

  /* ── Pool zone: a grid of the unranked remainder, larger tiles than the
     selection grid (its .photo-grid is minmax(220px); these are minmax(240px)) ── */
  .tiered-pool__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s4);
    margin-top: var(--s3);
    min-height: var(--tiered-slot-h);
  }

  /* ── The shared draggable card. Reflows per zone: strip in the ordered field,
     tile in the pool. ── */
  .tiered-card {
    box-sizing: border-box;
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: grab;
    transition: border-color var(--transition), box-shadow var(--transition);
  }

  .tiered-card:hover {
    border-color: var(--forest-300);
    box-shadow: var(--shadow-md);
  }

  .tiered-card.sortable-ghost {
    opacity: 0.4;
  }

  .tiered-card__media {
    display: block;
    background: var(--ink-100);
    overflow: hidden;
  }

  .tiered-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .tiered-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-200);
  }

  .tiered-card__placeholder svg {
    width: 28px;
    height: 28px;
  }

  .tiered-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
    padding: var(--s3);
  }

  .tiered-card__id {
    font-size: 0.8125rem;
    color: var(--ink-400);
  }

  .tiered-card__title {
    margin: 0;
    font-weight: 500;
    color: var(--ink-950);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Strip layout inside the ordered field — thumbnail left, meta right, one
     card per tier slot so it lines up with the rail. */
  .tiered-field__list .tiered-card {
    box-sizing: border-box;
    height: var(--tiered-slot-h);
    display: flex;
    align-items: stretch;
  }

  .tiered-field__list .tiered-card__media {
    flex: 0 0 auto;
    width: 9rem;
  }

  .tiered-field__list .tiered-card__meta {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Tile layout inside the pool — large thumbnail on top, meta below. */
  .tiered-pool__grid .tiered-card__media {
    aspect-ratio: 4 / 3;
  }
}