/* Producer app: dashboard, my tracks, request detail, send-a-track wizard. */
.req-li > div{display:grid;gap:3px;min-width:0}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:stretch}
/* both columns share top and bottom edges: the right column's panels stack with the same 20px gap and the last one fills */
.dash-grid > .stack{display:flex;flex-direction:column;gap:20px}
.dash-grid > .stack > :last-child{flex:1}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
/* tracks */
.track-li{flex-wrap:wrap}
.pick{cursor:pointer;justify-content:flex-start;min-height:56px}
.pick input{accent-color:var(--ink);width:20px;height:20px;flex:0 0 20px;margin:2px 0 0}
.pick:has(input:checked){background:var(--mint)}
/* wizard */
.wizard{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.wizard .summary{position:sticky;top:84px}
/* Wizard, Format step: lens cards stretch to the tallest one; keep title and text together at the top */
.lens{display:grid;gap:4px;text-align:left;padding:14px;border:1px solid var(--hair-strong);background:var(--paper);align-content:start}
.lens.on{background:var(--accent);color:var(--on-accent)}
.lens.on .muted{color:var(--on-accent)}
@media (max-width:1100px){
  .wizard{grid-template-columns:1fr}
  .wizard .summary{position:static}
}
@media (max-width:960px){
  .dash-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}
/* Empty status lines (upload progress, errors) sat inside .stack and doubled the gap between buttons */
#acts > p:empty,#wb > p:empty,#wb > .err:empty,#upState:empty{display:none}
/* Request detail: the action buttons in the side panel share one width */
#acts > .btn,#acts > label.btn{width:100%}
/* My tracks: one action row, every button the same height. On a phone: three equal columns plus a square "•••"
   (founder: the row wrapped and "Get feedback" looked oversized) */
.track-li > .row .btn{min-height:44px}
.track-li .lbl-s{display:none}
@media (max-width:600px){
  /* the same slots on every row (Play · Feedback · Share · •••); an action that does not apply keeps its slot, disabled */
  .track-li > .row{display:grid;grid-template-columns:repeat(3,80px) 44px;gap:6px;width:max-content;max-width:100%}
  .track-li > .row:not(:has(.btn:nth-child(4))){grid-template-columns:repeat(2,minmax(0,1fr)) 44px}
  .track-li > .row .btn{min-height:44px;padding:0 6px;white-space:nowrap;min-width:0}
  .track-li > .row [data-more]{width:44px}
  .track-li .lbl-l{display:none}
  .track-li .lbl-s{display:inline}
}
/* Wizard nav (Back / Continue / Send it): same width on desktop. On a phone it becomes a sticky bottom bar with the price (below). */
#wb > .wnav .btn{min-width:140px}
.wnav-p{display:none}
@media (max-width:960px){
  /* Request page on a phone: what happens next (and the Cancel/Pay/Rate buttons) sat below the player and the whole
   conversation. Flatten the two columns so the action panel comes straight after the status. */
/* scoped to the producer request page: unscoped, it squeezed the mentor review page (mentor audit T-01) */
  .req-detail{display:flex;flex-direction:column;gap:20px}
  .req-detail > .stack{display:contents}
  .req-detail #acts{order:-2}
  .req-detail .bk-panel{order:-1}
}
.detail-grid .panel-h a{white-space:nowrap}
/* a track that just landed: a short yellow flash in the list */
.track-li.fresh{animation:freshin 2.4s ease-out 1}
@keyframes freshin{0%,40%{background:var(--accent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
  .track-li.fresh{animation:none;outline:2px solid var(--accent)}
}
/* My tracks: the row's Play button turns into Pause while its player runs; a fixed width so the label swap never resizes it */
.track-li > .row [data-play]{width:84px;flex:0 0 84px;padding-left:0;padding-right:0}
@media (max-width:600px){
  .track-li > .row [data-play]{width:100%;flex:none}
}
.req-li .status{white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;flex:0 0 auto}
/* 44 px hit areas for small header links (P-26); the visual size stays the same */
.hit{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;margin-block:-10px;margin-right:-8px}
/* "Get feedback" context bar on Find a mentor (P-10) */
.pick-bar{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);padding:4px 6px 4px 14px;margin-bottom:20px}
.pick-bar .hit{margin-block:0;color:var(--on-accent);text-decoration:underline;text-underline-offset:3px}
/* the public directory drawn inside the app column (same left edge as every other app page) */
.in-app.wrap{max-width:1180px;padding-inline:0}
.in-app.page-top{padding-top:0}
.track-li:has(+ .track-li.old){padding-bottom:6px;border-bottom-color:transparent}
.track-li.old{padding-top:6px}
.track-li.old .mini{opacity:.6}
/* the status sentence: its own row under the bar */
.rq-next{margin:14px 0 0;padding:12px 16px 14px;border-top:1px solid var(--hair);font-size:var(--fs-body-s);line-height:1.45}
.receipt{font-weight:500}
/* delivered: the player stays in view while you read the notes (P-06) */
.req-detail #rp{width:100%;min-width:0}
.rq-listen{width:100%;min-width:0;gap:20px}
.preq .note .t{min-height:44px;min-width:60px}
.preq .player .pin::before{width:44px;height:44px;top:-8px}
.preq .player .pin.on i{background:var(--ink);color:var(--paper)}
/* rating: five 44 px stars, editable in the sheet (P-31) */
.rate-row{display:flex;gap:6px;flex-wrap:wrap}
.rate-star{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair-strong);background:var(--paper);color:var(--muted);font-size:var(--fs-h5);line-height:1;cursor:pointer;padding:0}
.rate-star.on{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
@media (hover:hover){
  .rate-row:hover .rate-star{background:var(--accent);color:var(--on-accent)}
  .rate-row .rate-star:hover ~ .rate-star{background:var(--paper);color:var(--muted)}
}
.rate-star:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:960px){
  /* phone order on a delivered request: summary, player, notes, scores, then rating and round two, then chat */
  .req-detail.dlv #acts{order:5}
  .req-detail.dlv .rq-sum{order:1}
  .req-detail.dlv .rq-listen{order:2}
  .req-detail.dlv .rq-scores{order:4}
  .req-detail.dlv .rq-chat{order:6}
  .req-detail.dlv .rq-brief{order:7}
  .req-detail.dlv .bk-panel{order:8}
}
.ll-edit{min-height:44px;margin-block:-12px;padding-inline:8px}
.pick.off{opacity:.55;cursor:not-allowed}
@media (pointer:coarse){
  .wizard .chip,.preq .chip{min-height:44px}
}
@media (max-width:600px){
  /* the aside summary sat under the Continue button; the bottom bar carries the price instead (P-14) */
  .wizard > aside.summary{display:none}
  #wb > .wnav{position:sticky;bottom:calc(var(--player-h, 0px) + env(safe-area-inset-bottom,0px));z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;min-height:60px;background:var(--ground);border-top:1px solid var(--hair-strong);margin-inline:calc(-1 * var(--gutter, 16px)) calc(-1 * var(--gutter-r, 16px));padding:8px var(--gutter-r, 16px) 8px var(--gutter, 16px)}
  #wb > .wnav > .sp{display:none}
  #wb > .wnav .btn{min-width:0;min-height:44px;padding-inline:14px}
  .wnav-p{display:grid;line-height:1.25;min-width:0}
  .wnav-p b{font-size:17px}
  .wnav-p .small{font-size:var(--fs-micro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* My tracks, desktop: fixed slot widths so every row's buttons line up */
.track-li > .row{flex:0 0 auto}
.track-li > .row > :nth-child(2){min-width:132px;justify-content:center}
.track-li > .row [data-share],.track-li > .row .slot-off.line{min-width:84px}
.track-li > .row [data-more]{width:44px;min-width:44px;padding-inline:0}
@media (max-width:600px){
  .track-li > .row > :nth-child(2),.track-li > .row [data-share],.track-li > .row .slot-off.line{min-width:0}
}
.pick:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover){
  .pick:not(:has(input:checked)):hover{background:color-mix(in srgb,var(--mint) 55%,var(--paper))}
}
/* Track page sheet (My tracks → ••• → Track page) */
.cd-switch b{font-weight:600}
.cd-links{gap:var(--sp-4)}
.cd-copy{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:var(--sp-2);align-items:stretch}
.cd-copy input{min-width:0;font-family:var(--mono);font-size:var(--fs-caption)}
.cd-copy .btn{min-height:var(--ctl-h)}
.cd-stats{margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.cd-quotes{border-top:1px solid var(--hair);padding-top:var(--sp-4)}
.cd-qlist{display:grid;gap:var(--sp-1);margin-bottom:var(--sp-3)}
/* Share sheet: three destinations */
.send-opts{display:grid;border-top:1px solid var(--hair)}
.send-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
.send-opt p{margin:4px 0 0;color:var(--ink-soft)}
.send-opt .btn{min-width:120px}
@media (max-width:600px){.send-opt{grid-template-columns:1fr}.send-opt .btn{width:100%}}
/* My tracks: how sharing works */
.send-help{border:1px solid var(--hair);padding:0 16px;margin:16px 0}
.send-help > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.send-help ul{margin:0 0 14px;padding-left:18px;display:grid;gap:6px;color:var(--ink-soft)}
.btn.is-shared{background:var(--paper);color:var(--ink);border-color:var(--ok)}
.btn.is-shared span{color:var(--ok);font-weight:700}