/* Player ratings, inside the career screen. Everything here lives under the
   root element career.js hands to renderRatings(), and it borrows the app's
   cards, chips, pills, bars, switches and settings rows. Only the pieces the
   design system has no class for are defined below.

   Tokens only, no hard coded background or text colour, so both themes work.
   Deliberately no colour scale on a rating: a 2 is not red and a 5 is not
   green, because colouring a child's trait turns a number they were given
   into a verdict on them. One accent, one bar, same for every value. */

.rcard{margin-bottom:14px}
.rlede{font-size:12.5px;line-height:1.6;color:var(--mute);margin-bottom:16px}
.rplain{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--mute)}
/* The invitation a player with nothing logged sees instead of four shut doors. */
.rinvite{
  margin:0 0 16px;padding:13px 14px;border-radius:12px;font-size:13.5px;line-height:1.6;color:var(--ink);
  border:1px dashed var(--line);background:var(--panel2);
}

/* ------------------------------------------------------------- one scope */
.rscopes{display:grid;gap:12px}
.rscope{padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.rscope.off{background:transparent}
.rscope-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.rscope-h b{font:800 13px/1.2 var(--mono);color:var(--ink)}
.rscope.off .rscope-h b{color:var(--mute)}
.rscope-h .pill{border:1px solid var(--line);color:var(--mute)}
.rscope-h .pill.hot,.rscope-h .pill.good,.rscope-h .pill.cool{border-color:currentColor}
.rtag{font:700 10px/1 var(--mono);letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}
.rscope .sub{font-size:12.5px;line-height:1.6}
.rscope .rtraits{margin-top:12px}

/* --------------------------------------------------------- a trait line */
.rtraits{display:grid;gap:7px}
.rtrait{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,1.5fr) auto auto auto;
  gap:10px;align-items:center;
}
.rt-name{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtrait.none .rt-name{color:var(--mute)}
.rbar{height:6px;border-radius:3px;overflow:hidden;background:var(--line)}
.rbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hot),var(--hot2));transition:width .4s}
.rt-val{font:700 10px/1 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--dim);white-space:nowrap;text-align:right}
.rt-val b{font:800 14px/1 var(--mono);color:var(--hot);margin-right:4px;letter-spacing:-.3px}
.rtrait.none .rt-val{color:var(--dim)}

/* What the average and the change each cover, so neither number floats free. */
.rscale{margin:12px 0 0;font:600 11.5px/1.55 var(--sans);color:var(--dim)}

/* The sparkline. One trait over the months, drawn only when there are two or
   more points, so a single rating never becomes a line. */
.rspark{width:62px;height:20px;display:block}
.rspark path{fill:none;stroke:var(--cool);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rspark-none{display:block;width:62px}
.rt-move{font:700 10px/1 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--dim);white-space:nowrap;min-width:54px;text-align:right}
.rt-move.up{color:var(--good)}
.rt-move.down{color:var(--mute)}

@media(max-width:720px){
  .rtrait{grid-template-columns:minmax(0,1fr) auto auto;row-gap:4px}
  .rbar{grid-column:1/-1;order:3}
  .rspark,.rspark-none{display:none}
}

/* ------------------------------------------- an attributed coach rating */
.rentries{display:grid;gap:8px;margin-top:12px}
.rentry{padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel)}
.re-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.re-h b{font:800 12.5px/1 var(--mono);color:var(--ink)}
.re-h small{font:700 10px/1 var(--mono);color:var(--dim)}
.re-note{margin-top:7px;font-size:13px;line-height:1.6;color:var(--mute);overflow-wrap:anywhere}

/* --------------------------------------------------------- rating a player */
.rform{margin-bottom:14px}
.rpeople,.rchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.rpeople .chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 13px;line-height:1.2;color:var(--mute);transition:.14s}
.rpeople .chip small{font:700 9px/1 var(--mono);letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}
.rpeople .chip:hover,.rchips .chip:hover{border-color:var(--hot);color:var(--ink)}
.rpeople .chip.on,.rchips .chip.on{border-color:var(--hot);color:var(--hot);background:rgba(255,90,31,.14)}
.rhelp{margin-bottom:14px;font-size:12.5px;line-height:1.6}

.rpicks{display:grid;gap:10px}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.rr-name{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Five taps, big enough to hit on a phone without aiming. */
.rpick{display:grid;grid-template-columns:repeat(5,44px);gap:6px}
.rpick button{
  min-height:44px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
  color:var(--mute);font:800 16px/1 var(--mono);transition:.14s;
}
.rpick button:hover{border-color:var(--hot);color:var(--ink)}
.rpick button.on{border-color:var(--hot);color:var(--hot);background:rgba(255,90,31,.14)}
.rpick button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
@media(max-width:560px){
  .rrow{grid-template-columns:1fr;gap:7px}
  .rpick{grid-template-columns:repeat(5,1fr)}
}

.rlab{display:grid;gap:5px;margin-top:16px;font:800 10px/1.2 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute)}
.rlab textarea{
  width:100%;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:600 14px/1.5 var(--sans);resize:vertical;
}
.rlab textarea:focus{outline:2px solid var(--hot);outline-offset:1px}
.rlab textarea::placeholder{color:var(--dim)}
.rshare{margin-top:6px}
.rshare .sw{border:0;padding:0;cursor:pointer}

.ractions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}