/* The affiliate page, part "credits": the Expert credits table on a kit card in the block's picture. The block, its
   words, the stage, the card and its head are the kit's (.k-blk, .k-pic, .k-card, .k-card-h, .k-tile); this file holds
   the table: the activity on the left, the amount on the right over a bar at its share of the top row (the row's
   --w, set in the markup), the top row's bar in the primary and the others in its tint. The theme's tokens, so the dark
   theme follows. Nothing moves. */

.pg-affiliate .af-cr-card{width:min(500px,100%)}
.pg-affiliate .af-cr-card .k-card-h{gap:12px;height:56px;padding:0 20px}
.pg-affiliate .af-cr-tile{width:30px;height:30px;border-radius:9px}
.pg-affiliate .af-cr-tile svg{width:16px;height:16px}
.pg-affiliate .af-cr-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font:400 15px/1.4 var(--sans);color:var(--k-text);text-align:left}
.pg-affiliate .af-cr-tbl th,.pg-affiliate .af-cr-tbl td{padding:16px 20px;vertical-align:middle}
.pg-affiliate .af-cr-tbl thead th{padding:14px 20px 12px;border-bottom:1px solid var(--line);font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pg-affiliate .af-cr-tbl thead th+th,.pg-affiliate .af-cr-tbl td{width:46%}
.pg-affiliate .af-cr-tbl tbody tr+tr>*{border-top:1px solid var(--line)}
.pg-affiliate .af-cr-tbl tbody th{font:500 15.5px/1.35 var(--sans);color:var(--ink2)}
.pg-affiliate .af-cr-tbl tbody th small{display:block;margin-top:4px;font:400 13px/1.3 var(--sans);color:var(--mute)}
.pg-affiliate .af-cr-tbl td b{display:block;font:600 22px/1 var(--display);letter-spacing:-.02em;color:var(--ink2)}
.pg-affiliate .af-cr-bar{display:block;height:6px;margin-top:10px;border-radius:999px;background:linear-gradient(var(--k-ai-soft),var(--k-ai-soft)) left/100% 100% no-repeat}
.pg-affiliate .af-cr-bar::after{content:"";display:block;width:var(--w,0%);height:100%;border-radius:inherit;background:color-mix(in srgb,var(--ai) 45%,transparent)}
.pg-affiliate .af-cr-max .af-cr-bar::after{background:var(--ai)}
.pg-affiliate .af-cr-max{background:color-mix(in srgb,var(--ai) 4%,transparent)}

@media (max-width:760px){
  .pg-affiliate .af-cr-card .k-card-h{padding:0 16px}
  .pg-affiliate .af-cr-tbl th,.pg-affiliate .af-cr-tbl td{padding:14px 16px}
  .pg-affiliate .af-cr-tbl thead th{padding:12px 16px 10px}
  .pg-affiliate .af-cr-tbl thead th+th,.pg-affiliate .af-cr-tbl td{width:40%}
  .pg-affiliate .af-cr-tbl tbody th{font-size:15px}
  .pg-affiliate .af-cr-tbl td b{font-size:20px}
}