/* =====================================================================
   Roster Report — components for roster-report.html.

   NOTE ON LOADING: this page also loads assets/css/trade-verdict.css, which
   carries the components shared by both tools (.tv-step, .tv-callout,
   .vstat, .tv-notice, .tv-collapse, .tp-chip/.tp-list, .tv-verdict head,
   .tv-valued-from, .tv-method). Those were built for Trade Verdict first and
   are genuinely shared UI rather than page-specific styling. Renaming them to
   a neutral `tools.css` would be the tidier end state but means touching every
   `tv-` class name across two working pages, so the shared file keeps its
   original name for now and this file only adds what is new here.
   ===================================================================== */

/* ---------- Slot-by-slot table ---------- */
/* The .rr-slot component moved to style.css — Grade My Draft renders the same
   per-slot read from the same shared ladder, and that page does not load this
   stylesheet. One component, one definition. */

/* ---------- Two-column: afford to move / must upgrade ---------- */
/* One grid, four children. align-items:start lets each panel hug its content —
   stretching them to equal height converted a 3x difference in content length
   into empty bordered space, and a card that ends well short of its own border
   reads as "still loading" rather than as breathing room. */
.rr-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px;align-items:start}
@media (max-width:820px){.rr-two{grid-template-columns:1fr}}
.rr-col{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:16px 18px;border-top:3px solid var(--line-soft);min-width:0;
}
/* The top border encodes what the panel IS, not how good the news is. Four
   panels, four hues, all of them already in this palette and all above 7:1 on
   --surface:

     Bench Pieces       --gain   #97C459  8.96:1   the cheapest give
     Starter As A Chip  blue     var(--info)  8.95:1   a give, but conditional
     Should Upgrade     --warn   #E0B84E  9.63:1   the one thing you must GET

   Two adjacent greens that were nearly-but-not-quite the same read worse than
   either identical or plainly different: the eye registers a difference and
   finds no meaning behind it. Holding --gain back to 50% alpha was not enough —
   at a glance it still read as the same panel twice.

   The blue is this file's existing "hedge / conditional" colour
   (.rr-waiver.t-insurance, .type-chip.w-insurance), which is exactly what
   selling a starter is: you can, but only if the drop-off really is that small.
   The purple is the board's existing "stash" colour — bet on the role, not the
   stat line — which is exactly what a 2-for-1 is.

   Both also get --lime out of the panel borders entirely, which was the real
   problem: lime is this site's active/selected/focus token (.main-nav a.active,
   .seg-btn[aria-selected], input :focus), so a static lime arc read as "this
   panel is focused". */
.rr-col.col-afford{border-top-color:var(--gain)}
.rr-col.col-starter-chip{border-top-color:var(--info)}
.rr-col.col-upgrade{border-top-color:var(--warn)}
.rr-col h3{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 3px;display:flex;align-items:center;gap:8px;
}
.rr-col.col-afford h3{color:var(--gain)}
.rr-col.col-starter-chip h3{color:var(--info)}
.rr-col.col-upgrade h3{color:var(--warn)}
.rr-col h3 svg{width:14px;height:14px;flex:0 0 auto}
/* A col-sub says what the list contains. It is not the place for method: it
   sits between the heading and the content, so the reader pays it before being
   allowed to see anything. Two lines, ~140 characters. The clamp is structural
   so a longer string cannot quietly reflow the panel later. */
.rr-col .col-sub{
  font-family:'Inter',sans-serif;font-size:12px;color:var(--mute);margin:0 0 12px;line-height:1.5;
  text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.rr-item{
  display:flex;align-items:center;gap:9px;min-width:0;padding:9px 10px;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:8px;margin-bottom:5px;
}
.rr-item .ri-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13.5px;text-transform:uppercase;
  color:var(--white);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rr-item .ri-meta{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.06em;
  color:var(--mute);flex:0 0 auto;text-transform:uppercase;
}
.rr-item .ri-why{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-dim);
  white-space:nowrap;text-align:right;
}
.rr-item .ri-num{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13px;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.rr-item .ri-num i{
  font-style:normal;font-size:9.5px;letter-spacing:.06em;color:var(--mute-dim);margin-left:2px;
}
.rr-item .ri-num.free{color:var(--gain)}
.rr-item .ri-num.cost{color:var(--loss)}
/* Stacked variant: the reason gets its own wrapping line instead of being
   squeezed onto the right of the row. Starter-as-a-chip and Consolidation
   both carry a sentence, not a three-word tag. */
.rr-item.stacked{flex-wrap:wrap;row-gap:5px}
.rr-item.stacked .ri-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.rr-item.stacked .ri-why{
  flex:1 0 100%;text-align:left;white-space:normal;text-transform:none;
  font-size:12px;letter-spacing:.01em;line-height:1.55;color:var(--prose);text-wrap:pretty;
}
/* Two kinds of "no rows".
   .rr-none          - genuine absence. One short sentence, dashed, centred.
   .rr-none.reasoned - a considered rejection: the search ran, found candidates
                       and turned them down. That is a RESULT, so it takes the
                       solid-card shape this page uses for every other finding.
   --mute-dim measures 3.59:1 on --surface, under the 4.5:1 body floor and
   dimmer than the explainer above it (5.29:1). The max-width is structural: a
   centred block that cannot get wide enough to run four lines cannot commit
   that sin again. */
.rr-none{
  font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.55;color:var(--mute);
  border:1px dashed rgba(255,255,255,.14);border-radius:8px;padding:14px;
  text-align:center;text-wrap:balance;max-width:46ch;margin:0 auto;
}
.rr-none.reasoned{
  text-align:left;max-width:none;margin:0;
  background:var(--raised);
  border:1px solid var(--line-soft);border-left:3px solid var(--mute);
  border-radius:10px;padding:13px 15px;
}
.rr-none.reasoned .rn-head{
  display:flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;
}
.rr-none.reasoned .rn-head svg{width:13px;height:13px;flex:0 0 auto}
/* The rejected candidate, named. Same row grammar as .rr-item — but the number
   is --mute, never --gain: it did not clear the bar and must not read as a win. */
.rr-none.reasoned .rn-best{
  display:flex;align-items:baseline;gap:10px;margin:0 0 8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;
  line-height:1.25;color:var(--white);
}
.rr-none.reasoned .rn-best .rn-deal{text-transform:uppercase;min-width:0}
.rr-none.reasoned .rn-best .rn-num{
  margin-left:auto;flex:0 0 auto;font-weight:900;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.rr-none.reasoned p{margin:0;font-size:12.5px;line-height:1.55;color:var(--prose);text-wrap:pretty}
.rr-none.reasoned p + p{margin-top:6px}
/* The threshold is method, not a finding about this roster. Separated so the
   seam between engine copy and UI copy becomes a deliberate line. */
.rr-none.reasoned .rn-rule{
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.5;color:var(--mute-dim);
}

/* ---------- Suggested trades ---------- */
.rr-trade{
  background:var(--raised);border:1px solid var(--line-soft);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;border-left:3px solid var(--lime-line);
}
.rr-trade .rt-line{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;
  text-transform:uppercase;color:var(--white);
}
.rr-trade .rt-give{color:var(--loss)}
.rr-trade .rt-get{color:var(--gain)}
.rr-trade .rt-arrow{color:var(--mute-dim)}
.rr-trade .rt-why{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.55;color:var(--prose);margin:0 0 9px}
.rr-trade .rt-eg{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);
}
.rr-eg-chip{
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--white);
}
.rr-eg-chip.buylow{border-color:var(--gain);color:var(--gain)}
.rr-eg-chip .bl{font-size:9px;letter-spacing:.1em;opacity:.85;margin-left:4px}

/* ---------- Waiver suggestions ---------- */
.rr-waiver{
  display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:start;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:10px;
  padding:13px 15px;margin-bottom:8px;border-left:3px solid var(--mute);
}
.rr-waiver.t-upgrade{border-left-color:var(--lime-line)}
.rr-waiver.t-need{border-left-color:var(--warn)}
.rr-waiver.t-insurance{border-left-color:var(--info)}
.rr-waiver.t-depth{border-left-color:var(--line)}
.type-chip.w-upgrade{color:var(--lime-text)}
.type-chip.w-need{color:var(--warn)}
.type-chip.w-insurance{color:var(--info)}
.type-chip.w-depth{color:var(--mute)}
.rr-waiver .rw-drop{color:var(--mute);font-style:italic}
.rt-starter{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warn);border:1px solid currentColor;border-radius:4px;
  padding:2px 5px 1px;margin-left:7px;vertical-align:middle;
}
.bet-chip,.cut-chip{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;border-radius:5px;padding:3px 7px 2px;flex:0 0 auto;
  border:1px solid currentColor;
}
.bet-chip.b-established{color:var(--gain)}
.bet-chip.b-rolebet{color:var(--warn)}
.bet-chip.b-spec{color:var(--mute-dim)}
.tie-chip{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute-dim);flex:0 0 auto;
}
.rr-waiver .rw-odds{
  display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--mute-dim);
  border-left:2px solid var(--line);padding-left:9px;
}
.rr-waiver .rw-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.rr-waiver .rw-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14.5px;text-transform:uppercase;color:var(--white);
}
.rr-waiver .rw-why{
  grid-column:1 / -1;font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.55;color:var(--prose);margin:0;
}
.rr-waiver .rw-right{display:flex;align-items:flex-end;gap:14px;flex:0 0 auto}
/* The bid is the number the reader acts on — they read it and then type it
   into a bid box — and it was set at 14px, the same optical weight as body
   text, with four other figures around it. */
.rr-waiver .rw-bid{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto}
.rr-waiver .rw-bid b{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:21px;line-height:1;
  color:var(--white);font-variant-numeric:tabular-nums;
}
/* The unit sits under the number rather than in the section note alone: on a
   phone the heading has scrolled away by the third row, and "14%" with no
   denominator reads as rostered-%, which is the commonest bare percentage in
   a fantasy interface and therefore a plausible wrong answer. */
.rr-waiver .rw-bid .u{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
}
/* The bottom of the scale is a word, not a number, so it is not typeset like
   one competing for attention with the real bids above it. */
.rr-waiver .rw-bid.word b{font-size:15px;color:var(--mute)}
/* What everyone else says, divided from what we say. */
.rr-waiver .rw-board{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto;
  padding-right:14px;border-right:1px solid var(--line);
}
.rr-waiver .rw-board span{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute-dim);white-space:nowrap;
}
.rr-waiver .rw-board b{font-weight:900;color:var(--mute)}
.rr-starts-chip{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-lime);background:var(--lime);border-radius:5px;padding:3px 7px 2px;flex:0 0 auto;
}

/* ---------- Roster shape strip ---------- */
.rr-shape{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
}
.rr-shape b{color:var(--white);font-weight:900}

/* ---------- The two scores, each against its own par ---------- */
.rr-meters{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media (max-width:640px){.rr-meters{grid-template-columns:1fr}}
.rm{
  background:var(--raised);border:1px solid var(--line-soft);border-radius:10px;padding:11px 14px 13px;
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;
}
.rm-label{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
}
.rm-val{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:26px;line-height:1;
  color:var(--white);font-variant-numeric:tabular-nums;grid-row:2;
}
.rm-base{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute-dim);grid-row:2;justify-self:end;
}
.rm-bar{
  grid-column:1 / -1;grid-row:3;position:relative;height:5px;margin-top:9px;
  background:var(--line-soft);border-radius:3px;overflow:hidden;display:block;
}
.rm-bar u{position:absolute;left:0;top:0;bottom:0;background:var(--mute);border-radius:3px;text-decoration:none}
.rm-bar i{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--white);opacity:.8;z-index:2}
.rm.over .rm-bar u{background:var(--gain)}
.rm.over .rm-val{color:var(--gain)}
.rm.under .rm-bar u{background:var(--warn)}
.rm.under .rm-val{color:var(--warn)}

@media (max-width:640px){
  /* A one-line row with a name, a rank, a tag and a number has four things
     competing for 300px, and .ri-name loses first — "BLAKE COR..." is not a
     player. Let the row wrap and give the trailing tag its own line, which is
     what .rr-item.stacked already does at every width. */
  .rr-item{flex-wrap:wrap;row-gap:4px}
  .rr-item .ri-name{white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 auto}
  .rr-item .ri-why{flex:1 0 100%;text-align:left;order:9}
  .rr-none.reasoned .rn-best{flex-wrap:wrap}
  .rr-none.reasoned .rn-best .rn-num{margin-left:0;flex:1 0 100%}
  .rr-waiver{grid-template-columns:1fr}
  .rr-waiver .rw-right{justify-content:flex-start}
}

/* Hero breakdown: what the headline number is made of. Starters and bench are
   separate components of one total, so they read as a pair of small figures
   under the hero rather than competing with it. */
.tv-hero-split {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 8px 0 0; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
}
.tv-hero-split b { color: var(--white); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* The "/wk" unit rides the number at a smaller size so the figure still reads
   as one token, while making clear it is points per week rather than a score. */
.rs-delta i, .ri-num i {
  font-style: normal; font-size: .72em; opacity: .6;
  margin-left: 1px; letter-spacing: 0;
}

/* Column headers for the slot table. The relativity of the numbers is stated
   once, up front, where the eye lands before it starts scanning rows. */
.rr-slot-head{
  display:grid;grid-template-columns:62px 1fr 82px;gap:12px;
  padding:0 12px 6px;border-left:3px solid transparent;
}
.rr-slot-head span{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute-dim);
}
.rr-slot-head span:nth-child(3){text-align:right}

@media (max-width:640px){ .rr-slot-head{display:none} }

/* Run control. The report is produced on request, so this is the one thing on
   the roster card that should read as the next step. */
.rr-run{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
}
.rr-run .btn[disabled]{opacity:.45;cursor:not-allowed}
.rr-run-hint{font-size:12px;color:var(--mute)}

/* ---------- Roster toolbar ----------
   The count and the one destructive control on this card, sitting directly
   under the chips they act on and ABOVE the .rr-run divider, so neither ever
   reads as part of Run Report.

   Both used to live inside the "Paste a whole roster instead" disclosure, which
   is about pasting — so the clear button and the player count were invisible
   unless you opened a drawer that had nothing to do with either.

   Hidden entirely at zero players: .tp-empty already explains that state, and a
   disabled Clear answers a question nobody is asking. */
.rr-roster-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.rr-roster-bar[hidden]{display:none}
/* .tv-roster-count carries margin-left:auto for the paste row it used to live in. */
.rr-roster-bar .tv-roster-count{margin-left:0}

/* Quiet until intent. --mute at rest (5.29:1 — --mute-dim would be 3.59:1 and
   fail at 11px), --loss only on hover or focus. Nothing on this card may
   out-shout the lime Run Report, and a standing pink button would have. */
.rr-clear{
  all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;border:1px solid transparent;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  transition:color .12s,border-color .12s,background .12s;
}
.rr-clear[hidden]{display:none}
.rr-clear svg{width:13px;height:13px;flex:0 0 auto}
.rr-clear:hover{color:var(--loss);border-color:var(--line);background:var(--raised)}
.rr-clear:focus-visible{color:var(--loss);border-color:var(--line)}

/* Armed. Thirteen names entered by hand and persisted to localStorage: one
   stray click must not be able to end them. The confirmation happens in place
   rather than in an OS dialog, and it states the count — "13" is the fact that
   stops the wrong click. */
.rr-clear-confirm{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;
  padding:5px 6px 5px 13px;border-radius:999px;
  border:1px solid var(--avoid);background:rgba(226,75,74,.10);
}
.rr-clear-confirm[hidden]{display:none}
.rr-clear-q{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--loss);
}
.rr-clear-yes,.rr-clear-no{
  all:unset;box-sizing:border-box;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid transparent;
  transition:background .12s,color .12s;
}
.rr-clear-yes{background:var(--avoid);color:#0B0B10}   /* 4.99:1 */
.rr-clear-yes:hover,.rr-clear-yes:focus-visible{background:#ef5f5e}
.rr-clear-no{color:var(--mute)}
.rr-clear-no:hover,.rr-clear-no:focus-visible{color:var(--white);background:rgba(255,255,255,.07)}

/* At 390px the group takes the row and stacks: question on its own line, the
   two answers side by side beneath it. space-between on a wrapping pill dropped
   Cancel onto a second line inside a 999px radius, which reads as a lozenge
   rather than a control — so the radius relaxes and the buttons share the row. */
@media (max-width:640px){
  .rr-clear-confirm{
    width:100%;margin-left:0;border-radius:12px;padding:10px 12px;row-gap:9px;
  }
  .rr-clear-q{flex:1 0 100%}
  .rr-clear-yes,.rr-clear-no{flex:1 1 0;text-align:center}
}

/* ---------- Trade cards: one component, any arity ---------- */
/* Three panels, not four: the two gives and the one get the heading names.
   Consolidation left that grid because its rows were transactions, not
   inventory. */
.rr-two.rr-three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1040px){.rr-two.rr-three{grid-template-columns:1fr}}
/* At a third of the width these rows are as tight as they are on a phone, so
   they take the phone's wrapping at every width rather than only under 640px. */
.rr-three .rr-item{flex-wrap:wrap;row-gap:4px}
.rr-three .rr-item .ri-name{white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 auto}
.rr-three .rr-item .ri-why{flex:1 0 100%;text-align:left;order:9}

/* The net figure in the headline, where it can be compared — rather than in
   sentence four of a paragraph that also carries a slot-local number wearing the
   same "/week" clothes. margin-left:auto so a two-name give side pushes it right
   and wraps rather than crushing the names. */
.rr-trade .rt-num{
  margin-left:auto;flex:0 0 auto;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:15px;
  color:var(--gain);font-variant-numeric:tabular-nums;
}
.rr-trade .rt-num i{font-style:normal;font-size:.72em;opacity:.6;margin-left:1px;letter-spacing:0}

/* Alternatives, not additions. Nested under the row they conflict with, because
   "pick one" has to say which one — a divider across the section would claim
   every row below it excludes every row above it, which is not true. */
.rr-trade-group{margin-bottom:12px}
.rr-trade-group .rr-trade{margin-bottom:6px}
.rr-trade.alt{border-left-color:var(--mute);margin-left:16px}
.rr-trade .rt-alt{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin:0 0 7px;
}

/* Who would accept it, in place of the names that used to sit here. Same
   separated-rule grammar as .rn-rule: it is a condition on the deal, not a
   finding about this roster. */
.rr-trade .rt-cond{
  font-family:'Inter',sans-serif;font-size:12px;line-height:1.55;color:var(--mute);
  margin:9px 0 0;padding-top:9px;border-top:1px solid var(--line-soft);text-wrap:pretty;
}
@media (max-width:640px){ .rr-trade.alt{margin-left:8px} }

/* ---------- Who to drop ----------
   A sibling of .rr-waiver by design: the two sections answer halves of one
   question — an add costs a roster spot, and this is what that spot costs — so
   they share a grid, a rail and a right-hand price column.

   Priority is a BAND, not a rank. On a real roster the three cheapest cuts are
   0, 0 and 1 season points apart: a numbered list would promise an ordering the
   model does not have, and a bar would render the three most valuable rows as
   three empty bars. The rail changes colour where free stops, which is the one
   fact a sort order cannot show. */
.rr-cut{
  display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:start;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:10px;
  padding:13px 15px;margin-bottom:8px;border-left:3px solid var(--mute);
}
/* --lime is this page's "recommended action" rail (.rr-trade, .rr-waiver
   .t-upgrade), which is what a free cut is. Safe here where it was not safe on
   a panel border: a rail is not a focus ring. --warn is the same "do not do
   this casually" hue as .rr-col.col-upgrade. */
.rr-cut.c-free{border-left-color:var(--lime-line)}
.rr-cut.c-cheap{border-left-color:var(--mute)}
.rr-cut.c-costs{border-left-color:var(--warn)}
.rr-cut .rc-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.rr-cut .rc-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14.5px;
  text-transform:uppercase;color:var(--white);
}
.rr-cut .rc-why{
  grid-column:1 / -1;font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.55;
  color:var(--prose);margin:0;text-wrap:pretty;
}
.rr-cut .rc-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.rr-cut .rc-ctx{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
.rr-cut .rc-cost{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:14px;color:var(--white);
  font-variant-numeric:tabular-nums;text-align:right;
}
.rr-cut .rc-cost i{font-style:normal;font-size:.72em;opacity:.6;margin-left:1px;letter-spacing:0}
.rr-cut .rc-cost span{
  display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--mute);
}
/* The bottom of the scale is a word, not a number — the same move .rw-faab.bare
   makes for "$0 / Free claim". "0.0/wk" is honest and reads as no information;
   "Free" is the answer the row exists to give. */
.rr-cut .rc-cost.bare{color:var(--lime-text);font-size:13.5px}
.rr-cut.c-costs .rc-cost{color:var(--warn)}
/* Both chips borrow a hue the reader has already been taught on this page:
   --gain is the Bench Pieces panel he also appears in, var(--info) is this file's
   insurance colour, and a last backup is insurance by definition. */
.cut-chip.k-trade{color:var(--gain)}
.cut-chip.k-cover{color:var(--info)}
@media (max-width:640px){
  .rr-cut{grid-template-columns:1fr}
  .rr-cut .rc-right{justify-content:flex-start}
  .rr-cut .rc-cost{text-align:left}
}

/* ---------- Section shell ----------
   Five substantial sections used to be introduced by an 11px grey label —
   smaller and quieter than the content under it — with 22px of air between
   them and no change of ground, so the whole report read as one scroll. Each
   section is now a card on the grey page, which is the elevation logic the
   rest of the site already uses.

   Scoped to .rr-sec rather than restyling .tv-changes, which Trade Verdict
   shares and which should not change because of a decision made here. */
.rr-sec{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px 22px 22px;
  margin-top:18px;
}
.rr-sec-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
/* The numeral is a fill, which is where lime works on a light ground — as text
   it is 1.06:1 on white. It also gives the report a reading order, which it
   genuinely has: your slots, then what you can spare, then the trades, then
   the wire, then who to cut to make room for the add. */
.rr-sec-n{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:11px;letter-spacing:.14em;
  color:var(--on-lime);background:var(--lime);border-radius:5px;padding:4px 7px 3px;
  flex:0 0 auto;line-height:1;
}
.rr-sec-head h4{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:21px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--white);margin:0;
}
.rr-sec-lede{
  flex:1 0 100%;margin:0;font-size:12.5px;line-height:1.5;color:var(--mute);text-wrap:pretty;
}
/* A card inside a card reads as a double frame. One level down, the inner
   panels sit on --raised instead, which keeps their coloured tops as the thing
   that distinguishes them. */
.rr-sec .rr-col,
.rr-sec .rr-trade,
.rr-sec .rr-waiver,
.rr-sec .rr-cut{
  background:var(--raised);
  border-color:var(--line-soft);
}
@media (max-width:640px){
  .rr-sec{padding:16px 14px 18px;margin-top:12px}
  .rr-sec-head h4{font-size:18px}
}

/* ---------- Framing callout inside a report section ----------
   The callout was drawn in the same vocabulary as a list row — same --raised
   ground, same 10px radius, same hairline, same 3px left rail — so the only
   thing left to say "this is a different kind of object" was spacing, and the
   spacing was zero: .tv-callout carries margin-top only, and the rows space
   themselves below, so the list had no leading edge and the callout silently
   became row zero with a hairline drawn through it.

   It stops being a card. A callout is a statement ABOUT the list, sometimes the
   only thing in the section, and it is now typeset that way: no box, on the
   card's own white, with a 2px near-black rule. Grey-on-white is the token for
   "list item" in this section; giving it up removes the ambiguity outright.
   Hue on a rail now means exactly one thing — row type.

   Scoped to .rr-sec because .tv-callout is shared with Trade Verdict, which
   should not change because of a decision made here. */
.rr-sec .tv-callout{
  background:none;
  border:0;
  border-left:2px solid var(--white);
  border-radius:0;
  padding:1px 0 1px 14px;   /* 14px puts the text on the rows' text edge */
  margin:0 0 20px;
}
/* Rows sit 8px apart, so the callout-to-list gap has to be a different order of
   gap, not a bigger one of the same kind. 20px is the first step that reads as
   a group boundary rather than a loose row. It costs nothing net: dropping the
   callout's border and 14/16px padding gives back what the 20px spends. */
.rr-sec .rr-sec-head + .tv-callout{margin-top:0}