/* Let clients rank options, page only. Prefix: .cs- */

.cs-stage .stage__panel { max-width: 680px; }

.cs-kicker { color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.cs-title { font-size: var(--text-l); letter-spacing: var(--track-heading); line-height: 1.2; margin-top: var(--space-2xs); }
.cs-title:focus { outline: none; }
.cs-title:focus-visible { outline: var(--focus-w) solid var(--ink); outline-offset: var(--focus-offset); }
.cs-help { color: var(--ink-2); font-size: var(--text-s); margin-top: var(--space-2xs); }

/* Cards */
.cs-list { display: grid; gap: var(--space-xs); margin-top: var(--space-m); }
.cs-card {
  position: relative;
  display: grid; grid-template-columns: 56px 96px minmax(0, 1fr); gap: var(--space-xs) var(--space-s);
  padding: var(--space-s); padding-left: 0;
  background: var(--white); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-s);
  user-select: none; -webkit-user-select: none;
}
.cs-card:first-child { border-color: var(--ink); }
.cs-card.is-dragging { z-index: 5; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--pale-2); cursor: grabbing; }
.cs-card.is-moved { background: var(--pale-2); }

/* Left column: place and drag handle */
.cs-handle {
  grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  padding-top: 2px; cursor: grab; touch-action: none;
}
.cs-place {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pale); font-size: var(--text-xs); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums;
}
.cs-card:first-child .cs-place { background: var(--stage); }
.cs-grip {
  width: 14px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24'%3E%3Cg fill='%2366665f'%3E%3Ccircle cx='3' cy='3' r='2'/%3E%3Ccircle cx='11' cy='3' r='2'/%3E%3Ccircle cx='3' cy='12' r='2'/%3E%3Ccircle cx='11' cy='12' r='2'/%3E%3Ccircle cx='3' cy='21' r='2'/%3E%3Ccircle cx='11' cy='21' r='2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

/* Flat tint standing in for a photo */
.cs-tint { grid-row: 1; aspect-ratio: 4 / 3; border-radius: 4px; background: color-mix(in srgb, var(--stage) var(--tint, 40%), var(--white)); }

.cs-body { grid-row: 1; min-width: 0; }
.cs-name { font-size: 20px; font-weight: var(--weight-medium); letter-spacing: -0.01em; line-height: 1.25; }
.cs-meta { color: var(--ink-2); font-size: var(--text-xs); margin-top: 2px; }
.cs-note { font-size: var(--text-s); margin-top: var(--space-2xs); }

.cs-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.cs-actions .btn { padding: 0 var(--space-s); }
.cs-actions .cs-out { margin-left: auto; background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.cs-actions .cs-out:hover { background: var(--pale); }

/* Set aside */
.cs-aside { margin-top: var(--space-l); }
.cs-aside__title { font-size: var(--text-s); }
.cs-aside__list { margin-top: var(--space-2xs); border-top: var(--rule-w) solid var(--rule); }
.cs-aside__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-2xs) 0; border-bottom: var(--rule-w) solid var(--rule);
}
.cs-aside__list span { color: var(--ink-2); text-decoration: line-through; }

.cs-send { margin-top: var(--space-l); }

/* What the business receives */
.cs-summary { margin-top: var(--space-m); border-top: var(--rule-w) solid var(--ink); }
.cs-summary li {
  display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-s); align-items: baseline;
  padding: var(--space-s) 0; border-bottom: var(--rule-w) solid var(--rule);
}
.cs-summary__place { color: var(--ink-2); font-size: var(--text-s); }
.cs-summary__name { justify-self: start; font-size: 20px; font-weight: var(--weight-medium); }
.cs-summary li:first-child .cs-summary__name { box-shadow: inset 0 -0.45em 0 var(--stage); }
.cs-aside-line { margin-top: var(--space-s); font-size: var(--text-s); }
.cs-aside-line:empty { display: none; }
.cs-clear { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; margin: var(--space-l) 0 var(--space-xs); }

/* Compact cards whenever the list is narrow: on phones, and beside the headline
   on screens just wide enough for the side-by-side hero. */
.cs-list { container-type: inline-size; }
@container (max-width: 480px) {
  .cs-card { grid-template-columns: 48px 44px minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-s) var(--space-s) var(--space-s) 0; }
  .cs-handle { grid-row: 1; }
  .cs-name { font-size: 18px; }
  .cs-actions { grid-column: 1 / -1; padding-left: var(--space-s); }
  .cs-actions .btn { flex: 1 1 auto; }
  .cs-actions .cs-out { margin-left: 0; }
}
@media (max-width: 600px) {
  .cs-summary li { grid-template-columns: 1fr; gap: 2px; }
}