/* ── APP SHELL: SIDEBAR ── */
    .app{display:flex;min-height:100vh}
    /* Compact rail: icon + short label, not a wide traditional sidebar. 188px -> 240px, because
       the footer identity block is [avatar][name/facility][cog] and 188px left roughly 80px for the
       text — enough to ellipsise most real first+last names. 240px gives it ~130px, measured to
       fit not just "Roman Krupka" (109px) but the long end too — "Alexandra Fitzgerald" needs
       124px — so the fit isn't marginal for whoever signs up next. Still a rail, not a panel. */
    /* The sidebar is a LIGHT island in a dark app. Besides its own --sidebar-* ramp it re-declares
       the content tokens locally, so the few rules inside it that reach for the general scale —
       the facility switcher's popup menu — resolve against white rather than inheriting the dark
       page values and rendering light text on a white menu. */
    .sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--sidebar-b);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;padding:1rem .6rem 1rem;z-index:200;overflow-y:auto;
      --s1:#FFFFFF;--s2:#F1F2F4;--s3:#FFFFFF;
      --b1:#ECECEF;--b2:#DEDFE3;--b3:#C7C8CE;
      --text:#0B0B0F;--t2:#4B4B55;--t3:#8A8B94;--t4:#B7B8C0}
    /* The logo asset is dark artwork composited with mix-blend-mode:multiply, which renders it
       invisible on a dark surface. Rather than inverting or recolouring the real logo, it sits on
       a light plate — the asset itself is untouched. */
    .sidebar__brand{display:flex;align-items:center;gap:.5rem;padding:.15rem .25rem 1rem}
    /* The mark fills the rail's width rather than sitting as a small chip in the corner. The plate
       is kept — it is what makes the logo survive on a dark surface (the asset is dark artwork
       using mix-blend-mode:multiply), and it still does that work in the mobile app bar even
       though it is invisible against the now-light sidebar. */
    .sidebar__plate{background:#FFFFFF;border-radius:8px;padding:.3rem .4rem;display:inline-flex;align-items:center;justify-content:center;width:100%}
    .brand-logo{width:100%;max-width:188px;height:auto;display:block;mix-blend-mode:multiply}
    .side-nav{display:flex;flex-direction:column;gap:.12rem;flex:1}
    .side-link{display:flex;align-items:center;gap:.6rem;padding:.52rem .6rem;border-radius:9px;font-family:var(--fb);font-size:.82rem;font-weight:500;color:var(--sidebar-t2);transition:all var(--ease);cursor:pointer;width:100%;text-align:left}
    .side-link svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
    .side-link:hover{background:var(--sidebar-hover);color:var(--sidebar-t)}
    .side-link.active{background:var(--sidebar-active);color:var(--sidebar-t);font-weight:600}
    /* the one green accent in the sidebar: a rail on the active route */
    .side-link.active{position:relative}
    .side-link.active::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--lime)}
    .side-sep{height:1px;background:var(--sidebar-b);margin:.6rem .4rem}
    .side-foot{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
    /* Sync status, on its own row now that the identity button below shows Display Name / Facility
       Name (#33). Its own line rather than a dot on the avatar: "Sync error — retrying" is a
       sentence a coach needs to be able to read, not a colour to decode. */
    .side-sync{font-family:var(--fb);font-size:.62rem;color:var(--sidebar-t2);padding:0 .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .side-user{display:flex;align-items:center;gap:.65rem;padding:.35rem .5rem}
    .side-user--btn{width:100%;border:1px solid transparent;border-radius:10px;cursor:pointer;transition:all var(--ease);margin-top:.35rem}
    .side-user--btn:hover{background:var(--sidebar-hover);border-color:var(--sidebar-b)}
    .side-user--btn.active{background:var(--sidebar-active);border-color:var(--sidebar-b)}
    .side-user__cog{width:17px;height:17px;flex-shrink:0;margin-left:auto;color:var(--sidebar-t2)}
    .side-user--btn:hover .side-user__cog{color:var(--sidebar-t)}
    .side-avatar{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:600;font-size:.78rem;letter-spacing:0;flex-shrink:0}
    .side-user__name{font-family:var(--fb);font-size:.78rem;font-weight:600;color:var(--sidebar-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* facility switcher (E-1) — only rendered when the account has 2+ memberships */
    .fac-switcher{position:relative}
    .fac-current{display:flex;align-items:center;gap:.5rem;width:100%;padding:.42rem .55rem;border:1px solid var(--sidebar-b);border-radius:10px;background:transparent;cursor:pointer;text-align:left;transition:all var(--ease)}
    .fac-current:hover:not(:disabled){background:var(--sidebar-hover);border-color:var(--sidebar-t2)}
    .fac-current:disabled{opacity:.55;cursor:default}
    .fac-current__label{min-width:0;display:flex;flex-direction:column;gap:.05rem}
    .fac-current__eyebrow{font-family:var(--fb);font-size:.64rem;font-weight:500;letter-spacing:0;color:var(--sidebar-t2)}
    .fac-current__name{font-family:var(--fb);font-size:.74rem;font-weight:600;color:var(--sidebar-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .fac-current__chev{width:14px;height:14px;flex-shrink:0;margin-left:auto;color:var(--sidebar-t2)}
    /* Opens upward: the switcher sits in the sidebar footer, so there is no room below it. */
    .fac-menu{position:absolute;bottom:calc(100% + .35rem);left:0;right:0;background:var(--card,#fff);border:1px solid var(--b2);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.14);padding:.25rem;z-index:260;max-height:min(52vh,320px);overflow-y:auto}
    .fac-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.44rem .5rem;border-radius:8px;background:transparent;cursor:pointer;text-align:left;transition:background var(--ease)}
    .fac-item:hover{background:rgba(10,12,20,.055)}
    .fac-item--active{background:#E5E6EA}
    .fac-item__name{font-family:var(--fb);font-size:.74rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    .fac-item__role{font-family:var(--fb);font-size:.7rem;font-weight:500;letter-spacing:0;color:var(--t3);margin-left:auto;flex-shrink:0}
    .side-user__sub{font-family:var(--fb);font-size:.6rem;color:var(--sidebar-t2)}
    .main{flex:1;margin-left:240px;min-width:0}

    /* mobile app bar + drawer */
    .appbar{display:none}
    .scrim{display:none}
    @media(max-width:900px){
      .sidebar{transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 0 40px rgba(0,0,0,.18);padding-top:calc(1.5rem + env(safe-area-inset-top))}
      .sidebar.open{transform:translateX(0)}
      .main{margin-left:0}
      .appbar{display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:150;background:rgba(14,16,20,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--b1);padding:.55rem 1rem;padding-top:calc(.55rem + env(safe-area-inset-top))}
      .appbar__burger{width:40px;height:40px;border-radius:10px;border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;color:var(--text);background:var(--s1)}
      .appbar__brand{display:inline-flex;align-items:center}
      /* Same plate as the sidebar's, for the same reason: the logo is dark artwork composited with
         mix-blend-mode:multiply and disappears outright on the now-dark app bar. */
      .appbar__plate{display:inline-flex;align-items:center;background:#FFFFFF;border-radius:7px;padding:.18rem .34rem}
    .appbar__brand .brand-logo{width:auto;height:24px}
      .scrim{display:block;position:fixed;inset:0;background:rgba(10,12,20,.35);z-index:190;opacity:0;pointer-events:none;transition:opacity .25s}
      .scrim.open{opacity:1;pointer-events:auto}
    }

    /* ── TABS ── */
    .subnav{display:none;padding:.85rem 2.25rem;border-bottom:1px solid var(--b1);background:var(--bg)}
    @media(max-width:720px){.subnav{padding:.65rem 1.1rem}}
    .subnav__inner{display:inline-flex;gap:.25rem;background:var(--s1);border:1px solid var(--b1);border-radius:100px;padding:.25rem;max-width:100%;overflow-x:auto}
.subnav__btn{font-family:var(--fb);font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--t3);padding:.5rem 1.15rem;border-radius:100px;transition:all var(--ease);white-space:nowrap}
.subnav__btn:hover{color:var(--t2)}
.subnav__btn.active{background:var(--lime);color:var(--on-accent)}
    .tab-pane{display:none}
    .tab-pane.active{display:block;min-height:100vh}
    .wrap{max-width:1180px;margin:0 auto;padding:1.9rem 2rem 4rem}
    @media(max-width:720px){.wrap{padding:1.5rem 1.1rem 4rem}}
    .side-avatar--img{background:#fff;border:1px solid var(--sidebar-b)}
    .side-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
    /* sidebar gym identity (below AJ logo, above nav) */
    .side-gym{padding:.1rem .6rem .9rem;border-bottom:1px solid var(--sidebar-b);margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem;min-height:0}
    .side-gym:empty{display:none}
    .side-gym img{height:32px;width:auto;max-width:90px;object-fit:contain;border-radius:6px}
    .side-gym__name{font-family:var(--fb);font-weight:700;font-size:.82rem;color:var(--sidebar-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
    /* appbar gym name — appears after AJ logo on mobile */
    .appbar__gym{font-family:var(--fb);font-weight:700;font-size:.8rem;color:var(--t2);margin-left:.45rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}