/* ─────────────────────────────────────────────────────────────────────────
   app-shell.css
   ─────────────────────────────────────────────────────────────────────────
   Shared layout for every non-Play page:
     • the standard BPC topbar (identical to index.html)
     • a left sidebar (Me card, Connections, Dashboard, static sections)
     • a main-content column into which the page's existing markup slots
   ─────────────────────────────────────────────────────────────────────────
   The shell is injected by app-shell.js at DOMContentLoaded — this file
   only supplies the styling. All CSS lifted from index.html so the look
   matches the feed page byte-for-byte. See app-shell.js for the JS side.
   Play-flow pages (match, controller, judges, brackets, training, …) do
   NOT include this shell and keep their own full-bleed layouts.
─────────────────────────────────────────────────────────────────────────── */


/* ── Layout wrappers ───────────────────────────────────────────────────── */
/* Mirrors .home-layout / .home-sidebar / .home-main in index.html — kept
   under distinct class names so pages that already use those (index.html)
   don't get double-styled. These values must stay in step with the homepage
   or the sidebar visibly shifts as you navigate (Mason, Aug 2026): the shell
   used to add a 28px flex gap and a 24px top margin the homepage doesn't
   have, so every inner page pushed the sidebar right and down relative to
   home. Gap is 0 and spacing comes from the sidebar's own padding, exactly
   as on the homepage. */
.app-shell-layout {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0; width: 100%; max-width: var(--layout-max); margin: 0 auto;
  padding: 0 var(--layout-pad); box-sizing: border-box;
}
.app-shell-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: transparent; border: none;
  border-right: 1px solid var(--border);
  border-radius: 0; padding: 8px 18px 24px 0;
  position: sticky; top: 16px;
  /* Viewport cap + internal scroll, in step with .home-sidebar: a sticky
     column taller than the viewport otherwise has an unreachable bottom
     (the homepage Gear menu bug, Mason Aug 2026). */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Standard-property theming, in step with .home-sidebar — any standard
     scrollbar property set makes Chrome ignore the site's webkit theming,
     so the colour must ride along or the bar renders default grey. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
  transition: width 0.18s ease, padding 0.18s ease, opacity 0.18s ease;
}
/* The layout gap is 0 to match the homepage, so the breathing room between
   the sidebar's border and the content lives here instead. */
.app-shell-main { flex: 1; min-width: 0; padding-left: 28px; }

/* Pages carry their own centring container (.bpc-page, #app) sized for a
   standalone page — 1100px. Inside the shell that container is nested in
   .app-shell-main, so its cap, not the shell's, decided the content width,
   and every page ended up slightly different (Mason found this site-wide,
   Aug 2026). Inside the shell the layout above is the single authority. */
.app-shell-main > .bpc-page,
.app-shell-main > #app {
  max-width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Desktop: hide/show sidebar so the content can use the full width. */
.app-shell-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  position: sticky; top: 16px; z-index: 5; flex-shrink: 0;
  width: 34px; height: 34px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; cursor: pointer; color: var(--off-white); font-size: var(--fs-body);
  transition: background 0.15s, border-color 0.15s;
}
.app-shell-collapse-btn:hover { background: var(--card); border-color: var(--border-light); }
.app-shell-layout.sidebar-collapsed .app-shell-sidebar {
  width: 0; padding: 0; border-width: 0; overflow: hidden; opacity: 0;
  margin: 0; pointer-events: none;
}


/* ── Sidebar innards (lifted verbatim from index.html) ─────────────────── */
/* Me card — photo + name → own profile. */
.sidebar-me {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--off-white);
  transition: background 0.15s;
  border-radius: 6px;
}
.sidebar-me:hover { background: var(--surface); }
.sidebar-me:hover .sidebar-me-name { color: var(--cyan); }
.sidebar-me-photo, .sidebar-me-photo-ph {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--surface); flex-shrink: 0;
}
.sidebar-me-photo-ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--dim);
  font-size: var(--fs-ui);
}
.sidebar-me-name {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em;
  font-size: var(--fs-body-sm); color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.15s;
}

/* Flat link (no accordion — single destination). */
.sidebar-flat-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--off-white);
  transition: background 0.15s;
}
.sidebar-flat-link:hover { background: var(--surface); color: var(--white); }
.sidebar-flat-link + .sidebar-flat-link { margin-top: 4px; }
.sidebar-flat-link + .sidebar-section { margin-top: 4px; }

/* Accordion section. */
.sidebar-section + .sidebar-section { margin-top: 4px; }
.sidebar-section-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer;
  padding: 10px 8px; border-radius: 6px;
  font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--off-white);
  transition: background 0.15s;
}
.sidebar-section-header:hover { background: var(--surface); }
.ssh-icon { display: inline-flex; width: 18px; justify-content: center; color: var(--dim); }
.ssh-label { flex: 1; text-align: left; }
.ssh-chevron { color: var(--dim); font-size: var(--fs-caption); transition: transform 0.15s; }
.sidebar-section.open .ssh-chevron { transform: rotate(180deg); }
.sidebar-links {
  display: none; flex-direction: column; padding: 2px 4px 8px 32px; gap: 2px;
}
.sidebar-section.open .sidebar-links { display: flex; }
.sidebar-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px; text-decoration: none;
  font-size: var(--fs-ui); color: var(--silver); transition: background 0.15s, color 0.15s;
}
.sidebar-link:hover { background: var(--surface); color: var(--off-white); }
.sidebar-link-icon { flex-shrink: 0; opacity: 0.8; font-size: var(--fs-body-sm); display:inline-flex; }

/* Non-clickable group label inside a section (e.g. "BPC" inside Compete).
   Distinct from a section header — no chevron, no click, just a divider
   with a subdued label. First one has no top border. */
.sidebar-subheader {
  padding: 8px 8px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--dim);
}
.sidebar-subheader:first-child { border-top: none; margin-top: 0; padding-top: 4px; }

/* Slightly clearer separation between top-level sections. Screenshots
   showed the sections blending into each other; a hairline + extra
   breathing room makes the hierarchy readable at a glance. */
.sidebar-section + .sidebar-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--depth); }
.sidebar-flat-link + .sidebar-section,
.sidebar-section:first-of-type { border-top: none; padding-top: 0; }


/* ── Topbar right-hand cluster (Messages / Bell / Account) ─────────────── */
/* Lifted from index.html — bpc-brand.css already covers .bpc-topbar itself,
   .bpc-brand, .bpc-wordmark and .bpc-conn-status, so we only need the
   three widgets that live inside .bpc-topbar-nav. */

/* Messages icon */
.bpc-msg-wrap { position: relative; display: inline-block; }
.bpc-msg-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--off-white);
  font-size: var(--fs-md);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  min-height: 34px;
}
.bpc-msg-btn:hover { border-color: var(--cyan); color: var(--white); }
.bpc-msg-btn svg { width: 18px; height: 18px; display: block; }
.bpc-msg-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-caption);
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: none; align-items: center; justify-content: center; line-height: 1;
}
.bpc-msg-badge.on { display: inline-flex; }

/* Account menu button — profile photo + name + chevron */
.bpc-acct-wrap { position: relative; display: inline-block; }
.bpc-acct-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--off-white);
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  line-height: 1;
  min-height: 34px;
}
.bpc-acct-btn:hover { border-color: var(--cyan); }
.bpc-acct-photo {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: var(--surface); flex-shrink: 0;
}
.bpc-acct-photo-ph {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small);
  color: var(--dim); flex-shrink: 0;
}
.bpc-acct-name {
  font-size: var(--fs-ui); color: var(--silver);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bpc-acct-chev {
  color: var(--dim); font-size: var(--fs-caption); line-height: 1; transition: transform 0.15s;
}
.bpc-acct-wrap.open .bpc-acct-chev { transform: rotate(180deg); }
.bpc-acct-wrap.open .bpc-acct-btn { border-color: var(--cyan); color: var(--white); }

/* Portal dropdown (positioned by JS via getBoundingClientRect). */
.bpc-acct-dropdown {
  position: fixed;
  width: 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  z-index: 99999;
  display: none;
  overflow: hidden;
  padding: 6px 0;
}
.bpc-acct-dropdown.open { display: block; }
.bpc-acct-dropdown-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.bpc-acct-dropdown-head-name {
  font-family: var(--font-display); font-weight: 800; color: var(--white);
  font-size: var(--fs-body-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bpc-acct-dropdown-head-role {
  font-size: var(--fs-caption); color: var(--dim); letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: 2px;
}
.bpc-acct-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  color: var(--off-white); text-decoration: none;
  cursor: pointer;
  font-size: var(--fs-body-sm);
  border: none; background: transparent; width: 100%; text-align: left;
  font-family: inherit;
}
.bpc-acct-item:hover { background: var(--surface); color: var(--white); }
.bpc-acct-item.danger { color: var(--loss); }
.bpc-acct-item.danger:hover { background: rgba(204,26,26,0.10); }
.bpc-acct-item-icon { width: 18px; text-align: center; opacity: 0.85; flex-shrink: 0; }
.bpc-acct-divider { height: 1px; background: var(--border); margin: 4px 0; }


/* Scrim behind the mobile nav drawer. Declared here, before the mobile
   block, so the media query's `display:block` wins on phones — put this
   after it and the cascade silently kills the scrim at every width. */
.app-shell-scrim { display: none; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
/* Below 900px, collapse the sidebar behind a hamburger button that lives
   in the topbar. On mobile the layout becomes single-column with the main
   content taking the full width. Bear in mind index.html has a separate
   (more sophisticated) mobile tabbar — the shell keeps things simpler for
   pages that don't have one. */

/* Marketplace lives in the homepage right-hand rail on desktop, so its
   sidebar section is redundant there (Mason, Aug 2026). It stays in the
   phone drawer, where there is no rail. index.html carries the same rule
   in its own sidebar CSS. */
@media (min-width: 901px) {
  .sidebar-section[data-section="market"] { display: none; }
}

@media (max-width: 900px) {
  /* align-items must flip to stretch with the direction. The desktop rule's
     flex-start is correct for a row (sidebar and content top-aligned) but in
     a column it stops stretching the main column to the viewport: it sizes
     to its content's MINIMUM width instead. Any page carrying a non-shrinking
     row -- athlete.html's tab strip is ~660px of flex:0 0 auto buttons --
     then widened the entire column to that, and the hero, bio and tiles all
     wrapped at 660px and ran off a 380px screen (Mason's screenshots, Aug
     2026). Stretch + min-width:0 keeps the column at viewport width and lets
     the tab strip scroll inside it as designed. */
  .app-shell-layout { flex-direction: column; align-items: stretch; padding: 0 12px; gap: 12px; margin: 12px auto; }
  .app-shell-main { width: 100%; min-width: 0; max-width: 100%; padding-left: 0; box-sizing: border-box; }
  .app-shell-collapse-btn { display: none; }
  /* Drawer: slides in over the content, dismissed by tapping the scrim or
     the hamburger again. Matches index.html — no in-drawer close button. */
  .app-shell-sidebar {
    display: block;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 2000;
    width: 82%; max-width: 320px;
    background: var(--bg);
    border: none; border-right: 1px solid var(--border); border-radius: 0;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
  }
  .app-shell-sidebar.mobile-open {
    transform: translateX(0); visibility: visible;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
  }
  .app-shell-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 1999;
    background: rgba(0,0,0,0.62);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .app-shell-scrim.open { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }

  .app-shell-hamburger {
    display: inline-flex;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--off-white);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: var(--fs-md);
    margin-right: 4px;
  }
  .app-shell-hamburger:hover { border-color: var(--cyan); }
  .bpc-acct-name { display: none; } /* room-saving on mobile */
}
.app-shell-hamburger { display: none; } /* hidden on desktop */

/* ── Mobile page-actions menu (#25) ──────────────────────────────────────
   Overflow home for rescued topbar actions below 900px. The ⋯ trigger only
   exists when a page rescued 2+ actions; the menu is a direct child of
   <body> (stacking-context pattern — see the bell). */
.app-shell-more-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--off-white);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: var(--fs-md);
  font-weight: 700;
}
.app-shell-more-btn:hover { border-color: var(--cyan); }
.app-shell-more-menu {
  display: none;
  position: fixed;
  z-index: 2600; /* over content and the pinned topbar, under nothing it needs */
  min-width: 210px;
  max-width: calc(100vw - 16px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  padding: 8px;
  flex-direction: column;
  gap: 6px;
}
.app-shell-more-menu.open { display: flex; }
/* Items keep their own classes (bpc-btn etc.) but stack full-width. */
.app-shell-more-menu > a,
.app-shell-more-menu > button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  min-height: 44px;
  align-items: center;
  margin: 0;
}

@media (max-width: 900px) {
  .app-shell-more-btn { display: inline-flex; }
  /* The dot carries the meaning; the label is desktop luxury. */
  .bpc-conn-status span { display: none; }
}