/*
 * leagues.css — My Leagues Hub v4.0 (LEAGUES-MVP-SUPERPROMPT §4A)
 * Scoped to html[data-route="/leagues"] so zero bleed to other pages.
 *
 * Design system:
 *   - §3b button canon: .btn-primary is the master button (red + aura from components.css)
 *   - §3d container grammar: 8px base unit, 24/32px section gaps, radius tokens
 *   - §3e Aceternity: .sns-spotlight-card on major containers
 *   - §0.3 desktop compositions: ≥1200 and ≥1700 layout defined, NOT stretched mobile
 */

html[data-route="/leagues"] {

  /* ── Page layout ──────────────────────────────────────────────────────── */
  .leagues-hub-content {
    padding: 24px 24px 48px;
    gap: 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* ── Hero strip ───────────────────────────────────────────────────────── */
  .lhub-hero {
    position: relative;
    min-height: 184px;
    border-radius: var(--sns-radius-card, 12px);
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  /* Left-to-right scrim so hero text stays legible while the band art glows on
     the right (mirrors the /dashboard hero composition). */
  .lhub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(5,5,7,.94) 0%, rgba(5,5,7,.78) 38%, rgba(5,5,7,.32) 70%, rgba(5,5,7,.08) 100%);
  }

  .lhub-hero-band {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .lhub-hero-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* New cohesive Saturday-night art is already dark/moody and the left-scrim
       handles text legibility — let it read at near-full strength rather than
       the washed-out .62 the old off-brand band needed. */
    opacity: .9;
  }

  .lhub-hero-skeleton {
    padding: 28px 32px;
    width: 100%;
  }

  .lhub-hero-body {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  /* S0 hero — discovery mode */
  .lhub-hero-s0 .lhub-hero-text {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lhub-hero-eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--gold-accent);
    text-transform: uppercase;
  }
  .lhub-hero-title {
    font-family: var(--f-display);
    font-size: 34px;
    color: var(--white-bright);
    margin: 0;
    letter-spacing: .04em;
    line-height: 1.05;
    text-shadow: 0 2px 14px rgba(0,0,0,.85);
  }
  .lhub-hero-status, .lhub-hero-meta { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
  @media (min-width: 1700px) {
    .lhub-hero-title { font-size: 40px; }
  }
  .lhub-hero-status {
    font-family: var(--f-body);
    font-size: 16px;
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.4;
  }
  .lhub-hero-meta {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--gray-light);
    text-transform: uppercase;
    margin: 0;
  }
  .lhub-hero-ctas {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .lhub-hero-cta-ghost {
    font-family: var(--f-mono);
  }

  /* Active league hero */
  .lhub-hero-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    width: 100%;
  }
  .lhub-hero-helmet {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    flex: 0 0 72px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  }
  @media (max-width: 600px) {
    .lhub-hero-helmet { width: 52px; height: 52px; flex: 0 0 52px; }
  }
  .lhub-hero-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .lhub-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    flex: 0 0 auto;
  }
  @media (max-width: 768px) {
    .lhub-hero-inner { flex-wrap: wrap; }
    .lhub-hero-actions { flex-direction: row; width: 100%; align-items: flex-start; }
  }
  .lhub-hero-cta { min-width: 160px; text-align: center; }
  .lhub-hero-manage {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    min-width: 100px;
    text-align: center;
  }

  /* Live hero pulsing border */
  .lhub-hero--live {
    animation: lhub-hero-pulse 2s ease-in-out infinite;
  }
  @keyframes lhub-hero-pulse {
    0%, 100% { box-shadow: var(--sns-glow-1, 0 0 0 1px rgba(255,26,26,.15)); }
    50% { box-shadow: 0 0 0 2px rgba(255,26,26,.5), 0 0 24px rgba(255,26,26,.2); }
  }
  @media (prefers-reduced-motion: reduce) { .lhub-hero--live { animation: none; } }

  /* ── State badges ─────────────────────────────────────────────────────── */
  .lhub-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--white-bright);
    width: fit-content;
  }

  .lhub-badge--recruit { background: rgba(240,189,48,.12); border-color: rgba(240,189,48,.4); color: var(--gold-accent); }
  .lhub-badge--soon    { background: rgba(255,106,0,.12);  border-color: rgba(255,106,0,.4);  color: #FF6A00; }
  .lhub-badge--live    { background: rgba(255,26,26,.15);  border-color: rgba(255,26,26,.5);  color: #FF3B30; }
  .lhub-badge--set     { background: rgba(240,189,48,.12); border-color: rgba(240,189,48,.4); color: var(--gold-accent); }
  .lhub-badge--ready   { background: rgba(40,200,100,.12); border-color: rgba(40,200,100,.4); color: #28C864; }
  .lhub-badge--results { background: rgba(255,26,26,.15);  border-color: rgba(255,26,26,.5);  color: #FF3B30; }
  .lhub-badge--playoffs{ background: rgba(240,189,48,.15); border-color: rgba(240,189,48,.6); color: var(--gold-accent); }
  .lhub-badge--final   { background: rgba(212,168,71,.15); border-color: rgba(212,168,71,.5); color: #D4A847; }
  .lhub-badge--dormant { background: rgba(255,255,255,.04);border-color: rgba(255,255,255,.12);color: var(--gray-light); }

  .lhub-badge--pulse {
    animation: badge-pulse 1.2s ease-in-out infinite;
  }
  @keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,26,26,.4); }
    50%       { box-shadow: 0 0 0 4px rgba(255,26,26,.0); }
  }
  @media (prefers-reduced-motion: reduce) { .lhub-badge--pulse { animation: none; } }

  /* ── 2-col main layout (8:4) ────────────────────────────────────────────── */
  /*
   * §3d fill-floor fix: align-items: stretch so the left column always grows
   * to match the right rail's height — no black void when the league card grid
   * is short (1–2 cards) vs a full standings list. The left section uses
   * display:flex + flex-direction:column so the card grid absorbs the spare
   * height rather than leaving a dead zone.
   */
  /*
   * Dashboard-style stacked full-width rows (copies the /dashboard rhythm):
   * MY LEAGUES cards row → balanced Standings‖Matchups card row → activity →
   * discovery. No more lopsided 2fr/1fr split that left 1/3 of the row empty.
   */
  .lhub-layout {
    display: block;
  }
  .lhub-left {
    display: block;
    margin-bottom: 24px;
  }

  /* ── Selector header ─────────────────────────────────────────────────── */
  .lhub-selector-head {
    margin-bottom: 16px;
  }
  .lhub-eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--red-bright);
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
  }
  .lhub-selector-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .lhub-section-title {
    font-family: var(--f-display);
    font-size: 26px;
    margin: 0;
    color: var(--white-bright);
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
  }

  /* Viewing selector button */
  .lhub-viewing-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--hairline-2);
    border-radius: var(--sns-radius-btn, 10px);
    color: var(--white-bright);
    font-family: var(--f-display);
    font-size: 18px;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s, border-color .15s;
    min-height: 44px; /* ≥44px tap target */
    letter-spacing: .03em;
  }
  .lhub-viewing-btn:hover, .lhub-viewing-btn:focus-visible {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    outline: 2px solid var(--sns-glow-2, rgba(255,26,26,.5));
    outline-offset: 2px;
  }

  /* Viewing dropdown popup */
  .lhub-viewing-popup {
    position: absolute;
    z-index: 100;
    background: #141418;
    border: 1px solid var(--hairline-2);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
    list-style: none;
    margin: 0;
    padding: 6px;
    max-width: 280px;
    min-width: 180px;
  }
  .lhub-viewing-popup[hidden] { display: none; }
  .lhub-viewing-opt {
    font-family: var(--f-body);
    font-size: 16px;
    color: rgba(255,255,255,.8);
    padding: 10px 14px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: background .12s;
  }
  .lhub-viewing-opt:hover, .lhub-viewing-opt:focus { background: rgba(255,255,255,.08); outline: none; }
  .lhub-viewing-opt.is-sel { color: var(--white-bright); background: rgba(255,26,26,.12); }

  .lhub-head-links {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
  }
  .lhub-hd-link {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--gray-light);
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid var(--hairline-2);
    border-radius: var(--sns-radius-btn, 10px);
    transition: color .15s, border-color .15s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .lhub-hd-link:hover { color: var(--white-bright); border-color: rgba(255,255,255,.2); }
  .lhub-hd-link.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }

  /* Cap banner */
  .lhub-cap-banner {
    background: rgba(240,189,48,.08);
    border: 1px solid rgba(240,189,48,.35);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--f-body);
    font-size: 16px;
    color: var(--gold-accent);
    margin-bottom: 12px;
    line-height: 1.5;
  }
  .lhub-cap-banner[hidden] { display: none; }

  /* ── League card grid ─────────────────────────────────────────────────── */
  .lhub-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
  }
  .sns-sk-card {
    display: block;
    width: auto;
    height: 232px;
    border-radius: 12px;
  }

  /* League card anatomy */
  .lhub-card-wrap {
    position: relative;
    min-width: 0;
  }
  @media (max-width: 540px) {
    .lhub-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .lhub-league-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--hairline-2);
    background: linear-gradient(160deg, #16161A 0%, #0A0A0C 60%, #060608 100%);
    text-decoration: none;
    min-height: 200px;
    transition: transform .18s var(--sns-ease-soft, ease),
                box-shadow .18s var(--sns-ease-soft, ease),
                border-color .18s var(--sns-ease-soft, ease);
    cursor: pointer;
  }
  .lhub-league-card:hover, .lhub-league-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--sns-glow-2, 0 4px 20px rgba(255,26,26,.25));
    border-color: rgba(255,26,26,.4);
    outline: none;
  }
  .lhub-league-card:focus-visible {
    outline: 2px solid var(--sns-glow-2, rgba(255,26,26,.6));
    outline-offset: 2px;
  }
  .lhub-league-card.is-active {
    border-color: rgba(255,26,26,.35);
    box-shadow: var(--sns-glow-1, 0 0 12px rgba(255,26,26,.15));
  }

  /* Card backplate */
  .lhub-card-bp {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .lhub-card-bp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .35;
  }

  /* Card interior (above backplate) */
  .lhub-card-top,
  .lhub-card-mid,
  .lhub-card-foot {
    position: relative;
    z-index: 1;
    padding: 0 12px;
  }
  .lhub-card-top {
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
  }
  .lhub-card-mid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .lhub-card-foot {
    padding-bottom: 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lhub-card-badge {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .16em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: var(--white-bright);
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lhub-card-badge--recruit { background: rgba(240,189,48,.15); border-color: rgba(240,189,48,.4); color: var(--gold-accent); }
  .lhub-card-badge--live    { background: rgba(255,26,26,.18);  border-color: rgba(255,26,26,.5);  color: #FF3B30; }
  .lhub-card-badge--set     { background: rgba(240,189,48,.12); border-color: rgba(240,189,48,.35);color: var(--gold-accent); }
  .lhub-card-badge--results { background: rgba(255,26,26,.15);  border-color: rgba(255,26,26,.45); color: #FF4040; }
  .lhub-card-badge--playoffs{ background: rgba(240,189,48,.15); border-color: rgba(240,189,48,.5); color: var(--gold-accent); }
  .lhub-card-badge--final   { background: rgba(212,168,71,.15); border-color: rgba(212,168,71,.5); color: #D4A847; }
  .lhub-card-badge--dormant { background: rgba(255,255,255,.04);border-color: rgba(255,255,255,.12);color: var(--gray-light); }
  .lhub-card-badge--pulse { animation: badge-pulse 1.2s ease-in-out infinite; }

  .lhub-card-role {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .18em;
    color: var(--gray-light);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .lhub-card-helmet {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  }
  .lhub-league-card:hover .lhub-card-helmet {
    transform: translateY(-2px) scale(1.04);
    transition: transform .18s ease;
  }

  .lhub-card-name {
    font-family: var(--f-display);
    font-size: 15px;
    color: var(--white-bright);
    letter-spacing: .03em;
    text-align: center;
    line-height: 1.15;
    word-break: break-word;
  }

  .lhub-card-chip {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--gray-light);
    text-transform: uppercase;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
  }

  /* Hover-reveal overlay buttons */
  .lhub-card-mgr {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px;
    padding: 4px 8px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-decoration: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 3;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  .lhub-card-wrap:hover .lhub-card-mgr,
  .lhub-card-mgr:focus { opacity: 1; }
  .lhub-card-mgr:hover { background: rgba(255,255,255,.15); }

  .lhub-card-act {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.7);
    color: #fff;
    border: 1px solid rgba(255,59,48,.3);
    border-radius: 5px;
    padding: 4px 8px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .12em;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
    z-index: 3;
    min-height: 32px;
  }
  .lhub-card-wrap:hover .lhub-card-act,
  .lhub-card-act:focus { opacity: 1; }
  .lhub-card-archive:hover { background: rgba(255,59,48,.85); border-color: rgba(255,59,48,.9); }
  .lhub-card-leave:hover   { background: rgba(240,189,48,.85); border-color: rgba(240,189,48,.9); color: #111; }
  .lhub-card-act[disabled] { opacity: .5; cursor: not-allowed; }

  /* Empty state for no leagues */
  .lhub-cards-empty {
    width: 100%;
    padding: 40px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .lhub-empty-art {
    width: 120px;
    height: 120px;
    object-fit: contain;
    opacity: .7;
  }
  .lhub-empty-h {
    font-family: var(--f-display);
    font-size: 20px;
    color: rgba(255,255,255,.65);
    margin: 0;
    letter-spacing: .04em;
  }
  .lhub-empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ── Right rail ───────────────────────────────────────────────────────── */
  /* Standings ‖ Matchups — a balanced full-width card row, mirroring the
     dashboard's NEWS & NOTES ‖ AP TOP 25 row (no longer a cramped 1/3 rail). */
  .lhub-right-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }

  .lhub-rail-card {
    border-radius: 12px;
    overflow: hidden;
  }

  .lhub-rail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--hairline);
  }
  .lhub-rail-emblem {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 28px;
    opacity: .9;
  }
  .lhub-rail-title {
    font-family: var(--f-display);
    font-size: 22px;
    margin: 0;
    color: var(--white-bright);
    letter-spacing: .03em;
    flex: 1 1 auto;
  }
  .lhub-rail-link {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--red-bright);
    text-transform: uppercase;
    padding: 4px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: color .15s;
  }
  .lhub-rail-link:hover { color: var(--white-bright); }

  .lhub-rail-empty {
    list-style: none;
    padding: 20px 16px;
    font-family: var(--f-body);
    font-size: 16px;
    color: rgba(255,255,255,.45);
    text-align: center;
  }

  /* Standings list */
  .lhub-st-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 8px;
  }
  .lhub-st-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    transition: background .12s;
  }
  .lhub-st-row:hover { background: rgba(255,255,255,.03); }
  .lhub-st-row.is-you {
    background: rgba(255,26,26,.06);
    border-left: 2px solid var(--red-primary);
  }
  .lhub-st-rank {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--gray-light);
    flex: 0 0 28px;
    text-align: center;
  }
  .lhub-st-av {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    object-fit: contain;
    background: rgba(255,255,255,.04);
    flex: 0 0 28px;
  }
  .lhub-st-name {
    font-family: var(--f-body);
    font-size: 14px;
    color: var(--white-bright);
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .you-tag {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--red-bright);
    font-style: normal;
    background: rgba(255,26,26,.1);
    padding: 1px 5px;
    border-radius: 3px;
  }
  .lhub-st-rec {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--gray-light);
    flex: 0 0 36px;
    text-align: center;
  }
  .lhub-st-pts {
    font-family: var(--f-numeral, var(--f-mono));
    font-size: 12px;
    color: var(--gold-accent);
    flex: 0 0 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Matchups list */
  .lhub-mu-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px;
  }
  .lhub-mu-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--hairline);
    transition: background .12s;
  }
  .lhub-mu-row:last-child { border-bottom: none; }
  .lhub-mu-row:hover { background: rgba(255,255,255,.025); }
  .lhub-mu-side {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
  }
  .lhub-mu-side--right {
    justify-content: flex-end;
  }
  .lhub-mu-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
    background: rgba(255,255,255,.04);
    flex: 0 0 24px;
  }
  .lhub-mu-name {
    font-family: var(--f-body);
    font-size: 13px;
    color: rgba(255,255,255,.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lhub-mu-scores {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }
  .lhub-mu-score {
    font-family: var(--f-numeral, var(--f-mono));
    font-size: 13px;
    color: var(--white-bright);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: center;
  }
  .lhub-mu-vs {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--gray-light);
    flex: 0 0 auto;
  }

  /* ── Activity feed ───────────────────────────────────────────────────── */
  .lhub-activity-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lhub-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .lhub-sect-emblem {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: .8;
    flex: 0 0 24px;
  }
  .lhub-sect-label {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--gray-light);
    text-transform: uppercase;
    margin: 0;
  }

  .lhub-activity-feed {
    border-radius: 12px;
    min-height: 80px;
  }

  .lhub-act-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 8px;
  }
  .lhub-act-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--hairline);
    transition: background .12s;
  }
  .lhub-act-row:last-child { border-bottom: none; }
  .lhub-act-row:hover { background: rgba(255,255,255,.025); }
  .lhub-act-icon {
    font-size: 16px;
    flex: 0 0 20px;
    margin-top: 1px;
  }
  .lhub-act-body {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--f-body);
    font-size: 14px;
    color: rgba(255,255,255,.75);
    line-height: 1.4;
  }
  .lhub-act-team {
    font-family: var(--f-display);
    font-size: 14px;
    color: var(--white-bright);
    letter-spacing: .02em;
  }
  .lhub-act-when {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--gray-light);
    letter-spacing: .1em;
    flex: 0 0 auto;
    padding-top: 2px;
    white-space: nowrap;
  }
  .lhub-act-empty {
    padding: 28px 18px;
    font-family: var(--f-body);
    font-size: 16px;
    color: rgba(255,255,255,.4);
    text-align: center;
    line-height: 1.5;
  }

  /* ── Discovery rail ──────────────────────────────────────────────────── */
  .lhub-discovery {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lhub-disc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  @media (max-width: 900px) {
    .lhub-disc-grid { grid-template-columns: 1fr; }
  }

  .lhub-disc-card {
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }
  .lhub-disc-inner {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
  }
  .lhub-disc-eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--gold-accent);
    text-transform: uppercase;
  }
  .lhub-disc-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--white-bright);
    margin: 0;
    letter-spacing: .04em;
    line-height: 1.1;
  }
  .lhub-disc-sub {
    font-family: var(--f-body);
    font-size: 16px;
    color: rgba(255,255,255,.55);
    margin: 0;
    line-height: 1.5;
  }
  .lhub-disc-cta {
    margin-top: auto;
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: .12em;
  }

  /* Join card: art banner at top */
  .lhub-join-card {
    position: relative;
  }
  .lhub-join-art {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
    opacity: .7;
  }

  /* Join form */
  .lhub-join-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
  }
  .lhub-code-input {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    color: var(--white-bright);
    font-family: var(--f-mono);
    font-size: 20px;
    letter-spacing: .25em;
    text-transform: uppercase;
    padding: 10px 14px;
    width: 100%;
    min-height: 44px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    caret-color: var(--red-bright);
  }
  .lhub-code-input::placeholder { color: rgba(255,255,255,.25); letter-spacing: .2em; }
  .lhub-code-input:focus {
    border-color: rgba(255,26,26,.5);
    box-shadow: 0 0 0 2px rgba(255,26,26,.2);
  }

  .lhub-join-submit {
    width: 100%;
    min-height: 48px;
    font-family: var(--f-mono);
    font-size: 14px;
    letter-spacing: .16em;
  }

  .lhub-join-msg {
    font-family: var(--f-body);
    font-size: 14px;
    color: rgba(255,255,255,.55);
    min-height: 18px;
    line-height: 1.4;
  }
  .lhub-join-msg--err { color: #FF6259; }
  .lhub-join-msg--ok  { color: #28C864; }

  /* ── Archived leagues section ────────────────────────────────────────── */
  .lhub-archived-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
  .lhub-arch-count {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--gray-light);
  }
  .lhub-archived-list {
    border-radius: 12px;
    padding-bottom: 8px;
  }
  .lhub-arch-help {
    font-family: var(--f-body);
    font-size: 14px;
    color: rgba(255,255,255,.45);
    padding: 12px 18px 8px;
    margin: 0;
    line-height: 1.5;
  }
  .lhub-arch-rows {
    list-style: none;
    margin: 0;
    padding: 0 12px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .lhub-arch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
  }
  .lhub-arch-helmet {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    flex: 0 0 36px;
    opacity: .6;
  }
  .lhub-arch-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .lhub-arch-name {
    font-family: var(--f-display);
    font-size: 16px;
    color: rgba(255,255,255,.7);
    letter-spacing: .03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lhub-arch-meta {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--gray-light);
    text-transform: uppercase;
  }
  .lhub-delete-btn {
    flex: 0 0 auto;
    background: rgba(255,59,48,.08);
    color: #FF6259;
    border: 1px solid rgba(255,59,48,.4);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .15s, color .15s;
    min-height: 44px;
    text-transform: uppercase;
  }
  .lhub-delete-btn:hover { background: rgba(255,59,48,.85); color: #fff; }
  .lhub-delete-btn[disabled] { opacity: .5; cursor: not-allowed; }

  /* ── ≥1200px desktop composition ────────────────────────────────────── */
  @media (min-width: 1200px) {
    .leagues-hub-content { padding: 28px 32px 64px; gap: 28px; }
    .lhub-hero { min-height: 200px; }
    .lhub-league-card { min-height: 224px; }
    .lhub-disc-grid { gap: 20px; }
  }

  /* ── ≥1700px ultra-wide composition ─────────────────────────────────── */
  @media (min-width: 1700px) {
    .leagues-hub-content { padding: 36px 48px 80px; gap: 32px; }
    .lhub-hero { min-height: 220px; }
    .lhub-hero-title { font-size: 44px; }
    .lhub-cards-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
    .lhub-league-card { min-height: 248px; }
    .lhub-disc-title { font-size: 26px; }
    .lhub-card-name { font-size: 17px; }
    .lhub-st-name, .lhub-act-body { font-size: 15px; }
  }

  /* ── Mobile (≤880px) ──────────────────────────────────────────────────── */
  @media (max-width: 880px) {
    .leagues-hub-content { padding: 16px 14px 48px; gap: 18px; }
    .lhub-hero { min-height: 150px; }
    .lhub-hero-inner { padding: 20px 18px; gap: 16px; }
    .lhub-hero-title { font-size: 24px; }
    .lhub-hero-actions { flex-direction: row; width: 100%; }
    .lhub-hero-cta { min-width: 120px; font-size: 13px; }
    .lhub-right-rail { grid-template-columns: 1fr; gap: 18px; }
    .lhub-disc-grid { grid-template-columns: 1fr; }
    .lhub-section-title { font-size: 21px; }
    .lhub-rail-title { font-size: 19px; }
    .lhub-head-links { gap: 6px; }
  }
  @media (max-width: 480px) {
    .lhub-hero-actions { flex-wrap: wrap; }
  }

} /* end html[data-route="/leagues"] scope */