/* community (UX redesign 2026-10-06): Career + Community on one page (js/ui/community.js, mockup cm-final.webp).
   Phone: career card, then tabs + leaderboard, stacked. Wide (>= 900px): career ~32% left, community ~68% right. */
html.lay-desk .pgScr.coScr { max-width:1280px; }
.coGrid { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.coMain { min-width:0; display:flex; flex-direction:column; gap:10px; }
.coScr { container:pg / inline-size; } /* M2: see loadout.css */
@container pg (min-width:760px) {
  .coGrid { display:grid; grid-template-columns:minmax(300px,32fr) 68fr; align-items:start; gap:14px; }
  .coCareer { position:sticky; top:8px; }
}

/* ---------- left: Your career ---------- */
.coCareer { margin:0; padding:12px 12px 10px; display:flex; flex-direction:column; gap:10px; }
.coHd { margin:0; font:400 22px/1.05 var(--fh); letter-spacing:.4px; text-transform:uppercase; color:var(--yl1); text-shadow:var(--so2); }
.coId { display:flex; gap:12px; align-items:center; }
.coAv { width:92px; height:92px; flex:none; border-radius:18px; border:3px solid var(--ol); overflow:hidden; background:radial-gradient(circle at 50% 30%,#57b0f5,#1a58a8 72%); display:flex; align-items:center; justify-content:center; font:400 38px var(--fh); color:#fff; box-shadow:0 3px 0 rgba(4,12,30,.55); }
.coAv img, .coAv .art { width:100%; height:100%; object-fit:cover; display:flex; align-items:center; justify-content:center; }
.coWho { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.coNameRow { display:flex; align-items:center; gap:8px; min-width:0; }
.coName { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 26px/1.05 var(--fh); color:#fff; text-shadow:var(--so); }
.coShield { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:42px; padding:0 4px 4px; font:400 19px/1 var(--fh); color:#fff; text-shadow:var(--so2);
  background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); border:3px solid var(--ol); border-radius:10px 10px 50% 50% / 10px 10px 40% 40%; box-shadow:inset 0 2px 0 rgba(255,255,230,.7), 0 2px 0 var(--ol); }
.coShield.sm { min-width:30px; height:32px; font-size:15px; border-width:2.5px; }
.coLegend { font:800 12px/1 var(--fb); color:var(--gold); }
.coXp { height:12px; border:2.5px solid var(--ol); border-radius:8px; background:#0d2a55; overflow:hidden; box-shadow:inset 0 2px 0 rgba(0,0,0,.3); }
.coXp i { display:block; height:100%; background:linear-gradient(180deg,#9fe0ff,#3a9cf0); border-radius:5px; }
.coXpT { font:800 13px/1.1 var(--fb); color:var(--mut); }
.coTitle { align-self:flex-start; padding:3px 10px 4px; font:400 16px/1 var(--fh); letter-spacing:.4px; text-transform:uppercase; color:#fff; text-shadow:var(--so2); background:linear-gradient(180deg,#2a2a2a,#121212); border:2px solid var(--ol); border-radius:8px; transform:rotate(-2deg); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.coTitle:empty { display:none; }

.coStats { display:flex; flex-direction:column; border:3px solid var(--ol); border-radius:14px; background:rgba(8,26,58,.45); overflow:hidden; }
.coStat { display:flex; align-items:center; gap:10px; padding:6px 10px; min-height:36px; }
.coStat + .coStat { border-top:2px solid rgba(8,20,45,.55); }
.coStat:nth-child(even) { background:rgba(255,255,255,.04); }
.coSi { flex:none; width:24px; text-align:center; font-size:18px; line-height:1; }
.coSk { flex:1 1 auto; min-width:0; font:400 15px/1.1 var(--fh); letter-spacing:.3px; text-transform:uppercase; color:var(--mut); }
.coSv { flex:none; font:400 17px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); text-align:right; }
.coSv small { font:inherit; font-size:.85em; color:var(--mut); }
.coSv .gold { color:var(--gold); }

.coCartels { display:flex; flex-direction:column; gap:6px; }
.coCartel { display:grid; grid-template-columns:30px minmax(0,1fr) minmax(70px,.9fr) auto; align-items:center; gap:8px; padding:5px 8px; border:2.5px solid var(--ol); border-radius:12px; background:rgba(8,26,58,.45); }
.coMark { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:2.5px solid var(--ol); background:linear-gradient(180deg,#3d86d8,#1c4f95); font:400 16px/1 var(--fh); color:#fff; }
.coCn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 14px/1.1 var(--fh); letter-spacing:.3px; text-transform:uppercase; color:#fff; text-shadow:var(--so2); }
.coBar { height:12px; border:2.5px solid var(--ol); border-radius:8px; background:#0d2a55; overflow:hidden; }
.coBar i { display:block; height:100%; border-radius:5px; box-shadow:inset 0 2px 0 rgba(255,255,255,.4); }
.coWord { font:400 13px/1 var(--fh); letter-spacing:.3px; text-transform:uppercase; text-shadow:var(--so2); min-width:64px; text-align:right; }
/* F6 (review 2026-10-07): the full cartel panel (standing, specialty, perk ladder, Favor) */
.coCxNote { margin:-4px 2px 0; font:700 12px/1.35 var(--fb); color:var(--mut); }
.coCx { border:2.5px solid var(--ol); border-radius:12px; background:rgba(8,26,58,.45); overflow:hidden; }
.coCx .coCartel { border:0; border-radius:0; background:none; }
.coCx .coCn { white-space:normal; overflow-wrap:anywhere; line-height:1.05; }
#coCartels { scroll-margin-top:84px; }
.coCx.fav { box-shadow:0 0 0 2px var(--yl2); background:linear-gradient(180deg,rgba(255,210,63,.12),rgba(8,26,58,.45) 60%); }
.coCxB { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 8px 8px 46px; }
.coCxS { flex:1 1 100%; font:700 12px/1.3 var(--fb); color:#bcd6f5; } .coCxS b { color:#fff; }
.coSteps { flex:1 1 auto; display:flex; flex-wrap:wrap; gap:4px; }
.coStep { padding:2px 6px 3px; border-radius:7px; border:1.5px solid rgba(140,200,255,.3); background:rgba(8,20,45,.6); font:800 10.5px/1.2 var(--fb); color:var(--mut); white-space:nowrap; }
.coStep.on { color:#0c2a0a; background:linear-gradient(180deg,#a8ff7a,#3cc42a); border-color:var(--ol); }
.coCxP { flex:1 1 100%; margin:0; font:800 11.5px/1.35 var(--fb); color:#ffe6a6; }
.coFavB { flex:none; margin-left:auto; min-height:32px; font-size:13px; padding:3px 10px 5px; }
.coFav { flex:none; margin-left:auto; padding:3px 9px 4px; border-radius:9px; border:2px solid var(--ol); background:linear-gradient(180deg,var(--yl1),var(--yl3)); font:400 13px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.coCartels.coCxHl { animation:coCxHl 1.6s ease-out; border-radius:12px; }
@keyframes coCxHl { 0%,40% { box-shadow:0 0 0 3px var(--yl1); } 100% { box-shadow:0 0 0 3px rgba(255,210,63,0); } }

.coActs { display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.coLink { align-self:center; padding:4px 8px; background:none; border:0; font:800 13px var(--fb); color:var(--mut); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.coLink:hover, .coLink:focus-visible { color:#fff; }
.coPriv { margin:0; text-align:center; }

/* ---------- right: tabs ---------- */
.coTabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.coTabs button { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:52px; padding:6px 8px 8px; border:3px solid var(--ol); border-radius:14px; cursor:pointer;
  background:var(--panelBg); box-shadow:var(--panelSh); color:#fff; font:400 17px/1 var(--fh); letter-spacing:.4px; text-transform:uppercase; text-shadow:var(--so2); }
.coTabs button.on { background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); border-color:#6a3a00; box-shadow:inset 0 2px 0 rgba(255,255,230,.75), 0 3px 0 #6a3a00; }
.coTi { font-size:20px; line-height:1; text-shadow:none; }
.coTn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.coSoon { display:inline-block; padding:2px 6px 3px; font:900 10px/1 var(--fb); font-style:normal; letter-spacing:.6px; color:#d6e8ff; text-shadow:none; background:rgba(8,20,45,.75); border:1.5px solid rgba(140,200,255,.45); border-radius:6px; vertical-align:middle; }
.coTabs .coSoon { position:absolute; top:-7px; right:6px; }
@media (max-width:560px) {
  .coTabs button { flex-direction:column; gap:2px; min-height:56px; font-size:13px; padding:6px 2px 6px; }
}

.coBody { margin:0; padding:10px; min-height:260px; }
.coChips { display:flex; flex-wrap:wrap; gap:6px; }
.coChip { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:5px 12px 7px; border:2.5px solid var(--ol); border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg,#2d74c4,#1c4f95); box-shadow:inset 0 2px 0 rgba(140,205,255,.35), 0 2px 0 var(--ol); color:#fff; font:400 15px/1 var(--fh); letter-spacing:.3px; text-shadow:var(--so2); }
.coChip span { font-size:16px; text-shadow:none; }
.coChip.on { background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); border-color:#6a3a00; box-shadow:inset 0 2px 0 rgba(255,255,230,.75), 0 2px 0 #6a3a00; }
.coSub { margin:8px 2px 6px; font:800 13px/1.3 var(--fb); color:var(--mut); }

/* ---------- leaderboard table ---------- */
.coTable { border:3px solid var(--ol); border-radius:14px; background:rgba(8,26,58,.5); overflow:hidden; }
.coTh, .coRow { display:grid; grid-template-columns:52px minmax(0,1fr) minmax(90px,auto) auto; align-items:center; gap:10px; padding:0 12px; }
.coTh { min-height:36px; background:rgba(8,20,45,.55); font:400 14px/1 var(--fh); letter-spacing:.5px; text-transform:uppercase; color:var(--mut); }
.coRows { max-height:min(62vh,640px); overflow-y:auto; overscroll-behavior:contain; }
.coRow { min-height:44px; border-top:2px solid rgba(8,20,45,.5); }
.coRow:nth-child(even) { background:rgba(255,255,255,.035); }
.coRow[data-a] { cursor:pointer; }
.coRow[data-a]:hover, .coRow[data-a]:focus-visible { background:rgba(140,205,255,.14); outline:none; }
.coN { font:400 20px/1 var(--fh); color:#fff; text-shadow:var(--so2); text-align:center; }
.coN.m1 { color:#ffd23f; } .coN.m2 { color:#dfe9f5; } .coN.m3 { color:#ff9a5a; }
.coU { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 17px/1.1 var(--fh); letter-spacing:.2px; color:#fff; text-shadow:var(--so2); }
.coU small { font:800 12px var(--fb); color:var(--mut); text-shadow:none; }
.coV { justify-self:end; font:400 17px/1 var(--fh); color:#fff; text-shadow:var(--so2); white-space:nowrap; }
.coTh .coV { font-size:14px; color:var(--mut); }
.coV .gold { color:var(--gold); }
.coMut { color:var(--mut); font-size:14px; }
.coA { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:30px; }
.coMore { width:30px; height:30px; border:2px solid rgba(8,20,45,.8); border-radius:9px; background:rgba(8,20,45,.45); color:#fff; font:900 16px/1 var(--fb); cursor:pointer; }
.coMore:hover, .coMore:focus-visible { background:rgba(140,205,255,.25); }
/* your row: highlighted, and sticky at the bottom of the list while it is scrolled out of view */
.coRow.me { position:sticky; bottom:0; top:0; z-index:1; min-height:50px; border:3px solid #6a3a00; border-radius:12px; margin:4px;
  background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--or1)); box-shadow:inset 0 2px 0 rgba(255,255,230,.7), 0 -3px 10px rgba(4,12,30,.45); }
.coRow.me:hover, .coRow.me:focus-visible { background:linear-gradient(180deg,#fff08a,var(--yl2) 55%,var(--or1)); }
.coRow.me .coU small { color:#5a2a00; }
.coRow.coNotOn { border-top:3px dashed rgba(140,200,255,.35); background:rgba(255,190,26,.08); }
.coEmpty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:34px 16px; text-align:center; }
.coEmpty b { font:400 19px/1.2 var(--fh); color:#fff; text-shadow:var(--so2); }
.coEmpty span { font:800 13.5px/1.35 var(--fb); color:var(--mut); }
.coAward { margin:8px 2px 0; }
@media (max-width:560px) {
  .coTh, .coRow { grid-template-columns:36px minmax(0,1fr) auto auto; gap:6px; padding:0 8px; }
  .coU, .coV { font-size:15px; }
  .coRows { max-height:none; }
}

/* ---------- coming soon panels ---------- */
.coSoonPanel { display:flex; flex-direction:column; align-items:center; gap:10px; max-width:520px; margin:0 auto; padding:24px 8px; text-align:center; }
.coSoonIc { width:84px; height:84px; display:flex; align-items:center; justify-content:center; font-size:44px; border-radius:22px; border:3px solid var(--ol); background:radial-gradient(circle at 50% 30%,#57b0f5,#1a58a8 72%); box-shadow:0 3px 0 rgba(4,12,30,.55); }
.coSoonT { margin:0; font:400 26px/1.1 var(--fh); color:#fff; text-shadow:var(--so); }
.coSoonLead { margin:0; font:800 15px/1.35 var(--fb); color:#fff; }
.coSoonList { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; }
.coSoonList li { position:relative; padding:8px 10px 8px 34px; border:2.5px solid var(--ol); border-radius:12px; background:rgba(8,26,58,.45); font:800 14px/1.3 var(--fb); color:var(--mut); }
.coSoonList li::before { content:"✓"; position:absolute; left:11px; top:8px; font:900 14px/1.3 var(--fb); color:var(--grn); }
/* ---------- J3: where you stand, weekly rewards, friends, crew ---------- */
.coMe { margin:0 2px 8px; font:800 14px/1.35 var(--fb); color:var(--mut); }
.coMe:empty { display:none; }
.coMe b { font:400 18px/1.2 var(--fh); letter-spacing:.3px; color:var(--yl1); text-shadow:var(--so2); }
.coRw { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; padding:8px 10px; border:2.5px solid var(--ol); border-radius:12px; background:rgba(8,26,58,.45); }
.coRwT { font:400 14px/1 var(--fh); letter-spacing:.5px; text-transform:uppercase; color:var(--mut); margin-right:2px; }
.coTier { display:inline-flex; align-items:center; gap:5px; padding:4px 9px 5px; border-radius:9px; background:rgba(8,20,45,.6); border:1.5px solid rgba(140,200,255,.3); font:800 12.5px/1.2 var(--fb); color:#fff; white-space:nowrap; }
.coTier i { font-style:normal; font-size:14px; }
.coTier.t1 { border-color:rgba(255,210,63,.7); }
.coLast { flex-basis:100%; font:800 13px/1.35 var(--fb); color:var(--mut); }
.coLast b { color:var(--yl1); }
.coInv { display:flex; flex-direction:column; gap:4px; margin-top:12px; padding:10px 12px; border:2.5px solid var(--ol); border-radius:12px; background:rgba(8,26,58,.45); }
.coInv > b { font:400 17px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); }
.coInv > span { font:800 13px/1.35 var(--fb); color:var(--mut); }
.coInvL { width:100%; max-width:520px; margin:6px 0 2px; }
.coFEmpty .coInvL { margin:8px auto 4px; }
.coSign .btn { margin-top:6px; }
.coCard { padding:12px; border:3px solid var(--ol); border-radius:14px; background:rgba(8,26,58,.5); }
.coCard h3 { margin:0 0 4px; font:400 20px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); }
.coCard p { margin:0 0 6px; font:800 13.5px/1.35 var(--fb); color:var(--mut); }
.coCrewNew { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.coCrewNew .iLink { margin:6px 0 0; }
.coCrewHd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.coCrewIc { flex:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:26px; border-radius:14px; border:3px solid var(--ol); background:radial-gradient(circle at 50% 30%,#57b0f5,#1a58a8 72%); }
.coCrewNm { flex:1; min-width:0; }
.coCrewNm h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.coCrewNm small { font:800 13px var(--fb); color:var(--mut); }
.coCrewCode { display:flex; align-items:center; gap:8px; font:800 13px var(--fb); color:var(--mut); }
.coCrewCode b { font:400 20px/1 var(--fh); letter-spacing:2px; color:var(--yl1); text-shadow:var(--so2); }
.coHn { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; }
.coHn > div { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:12px; border:2.5px solid var(--ol); background:linear-gradient(180deg,rgba(40,24,90,.7),rgba(14,20,56,.7)); }
.coHn small { font:800 12px var(--fb); letter-spacing:.3px; text-transform:uppercase; color:var(--mut); }
.coHn b { font:400 24px/1.05 var(--fh); color:#fff; text-shadow:var(--so2); }
.coHn span { font:800 12px/1.3 var(--fb); color:var(--mut); }
.coMem { border:2.5px solid var(--ol); border-radius:12px; overflow:hidden; background:rgba(8,20,45,.35); }
.coMemR { display:grid; grid-template-columns:minmax(0,1fr) 54px 64px 64px; align-items:center; gap:8px; min-height:42px; padding:0 10px; border-top:2px solid rgba(8,20,45,.5); font:400 16px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
.coMemR > span:not(:first-child) { text-align:center; }
.coMemH { min-height:32px; border-top:0; background:rgba(8,20,45,.55); font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--mut); }
.coMemR.me { background:rgba(255,210,63,.14); }
.coMem + .note { margin:6px 2px 8px; }
.coLeave { margin-top:2px; }
.coHd2 { margin:16px 2px 0; font-size:19px; }
@media (max-width:560px) {
  .coCrewNew, .coHn { grid-template-columns:minmax(0,1fr); }
  .coHn { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .coMemR { grid-template-columns:minmax(0,1fr) 40px 52px 52px; gap:4px; padding:0 8px; font-size:15px; }
  .coMemH { font-size:11px; }
  .coCrewCode { width:100%; }
  .coTier { white-space:normal; }
}