/* The player record screen. Everything here lives inside #careerRoot and
   borrows the app's cards, stats, pills, chips and modal; only the pieces the
   design system has no class for are defined below. Tokens only, so night and
   day both work, and no fixed pixel width anywhere outside the games table,
   which sits in its own scroller so a wide box score cannot push the page.

   The sub tabs carry .ntabs and .crtabs together: the look is the Nutrition
   and Health screens' on purpose, and the rules are repeated here so this
   screen still looks right on its own.

   Two colours carry meaning on this screen and nothing else may use them:
   --cool is a number this app measured, --grape is a number somebody typed in. */

/* ----------------------------------------------------------- sub tabs */
.crtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.crtabs button{
  padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);
  font:800 11px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute);transition:.16s;
}
.crtabs button:hover{color:var(--ink);border-color:var(--hot)}
.crtabs button.on{color:var(--hot);border-color:var(--hot);background:var(--panel)}
.crtabs button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

#crPanel .card,#crShoot .card,#crHead .card{margin-bottom:14px}
.crband{margin-bottom:14px}
.crband:empty{display:none}
/* A tile is about 100px wide on a laptop and "championships" is wider than
   that, so the label wraps instead of running over the tile next to it. */
.crband .stat small{line-height:1.3;overflow-wrap:anywhere}

/* ------------------------------------------------- where a number came from
   Measured and self reported never look the same, anywhere on this screen. */
.crtag{
  display:inline-block;padding:4px 9px;border-radius:999px;border:1px solid currentColor;
  font:800 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;
}
.crtag.measured{color:var(--cool)}
.crtag.logged{color:var(--grape)}
.stat.crm b{color:var(--cool)}
.stat.crl b{color:var(--grape)}
/* The word on a stat tile, because the top band mixes the two and colour on
   its own is not a label in greyscale or to a colour blind reader. */
.crsrc{display:block;margin-top:7px;font:800 8px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;font-style:normal}
.stat.crm .crsrc{color:var(--cool)}
.stat.crl .crsrc{color:var(--grape)}

.crhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.crhead h3{margin-bottom:0}

/* --------------------------------------------------------------- the card */
.crtop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;align-items:center}
.crface{grid-area:1/1}
.crwho{grid-area:1/2}
.crEdit{grid-area:1/3}
.crbadges{grid-area:2/1/auto/-1}
.crface{flex:none;width:64px;height:64px;border-radius:18px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center}
.crface img{display:block;width:100%;height:100%;object-fit:cover}
.crball{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--hot),var(--hot2))}
.crwho{min-width:0}
.crwho h2{font:800 25px/1.15 var(--mono);letter-spacing:-1px;color:var(--ink);overflow-wrap:anywhere}
.crbadges{display:flex;flex-wrap:wrap;gap:6px}
.crbadges:empty{display:none}
.crEdit{flex:none;white-space:nowrap}
@media(max-width:560px){
  .crtop{grid-template-columns:auto minmax(0,1fr);gap:10px 12px}
  .crface{width:52px;height:52px;border-radius:15px}
  .crwho h2{font-size:21px}
  .crEdit{grid-area:3/1/auto/-1;width:100%}
}

.crfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:16px}
.crfacts div{padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel2)}
.crfacts dt{font:700 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}
.crfacts dd{margin-top:6px;font:800 14px/1.25 var(--mono);color:var(--ink);overflow-wrap:anywhere}

/* --------------------------------------------------- the shooting story */
.crlines{display:grid;gap:7px}
.crline{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.4fr);gap:10px;align-items:center;
  padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
}
.crline-l b{display:block;font:800 13.5px/1.2 var(--mono);color:var(--ink)}
.crline-l small{display:block;margin-top:4px;font:700 10px/1 var(--mono);color:var(--mute)}
.crline-v{font:700 13px/1.2 var(--mono);color:var(--mute)}
.crline-v b{font:800 22px/1 var(--mono);color:var(--cool);letter-spacing:-.8px;margin-right:5px}
.crline-m{font-size:12.5px;line-height:1.45;color:var(--mute);overflow-wrap:anywhere}
.crline.off{opacity:.62}
.crnil{font:700 10px/1 var(--mono);letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}
@media(max-width:620px){
  .crline{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:8px}
  .crline-m{grid-column:1/-1}
}

/* a bar a day, thirty days. A day nobody trained is an empty slot, not a zero. */
.crstripwrap{margin-top:16px}
.crstrip{display:flex;align-items:flex-end;gap:2px;height:74px;padding:0 2px}
.crbar{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;border-bottom:2px solid var(--line)}
.crbar i{display:block;width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--hot2),var(--hot));min-height:3px}
.crbar.off i{display:none}
.crends{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font:700 10px/1.3 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}

.crsplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:14px}
.crnote{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.crnote b{display:block;font:800 9px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--hot);margin-bottom:7px}
.crnote p{font-size:13px;line-height:1.55;color:var(--ink)}

/* ---------------------------------------------------------- the spine */
.crlist{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.crspine{display:grid;gap:8px;margin-top:16px;position:relative}
.crevent{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;text-align:left;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);transition:.14s;
}
.crevent:hover{border-color:var(--hot);transform:translateX(3px)}
.crevent:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.crdot{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--hot);flex:none}
.cr-milestones .crdot{background:var(--cool)}
.cr-accolades .crdot{background:var(--good)}
.cr-nil .crdot{background:var(--grape)}
.crevent-b{min-width:0}
.crevent-b b{display:block;font:800 14px/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.crevent-b em{display:block;margin-top:3px;font-style:normal;font:700 10px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.crevent-n{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
.crevent-w{font:700 11px/1.3 var(--mono);color:var(--mute);white-space:nowrap;text-align:right}
@media(max-width:560px){
  .crevent{grid-template-columns:auto minmax(0,1fr)}
  .crevent-w{grid-column:2;text-align:left;margin-top:4px}
}

/* ------------------------------------------------------- the games table
   The table gets its own scroller. A wide box score scrolls inside the card
   instead of pushing the whole screen sideways on a phone.

   overflow-x and max-width are not enough on their own: the view sits in a
   grid item whose min-width is auto, so a 620px table grew every ancestor
   and at 375px the right hand side of every card on the screen ran off it.
   contain:inline-size takes the table out of its own width calculation, so
   the scroller is sized by the card and the table scrolls inside it. Inline
   axis only: the card still grows to the table's height, and nothing here
   contains layout or paint, so sticky and fixed elsewhere are untouched. */
.crscroll{overflow-x:auto;min-width:0;max-width:100%;contain:inline-size;margin-top:16px;border-radius:12px;border:1px solid var(--line)}
.crtable{width:100%;min-width:620px;border-collapse:collapse;background:var(--panel2)}
.crtable th{padding:0;text-align:left;border-bottom:1px solid var(--line);background:var(--panel)}
.crtable th button{
  width:100%;padding:10px 11px;text-align:left;
  font:800 9px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute);transition:.14s;
}
.crtable th button:hover{color:var(--ink)}
.crtable th button.on{color:var(--hot)}
.crtable td{padding:10px 11px;border-bottom:1px solid var(--line);font:700 13px/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.crtable td.crw{font-weight:800;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.crtable td.crnil{color:var(--dim);font-weight:700}
.crtable tbody tr{cursor:pointer;transition:.14s}
.crtable tbody tr:hover td{background:var(--panel)}
.crtable tbody tr:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
.crtable tbody tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------ sharing */
.crshares{display:grid;gap:8px;margin-top:14px}
.crshare{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
}
.crshare b{display:block;font:800 14px/1.25 var(--mono);color:var(--ink)}
.crshare small{display:block;margin-top:3px;font-size:12px;color:var(--mute)}
.crpills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* --------------------------------------------------------- the forms */
.crform{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:10px}
.crform .wide{grid-column:1/-1}
.crlab{display:grid;gap:5px;font:800 10px/1.2 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute)}
.crlab em{font-style:normal;color:var(--dim)}
.crlab input,.crlab select{
  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.2 var(--sans);
}
.crlab input:focus,.crlab select:focus{outline:2px solid var(--hot);outline-offset:1px}
.crlab input::placeholder{color:var(--dim)}
.cractions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}

/* --------------------------------------------------- the standing line */
.crplain{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--mute)}
.card .crplain{margin-top:12px}