/* ============================================================
   Redline Hub — CarPlay-style app launcher
   Reuses vars, fonts, and .hero/.site-footer from style.css
   ============================================================ */

/* Hub-only bump: slightly bigger than the shared .hero-logo default. */
.hero-logo{
  height: clamp(4.3rem, 10.6vw, 7.1rem);
}

/* Live date/time sitting just above the copyright watermark. */
.hub-footer-datetime{
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  opacity: 0.65;
}


.hub{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 24px 48px;
}

.hub-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 40px;
  max-width: 860px;
  margin: 0 auto;
}

.hub-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: fadeInUp .5s ease both;
}

.hub-tile:nth-child(1){ animation-delay: .05s; }
.hub-tile:nth-child(2){ animation-delay: .1s; }
.hub-tile:nth-child(3){ animation-delay: .15s; }
.hub-tile:nth-child(4){ animation-delay: .2s; }
.hub-tile:nth-child(5){ animation-delay: .25s; }

.hub-icon{
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 16px 30px -12px rgba(0,0,0,0.65), 0 -4px 18px -6px rgba(0,0,0,0.45);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hub-icon::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 45%, rgba(0,0,0,0.12) 100%);
  pointer-events: none;
}

.hub-icon--red{
  background:
    radial-gradient(ellipse 90px 70px at 30% 15%, var(--glow-1), transparent 70%),
    radial-gradient(ellipse 70px 60px at 90% 0%, var(--glow-2), transparent 65%),
    var(--bg);
}
.hub-icon--black{ background: linear-gradient(145deg, #232327, #0a0a0b); }
.hub-icon--tan{ background: linear-gradient(145deg, #d9b98a, var(--tan)); }
.hub-icon--glow{ background: linear-gradient(145deg, #ff6a5c, #c62a20); }
.hub-icon--maroon{ background: linear-gradient(145deg, #8a2a22, #4a120e); }

.hub-tile:hover .hub-icon{
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 20px 36px -14px rgba(0,0,0,0.75), 0 -4px 18px -6px rgba(0,0,0,0.45);
}

.hub-icon img{
  width: 62%;
  height: 62%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.hub-icon svg{
  width: 44%;
  height: 44%;
  position: relative;
  z-index: 1;
}

.hub-icon--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-icon--framed::after{
  content: none;
}

.hub-icon--charcoal{
  background: linear-gradient(160deg, #1b1b1f, #050506);
}

.hub-icon--charcoal img{
  width: 56%;
  height: 56%;
}


.hub-icon--stacked{
  flex-direction: column;
  gap: 3px;
}

.hub-icon--stacked img{
  width: 60%;
  height: auto;
}

/* Light/dark logo swap — reused across every tile that needs a
   theme-appropriate variant (University, Sequifi, Dashboard/Onyx, Pronto). */
.hub-logo-light{ display: none; }

html[data-theme="light"] .hub-logo-dark{ display: none; }
html[data-theme="light"] .hub-logo-light{ display: block; }

/* Sequifi + Pronto keep their original full-color flat brand icon in dark
   mode (own baked background, untouched) — the light-mode variant uses the
   cut-out mark on the shared red-glow tile background, sized the same
   (100% cover, same source-canvas proportions) so the glyph reads at an
   identical size in both themes. */
.hub-icon--flat-dark .hub-logo-dark,
.hub-icon--flat-dark .hub-logo-light{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hub-icon-caption{
  position: relative;
  z-index: 1;
  font-family: "slight-chance", sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red-glow);
  text-shadow: 0 0 10px rgba(255,74,61,0.5);
}

.hub-label{
  font-family: "slight-chance", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  text-align: center;
  transition: color .18s ease;
}

.hub-tile:hover .hub-label{
  color: var(--text);
}

/* ---------- Leaderboard preview (small, sits below the app grid) ---------- */
.hub-lb{
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 24px 0;
  animation: fadeInUp .5s ease .1s both;
}

.hub-lb-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 2px;
}

.hub-lb-head-left{
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hub-lb-title{
  font-family: "slight-chance", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.hub-lb-updated{
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.65;
}

.hub-lb-location{
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--red-glow);
}

.hub-lb-link{
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: color .15s ease;
}

.hub-lb-link:hover{
  color: var(--red-glow);
}

.hub-lb-grid{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 14px 28px -22px rgba(0,0,0,0.6);
}

.hub-lb-daily{
  list-style: none;
  margin: 0;
  padding: 0;
}

.hub-lb-empty{
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.hub-lb-locked{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 16px;
  text-align: center;
}

.hub-lb-locked[hidden],
.hub-lb-side[hidden]{
  display: none;
}

.hub-lb-locked-text{
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hub-lb-row{
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.hub-lb-row:hover{
  background: rgba(255,255,255,0.03);
}

.hub-lb-rank{
  font-family: "slight-chance", sans-serif;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.75rem;
}

.hub-lb-rank-1 .hub-lb-rank{ color: #ffd54a; }
.hub-lb-rank-2 .hub-lb-rank{ color: #cfd4da; }
.hub-lb-rank-3 .hub-lb-rank{ color: #d99a5b; }

.hub-lb-name{
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-lb-score{
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.hub-lb-rank-1 .hub-lb-score{ color: var(--red-glow); }

.hub-lb-side{
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.hub-lb-mini{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 8px;
  text-align: center;
}

.hub-lb-mini-label{
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red-glow);
}

.hub-lb-mini-leader{
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-lb-mini-score{
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ---------- Incentives (standalone subtle link, separate from the leaderboard) ---------- */
.hub-inc{
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 24px 96px;
  text-align: center;
  animation: fadeInUp .5s ease .15s both;
}

.hub-inc-link{
  display: inline-block;
}

/* ---------- Incentives (full page, incentives.html) ---------- */
.incentives{
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 24px 96px;
  animation: fadeInUp .5s ease .15s both;
}

.incentives-head{
  margin-bottom: 6px;
  padding: 0 2px;
}

.incentives-title{
  font-family: "slight-chance", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.incentives-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.incentive-card{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red-glow);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 14px 28px -22px rgba(0,0,0,0.6);
}

.incentive-card:nth-child(1){ border-left-color: #ffd54a; }
.incentive-card:nth-child(2){ border-left-color: var(--red-glow); }
.incentive-card:nth-child(3){ border-left-color: #d99a5b; }
.incentive-card:nth-child(4){ border-left-color: var(--tan); }
.incentive-card:nth-child(5){ border-left-color: #cfd4da; }

.incentive-card-banner{
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
}

.incentive-card-body{
  padding: 14px 16px;
}

.incentive-name{
  font-family: "slight-chance", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}

.incentive-criteria{
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.incentive-plus{
  opacity: 0.75;
}

.incentive-reward{
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red-glow);
}

.incentive-note{
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.85;
}

.incentive-sublist{
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.incentive-sublist li{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
}

.incentive-sublist li span:first-child{
  color: var(--text-muted);
}

.incentive-sublist li span:last-child{
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* ---------- Incentive detail page ---------- */
.inc-header-emblem{
  display: block;
  height: 92px;
  width: auto;
  margin: 0 auto;
}

/* Flip the default .page-top spacing for this page: more air between the
   back link and the emblem, tighter between the emblem and the detail
   boxes below. Single source of truth for each gap instead of stacking
   several different rules' padding/margin together. */
.inc-page-top{
  padding-bottom: 0;
}

.inc-page-top .back-link{
  margin-bottom: 40px;
}

.inc-no-rep{
  max-width: 320px;
  margin: 0 auto;
  padding: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.lb-subtitle{
  margin: 10px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  opacity: 0.7;
}

.inc-detail{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 24px 96px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.inc-detail-left{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inc-detail-left,
.inc-detail-side{
  height: 100%;
}

.inc-detail-info{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 36px -26px rgba(0,0,0,0.6);
  animation: fadeInUp .5s ease both;
}

.inc-countdown{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 36px -26px rgba(0,0,0,0.6);
  animation: fadeInUp .5s ease .05s both;
}

.inc-countdown-days{
  display: block;
  font-family: "slight-chance", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--red-glow);
  text-shadow: 0 0 14px rgba(255,74,61,0.35);
}

.inc-countdown-label{
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.inc-detail-desc{
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}

.inc-detail-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}

.inc-detail-row[hidden]{
  display: none;
}

.inc-detail-row:first-of-type{
  border-top: none;
}

.inc-detail-label{
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.inc-detail-row span:last-child{
  color: var(--text);
  text-align: right;
}

.inc-detail-side{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 36px -26px rgba(0,0,0,0.6);
  animation: fadeInUp .5s ease .08s both;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inc-locked{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 16px;
  text-align: center;
}

.inc-progress-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inc-locked[hidden],
.inc-progress-wrap[hidden]{
  display: none;
}

.inc-circle-wrap{
  position: relative;
  width: 140px;
  height: 140px;
}

.inc-circle{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.inc-circle-bg{
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}

.inc-circle-fg{
  fill: none;
  stroke: var(--red-glow);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}

.inc-circle-pct{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "slight-chance", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.inc-circle-caption{
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Ranking-only incentives (no stated numeric target) show a plain period
   stat here instead of the % circle. */
.inc-simple-stat{
  text-align: center;
}

.inc-simple-num{
  display: block;
  font-family: "slight-chance", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--red-glow);
  text-shadow: 0 0 14px rgba(255,74,61,0.35);
}

.inc-simple-label{
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.inc-reps-title{
  font-family: "slight-chance", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 20px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  width: 100%;
  text-align: left;
}

.inc-reps-list{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inc-reps-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  background: rgba(255,255,255,0.03);
}

.inc-reps-row span:last-child{
  color: var(--text-muted);
  font-size: 0.75rem;
}

.inc-reps-empty{
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Plain single-column reward list (e.g. Dream Team's gear items) — same
   row rhythm as .inc-detail-row, but no right-hand value column. */
.inc-reward-item{
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text);
}

.inc-reward-item:first-of-type{
  border-top: none;
}

@media (max-width: 860px){
  .inc-detail{
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 560px){
  .hub-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px;
  }
  .hub-icon{
    width: 84px;
    height: 84px;
    border-radius: 20px;
  }
}