/* ═══════════════════════════════════════════════════════════════════════════
   JAGSIM LEAGUES — the Leagues half of /rankings (batch W4, 2026-10-02)
   Built to the owner's mock-up ("/Users/jag/Desktop/JagSim mockup/index.html"):
   the list (How a league works · toolbar · Your leagues · open leagues) and a
   league (Your standing · profile sheet · podium · members · invite · leave).

   EVERY COLOUR IS A --jag-* TOKEN, read through the --lg-* names below, and
   that is the whole dark-mode story: css/tokens.css redefines the tokens under
   html[data-chart-theme="dark"]. The --lg- prefix is on purpose: this sheet
   shares a page with the Leaderboard half, whose own :root block names --ink,
   --card and friends, and two sheets setting one name is how a colour moves
   without anyone touching it.

   THE OWNER'S RULES, CONTROL BY CONTROL
   · one accent, teal; every control bordered at 3:1 in both themes
   · selected = OUTLINED (2px accent + accent text), never filled
   · green only on up figures; red on down; the bar is ink; no amber
   · no Pro orange on this half: making a league is free (batch LEAGUE1, 2026-10-13)
   · phone rules only inside @media (max-width:767px); 44px taps; 11px floor
   · the one borderless control is a member's NAME, and the page says so
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --lg-acc:var(--jag-accent,#0F6E76);
  --lg-acc-hover:var(--jag-accent-hover,#0B565D);
  --lg-acc-text:var(--jag-accent-text,#0F6E76);
  --lg-acc-on:var(--jag-accent-on,#FFFFFF);
  --lg-tint:var(--jag-accent-tint-soft,#E3F3F4);
  --lg-tint2:var(--jag-accent-tint-strong,#D2EBED);
  --lg-tint-line:var(--jag-tint-line,#4F949C);
  --lg-ctl:var(--jag-line,#5F7E86);
  --lg-card:var(--jag-card,#FFFFFF);
  --lg-card2:var(--jag-card-2,#EFF7F7);
  --lg-page:var(--jag-page,#F3F8F8);
  --lg-ink:var(--jag-ink,#1A1F29);
  --lg-muted:var(--jag-ink-muted,#5A626B);
  --lg-line:var(--jag-line,#5F7E86);   /* 3:1 on the page in both themes, like every edge on the site */
  --lg-up:var(--jag-up,#12805C);
  --lg-down:var(--jag-down,#C4372F);
}

#lbLeaguesView{color:var(--lg-ink)}
#lbLeaguesView .up{color:var(--lg-up)}
#lbLeaguesView .down{color:var(--lg-down)}
.lgc-num{font-variant-numeric:tabular-nums}
.lgc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lgc-plain{font-size:15px;color:var(--lg-ink);line-height:1.5;margin:6px 0 0;max-width:92ch}
.lgc-plain b{font-weight:800}
.lgc-hint{font-size:13px;color:var(--lg-muted);font-weight:600;line-height:1.45}
.lgc-hint b{color:var(--lg-ink)}
.lgc-pad{padding:10px 12px;margin:0}
.lgc-k{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--lg-muted)}
.lgc-sec{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--lg-muted);font-weight:800;margin:16px 0 8px}
.lgc-sp{flex:1}
.lgc-say:empty{display:none}
.lgc-say{margin:8px 0 0}
.lgc-said{border:1px solid var(--lg-line);border-radius:10px;padding:9px 12px;font-size:14px;line-height:1.5;
  color:var(--lg-ink);background:var(--lg-card2)}
/* A tag is a STATEMENT, bordered so it reads as a label and never as something to press. */
.lgc-tag{border:1px solid var(--lg-ctl);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:800;
  color:var(--lg-ink);background:var(--lg-card);white-space:nowrap;display:inline-block;line-height:1.5}
/* A statement where a control could have been: "Not shared", "You", "Full". Not bordered, because
   it is not something to press, and never greyed out to look like a dead button. */
/* The League champion tag (batch R9): a statement in the tint edge and the accent words. */
.lgc-champ{display:inline-flex;align-items:center;border:1px solid var(--lg-tint-line,#4F949C);border-radius:999px;padding:1px 9px;
  font-size:12px;font-weight:800;color:var(--lg-acc-text);background:var(--lg-card);line-height:1.6;white-space:nowrap;vertical-align:middle}
.lgc-slot{display:flex;align-items:center;justify-content:center;min-height:32px;font-size:13px;font-weight:700;color:var(--lg-muted);white-space:nowrap}

/* ── controls ─────────────────────────────────────────────────────────────── */
.lgc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  border:1px solid var(--lg-ctl);border-radius:8px;background:var(--lg-card);color:var(--lg-ink);
  font:inherit;font-weight:800;font-size:14px;padding:0 12px;height:38px;white-space:nowrap;cursor:pointer;
  line-height:1;text-decoration:none}
.lgc-btn:hover{background:var(--lg-card2);text-decoration:none}
.lgc-btn:active{transform:translateY(1px)}
.lgc-btn:focus-visible{outline:2px solid var(--lg-acc);outline-offset:2px}
.lgc-btn.on,.lgc-btn.strong,.lgc-btn[aria-expanded="true"]{border:2px solid var(--lg-acc);color:var(--lg-acc-text);padding:0 11px;background:var(--lg-card)}
.lgc-btn.fill{background:var(--lg-acc);border:1px solid var(--lg-acc);color:var(--lg-acc-on)}
.lgc-btn.fill:hover{background:var(--lg-acc-hover);border-color:var(--lg-acc-hover)}
.lgc-btn.big{height:46px;font-size:16px;padding:0 20px}
.lgc-btn.sm{height:32px;font-size:13px;padding:0 10px}
.lgc-btn.sm.on,.lgc-btn.sm.strong{padding:0 9px}
.lgc-btn[aria-busy="true"]{cursor:progress}
.lgc-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.lgc-inp{display:flex;align-items:center;border:1px solid var(--lg-ctl);border-radius:8px;background:var(--lg-card);
  color:var(--lg-ink);height:40px;padding:0 10px;font:inherit;font-size:15px;font-weight:600;min-width:0;box-sizing:border-box}
.lgc-inp.grow{flex:1;min-width:140px}
.lgc-inp::placeholder{color:var(--jag-ink-faint,#6B7480)}
.lgc-inp:focus-visible{outline:2px solid var(--lg-acc);outline-offset:2px}
.lgc-ta{height:auto;padding:10px 12px;resize:vertical;width:100%}
.lgc-sel{border:1px solid var(--lg-ctl);border-radius:8px;background:var(--lg-card);color:var(--lg-ink);
  height:40px;padding:0 10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.lgc-sel.grow{flex:1;min-width:140px}
.lgc-seg{display:flex;gap:6px;flex-wrap:wrap}
.lgc-segb{border:1px solid var(--lg-ctl);border-radius:8px;background:var(--lg-card);color:var(--lg-ink);
  font:inherit;font-weight:800;font-size:13px;height:36px;padding:0 11px;cursor:pointer;white-space:nowrap}
.lgc-segb:hover{background:var(--lg-card2)}
.lgc-segb[aria-pressed="true"]{border:2px solid var(--lg-acc);color:var(--lg-acc-text);padding:0 10px;background:var(--lg-tint)}
.lgc-segb:focus-visible{outline:2px solid var(--lg-acc);outline-offset:2px}
/* A switch reads as one bordered control, and "on" is the outline, not a fill. */
.lgc-sw{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--lg-ctl);border-radius:8px;
  height:38px;padding:0 12px;font:inherit;font-weight:800;font-size:14px;background:var(--lg-card);color:var(--lg-ink);
  white-space:nowrap;cursor:pointer;align-self:flex-start}
.lgc-sw i{width:32px;height:18px;border:1px solid var(--lg-ctl);border-radius:999px;position:relative;flex:none;background:var(--lg-card)}
.lgc-sw i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--lg-ctl)}
.lgc-sw.on{border:2px solid var(--lg-acc);color:var(--lg-acc-text);padding:0 11px}
.lgc-sw.on i{border:2px solid var(--lg-acc);background:var(--lg-tint)}
.lgc-sw.on i::after{left:14px;top:1px;background:var(--lg-acc)}
.lgc-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;font-size:15px;letter-spacing:.03em;
  border:1px solid var(--lg-ctl);border-radius:8px;height:38px;display:inline-flex;align-items:center;padding:0 10px;
  background:var(--lg-tint);color:var(--lg-ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgc-fld{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.lgc-fl{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--lg-muted)}
.lgc-quietb{margin:12px 0 0;font-size:13px;font-weight:700;color:var(--lg-ink)}

/* ── THE NAME: the one borderless control, and the page names it in words ─── */
.lgc-nm{appearance:none;border:0;background:transparent;font:inherit;font-weight:800;color:var(--lg-acc-text);
  padding:2px 0;margin:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lgc-nm:hover{color:var(--lg-acc-hover)}
.lgc-nm:focus-visible{outline:2px solid var(--lg-acc);outline-offset:2px;border-radius:4px}
.lgc-who{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lbLeaguesView .lb-pro-tag{margin-left:6px;font-size:11px;flex:none}

/* ── the toolbar: search, sort, and the two panels it opens ───────────────── */
.lgc-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 8px}
.lgc-search{flex:1 1 220px;min-width:180px;position:relative;display:block;color:var(--lg-muted);height:40px;box-sizing:border-box}
/* The border is on the input itself - it is the control - and the glass sits inside it. */
.lgc-search input{border:1px solid var(--lg-ctl);border-radius:999px;background:var(--lg-card);padding:0 14px 0 38px;width:100%;outline:none;color:var(--lg-ink);font:inherit;font-size:15px;min-width:0;height:100%;box-sizing:border-box}
.lgc-search input:focus{border-color:var(--lg-acc);box-shadow:0 0 0 2px var(--lg-acc)}
.lgc-searchico{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;line-height:1;pointer-events:none}
.lgc-sorts{display:inline-flex;gap:6px;flex-wrap:wrap}
.lgc-sort{border:1px solid var(--lg-ctl);background:var(--lg-card);color:var(--lg-ink);border-radius:999px;
  height:36px;padding:0 12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.lgc-sort:hover{background:var(--lg-card2)}
.lgc-sort[aria-pressed="true"]{border:2px solid var(--lg-acc);color:var(--lg-acc-text);padding:0 11px;background:var(--lg-card)}
.lgc-sort:focus-visible{outline:2px solid var(--lg-acc);outline-offset:2px}
.lgc-doors{display:flex;gap:6px;margin-left:auto}
.lgc-backrow{margin-bottom:10px}
/* Leave sits across from Back, at the right edge of the same row (owner, 2026-10-09). */
.lgc-backrow .lgc-leave-top{margin-left:auto}

/* ── panels (Create a league, Join with a code, the invite landing) ────────── */
.lgc-panel{background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;padding:12px 14px;margin:0 0 10px}
.lgc-ph{font-size:16px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
.lgc-joinrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lgc-dates{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:8px}
.lgc-datef{display:flex;align-items:center;gap:8px}
.lgc-datel{font-size:13px;font-weight:800;color:var(--lg-muted);min-width:44px}
.lgc-landing{margin-bottom:12px}

/* ── THE TWO WAYS IN (batch LEAGUE1, 2026-10-13): Join the JagSim League, Start your own league.
   One card, a line and a button each, the buttons in one column at the right so they line up.
   Portfolio's sizes: 14px line, 13px for the sentence about paper trades, a 36px button (44px on a
   phone, from the phone block at the foot of this sheet). ── */
.lgc-start{background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;padding:2px 14px;margin:0 0 10px}
.lgc-startrow{display:flex;align-items:center;gap:10px 16px;padding:10px 0}
.lgc-startrow + .lgc-startrow{border-top:1px solid var(--lg-line)}
.lgc-starttx{flex:1 1 auto;min-width:0}
.lgc-startl{margin:0;font-size:14px;line-height:1.45;color:var(--lg-ink)}
.lgc-startl b{font-weight:800}
.lgc-startn{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--lg-ink);max-width:92ch}
.lgc-startn b{font-weight:800}
.lgc-startbtn{flex:0 0 auto;min-width:148px}
/* 16 Oct 2026 (owner: "make league more square please"): the ways in are square cards side by side, each
   with its words on top and its button at the foot. The block itself is no longer a box: each card is. */
.lgc-start{background:none;border:1px solid transparent;padding:0;margin:0 0 12px}
.lgc-startgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,300px));gap:12px}
.lgc-start .lgc-startrow.lgc-startcard{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:12px;
  min-height:168px;padding:16px;background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;box-sizing:border-box}
.lgc-start .lgc-startrow.lgc-startcard + .lgc-startrow.lgc-startcard{border-top:1px solid var(--lg-line)}
.lgc-startcard.house{border-color:var(--lg-tint-line);background:var(--lg-tint)}
.lgc-startcard .lgc-startl{font-size:15px}
.lgc-startby{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lgc-startf{color:var(--lg-muted);font-weight:600;font-size:13px}
.lgc-start .lgc-startn{color:var(--lg-muted);margin-top:8px}
.lgc-startcard .lgc-startbtn{width:100%;min-width:0}
.lgc-start .lgc-say{margin:8px 0 0}
@media (max-width:767px){
  .lgc-startgrid{grid-template-columns:1fr}
  .lgc-start .lgc-startrow.lgc-startcard{min-height:0}
  .lgc-startbtn{width:100%}
}

/* ── Your leagues: cards with your place, your return and the days left ───── */
.lgc-mine{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.lgc-mcard{background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;padding:10px 12px;cursor:pointer;
  min-width:0;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.lgc-mcard:hover{border-color:var(--lg-tint-line);box-shadow:0 2px 8px rgba(15,110,118,.10)}
.lgc-mtop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lgc-mplace{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lgc-mplace small{font-size:13px;font-weight:700;color:var(--lg-muted);letter-spacing:0}
.lgc-mpct{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.lgc-mname{margin-top:2px;font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgc-msub{color:var(--lg-muted);font-size:13px;font-weight:600}
.lgc-mfoot{display:flex;justify-content:flex-end;margin-top:auto;padding-top:8px}

/* ── the open leagues: a grid, the top three on each card ─────────────────── */
.lgc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lgc-ocard{background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;padding:10px 12px;min-width:0;cursor:pointer;
  display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.lgc-ocard:hover{border-color:var(--lg-tint-line);box-shadow:0 2px 8px rgba(15,110,118,.10)}
.lgc-onm{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgc-ometa{color:var(--lg-muted);font-size:13px;font-weight:600;margin:1px 0 8px}
.lgc-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.lgc-pl{display:flex;align-items:baseline;gap:4px;min-width:0;font-size:13px;background:var(--lg-card2);border-radius:6px;padding:5px 6px}
.lgc-pl b{color:var(--lg-acc-text);flex:none}
.lgc-plwho{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lgc-plpct{font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.lgc-pl.lgc-open .lgc-plwho,.lgc-pl.lgc-open .lgc-plpct{color:var(--lg-muted)}
.lgc-oacts{display:flex;gap:6px;margin-top:auto;padding-top:8px}
.lgc-oacts .lgc-btn,.lgc-oacts .lgc-slot{flex:1}

/* ── THE JAGSIM LEAGUE: its own tint, and the "by JagSim" mark ─────────────
   The house league is the soft teal tint with the tint edge, wherever it is
   drawn; a member-made league is the plain card. The mark is a bordered
   statement (accent edge, accent words, a J in a ring), not a control. */
.lgc-mcard.house,.lgc-ocard.house,.lgc-place.house{background:var(--lg-tint);border-color:var(--lg-tint-line)}
.lgc-mcard.house:hover,.lgc-ocard.house:hover{border-color:var(--lg-acc)}
.lgc-ocard.house .lgc-pl{background:var(--lg-card)}
.lgc-mname,.lgc-onm{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-width:0;white-space:normal}
.lgc-mnm{min-width:0;overflow-wrap:anywhere}
.lgc-by{display:inline-flex;align-items:center;gap:4px;flex:none;border:1px solid var(--lg-acc);border-radius:999px;
  padding:1px 8px 1px 2px;font-size:12px;font-weight:800;color:var(--lg-acc-text);background:var(--lg-card);
  line-height:1.4;white-space:nowrap;vertical-align:middle;letter-spacing:0}
.lgc-byj{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--lg-acc);font-size:11px;font-weight:900;line-height:1}
.lgc-title .lgc-by{margin-left:4px}

/* ── A LEAGUE: Your standing ──────────────────────────────────────────────── */
.lgc-place{background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.lgc-title{font-size:18px;font-weight:800;margin:2px 0 0;letter-spacing:-.01em;overflow-wrap:anywhere}
.lgc-vis{font-weight:700;color:var(--lg-muted);font-size:14px}
.lgc-big{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.lgc-of{font-size:15px;font-weight:700;color:var(--lg-muted);letter-spacing:0}
.lgc-status{margin-top:4px;font-size:16px;font-weight:800}
.lgc-meta{color:var(--lg-muted);font-size:13px;font-weight:600;margin-top:2px}
.lgc-stats{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:8px}
.lgc-stat{min-width:76px}
.lgc-stat b{display:block;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.lgc-stat span{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--lg-muted)}
.lgc-line{margin:8px 0 0;font-size:14px}

/* ── the profile sheet a name opens ───────────────────────────────────────── */
.lgc-profile{background:var(--lg-card);border:2px solid var(--lg-acc);border-radius:10px;margin:0 0 10px;overflow:hidden}
.lgc-pbody{padding:10px 12px 12px}
/* THE PROFILE PANEL'S CLOSE X STAYS IN ITS TOP RIGHT CORNER. (UI10 item D) The title row wraps
   (.lgc-th), and on a phone the title is longer than the row, so the close button dropped to a
   line of its own at the LEFT. The title wraps inside its own width now and the X keeps the corner. */
#lgProfile > .lgc-th{flex-wrap:nowrap;align-items:flex-start}
#lgProfile > .lgc-th > span{flex:1 1 auto;min-width:0}
.lgc-pbody .lgc-stats{margin-top:0}
.lgc-sh3{font-size:13px;font-weight:800;margin:12px 0 4px;letter-spacing:.02em}
.lgc-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#lbLeaguesView .lgc-ht{width:100%;border-collapse:collapse;font-size:14px}
#lbLeaguesView .lgc-ht th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--lg-muted);padding:6px 8px;border-bottom:1px solid var(--lg-line)}
#lbLeaguesView .lgc-ht td{padding:6px 8px;border-bottom:1px solid var(--lg-line);font-variant-numeric:tabular-nums}

/* Recent paper trades on the sheet (phase 2): one line each, the day beside it. */
.lgc-fills{margin:0;padding-left:18px}
.lgc-fills li{margin:4px 0;font-size:14px;font-weight:600}
/* Max members (phase 2): a number box sized to three digits, not a full-width field. */
.lgc-capinp{width:110px}
/* Past leagues: the same card as Your leagues; the whole card opens the final standings. */
.lgc-past .lgc-mcard{cursor:pointer}

/* ── the podium ───────────────────────────────────────────────────────────── */
.lgc-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px}
.lgc-pod{display:flex;align-items:center;gap:8px;min-width:0;background:var(--lg-tint2);border:2px solid var(--lg-tint-line);border-radius:10px;padding:8px 10px}
.lgc-pod.p1{border-color:var(--lg-acc);background:var(--lg-tint)}
.lgc-pod.seat{background:var(--lg-card);border-style:dashed;border-color:var(--lg-ctl)}
.lgc-pod.seat .lgc-podwho,.lgc-pod.seat .lgc-podpct{color:var(--lg-muted);font-weight:700}
.lgc-podn{font-size:20px;font-weight:800;color:var(--lg-acc-text);flex:none;width:16px}
.lgc-podwho{flex:1;min-width:0;display:flex;font-weight:800;font-size:14px;overflow:hidden}
.lgc-podpct{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;flex:none}

/* ── the members table ────────────────────────────────────────────────────── */
.lgc-wrap{background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;overflow:hidden;margin-bottom:10px}
.lgc-th{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--lg-line);font-weight:800;flex-wrap:wrap}
.lgc-th small{font-weight:600;color:var(--lg-muted);font-size:13px}
/* THE PAGE'S OWN TABLE RULES ARE GLOBAL. The Leaderboard half styles bare table / thead th /
   tbody td (table-layout:fixed, a top margin, a border and a radius of its own), and those reach
   every table on the page — with table-layout:fixed the Follow and portfolio column was squeezed
   to nothing. Every table rule here is under #lbLeaguesView, which outranks them, and this resets
   what they set. */
#lbLeaguesView table.lgc-t,#lbLeaguesView .lgc-ht{table-layout:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
#lbLeaguesView table.lgc-t tbody tr:hover,#lbLeaguesView .lgc-ht tbody tr:hover{background:none}
#lbLeaguesView table.lgc-t{width:100%;border-collapse:collapse;font-size:14px}
#lbLeaguesView table.lgc-t th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--lg-muted);
  padding:7px 10px;border-bottom:1px solid var(--lg-line);font-weight:800}
#lbLeaguesView table.lgc-t td{padding:6px 10px;border-bottom:1px solid var(--lg-line);vertical-align:middle;font-variant-numeric:tabular-nums}
#lbLeaguesView table.lgc-t tr:last-child td{border-bottom:0}
#lbLeaguesView table.lgc-t th.lgc-act,#lbLeaguesView table.lgc-t td.lgc-act{text-align:right;white-space:nowrap;width:1%}
#lbLeaguesView table.lgc-t tr.lgc-me td{background:var(--lg-tint)}
#lbLeaguesView table.lgc-t tr.lgc-me td:first-child{box-shadow:inset 3px 0 0 0 var(--lg-acc)}
#lbLeaguesView table.lgc-t tr.lgc-left td{color:var(--lg-muted)}
.lgc-rk{font-weight:800;color:var(--lg-muted);white-space:nowrap}
.lgc-nmcell{display:flex;align-items:center;gap:2px;min-width:0;max-width:260px}
.lgc-retcell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.lgc-retnum{font-weight:800}
.lgc-leftwhen{font-size:12px;font-weight:700;color:var(--lg-muted)}
/* Return: the figure carries the colour, the bar carries the size and is INK in both themes.
   Up fills from the left, down from the right, so direction reads without colour. */
.lgc-bar{display:block;width:72px;height:5px;border-radius:99px;background:var(--lg-line);overflow:hidden;flex:none}
.lgc-bar i{display:block;height:100%;background:var(--lg-ink)}
.lgc-bar i.l{margin-left:auto}
.lgc-rowacts{display:grid;grid-template-columns:104px 124px 100px;gap:6px;align-items:center;margin-left:auto}
.lgc-rowacts .lgc-btn{width:100%}
.lgc-rowacts .span{grid-column:1 / -1}
.lgc-rowacts .span2{grid-column:2 / -1}
.lgc-phone{display:none}
.lgc-prow{padding:9px 12px;border-bottom:1px solid var(--lg-line)}
.lgc-prow:last-child{border-bottom:0}
.lgc-prow.lgc-me{background:var(--lg-tint);box-shadow:inset 3px 0 0 0 var(--lg-acc)}
.lgc-prow.lgc-left{color:var(--lg-muted)}
.lgc-pr1{display:flex;align-items:center;gap:8px;min-width:0}
.lgc-prank{font-size:15px;font-weight:800;flex:none;min-width:30px;color:var(--lg-muted)}
.lgc-prname{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.lgc-prt{font-size:15px;font-weight:800;flex:none;margin-left:auto;font-variant-numeric:tabular-nums}
.lgc-pr2{display:flex;align-items:center;gap:10px;margin:4px 0 0 38px}
.lgc-tr{font-size:13px;color:var(--lg-muted);font-weight:600;white-space:nowrap}
.lgc-pr3{margin:6px 0 0 38px}
.lgc-pr3 .lgc-rowacts{margin-left:0;grid-template-columns:1fr 1fr}
/* Batch R9: three controls on the stacked row, at their own widths, wrapping when they must. */
.lgc-pr3 .lgc-rowacts{display:flex;flex-wrap:wrap;gap:8px}
.lgc-pr3 .lgc-rowacts .lgc-btn{width:auto;flex:0 0 auto}
.lgc-pr3 .lgc-rowacts .lgc-slot{justify-content:flex-start}
.lgc-more{padding:8px 12px;border-top:1px solid var(--lg-line)}
.lgc-foot{margin:0;padding:8px 12px;font-size:13px;color:var(--lg-ink);border-top:1px solid var(--lg-line);line-height:1.45}
.lgc-foot b{font-weight:800}
.lgc-rule{color:var(--lg-muted)}

/* ── activity ─────────────────────────────────────────────────────────────── */
.lgc-act{list-style:none;margin:0;padding:0 12px}
.lgc-act li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--lg-line);font-size:14px}
.lgc-act li:last-child{border-bottom:0}
.lgc-actt{min-width:0;overflow-wrap:anywhere}
.lgc-actt b{font-weight:800}
.lgc-act .lgc-nm{white-space:normal;overflow:visible;display:inline}
.lgc-actw{color:var(--lg-muted);font-size:13px;font-weight:700;white-space:nowrap}

/* ── invite, leave ────────────────────────────────────────────────────────── */
.lgc-invite{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--lg-card);border:1px solid var(--lg-line);
  border-radius:10px;padding:10px 12px;margin-bottom:8px}
.lgc-inl{margin:0}
.lgc-leave{margin-top:4px}

/* ── the owner's controls, folded ─────────────────────────────────────────── */
.lgc-ownerbox{margin:12px 0 0}
.lgc-ownerh{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px;cursor:pointer;
  list-style:none;border:1px solid var(--lg-ctl);border-radius:8px;background:var(--lg-card);font-weight:800;font-size:15px}
.lgc-ownerh::-webkit-details-marker{display:none}
.lgc-ownerh::marker{content:''}
.lgc-ownerh:focus-visible{outline:2px solid var(--lg-acc);outline-offset:2px}
.lgc-ownerbox[open] .lgc-ownerh{border-radius:8px 8px 0 0;border:2px solid var(--lg-acc);color:var(--lg-acc-text)}
.lgc-ownerb{border:1px solid var(--lg-ctl);border-top:0;border-radius:0 0 8px 8px;background:var(--lg-card);padding:4px 14px 12px}
.lgc-orow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--lg-line);flex-wrap:wrap}
.lgc-orow:last-of-type{border-bottom:0}
.lgc-orow .l{font-weight:800;font-size:14px;min-width:0}
.lgc-orow .l small{display:block;font-weight:600;color:var(--lg-muted);font-size:13px;overflow-wrap:anywhere}
.lgc-orow.stack{flex-direction:column;align-items:stretch}
.lgc-qrows{margin-top:4px}
.lgc-qrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--lg-line);flex-wrap:wrap}
.lgc-qrow:last-child{border-bottom:0}
.lgc-qrow>*{min-width:0}

/* ── "How a league works": the one fold, at the top of the list ──────────── */
#lbLeaguesView .lb-fold{margin:0 0 10px}
#lbLeaguesView .lb-foldb ul{margin:0;padding-left:20px}
#lbLeaguesView .lb-foldb li{margin:5px 0;font-size:15px;line-height:1.45;color:var(--lg-ink)}
#lbLeaguesView .lb-foldb li b{font-weight:800}

/* ── sheets (the one confirm line, report) ────────────────────────────────── */
/* z-index above the sticky .pt-appbar (10050), the same reason js/trader-profile.js uses 10060. */
.lgc-back{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,23,42,.55)}
.lgc-sheet{width:min(480px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--lg-card);color:var(--lg-ink);border:2px solid var(--lg-ctl);border-radius:14px}
.lgc-sheet-h{padding:12px 16px;border-bottom:1px solid var(--lg-line);font-size:18px;font-weight:800;flex:0 0 auto}
/* min-height:0 is load-bearing: a flex child defaults to min-height:auto and refuses to shrink,
   so without it the body does not scroll and overflow:hidden cuts the foot off. */
.lgc-sheet-b{padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.lgc-sheet-b .lgc-plain{margin:0}
.lgc-sheet-b .lgc-acts{margin-top:2px}
.lgc-sheet-b .lgc-acts .lgc-btn{flex:1;min-width:120px;height:44px}

/* ═══ PHONE. 44px taps everywhere; one column of cards; the stacked member row;
   the podium as three rows. Nothing here reaches a desktop. ═══ */
@media (max-width:767px){
  .lgc-btn,.lgc-btn.sm,.lgc-inp,.lgc-sel,.lgc-segb,.lgc-sort,.lgc-sw,.lgc-code,.lgc-search{height:44px;min-height:44px}
  .lgc-btn.sm{font-size:14px}
  .lgc-nm{padding:12px 0;margin:-10px 0}
  .lgc-tools{gap:8px}
  .lgc-search{flex:1 1 100%}
  .lgc-sorts{flex:1 1 100%}
  .lgc-sort{flex:1 1 0;padding:0 6px}
  .lgc-sort[aria-pressed="true"]{padding:0 5px}
  .lgc-doors{flex:1 1 100%;margin-left:0}
  .lgc-doors .lgc-btn{flex:1 1 0;padding:0 6px}
  .lgc-mine,.lgc-grid{grid-template-columns:1fr}
  .lgc-podium{grid-template-columns:1fr;gap:6px}
  .lgc-pod{min-height:44px}
  .lgc-wide{display:none}
  .lgc-phone{display:block}
  .lgc-pr3{margin-left:0}
  .lgc-pr3 .lgc-slot{min-height:44px}
  .lgc-stats{gap:10px 18px}
  .lgc-stat{min-width:0;flex:1 1 40%}
  .lgc-big{font-size:24px}
  .lgc-joinrow .lgc-inp.grow{flex:1 1 100%}
  .lgc-joinrow .lgc-btn{flex:1}
  .lgc-datef{flex:1 1 100%}
  .lgc-datef .lgc-inp{flex:1}
  /* The top three on an open card: one row per place on a phone, so a username is a username and
     not three letters. */
  .lgc-places{grid-template-columns:1fr}
  .lgc-invite .lgc-btn{flex:1}
  .lgc-invite .lgc-code{flex:1 1 100%}
  .lgc-leave .lgc-btn{flex:1}
  .lgc-acts .lgc-btn.big{width:100%}
  .lgc-back{padding:0;align-items:flex-end}
  .lgc-sheet{width:100%;max-width:none;max-height:92vh;border-radius:14px 14px 0 0;border-bottom:0}
}

/* ═══ BATCH RK9 — ONE CONTROL PER MEMBER (owner, 2026-10-03: "There's a lot of buttons."; Follow
   retired 24 Oct 2026). Every member row carries View profile, the plain bordered button, the same
   one the Leaderboard carries. A member who shares carries the Shares holdings tag beside their name
   (its look is the Leaderboard's .lb-shares, on the same page). ═══ */
.lgc-rowacts{grid-template-columns:104px auto;justify-items:start}
.lgc-rowacts .lgc-vprof{width:100%}
/* HOLDINGS PRIVATE (batch FLOW1). Drawn only while VIEW_PROFILE_ONLY_WHEN_SHARING is on in
   js/trader-profile.js: the two quiet words that stand in the View profile column for a member who
   does not share, so the column keeps its shape. Words, not a control: no edge, no ground, no pointer. */
.lgc-rowacts .lgc-private{justify-content:flex-start;font-size:12.5px;cursor:default}
.lgc-nmcell{flex-wrap:wrap;row-gap:4px}
.lgc-shares{margin-left:6px}
.lgc-prname{flex-wrap:wrap;row-gap:4px}
@media (max-width:767px){
  /* 106px is the width View profile is drawn at on a phone row, so the quiet words sit at the same place on every row. */
  .lgc-pr3 .lgc-rowacts .lgc-private{min-width:106px}
}

/* ═══ BATCH UI3 — THE LEAGUES HALF AT PORTFOLIO'S SCALE (owner, 2026-10-12: "why is the ranking
   page so zoomed in?"). The same sizes the Leaderboard half takes in rankings.html: 14px body copy
   and control words, 15px card titles, 13.5px table rows, a 36px control on a laptop (44px on a
   phone, in the block under this one), 24px for your place. Last in this sheet, each selector
   spelled as the rule it replaces, so source order settles it. ═══ */
.lgc-plain{font-size:14px;line-height:1.45}
.lgc-sec{font-size:12px;margin:12px 0 6px}
.lgc-said{font-size:13.5px;padding:7px 12px}
.lgc-btn{height:36px}
.lgc-btn.big{height:40px;font-size:14px;padding:0 18px}
.lgc-btn.sm{height:30px}
.lgc-inp{height:36px;font-size:14px}
.lgc-ta{height:auto}
.lgc-sel{height:36px}
.lgc-segb{height:32px}
.lgc-sw{height:36px}
.lgc-code{height:36px;font-size:14px}
.lgc-search{height:36px}
.lgc-search input{font-size:14px}
.lgc-searchico{font-size:15px}
.lgc-sort{height:32px}
.lgc-ph{font-size:15px}
.lgc-mpct{font-size:15px}
.lgc-title{font-size:16px}
.lgc-big{font-size:24px}
.lgc-of{font-size:14px}
.lgc-status{font-size:15px}
.lgc-th{font-size:15px}
.lgc-th small{font-size:12.5px}
#lbLeaguesView table.lgc-t,#lbLeaguesView .lgc-ht{font-size:13.5px}
#lbLeaguesView table.lgc-t td{font-size:13.5px}
.lgc-podn{font-size:18px}
.lgc-pod{padding:6px 10px}
.lgc-prank,.lgc-prt{font-size:14px}
.lgc-ownerh{min-height:38px;font-size:14px}
.lgc-sheet-h{font-size:16px}
#lbLeaguesView .lb-foldb li{font-size:14px;margin:4px 0}
@media (max-width:767px){
  .lgc-btn,.lgc-btn.sm,.lgc-btn.big,.lgc-inp,.lgc-sel,.lgc-segb,.lgc-sort,.lgc-sw,.lgc-code,.lgc-search{height:44px;min-height:44px}
  .lgc-ta{height:auto}
  .lgc-ownerh{min-height:44px}
}

/* The invite's facts and the leader's line (batch P9HOME, 2026-10-17): three short labels in one row, then one stroke. */
.lgc-ifs{display:flex;flex-wrap:wrap;gap:8px 20px;margin:10px 0 6px}
.lgc-if{display:flex;flex-direction:column;gap:2px}
.lgc-ifk{font-size:var(--jag-fs-badge,11px);font-weight:800;letter-spacing:var(--jag-track-label,.06em);text-transform:uppercase;color:var(--jag-ink-muted)}
.lgc-ifv{font-size:var(--jag-fs-section,18px);font-weight:800;line-height:1.2;letter-spacing:var(--jag-track-heading,-.01em);color:var(--jag-ink);font-variant-numeric:tabular-nums}
.lgc-ifv small{font-size:var(--jag-fs-control,13px);font-weight:700;color:var(--jag-ink-muted)}
.lgc-line{display:block;max-width:100%;height:auto;margin:0 0 8px}
.lgc-line-zero{stroke:var(--jag-hairline);stroke-width:1}
.lgc-line-path{fill:none;stroke:var(--jag-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

/* THIS WEEK'S MOVE under the place (batch LEAGUES2, 6 Nov 2026: batch LEAGUES1's This week carried onto the restored
   Leagues half): a quiet second line in the Rank cell, up 2 / down 1 / Same / New. Words, not a control. */
.lgc-mv{display:block;font-size:11.5px;font-weight:700;letter-spacing:0;color:var(--lg-muted);white-space:nowrap;line-height:1.3;margin-top:1px}
.lgc-prank .lgc-mv{font-size:11px}