/*
 * leagues.css — My Leagues landing v5.0
 * Scoped to html[data-route="/leagues"] so zero bleed to other pages.
 *
 * v5.0 (2026-07-22) rebuilds the hub on the club-design landing-page layout:
 * the league grid IS the page. The old two-column dashboard (VIEWING selector +
 * THIS WEEK matchup + standings peek + activity ticker) is gone — that content
 * lives inside each league's own page, and duplicating it here made the hub a
 * cluttered second dashboard. See DECISIONS.md.
 *
 * The layout is the club design's; every color / face / radius / easing is an
 * SNS token. Design's Cinzel/Oswald/Space Mono → --f-display/--f-body/--f-mono.
 * Design's #e11f2c accent → --red-primary. Design's #33c17a live-green →
 * --sns-trend-up (the one green already in the token set).
 */

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

  /* ── Page shell ───────────────────────────────────────────────────────── */
  /* Design's radial "glow from above", rebuilt on the SNS black ramp with a
     brand-red (not maroon) tint so it reads as the same page family as /dashboard. */
  body {
    background:
      radial-gradient(140% 90% at 50% -10%,
        #1a0809 0%, #0a0a0c 42%, var(--black-bg, #050505) 100%);
    background-attachment: fixed;
  }

  .leagues-hub-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 34px 44px 48px;
    min-width: 0;
    max-width: var(--sns-app-max, 1440px);
  }

  /* ── Header row ───────────────────────────────────────────────────────── */
  .lhub-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
  }
  .lhub-head-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .lhub-title {
    font-family: var(--f-display);
    font-size: var(--sns-fs-36, 36px);
    line-height: var(--sns-lh-flush, 1);
    letter-spacing: var(--sns-ls-tight, .02em);
    color: var(--white-bright);
    margin: 0;
  }
  .lhub-summary {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-12, 12px);
    letter-spacing: var(--sns-ls-mono, .08em);
    color: var(--gray-light);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* The "·" separators between summary clauses. */
  .lhub-summary .lhub-sum-sep { color: #3d3d43; }
  .lhub-summary .lhub-sum-n {
    font-weight: var(--sns-fw-bold, 700);
    color: var(--white-bright);
  }
  .lhub-summary .lhub-sum-n--live { color: var(--sns-trend-up, #5ad07a); }
  .lhub-summary .lhub-sum-n--attn { color: var(--red-bright, #FF3B30); }

  /* ── Header buttons ───────────────────────────────────────────────────── */
  .lhub-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .lhub-hd-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    border-radius: var(--sns-radius-2xl, 12px);
    background: var(--black-soft, #111111);
    border: 1px solid var(--hairline-2, rgba(255,255,255,.1));
    color: #d6d6d9;
    font-family: var(--f-body);
    font-size: var(--sns-fs-13, 13px);
    font-weight: var(--sns-fw-semi, 600);
    letter-spacing: var(--sns-ls-button, .14em);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--sns-dur-fast, .15s) var(--sns-ease-out, ease),
                color var(--sns-dur-fast, .15s) var(--sns-ease-out, ease);
  }
  .lhub-hd-link:hover,
  .lhub-hd-link:focus-visible {
    border-color: rgba(255,255,255,.24);
    color: var(--white-bright);
  }
  .lhub-hd-link:focus-visible {
    outline: 2px solid var(--red-bright, #FF3B30);
    outline-offset: 2px;
  }
  .lhub-hd-link[hidden] { display: none; }

  /* Primary: + JOIN / CREATE — the one filled button in the header. */
  .lhub-hd-link--join {
    padding: 0 24px;
    font-weight: var(--sns-fw-bold, 700);
    background: linear-gradient(90deg, var(--red-primary, #FF1A1A), var(--brand-red-deep, #C40000));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 24px -8px var(--red-primary, #FF1A1A);
  }
  .lhub-hd-link--join:hover,
  .lhub-hd-link--join:focus-visible {
    filter: brightness(1.08);
    border-color: transparent;
    color: #fff;
  }
  .lhub-hd-link--err { color: #FF6259; border-color: rgba(255,59,48,.4); }
  .lhub-hd-link--err:hover { color: #fff; border-color: rgba(255,59,48,.7); }

  /* Compact labels swap in on narrow screens (see responsive block). */
  .lhub-pf-compact, .lhub-join-compact { display: none; }

  /* ── League cap banner ────────────────────────────────────────────────── */
  .lhub-cap-banner {
    background: rgba(255,45,45,.08);
    border: 1px solid rgba(255,45,45,.35);
    border-radius: var(--sns-radius-lg, 8px);
    padding: 10px 14px;
    font-family: var(--f-body);
    font-size: var(--sns-fs-15, 15px);
    color: var(--red-bright, #FF3B30);
    line-height: var(--sns-lh-body, 1.5);
  }
  .lhub-cap-banner[hidden] { display: none; }

  /* ── League synopsis grid ─────────────────────────────────────────────── */
  .lhub-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    min-width: 0;
  }
  .sns-sk-card { width: auto; height: 168px; border-radius: var(--sns-radius-3xl, 14px); }

  .lhub-card-wrap {
    position: relative;
    min-width: 0;
    display: flex;
  }

  /* ── The card ─────────────────────────────────────────────────────────── */
  .lhub-league-card {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 22px 20px;
    background: linear-gradient(180deg, #121215 0%, #0A0A0C 100%);
    border: 1px solid var(--hairline-2, rgba(255,255,255,.1));
    border-radius: var(--sns-radius-3xl, 14px);
    text-decoration: none;
    transition: transform var(--sns-dur-fast, .15s) var(--sns-ease-out, ease),
                border-color var(--sns-dur-fast, .15s) var(--sns-ease-out, ease);
  }
  .lhub-league-card:hover,
  .lhub-league-card:focus-visible {
    border-color: rgba(255,255,255,.2);
    transform: translateY(-2px);
  }
  .lhub-league-card:focus-visible {
    outline: 2px solid var(--red-bright, #FF3B30);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .lhub-league-card { transition: none; }
    .lhub-league-card:hover, .lhub-league-card:focus-visible { transform: none; }
  }

  /* Status strip — 3px full-bleed bar pinned to the card's top edge.
     Green = healthy/live, red = wants your attention. */
  .lhub-league-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--red-primary, #FF1A1A);
  }
  .lhub-league-card--live::before { background: var(--sns-trend-up, #5ad07a); }

  /* ── Card header: helmet + info ───────────────────────────────────────── */
  .lhub-card-head {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
  }
  .lhub-card-helmet {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: var(--sns-radius-3xl, 14px);
    background: var(--sns-grad-team-logo-fb, linear-gradient(135deg,#2a0a0a,#0a0a0a));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 22px -10px #000;
  }
  .lhub-card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* Clear the ⋯ overflow button parked in the card's top-right corner. */
    padding-right: 28px;
  }
  /* wrap is required so a wide badge doesn't clip the role tag */
  .lhub-card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
  }
  .lhub-card-badge {
    font-family: var(--f-body);
    font-size: var(--sns-fs-10, 10px);
    font-weight: var(--sns-fw-bold, 700);
    letter-spacing: var(--sns-ls-wide, .2em);
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--sns-radius-md, 6px);
    white-space: nowrap;
    /* default = attention state: filled brand red */
    background: var(--red-primary, #FF1A1A);
    border: 1px solid transparent;
    color: #fff;
  }
  /* "Do something" states (draft due, lineup unset, results up) keep the base
     filled red — spelled out so the modifier set reads complete. */
  .lhub-card-badge--attn {
    background: var(--red-primary, #FF1A1A);
    border-color: transparent;
    color: #fff;
  }
  /* Live/healthy states read as an outlined green chip, not a red alarm. */
  .lhub-card-badge--live {
    background: transparent;
    border-color: var(--sns-trend-up, #5ad07a);
    color: var(--sns-trend-up, #5ad07a);
  }
  /* Recruiting = outlined red: an invitation, not an alarm. */
  .lhub-card-badge--recruit {
    background: transparent;
    border-color: var(--red-primary, #FF1A1A);
    color: var(--red-bright, #FF3B30);
  }
  .lhub-card-badge--dormant {
    background: rgba(255,255,255,.06);
    border-color: var(--hairline-2, rgba(255,255,255,.1));
    color: var(--gray-light);
  }
  .lhub-card-badge--pulse { animation: lhub-badge-pulse 1.2s ease-in-out infinite; }
  @keyframes lhub-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-card-badge--pulse { animation: none; } }

  .lhub-card-role {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-10, 10px);
    letter-spacing: var(--sns-ls-eyebrow, .12em);
    text-transform: uppercase;
    color: #6f6f76;
    white-space: nowrap;
  }
  .lhub-card-name {
    font-family: var(--f-display);
    font-size: var(--sns-fs-20, 20px);
    line-height: 1.1;
    letter-spacing: var(--sns-ls-tight, .02em);
    color: var(--white-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    min-width: 0;
  }

  /* ── Stat row ─────────────────────────────────────────────────────────── */
  .lhub-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    border-top: 1px solid var(--hairline, rgba(255,255,255,.06));
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,.06));
  }
  .lhub-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    min-width: 0;
  }
  .lhub-stat-k {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: var(--sns-ls-eyebrow, .12em);
    text-transform: uppercase;
    color: #6f6f76;
  }
  .lhub-stat-v {
    font-family: var(--f-numeral, var(--f-display));
    font-size: var(--sns-fs-17, 17px);
    color: var(--white-bright);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Rank/record still resolving — hold the slot without showing a fake value. */
  .lhub-stat-v--pending { color: #3d3d43; }

  /* ── Synopsis + CTA ───────────────────────────────────────────────────── */
  .lhub-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
  }
  .lhub-card-status {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  .lhub-card-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red-primary, #FF1A1A);
    box-shadow: 0 0 10px var(--red-primary, #FF1A1A);
  }
  .lhub-league-card--live .lhub-card-dot {
    background: var(--sns-trend-up, #5ad07a);
    box-shadow: 0 0 10px var(--sns-trend-up, #5ad07a);
  }
  .lhub-card-statustext {
    font-family: var(--f-body);
    font-size: var(--sns-fs-14, 14px);
    color: #b7b7bd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .lhub-card-cta {
    flex: 0 0 auto;
    font-family: var(--f-body);
    font-size: var(--sns-fs-12, 12px);
    font-weight: var(--sns-fw-bold, 700);
    letter-spacing: var(--sns-ls-button, .14em);
    text-transform: uppercase;
    color: var(--red-bright, #FF3B30);
    white-space: nowrap;
  }
  .lhub-league-card:hover .lhub-card-cta { color: var(--white-bright); }

  /* ── Card overflow menu (⋯) ───────────────────────────────────────────── */
  /* Pat 07-22: a tapped menu, not a hover-reveal bar — hover affordances test
     badly on touch, and these are destructive-adjacent actions. */
  .lhub-card-menu-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sns-radius-lg, 8px);
    color: #6f6f76;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--sns-dur-fast, .15s) var(--sns-ease-out, ease),
                background var(--sns-dur-fast, .15s) var(--sns-ease-out, ease);
  }
  /* The chip stays visually 30px, but the tap area is the full 44px SNS touch
     target — a 30px hit box is a miss-magnet on a phone. */
  .lhub-card-menu-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--sns-touch-target, 44px);
    height: var(--sns-touch-target, 44px);
  }
  .lhub-card-menu-btn:hover,
  .lhub-card-menu-btn[aria-expanded="true"] {
    color: var(--white-bright);
    background: rgba(255,255,255,.07);
    border-color: var(--hairline-2, rgba(255,255,255,.1));
  }
  .lhub-card-menu-btn:focus-visible {
    outline: 2px solid var(--red-bright, #FF3B30);
    outline-offset: 2px;
  }

  .lhub-card-menu {
    position: absolute;
    top: 46px;
    right: 12px;
    z-index: 5;
    min-width: 178px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: #101014;
    border: 1px solid var(--hairline-2, rgba(255,255,255,.1));
    border-radius: var(--sns-radius-2xl, 12px);
    box-shadow: 0 16px 40px rgba(0,0,0,.7);
  }
  .lhub-card-menu[hidden] { display: none; }
  .lhub-card-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--sns-radius-lg, 8px);
    color: #d6d6d9;
    font-family: var(--f-body);
    font-size: var(--sns-fs-13, 13px);
    font-weight: var(--sns-fw-medium, 500);
    letter-spacing: var(--sns-ls-base, .04em);
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    min-height: var(--sns-touch-target, 44px);
  }
  .lhub-card-menu-item:hover,
  .lhub-card-menu-item:focus-visible {
    background: rgba(255,255,255,.06);
    color: var(--white-bright);
    outline: none;
  }
  .lhub-card-menu-item svg { width: 15px; height: 15px; flex: 0 0 15px; }
  .lhub-card-menu-item--danger { color: #FF6259; }
  .lhub-card-menu-item--danger:hover,
  .lhub-card-menu-item--danger:focus-visible {
    background: rgba(255,59,48,.12);
    color: #FF8078;
  }

  /* ── Empty state ──────────────────────────────────────────────────────── */
  .lhub-cards-grid.lhub-cards-grid--empty { grid-template-columns: 1fr; }
  .lhub-cards-empty {
    min-width: 0;
    padding: 40px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: linear-gradient(180deg, #121215 0%, #0A0A0C 100%);
    border: 1px solid var(--hairline, rgba(255,255,255,.06));
    border-radius: var(--sns-radius-3xl, 14px);
  }
  .lhub-empty-art { width: 120px; height: 120px; object-fit: contain; opacity: .7; }
  .lhub-empty-h {
    font-family: var(--f-display);
    font-size: var(--sns-fs-20, 20px);
    color: rgba(255,255,255,.65);
    margin: 0;
    letter-spacing: var(--sns-ls-tight, .02em);
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .lhub-empty-sub {
    font-size: var(--sns-fs-13, 13px);
    color: var(--gray-light);
    margin: 4px 0 0;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .lhub-empty-sub b { color: rgba(255,255,255,.8); }
  .lhub-empty-cta { margin-top: 14px; }
  .lhub-demo-cta { margin-top: 14px; font-size: var(--sns-fs-13, 13px); letter-spacing: var(--sns-ls-base, .04em); opacity: .85; }

  /* ── Join / create bar ────────────────────────────────────────────────── */
  .lhub-joinbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(180deg, #111113 0%, #0d0d0f 100%);
    border: 1px solid var(--hairline, rgba(255,255,255,.06));
    border-radius: var(--sns-radius-3xl, 14px);
  }
  .lhub-joinbar-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
  }
  .lhub-joinbar-h {
    font-family: var(--f-body);
    font-size: var(--sns-fs-15, 15px);
    font-weight: var(--sns-fw-semi, 600);
    letter-spacing: var(--sns-ls-base, .04em);
    text-transform: uppercase;
    color: #f0f0f2;
  }
  .lhub-joinbar-sub {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-11, 11px);
    color: #6f6f76;
  }
  .lhub-code-input {
    flex: 1 1 220px;
    min-width: 220px;
    height: 52px;
    padding: 0 18px;
    background: #0c0c0e;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--sns-radius-2xl, 12px);
    color: var(--white-bright);
    font-family: var(--f-mono);
    font-size: var(--sns-fs-13, 13px);
    letter-spacing: var(--sns-ls-mono, .08em);
    text-transform: uppercase;
  }
  .lhub-code-input::placeholder { color: #5c5c62; text-transform: none; letter-spacing: normal; }
  .lhub-code-input:focus-visible {
    outline: 2px solid var(--red-bright, #FF3B30);
    outline-offset: 1px;
    border-color: transparent;
  }
  .lhub-joinbar .lhub-join-submit {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 30px;
    border-radius: var(--sns-radius-2xl, 12px);
    font-family: var(--f-body);
    font-size: var(--sns-fs-14, 14px);
    font-weight: var(--sns-fw-bold, 700);
    letter-spacing: var(--sns-ls-button, .14em);
    text-transform: uppercase;
  }
  .lhub-join-or {
    flex: 0 0 auto;
    font-family: var(--f-body);
    font-size: var(--sns-fs-13, 13px);
    font-weight: var(--sns-fw-semi, 600);
    letter-spacing: var(--sns-ls-base, .04em);
    text-transform: uppercase;
    color: var(--gray-light);
    text-decoration: none;
  }
  .lhub-join-or:hover, .lhub-join-or:focus-visible { color: var(--white-bright); }
  .lhub-join-msg {
    flex: 1 0 100%;
    font-family: var(--f-mono);
    font-size: var(--sns-fs-12, 12px);
    letter-spacing: var(--sns-ls-mono, .08em);
    color: var(--gray-light);
  }
  .lhub-join-msg:empty { display: none; }
  .lhub-join-msg--err { color: #FF6259; }
  .lhub-join-msg--ok  { color: var(--sns-trend-up, #5ad07a); }

  /* ── Archived leagues (modal, commissioner-only) ──────────────────────── */
  #lhub-archived-host:empty { display: none; }
  #lhub-archived-host:not(.lhub-arch-modal-open) { display: none; }
  #lhub-archived-host.lhub-arch-modal-open {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(3px);
    padding: 24px;
  }
  .lhub-arch-modal-card {
    background: #101014;
    border: 1px solid var(--hairline-2, rgba(255,255,255,.1));
    border-radius: var(--sns-radius-3xl, 14px);
    max-width: 480px;
    width: 100%;
    max-height: min(560px, 84vh);
    overflow-y: auto;
    padding: 18px 18px 14px;
  }
  .lhub-arch-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
  .lhub-arch-modal-x {
    background: transparent;
    border: none;
    color: var(--gray-light);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--sns-radius-md, 6px);
    min-height: 32px;
  }
  .lhub-arch-modal-x:hover { color: var(--white-bright); background: rgba(255,255,255,.06); }
  .lhub-sect-label {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-12, 12px);
    letter-spacing: var(--sns-ls-wide, .2em);
    color: var(--gray-light);
    text-transform: uppercase;
    margin: 0;
  }
  /* The ARCHIVED topbar chip collapses to a bare count on narrow screens. */
  .lhub-arch-trig-compact { display: none; }
  .lhub-archived-section { display: flex; flex-direction: column; gap: 10px; }
  .lhub-arch-count {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-12, 12px);
    letter-spacing: var(--sns-ls-mono, .08em);
    color: var(--gray-light);
  }
  .lhub-arch-help {
    font-family: var(--f-body);
    font-size: var(--sns-fs-14, 14px);
    color: rgba(255,255,255,.45);
    padding: 12px 0 8px;
    margin: 0;
    line-height: var(--sns-lh-body, 1.5);
  }
  .lhub-archived-list { border-radius: var(--sns-radius-2xl, 12px); padding-bottom: 8px; }
  .lhub-arch-rows {
    list-style: none;
    margin: 0;
    padding: 0 0 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, rgba(255,255,255,.1));
    border-radius: var(--sns-radius-lg, 8px);
  }
  .lhub-arch-helmet {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: var(--sns-radius-md, 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: var(--sns-fs-15, 15px);
    color: rgba(255,255,255,.7);
    letter-spacing: var(--sns-ls-tight, .02em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  a.lhub-arch-name:hover, a.lhub-arch-name:focus-visible { color: var(--white-bright); text-decoration: underline; }
  .lhub-arch-meta {
    font-family: var(--f-mono);
    font-size: var(--sns-fs-11, 11px);
    letter-spacing: var(--sns-ls-mono, .08em);
    color: var(--gray-light);
    text-transform: uppercase;
  }
  .lhub-arch-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
  .lhub-arch-actions .lhub-unarchive-btn { min-height: 34px; }
  .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: var(--sns-radius-md, 6px);
    padding: 6px 10px;
    font-family: var(--f-mono);
    font-size: var(--sns-fs-11, 11px);
    letter-spacing: var(--sns-ls-mono, .08em);
    cursor: pointer;
    transition: background var(--sns-dur-fast, .15s), color var(--sns-dur-fast, .15s);
    min-height: 30px;
    text-transform: uppercase;
  }
  .lhub-delete-btn:hover { background: rgba(255,59,48,.85); color: #fff; }
  .lhub-delete-btn[disabled] { opacity: .5; cursor: not-allowed; }

  /* ── Responsive ───────────────────────────────────────────────────────── */
  /* Design: below ~900px the grid collapses to one column. The sidebar already
     becomes the locked bottom tab bar + More sheet at 880 via chrome.js — we do
     NOT reintroduce a hamburger drawer (chrome v5.0, #411). */
  @media (max-width: 1100px) {
    .leagues-hub-content { padding: 28px 28px 44px; gap: 24px; }
  }
  @media (max-width: 900px) {
    .lhub-cards-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 880px) {
    .leagues-hub-content {
      padding: 20px var(--sns-content-px-mb, 12px) 96px;
      gap: 20px;
    }
    .lhub-title { font-size: var(--sns-fs-28, 28px); }
    .lhub-head { align-items: flex-start; gap: 16px; }
    .lhub-head-actions { width: 100%; gap: 8px; }
    /* Header buttons share the row evenly rather than wrapping raggedly. */
    .lhub-head-actions .lhub-hd-link { flex: 1 1 auto; padding: 0 14px; }
    .lhub-pf-full, .lhub-join-full { display: none; }
    .lhub-pf-compact, .lhub-join-compact { display: inline; }
    #lhub-archived-trigger .lhub-arch-trig-full { display: none; }
    #lhub-archived-trigger .lhub-arch-trig-compact {
      display: inline-flex; align-items: center; justify-content: center;
      font-size: var(--sns-fs-12, 12px);
    }
    .lhub-joinbar { padding: 18px 16px; gap: 12px; }
    .lhub-joinbar-label { flex: 1 0 100%; }
    .lhub-code-input { flex: 1 1 100%; min-width: 0; }
    .lhub-joinbar .lhub-join-submit { flex: 1 1 auto; }
    .lhub-join-or { flex: 1 1 100%; text-align: center; }
  }
  @media (max-width: 480px) {
    .lhub-league-card { padding: 18px 16px 16px; gap: 14px; }
    .lhub-card-head { gap: 14px; }
    .lhub-card-helmet { flex-basis: 56px; width: 56px; height: 56px; }
    .lhub-card-name { font-size: var(--sns-fs-18, 18px); }
    .lhub-stat-v { font-size: var(--sns-fs-15, 15px); }
    /* Status + CTA stack so neither gets ellipsised to nothing on a phone. */
    .lhub-card-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lhub-card-menu { right: 8px; left: 8px; min-width: 0; }
  }
}