/* ---------- pay: the editor-facing Rate Card. Built in the app's own tokens
   (warm ink + red, condensed display type). Its own file so it ships on its
   own, apart from other unreleased style changes. */
.pay { max-width: 980px; }
.pay-hero { margin: 4px 0 6px; }
.pay-title {
  margin: 0 0 10px; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
  font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: 0.04em; color: var(--ink);
}
.pay-title span { color: var(--red); }
.pay-lede { color: var(--muted); font-size: 14.5px; max-width: 62ch; margin: 0; }
.pay-updated { color: var(--muted); font-size: 12px; margin: 8px 0 0; opacity: 0.8; }
.pay-h { margin-top: 34px; }
.pay-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; max-width: 64ch; }

/* the reel: one filmstrip row per style */
.pay-reel { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.pay-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.pay-row:last-child { border-bottom: none; }
.pay-sprockets {
  width: 14px; flex: none; background-color: var(--line);
  background-image: radial-gradient(circle at center, var(--panel) 2.4px, transparent 2.9px);
  background-size: 14px 14px; background-position: 0 5px;
}
.pay-body {
  flex: 1; min-width: 0; display: grid; align-items: center; gap: 16px; padding: 14px 18px;
  grid-template-columns: 84px minmax(0, 1.15fr) minmax(90px, 1fr) 118px;
  grid-template-areas: "thumb name track rate";
}
.pay-thumb {
  grid-area: thumb; position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--line);
}
.pay-thumb-link { position: absolute; inset: 0; display: block; }
.pay-thumb-link:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 10px; }
.pay-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; }
.pay-thumb-link:hover img, .pay-thumb-link:focus-visible img { transform: scale(1.07); }
.pay-thumb img.yt { position: absolute; top: -17%; left: 0; width: 100%; height: 134%; }
.pay-thumb.none { display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; }
.pay-thumb.none a, .pay-thumb.none span {
  font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; text-decoration: none;
}
.pay-thumb.none a { color: var(--warn); }
.pay-thumb.none a:hover { text-decoration: underline; }
.pay-thumb.none span { color: var(--muted); }

.pay-name { grid-area: name; min-width: 0; }
.pay-name h4 {
  margin: 0; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
  font-weight: 800; font-size: 18px; line-height: 1.15; letter-spacing: 0.02em; color: var(--ink);
}
.pay-name p {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pay-track { grid-area: track; height: 10px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
.pay-track.unrated { background: transparent; border: 1px dashed rgba(168, 158, 151, 0.4); }
.pay-fill {
  display: block; height: 100%; border-radius: 5px; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--red), var(--warn)); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pay-fill.on { transform: scaleX(1); }
.pay-rate {
  grid-area: rate; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 19px; line-height: 1.1; color: var(--ink);
}
.pay-rate.tbd { color: var(--muted); }
.pay-rate small {
  display: block; margin-top: 5px; font-family: -apple-system, "Helvetica Neue", Segoe UI, Roboto, sans-serif;
  font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn);
}
.pay-rate small.muted { color: var(--muted); font-weight: 600; }

/* the two pay lines */
.pay-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pay-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 16px; }
.pay-card h4 {
  margin: 0 0 4px; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
  font-weight: 800; font-size: 21px; letter-spacing: 0.03em; color: var(--ink);
}
.pay-who { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.pay-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pay-lines li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14px; color: var(--muted); }
.pay-lines b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-plus { color: var(--muted); }
.pay-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pay-note b { color: var(--ink); }

/* worked example */
.pay-receipt { max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.pay-receipt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.pay-receipt-head h4 {
  margin: 0; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: 0.02em; color: var(--ink);
}
.pay-receipt-head span { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pay-rline { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; font-size: 14px; color: var(--ink); }
.pay-rname small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.pay-rval { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.pay-rline.add .pay-rval { color: var(--good); }
.pay-rtotal {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 14px; border-top: 1.5px solid var(--muted);
  font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800;
}
.pay-rtotal span:first-child { font-size: 16px; }
.pay-rtotal span:last-child { font-size: 30px; font-variant-numeric: tabular-nums; color: var(--warn); }

.pay-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .pay-title { font-size: 32px; }
  .pay-body { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb name" "track track" "rate rate"; gap: 8px 14px; padding: 14px 14px; }
  .pay-thumb { width: 72px; height: 72px; }
  .pay-rate { text-align: left; font-size: 18px; }
  .pay-rate small { display: inline; margin: 0 0 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pay-fill, .pay-thumb img { transition: none; }
}