/* ==========================================================================
   The app shell: header, bottom navigation, section sub-navigation, the More sheet and global sheets (viewer selector, Data & Rankings), boot notice.
   Moved out of app.css unchanged (docs/architecture/PARALLEL_DEVELOPMENT_SPLIT.md).
   ========================================================================== */

  .header{
    text-align:center;
    padding:28px 16px 18px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, #1a1710 0%, transparent 100%);
  }
  .header .tag{
    font-family:'Helvetica Neue', Arial, sans-serif;
    letter-spacing:.28em;
    font-size:11px;
    color:var(--gold-soft);
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .header h1{
    margin:0;
    font-size:30px;
    letter-spacing:.03em;
    background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
  }
  .header .sub{
    font-family:'Helvetica Neue', Arial, sans-serif;
    color:var(--text-dim);
    font-size:12.5px;
    margin-top:6px;
  }

  .controls{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .tab-row{
    display:flex; gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
    font-family:'Helvetica Neue', Arial, sans-serif;
  }
/* ==========================================================================
   PRESTIGE V1 — new shell, navigation, podium
   Everything above this line is the original app, extracted unchanged.
   Everything below is new for Phase 1. Legacy elements (#tabrow, .header,
   .controls) are hidden visually via display:none rather than removed, so
   every existing JS reference to them keeps working exactly as before.
   ========================================================================== */

#legacyHeader, #tabrow { display: none !important; }

.shell-header{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-3);
  height: calc(var(--shell-header-height) + var(--shell-safe-top));
  padding: var(--shell-safe-top) var(--space-4) 0;
  background: var(--surface-0);
  border-bottom: 1px solid var(--surface-border);
}
.shell-header .brand-mark{
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.shell-header .brand-mark img, .shell-header .brand-mark svg{ width: 100%; height: 100%; }
.shell-header .brand-wordmark{
  font-family: var(--font-prestige); color: var(--text);
  font-size: 13.5px; letter-spacing: 0.09em; text-transform: uppercase;
  /* Never wrap to a second line -- the header is a fixed-height flex row, and
     the Full History pill sitting beside it must not be able to break it. */
  white-space: nowrap;
}
.shell-header .brand-wordmark b{ color: var(--gold-bright); font-weight: 400; }
.shell-section-title{
  font-family: var(--font-interface); color: var(--text-dim);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-left: auto; font-weight: 600;
}

.shell-bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex;
  height: calc(var(--shell-nav-height) + var(--shell-safe-bottom));
  padding-bottom: var(--shell-safe-bottom);
  background: var(--surface-1);
  border-top: 1px solid var(--surface-border);
}
/* Tabs: labels in muted text (AA), icons in the inactive grey (icons only --
   it fails AA for text), the active tab in the accent (Phase 1, map §3.1). */
.shell-nav-item{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer; min-height: 48px;
  color: var(--text-dim); font-family: var(--font-ui); font-size: 10.5px; font-weight: 500;
  padding: 8px 0 0; position: relative;
}
.shell-nav-item svg{ width: 22px; height: 22px; stroke: currentColor; display: block; color: var(--icon-inactive); }
.shell-nav-item.active{ color: var(--accent); }
.shell-nav-item.active svg{ color: var(--accent); }
.shell-nav-item.active::before{
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent);
}
/* The Play badge: things waiting on you, never 0 (DQ29). */
.shell-nav-badge{ position: absolute; top: 5px; left: calc(50% + 6px); line-height: 0; }
.shell-nav-item .nav-icon-fallback{
  width: 21px; height: 21px; border-radius: var(--radius-sm);
  border: 1.7px solid currentColor; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
}

.shell-more-sheet{
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(0,0,0,0.6);
}
.shell-more-sheet.show{ display: flex; align-items: flex-end; }
.shell-more-panel{
  width: 100%; background: var(--surface-1); border-top: 1px solid var(--surface-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + var(--shell-safe-bottom));
  max-height: 80vh; overflow-y: auto;
}
.shell-more-panel h3{
  font-family: var(--font-prestige); color: var(--gold-bright); margin: 0 0 var(--space-4);
  font-size: 18px; font-weight: 400;
}

/* Collapsible "how this works" */
.explainer-toggle{
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--gold-soft); font-family: var(--font-interface); font-size: 12px;
  padding: 10px 16px; cursor: pointer;
}

/* Sheet spacing refinement */
.shell-more-panel{ padding-top: var(--space-4); }

/* ==========================================================================
   SECTION ENTRIES -- one segmented control per section (Phase 1, 30 Sep):
   Rankings Power | This Month (+ More tables), Play's and Players' existing
   destinations. Always on screen for a section with more than one entry;
   never a hidden menu, never scrolling sideways.
   ========================================================================== */
.section-subnav{
  display: none; /* JS sets 'flex' when the section has entries */
  align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2);
}
.section-subnav .mp-seg{ flex: 1 1 auto; min-width: 0; }
/* Four entries (Play) share 343px: tighter padding, no ellipsis at 375. */
.section-subnav .mp-seg-item{ padding: 0 6px; font-size: 13.5px; }
.section-more-btn{
  flex: none; min-height: var(--touch-min); padding: 0 var(--space-3);
  background: none; border: 1px solid var(--surface-border); border-radius: var(--radius-pill);
  color: var(--text-dim); font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.section-more-btn[aria-pressed="true"]{ color: var(--text); border-color: var(--accent-hairline); background: var(--accent-wash); }
.section-more-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==========================================================================
   ME -- drawn instead of the app's screens (goToSection('me')). Every screen
   keeps its state underneath; only the shell, Me and sheets stay visible.
   ========================================================================== */
/* A list of navigation rows (Me, More tables) reads as one block. */
.shell-list{ background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-md); overflow: hidden; }
.shell-list .mp-list-row:last-child{ border-bottom: 0; }

#meView, #myGamesView, #clubView{ display: none; }
body.is-me #meView, body.is-mygames #myGamesView, body.is-club #clubView{ display: block; }
/* Only the shell, the screen it is showing, its section control and sheets. */
body:is(.is-me, .is-mygames, .is-club) > :not(.shell-header):not(#sectionSubnav):not(#meView):not(#myGamesView):not(#clubView):not(.shell-bottom-nav):not(.shell-more-sheet):not(.overlay):not(#bootNotice):not(.mp-toast):not(script){
  display: none !important;
}
/* Arrange a Game: the one accented entry beside Play's switch. */
.section-arrange-btn{ color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ==========================================================================
   VIEWER FOUNDATION -- first-launch player selector, My Player entry
   ========================================================================== */
.viewer-selector-panel{ padding-top: var(--space-5); max-height: 85vh; }
.viewer-selector-title{
  text-align: center; font-size: 24px; margin-top: 6px;
}
.viewer-selector-sub{
  text-align: center; font-family: var(--font-interface); font-size: 12.5px;
  color: var(--text-dim); margin: 6px 0 var(--space-4);
}
.viewer-search{
  display: block; width: 100%; box-sizing: border-box; height: 40px;
  background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-interface); font-size: 13px; padding: 0 12px;
  margin-bottom: var(--space-3);
}
.viewer-player-list{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 50vh; overflow-y: auto;
}
.viewer-player-btn{
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-prestige); font-size: 14px;
  padding: 12px 8px; cursor: pointer; text-align: center;
}
.viewer-player-btn:active{ border-color: var(--gold-hairline); color: var(--gold-bright); background: var(--gold-wash); }


/* ==========================================================================
   PERSONALISED HOME
   ========================================================================== */
.home-viewer-switch{
  background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: var(--radius-pill);
  color: var(--text); font-family: var(--font-interface); font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; cursor: pointer;
}

/* ==========================================================================
   PLAY HEADING -- deliberately distinct from Home's personalised hero.
   No photographic artwork, no greeting, no Your Game card. A restrained
   geometric court-line motif gives Play its own operational identity.
   ========================================================================== */
.play-heading{
  position: relative; padding: var(--space-4) var(--space-4) var(--space-3);
  overflow: hidden;
}
.play-heading-motif{
  position: absolute; top: 0; right: 0; width: 60%; height: 100%;
  color: var(--gold-dim); opacity: 0.12; stroke: currentColor; stroke-width: 1; fill: none;
  pointer-events: none;
}
.play-heading .mp-section-label, .play-heading .mp-display-title, .play-heading-sub{
  position: relative; z-index: 1;
}
.play-heading-sub{
  font-family: var(--font-interface); font-size: 12px; color: var(--text-dim); margin-top: 4px;
}

/* ==========================================================================
   DATA & RANKINGS -- the app-wide Data Range setting (More > Data & Rankings)
   Styled as a settings list, deliberately unlike the Rankings filter controls:
   this changes the dataset the whole app calculates from, it is not a filter.
   ========================================================================== */
.dr-options{ display: flex; flex-direction: column; gap: 8px; }
.dr-option{
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: 12px; cursor: pointer; font-family: var(--font-interface);
}
.dr-option.selected{ border-color: var(--gold-hairline); background: var(--gold-wash); }
.dr-radio{
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--text-dim); position: relative;
}
.dr-option.selected .dr-radio{ border-color: var(--gold-bright); }
.dr-option.selected .dr-radio::after{
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-bright);
}
.dr-option-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dr-option-label{ font-size: 14px; font-weight: 600; color: var(--text); }
.dr-option.selected .dr-option-label{ color: var(--gold-bright); }
.dr-option-sub{ font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.dr-option-sub b{ color: var(--gold-soft); font-weight: 700; }
.dr-confirm-actions{ display: flex; gap: 8px; margin-top: 16px; }
.dr-confirm-actions .mp-btn-primary, .dr-confirm-actions .mp-btn-secondary{ flex: 1 1 auto; }

/* Global "you are not on the recommended dataset" cue. Small enough to ignore,
   present enough to explain a surprising number, and tappable straight to the
   setting. Never rendered at all in the Verified (default) view. */
.full-history-pill{
  flex: 0 0 auto; background: transparent; cursor: pointer;
  border: 1px solid var(--gold-dim); border-radius: 999px;
  color: var(--gold-soft); font-family: var(--font-interface);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 7px; line-height: 1; white-space: nowrap;
}
@media (max-width: 360px){
  .full-history-pill{ font-size: 8px; padding: 3px 5px; letter-spacing: 0.04em; }

}

/* ===================== WAITING FOR THE RECORD =====================
   Shown only between the app opening and the record arriving. Before this
   existed the app showed its own empty chrome for as long as that took, which
   on a phone was several seconds of a screen that looked finished and wrong:
   no players, no games, no table. Saying "loading" is not a flourish -- it is
   the difference between a slow app and a broken one. */
/* Above the bottom navigation, not below the header: the header is where the
   app says which screen you are on, and covering it to say "loading" hides the
   one thing already on screen that was true. */
.boot-notice{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 76px; z-index: 9000;
  padding: 7px 16px; border-radius: 999px;
  font-size: 12px; letter-spacing: .02em; white-space: nowrap;
  color: var(--text-dim); background: var(--card, #15171c);
  border: 1px solid var(--line, rgba(255,255,255,.10));
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
/* Deliberately not a spinner over the whole app. Navigation stays usable
   while the record is on its way, and whichever screen is chosen in that
   window is the one drawn the moment it arrives. */
.boot-placeholder{
  padding: 28px 4px; text-align: center;
  color: var(--text-dim); font-size: 13px;
}

/* "New build available · Refresh" (features/updateNotice.js):
   a pill floating just above the tab bar. */
.update-notice{
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(var(--shell-nav-height) + var(--shell-safe-bottom) + 14px);
  width: min(420px, calc(100% - 32px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--gold-hairline);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font-family: var(--font-interface); color: var(--text);
}
.update-notice-text{ flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }
.update-notice-refresh{
  flex: 0 0 auto; border: none; border-radius: 999px; cursor: pointer;
  padding: 8px 16px; background: var(--gold); color: #17130c;
  font-family: var(--font-interface); font-size: 13.5px; font-weight: 700;
}
.update-notice-close{
  flex: 0 0 auto; width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 15px;
}