/* ==========================================================================
   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);
}
.shell-nav-item{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-family: var(--font-interface); font-size: 10px; font-weight: 500;
  padding: 8px 0 0; opacity: 0.65; position: relative;
}
.shell-nav-item svg{ width: 21px; height: 21px; stroke: currentColor; display: block; }
.shell-nav-item.active{ color: var(--gold-bright); opacity: 1; }
.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(--gold-bright);
}
.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;
}
.shell-more-item{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); color: var(--text);
  font-family: var(--font-interface); font-size: 14.5px; padding: 14px 2px; cursor: pointer;
}
.shell-more-item .chev{ color: var(--text-dim); }
.shell-more-item.admin-item{ margin-top: var(--space-4); color: var(--text-dim); font-size: 12.5px; }

/* 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;
}

/* More / Filters sheet spacing refinement */
.shell-more-panel{ padding-top: var(--space-4); }
.shell-more-item{ padding: 12px 2px; }
.shell-more-item.admin-item{ border-top: 1px solid var(--surface-border); padding-top: 16px; margin-top: 10px; }

/* ==========================================================================
   PRESTIGE V1B — IA correction: visible section sub-navigation
   Always on-screen for sections with more than one destination (Rankings,
   Play, Players) -- a segmented control, never a hidden menu, and never
   horizontally scrolling regardless of item count (grid divides evenly).
   ========================================================================== */
.section-subnav{
  display: none; /* JS sets to 'grid' and sets column count when active */
  gap: 8px; padding: var(--space-3) var(--space-4); margin-bottom: 0;
  border-bottom: none;
}
.section-subnav-item{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  color: var(--text-dim); font-family: var(--font-interface); font-size: 12.5px; font-weight: 600;
  padding: 12px 4px; text-align: center; cursor: pointer;
}
.section-subnav-item svg{ width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; }
/* The ellipsis needs to live on the text span, not the flex row itself --
   a flex item won't shrink below its own content width (min-width:auto by
   default) no matter what overflow/text-overflow the parent has, so a long
   label (e.g. "Monthly Summary" once a 3rd item joined this row) would just
   get hard-clipped mid-word with no "…" at three-up. min-width:0 here is
   what actually lets it shrink and ellipsis correctly instead. */
.section-subnav-item span{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.section-subnav-item.active{
  color: var(--gold-bright); background: var(--gold-wash); border-color: var(--gold-hairline);
}
.section-subnav-item.active svg{ opacity: 1; }

/* ==========================================================================
   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); }

.shell-more-item .my-player-value{
  display: flex; align-items: center; gap: 6px; color: var(--gold-bright);
  font-family: var(--font-interface); font-size: 12.5px; font-weight: 600;
}
.shell-more-item .my-player-value .chev{ color: var(--text-dim); }

/* ==========================================================================
   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;
}