/*
 * ============================================================
 *  GRAFT LEAGUE — LEADERBOARD PAGE STYLES
 *  leaderboard.css
 *
 *  Page: leaderboard.html
 *  Depends on: style.css (must be loaded first)
 *
 *  Sections:
 *    1.  Page header
 *    2.  Refresh bar
 *    3.  Tab navigation
 *    4.  Podium (top 3 display)
 *    5.  Leaderboard table
 *    6.  Empty state
 *    7.  Activity heatmap
 *    8.  Mobile overrides
 * ============================================================
 */


/* ============================================================
   1. PAGE HEADER
   Centred heading with eyebrow, subtitle and back link.
   ============================================================ */

header {
  padding:       2.5rem 2rem 2rem;
  border-bottom: 2px solid var(--ink);
  background:    var(--bg);
  text-align:    center;
}

/* "Group Progress" eyebrow */
.eyebrow {
  font-size:      0.7rem;
  letter-spacing: 0.35em;
  color:          var(--red);
  text-transform: uppercase;
  margin-bottom:  0.75rem;
}

/* "The Graft Table" heading */
h1 {
  font-family: var(--font-display);
  font-size:   clamp(3rem, 8vw, 5.5rem);
  line-height: 0.9;
  color:       var(--ink);
}

h1 span { color: var(--red); }

/* Subtitle below heading */
.subtitle {
  color:      var(--muted);
  font-size:  0.82rem;
  margin-top: 0.75rem;
  font-weight: 300;
}

/* Back to training pill link */
.back-link {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  margin-top:     1.25rem;
  background:     transparent;
  border:         2px solid var(--border);
  color:          var(--muted);
  font-size:      0.72rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.55rem 1.1rem;
  border-radius:  100px;
  cursor:         pointer;
  text-decoration: none;
  transition:     all 0.2s;
}

.back-link:hover { border-color: var(--red); color: var(--red); }


/* ============================================================
   2. REFRESH BAR
   Thin bar with a manual refresh button.
   ============================================================ */

.refresh-bar {
  text-align:     center;
  padding:        0.75rem;
  border-bottom:  1px solid var(--border);
  background:     var(--surface);
}

/* Refresh button — small pill */
.refresh-btn {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.4rem 1rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

.refresh-btn:hover { border-color: var(--red); color: var(--red); }


/* ============================================================
   3. TAB NAVIGATION
   Four tabs: This Week / All-Time / Streaks / Heatmap.
   Active tab is solid red.
   ============================================================ */

.tabs {
  display:         flex;
  justify-content: center;
  gap:             0.4rem;
  padding:         2rem 1rem 1rem;
  flex-wrap:       wrap;
}

/* Individual tab pill */
.tab {
  background:     var(--surface);
  border:         2px solid var(--border);
  color:          var(--muted);
  font-size:      0.72rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.55rem 1.2rem;
  cursor:         pointer;
  border-radius:  100px;
  transition:     all 0.2s;
}

.tab:hover { border-color: var(--red); color: var(--red); }

/* Active state */
.tab.active {
  background:   var(--red);
  border-color: var(--red);
  color:        #fff;
  font-weight:  700;
}


/* ============================================================
   4. PODIUM (top 3 display)
   Three slots arranged as a podium (2nd left, 1st centre,
   3rd right). Each has an avatar, name, score, and a raised
   block whose height reflects their position.
   ============================================================ */

/* Podium outer wrapper */
.podium-wrap {
  max-width: 680px;
  margin:    0 auto;
  padding:   1rem 1.5rem 0;
}

/* Flex row — aligns to bottom so blocks look like podium steps */
.podium {
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  gap:             1rem;
  margin-bottom:   2rem;
}

/* One podium slot (avatar + name + score + block) */
.podium-slot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  flex:           1;
  max-width:      160px;
}

/* Circular avatar with initials */
.podium-avatar {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       1.3rem;
  border:          2px solid;
}

/* Gold / silver / bronze colour treatments */
.podium-slot.p1 .podium-avatar { background: rgba(230,51,35,0.1);   border-color: var(--red);    color: var(--red); }
.podium-slot.p2 .podium-avatar { background: rgba(17,17,17,0.06);   border-color: var(--ink);    color: var(--ink); }
.podium-slot.p3 .podium-avatar { background: rgba(245,200,0,0.1);   border-color: var(--yellow); color: var(--yellow); }

.podium-name {
  font-size:     0.78rem;
  font-weight:   600;
  color:         var(--text);
  text-align:    center;
  max-width:     120px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Score number */
.podium-score {
  font-family: var(--font-display);
  font-size:   1.5rem;
  line-height: 1;
}

.podium-slot.p1 .podium-score { color: var(--red); }
.podium-slot.p2 .podium-score { color: var(--ink); }
.podium-slot.p3 .podium-score { color: var(--yellow); }

/* "workouts" label under the score */
.podium-score-label {
  font-size:      0.6rem;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* The physical podium block — height conveys ranking */
.podium-block {
  width:         100%;
  border-radius: 4px 4px 0 0;
}

.podium-slot.p1 .podium-block { height: 80px; background: rgba(230,51,35,0.08);   border: 1px solid rgba(230,51,35,0.2); }
.podium-slot.p2 .podium-block { height: 55px; background: rgba(17,17,17,0.04);    border: 1px solid rgba(17,17,17,0.15); }
.podium-slot.p3 .podium-block { height: 38px; background: rgba(245,200,0,0.08);   border: 1px solid rgba(245,200,0,0.2); }

/* Medal emoji */
.medal { font-size: 1.4rem; }


/* ============================================================
   5. LEADERBOARD TABLE
   Full rankings below the podium.
   Highlights the current user's row in red.
   ============================================================ */

.table-wrap {
  max-width: 720px;
  margin:    0 auto;
  padding:   0 1.5rem 3rem;
}

/* Table resets */
.lb-table {
  width:           100%;
  border-collapse: collapse;
}

.lb-table thead tr { border-bottom: 2px solid var(--ink); }

/* Column headers */
.lb-table th {
  font-size:      0.62rem;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight:    500;
  padding:        0.5rem 0.75rem;
  text-align:     left;
}

.lb-table th:not(:first-child) { text-align: center; }

/* Table cells */
.lb-table td {
  padding:        0.75rem;
  border-bottom:  1px solid var(--border);
  vertical-align: middle;
}

.lb-table td:not(:first-child) { text-align: center; }

/* Row hover */
.lb-row { transition: background 0.15s; cursor: default; }
.lb-row:hover { background: rgba(17,17,17,0.03); }

/* Current user row is subtly highlighted */
.lb-row.you { background: rgba(230, 51, 35, 0.04); }

/* Red left border on the user's row */
.lb-row.you td:first-child { border-left: 3px solid var(--red); }

/* Rank number — large display font */
.rank-num {
  font-family: var(--font-display);
  font-size:   1.1rem;
  color:       var(--muted);
  width:       32px;
}

.rank-medal { font-size: 1rem; }

/* User cell: avatar circle + name */
.user-cell {
  display:     flex;
  align-items: center;
  gap:         0.65rem;
}

/* Small avatar circle */
.mini-avatar {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       0.75rem;
  flex-shrink:     0;
}

.user-name { font-size: 0.85rem; font-weight: 500; }

/* "You" tag badge */
.you-tag {
  font-size:     0.6rem;
  color:         var(--red);
  background:    rgba(230, 51, 35, 0.08);
  border:        1px solid rgba(230, 51, 35, 0.2);
  border-radius: 100px;
  padding:       0.1rem 0.5rem;
  margin-left:   0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Stat numbers in the table */
.stat-cell {
  font-family: var(--font-display);
  font-size:   1.2rem;
  color:       var(--ink);
}

/* Highlighted stat (e.g. streaks) */
.stat-cell.hi { color: var(--red); }

/* Mini progress bar column */
.bar-cell { width: 120px; }

.mini-bar-bg {
  height:        4px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 2px;
  overflow:      hidden;
}

/* Fill colour — red brand colour */
.mini-bar-fill {
  height:        100%;
  background:    var(--red);
  border-radius: 2px;
}


/* ============================================================
   6. EMPTY STATE
   Shown when no data is available yet.
   ============================================================ */

.empty {
  text-align: center;
  padding:    4rem 2rem;
  color:      var(--muted);
}

.empty .empty-icon { font-size: 3rem; margin-bottom: 1rem; }

.empty h3 {
  font-family:   var(--font-display);
  font-size:     1.8rem;
  color:         var(--ink);
  margin-bottom: 0.5rem;
}

.empty p { font-size: 0.82rem; line-height: 1.6; }


/* ============================================================
   7. ACTIVITY HEATMAP
   35-day grid of coloured squares per user.
   Done days = red, empty days = light paper.
   ============================================================ */

.heatmap-wrap {
  max-width: 720px;
  margin:    0 auto;
  padding:   0 1.5rem 3rem;
}

/* "Activity Heatmap" heading */
.heatmap-title {
  font-family:   var(--font-display);
  font-size:     1.4rem;
  margin-bottom: 1.25rem;
  color:         var(--ink);
}

.heatmap-title span { color: var(--red); }

/* One user's heatmap block */
.heatmap-user { margin-bottom: 2rem; }

/* User name + avatar above their grid */
.heatmap-user-name {
  font-size:   0.78rem;
  font-weight: 600;
  color:       var(--ink);
  margin-bottom: 0.65rem;
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

/* Grid of day squares */
.heatmap-grid {
  display:   flex;
  gap:       3px;
  flex-wrap: wrap;
}

/* Individual day square */
.hm-day {
  width:         16px;
  height:        16px;
  border-radius: 3px;
  position:      relative;
  cursor:        default;
}

/* Tooltip on hover — shows the date */
.hm-day[title]:hover::after {
  content:    attr(title);
  position:   absolute;
  bottom:     calc(100% + 4px);
  left:       50%;
  transform:  translateX(-50%);
  background: var(--ink);
  color:      var(--cream);
  font-size:  0.65rem;
  padding:    0.2rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index:    10;
}

/* Day states */
.hm-empty { background: var(--paper); border: 1px solid var(--border); }  /* Future / no data */
.hm-done  { background: var(--red); }                                      /* Workout logged */
.hm-none  { background: var(--surface); border: 1px solid var(--border); } /* Past, no workout */

/* Legend row below the grid */
.hm-legend {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  margin-top:  0.65rem;
  font-size:   0.65rem;
  color:       var(--muted);
}


/* ============================================================
   8. MOBILE OVERRIDES (leaderboard page)
   ============================================================ */

@media (max-width: 600px) {
  header { padding: 2rem 1rem 1.5rem; }

  .table-wrap,
  .podium-wrap,
  .heatmap-wrap { padding-left: 1rem; padding-right: 1rem; }

  /* Hide the bar chart column on small screens — too narrow */
  .bar-cell      { display: none; }
  th.hide-mob,
  td.hide-mob    { display: none; }
}


/* ============================================================
   DIRECTION A — SINGLE ACCENT PASS
   ------------------------------------------------------------
   Same principle as workout.css: delete this block to revert.

   The leaderboard had the worse version of the accent problem.
   Podium places were red / ink / yellow, which reads as three
   competing brand colours rather than gold / silver / bronze.
   Colour now means one thing only: which athlete you are
   looking at. Rank is carried by size and position instead.
   ============================================================ */

/* ── Podium: rank shown by scale, not by hue ──────────────── */

.podium-slot.p1 .podium-avatar,
.podium-slot.p2 .podium-avatar,
.podium-slot.p3 .podium-avatar {
  background:   rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color:        var(--text);
}

/* First place is simply bigger */
.podium-slot.p1 .podium-avatar { width: 68px; height: 68px; font-size: 1.6rem; }

.podium-slot.p1 .podium-score,
.podium-slot.p2 .podium-score,
.podium-slot.p3 .podium-score { color: var(--text); }

.podium-slot.p1 .podium-score { font-size: 1.9rem; }

/* Blocks lose their tints — height already encodes the ranking */
.podium-slot.p1 .podium-block,
.podium-slot.p2 .podium-block,
.podium-slot.p3 .podium-block {
  background: rgba(255, 255, 255, 0.03);
  border:     1px solid var(--border);
}

/* ── Table: red reserved for "this is you" ────────────────── */

.lb-table thead tr { border-bottom: 1px solid var(--border); }

/* Every athlete's headline stat reads the same. Previously the
   score column was red for all rows, which meant the highlight
   on your own row had nothing left to distinguish it. */
.stat-cell.hi { color: var(--text); }

.lb-row.you .stat-cell.hi { color: var(--red); }

.mini-bar-fill { background: var(--muted); }
.lb-row.you .mini-bar-fill { background: var(--red); }

/* ── Heatmap legend spacing ───────────────────────────────── */

.hm-legend { gap: 0.5rem; }

/* ── Tabs and chrome: hairlines ───────────────────────────── */

.tab       { border-width: 1px; }
.back-link { border-width: 1px; }


/* ============================================================
   SQUAD LEAGUE
   Fifth tab. Reuses .lb-table so squads and athletes are
   presented consistently — only the columns differ.
   ============================================================ */

.lg-head { margin-bottom: 1.5rem; }

.lg-title {
  font-family:   var(--font-display);
  font-size:     1.6rem;
  color:         var(--ink);
  line-height:   1;
}

.lg-title span { color: var(--red); }

.lg-sub {
  font-size:   0.75rem;
  color:       var(--muted);
  line-height: 1.6;
  margin-top:  0.5rem;
  max-width:   46ch;
}

/* Week-on-week movement in participation, in percentage points.
   Deliberately not green/red — red already means "you" on this
   page, and a second colour system would undo the single-accent
   pass. The arrow carries the direction on its own. */
.lg-trend {
  font-family:    var(--font-body);
  font-size:      0.62rem;
  color:          var(--muted);
  letter-spacing: 0.04em;
  margin-left:    0.3rem;
  white-space:    nowrap;
}

.lg-trend.flat { color: var(--border); }

/* ── Opted in, too small to rank ──────────────────────────── */

.lg-waiting {
  margin-top:  2.5rem;
  padding-top: 1.5rem;
  border-top:  1px solid var(--border);
}

.lg-waiting-title {
  font-size:      0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  0.4rem;
}

.lg-waiting-desc {
  font-size:     0.72rem;
  color:         var(--muted);
  line-height:   1.6;
  margin-bottom: 1rem;
  max-width:     46ch;
}

.lg-waiting-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0.6rem 0;
  border-bottom:   1px solid var(--border);
  font-size:       0.8rem;
}

.lg-waiting-row:last-child { border-bottom: none; }
.lg-waiting-row span:last-child { color: var(--muted); font-size: 0.72rem; }


/* ============================================================
   SQUAD SCOPE FILTER
   Switches the tables between your own squad and everyone.
   Hidden entirely if the viewer has no squad, and on the
   Squads tab, which compares squads rather than people.
   ============================================================ */

.scope-bar {
  display:         flex;
  justify-content: center;
  gap:             0.35rem;
  padding:         1.5rem 1rem 0;
}

.scope-btn {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    inherit;
  font-size:      0.64rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.4rem 1rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
  max-width:      12rem;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.scope-btn:hover { border-color: var(--muted); color: var(--text); }

.scope-btn.active {
  border-color: var(--red);
  color:        var(--red);
  font-weight:  700;
}

/* Tabs sit directly under the scope bar, so drop their top padding */
.scope-bar + .tabs { padding-top: 1rem; }


/* Accent variant of the back-link pill — used for the stats card
   link, which is an action rather than navigation. */
.back-link-accent {
  border-color: rgba(230, 51, 35, 0.4);
  color:        var(--red);
  margin-left:  0.4rem;
}

.back-link-accent:hover { border-color: var(--red); color: var(--red); }


/* ============================================================
   BOTTOM NAV
   Same bar as the training page so the four tabs are constant.
   ============================================================ */

.tabbar {
  position:      fixed;
  left: 0; right: 0; bottom: 0;
  z-index:       450;
  display:       flex;
  background:    var(--surface);
  border-top:    1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tabbar-btn {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.2rem;
  padding:         0.6rem 0.25rem 0.55rem;
  background:      transparent;
  border:          none;
  color:           var(--muted);
  font-family:     inherit;
  text-decoration: none;
  cursor:          pointer;
  transition:      color 0.2s;
}

.tabbar-btn:hover  { color: var(--text); }
.tabbar-btn.active { color: var(--red); }

.tabbar-icon  { font-size: 1rem; line-height: 1; }
.tabbar-label {
  font-size:      0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight:    600;
}

/* Keep the last table row clear of the bar */
body { padding-bottom: 4.5rem; }

/* style.css styles the bare `nav` element for the homepage's fixed
   TOP bar, including top:0 and padding. This is also a <nav>, so it
   inherited top:0 alongside our bottom:0 — an element pinned to both
   stretches to fill the viewport, covering the page. Same leak that
   put the day nav over the logo. Reset everything it brings. */
.tabbar {
  top:           auto !important;
  padding-top:   0;
  padding-left:  0;
  padding-right: 0;
  border-bottom: none;
  justify-content: stretch;
  align-items:   stretch;
  height:        auto;
}


/* Marks a demo view so a screenshot is never mistaken for live data.
   Small enough to crop out of a marketing image, obvious enough on
   screen that nobody is misled. */
.demo-flag {
  text-align:     center;
  font-size:      0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--muted);
  padding:        0.75rem 1rem 0;
}


/* ============================================================
   MOBILE TABLE FIT
   On a phone the Streak column was running off the right edge —
   the header read "STRE..." and the numbers were clipped. Four
   stat columns don't fit beside an avatar and a name.
   ============================================================ */

@media (max-width: 600px) {

  /* Reclaim horizontal space before dropping anything */
  .lb-table th,
  .lb-table td   { padding: 0.6rem 0.3rem; }

  .lb-table th   { font-size: 0.54rem; letter-spacing: 0.08em; white-space: nowrap; }

  .rank-num      { width: 24px; font-size: 0.95rem; }
  .rank-medal    { font-size: 0.85rem; }

  .mini-avatar   { width: 26px; height: 26px; font-size: 0.68rem; }
  .user-cell     { gap: 0.45rem; }

  .user-name {
    font-size:     0.78rem;
    max-width:     7.5rem;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }

  .stat-cell     { font-size: 1rem; }

  .table-wrap    { padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* Below 420px even that isn't enough, so the third stat column
   goes. The sorted column and one comparison stat remain, which
   is what the tab is actually for. */
@media (max-width: 420px) {
  th.hide-narrow,
  td.hide-narrow { display: none; }
}


/* ============================================================
   DEMO FLAG ALIGNMENT
   Was sitting hard against the left edge.
   ============================================================ */

.demo-flag {
  display:    block;
  width:      100%;
  text-align: center;
}


/* Same compositing fix as workout.css — see the note there. */
.tabbar {
  transform:      translateZ(0);
  will-change:    transform;
  backface-visibility: hidden;
  contain:        paint;
}