/* ==========================================================================
   PWR App – Home Screen Mock (CSS-only)
   File: pwr.css
   --------------------------------------------------------------------------
   Notes:
   - Dark theme first
   - Mobile-first, responsive at 480px/768px+
   - Uses CSS variables for easy theming
   - No external fonts; inherit site font stack
   
   Table of Contents (high level)
   1) Variables (:root)
   2) Base + Sections
   3) Components (tiles, score ring, etc.)
   4) Bottom Navigation (search: "Bottom Navigation")
   ========================================================================== */

:root {
  /* Colors */
  --pwr-bg: #000000;
  --pwr-surface: #15171c;
  --pwr-surface-2: #1b1e24;
  --pwr-border: #2a2f38;
  --pwr-text: #e8ecf1;
  --pwr-text-dim: #b8bec7;
  --pwr-muted: #8b93a1;
  --pwr-link: #ffffff;

  --pwr-primary: #6aa9ff; /* CTA */
  --pwr-primary-600: #4d90f9;
  --pwr-primary-700: #3a78d8;

  --pwr-green: #2dd4bf;
  --pwr-yellow: #f6c453;
  --pwr-orange: #ffa24d;
  --pwr-red: #ff5d6c;
  --pwr-white: #e8ecf1;

  /* State accents for score ring */
  --pwr-accent-white: #d9f99d;
  --pwr-accent-yellow: #fde047;
  --pwr-accent-orange: #fb923c;
  --pwr-accent-red: #f87171;

  /* Effects */
  --pwr-radius: 16px;
  --pwr-radius-sm: 12px;
  --pwr-shadow-1: 0 6px 24px rgba(0,0,0,0.25);
  --pwr-shadow-2: 0 10px 32px rgba(0,0,0,0.35);
  --pwr-outline: 2px solid #2a72ff40;

  /* Spacing */
  --pwr-gap: 16px;
  --pwr-gap-sm: 12px;
  --pwr-gap-lg: 20px;

  /* Typography */
  --pwr-h1: 28px;
  --pwr-h2: 20px;
  --pwr-h3: 18px;
  --pwr-body: 16px;
  --pwr-small: 13px;

  /* Navigation */
  --pwr-nav-h: 72px;
  --pwr-nav-safe-extra: 8px; /* extra bottom padding for notches */
  --pwr-nav-x: 7px; /* horizontal padding for edge comfort */
  --pwr-nav-y: 6px; /* vertical padding inside each tab */
  --pwr-nav-icon: 30px; /* icon size */
  --pwr-nav-font: 14px; /* label font size */
  --pwr-nav-gap: 2px; /* space between icon and label */
}

/* Base reset-ish */
.pwr-home, .pwr-home * { box-sizing: border-box; }
.pwr-home {
  color: var(--pwr-text);
  background: var(--pwr-bg);
  font: 400 var(--pwr-body)/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding: 16px; /* removed extra bottom space (no FAB) */
  min-height: 100dvh;
}

/* Header (screen content only) */
.pwr-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* equal sides, centered logo */
  align-items: center;
  padding: 4px 0 10px;
  gap: 8px;
}
.pwr-title {
  font-size: var(--pwr-h1);
  letter-spacing: 0.4px;
  margin: 0;
  color: var(--pwr-white);
}

/* Sections common */
.pwr-home section[role="region"] {
  margin-bottom: 25px;
}

/* =========================
   TOP – Overview tiles
   ========================= */
.pwr-top { display: grid; gap: 14px; margin-top: 16px; margin-bottom: 12px; }
.tiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px){
  .tiles-grid { grid-template-columns: 1fr 1fr; }
}

.tile {
  position: relative;
  border: 1px solid var(--pwr-border);
  border-radius: var(--pwr-radius);
  background: linear-gradient(180deg, rgba(31,35,43,.9), rgba(21,23,28,.9));
  box-shadow: var(--pwr-shadow-1);
  padding: 14px;
  overflow: hidden;
  transform: translateY(4px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease, box-shadow .25s ease;
}
.tile.is-revealed { transform: none; opacity: 1; }
.tile:hover { box-shadow: var(--pwr-shadow-2); }
.tile-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tile-title { font-size: var(--pwr-h3); margin: 0; }
.tile-sub { color: var(--pwr-muted); font-size: var(--pwr-small); }

/* Your PWR – micro metrics */
.micro-metrics { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.micro-metrics .metric { display: grid; grid-template-columns: 96px 1fr auto auto; align-items: center; gap: 8px; }
.micro-metrics .label { color: var(--pwr-text-dim); font-size: var(--pwr-small); margin-right: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.micro-metrics .value { font-weight: 700; min-width: 28px; text-align: right; }
.micro-metrics .trend { width: 16px; text-align: center; color: var(--pwr-muted); font-size: 14px; }

.micro-bar { position: relative; height: 8px; background: #1c2027; border: 1px solid var(--pwr-border); border-radius: 999px; overflow: hidden; }
/* Make the inner segments meet flush so it feels like one bar */
.micro-bar .fill-prev { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px 0 0 999px; transition: width .5s cubic-bezier(.2,.7,0,1); }
.micro-bar .delta { position: absolute; top: 0; height: 100%; left: 0; width: 0; border-radius: 0 999px 999px 0; display: flex; align-items: center; justify-content: center; }
.micro-bar .delta .delta-label { font-size: 10px; font-weight: 700; pointer-events: none; padding: 0 4px; line-height: 1; border-radius: 6px; white-space: nowrap; display: none; }
.micro-bar .delta--up { background: rgba(255,255,255, 0.95); color: #0f1115; }
.micro-bar .delta--up .delta-label { color: #0f1115; }
.micro-bar .delta--down { background: rgba(255,255,255, 0.35); color: #e8ecf1; }
.micro-bar .delta--down .delta-label { color: #ffffff; }

/* Metric colors */
.metric[data-metric="power"] .fill-prev { background: linear-gradient(90deg, #5a1d23, var(--pwr-red)); }
.metric[data-metric="recovery"] .fill-prev { background: linear-gradient(90deg, #203250, var(--pwr-primary)); }
.metric[data-metric="wellness"] .fill-prev { background: linear-gradient(90deg, #1b3b33, var(--pwr-green)); }

/* Removed animated stripes; delta overlay shows change */

/* Trend micro-anim */
@keyframes trendUp { 0%{ transform: translateY(2px); opacity:.6;} 60%{ transform: translateY(-2px); opacity:1;} 100%{ transform: translateY(0); opacity:.85;} }
@keyframes trendDown { 0%{ transform: translateY(-2px); opacity:.6;} 60%{ transform: translateY(2px); opacity:1;} 100%{ transform: translateY(0); opacity:.85;} }
.trend-up { color: var(--pwr-green); animation: trendUp 900ms ease 160ms both; font-size: 18px; text-shadow: 0 0 6px rgba(45,212,191,.35); }
.trend-down { color: var(--pwr-orange); animation: trendDown 900ms ease 160ms both; }

/* Momentum */
.tile-momentum .pulse-icon { filter: drop-shadow(0 0 10px rgba(154,206,255,.25)); }
.tile-momentum .momentum-claim { margin: 6px 0 8px; }
/* Emphasize potential growth value in white */
.tile-momentum .momentum-claim strong { color: #ffffff; }
.tile-momentum .insight { color: var(--pwr-text-dim); font-size: var(--pwr-small); margin-top: 6px; }
.sparkline { height: 46px; border-radius: 8px; background: linear-gradient(180deg, #161a20, #121419); border: 1px solid var(--pwr-border); position: relative; overflow: hidden; }
.sparkline canvas, .sparkline svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sparkline path.actual { stroke-width: 2; }
/* Show projected (potential growth) segment in white */
.sparkline path.proj { stroke-width: 3; stroke-dasharray: 6 6; opacity: .85; stroke: #ffffff; }

/* Community card */
.community-card { padding: 14px; margin-bottom: 10px!important;}
.community-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.community-title { margin: 0; font-size: var(--pwr-h3); }
.community-delta { color: var(--pwr-green); color: var(--pwr-green);font-size: 1.5em;margin-top: -15px;}
.community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.community-grid .profile { display: grid; place-items: center; gap: 6px; }
.community-grid .tag { font-size: var(--pwr-small); color: var(--pwr-muted); }
.community-note { margin: 10px 0 0; color: var(--pwr-text-dim); font-size: var(--pwr-small); }

/* =========================
   HERO – Score Ring + Chips
   ========================= */
/* Remove legacy hero score ring visuals from default flow (kept fallbacks below) */

/* Larger rings for Your Pod profiles */
.community-card .ring { width: 64px; height: 64px; padding: 3px; }
.community-card .ring img { width: 100%; height: 100%; }

/* Driver chips */
.pwr-driver-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 4px 0 0 0;
  list-style: none;
}
.pwr-driver-chips .chip {
  background: var(--pwr-surface);
  border: 1px solid var(--pwr-border);
  color: var(--pwr-text-dim);
  font-size: var(--pwr-small);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Loading / error shells */
.skeleton {
  background: linear-gradient(90deg, #1b1f26 25%, #222733 37%, #1b1f26 63%);
  background-size: 400% 100%;
  animation: pwr-shimmer 1.3s infinite;
  border-radius: 8px;
  opacity: 0.75;
}
.skeleton.circle { width: 72px; height: 72px; border-radius: 999px; }
.skeleton.line { height: 16px; width: 120px; margin-top: 8px; }
@keyframes pwr-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================
   Cards
   ========================= */
.card {
  background: var(--pwr-surface);
  border: 1px solid var(--pwr-border);
  border-radius: var(--pwr-radius);
  box-shadow: var(--pwr-shadow-1);
  overflow: clip;
}
.card .card-body {
  padding: 14px;
}
.card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.card .card-title {
  font-size: var(--pwr-h3);
  margin: 0!important;
}
.card .card-sub {
  color: var(--pwr-muted);
  font-size: var(--pwr-small);
  margin: 7px 0 5px;
  font-size:.9em;
  color: #8b8b8b;
}
.card .card-sub.card-unlock {
  color: var(--pwr-primary);
}
.card .card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Prompt card specifics */
.card-prompt .card-title { font-size: var(--pwr-h2); }
.card-prompt.is-complete {
  background: linear-gradient(180deg, #122017, #101316);
  border-color: #1f3c2f;
}

/* Challenge cards */
.card-challenge.is-secondary {
  background: var(--pwr-surface-2);
}

/* Badges / pills */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: var(--pwr-small);
  color: #0b1020;
  background: linear-gradient(180deg, #f5f7ff, #dfe8ff);
  border-radius: 999px;
  border: 1px solid #c8d5ff;
}
.badge.badge-reco {
  background: linear-gradient(180deg, #fff7e6, #ffe3b1);
  border-color: #ffd591;
  color: #3b2a00;
}
.badge.badge-featured {
  background: linear-gradient(180deg, #e0f2ff, #b3d9ff);
  border-color: #94c9ff;
  color: #0b1020;
}

/* Buttons */
.btn, .btn-link, .btn-ghost, .btn-primary, .btn-icon {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease, background .2s ease;
}

.btn-primary {
  background: linear-gradient(180deg, var(--pwr-primary), var(--pwr-primary-600));
  color: #0b1020;
  font-weight: 700;
  padding: 12px 18px;
  min-width: 140px;
  box-shadow: 0 8px 16px rgba(77,144,249,0.25), inset 0 0 0 1px rgba(0,0,0,0.1);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: #0000;
  color: var(--pwr-text);
  padding: 10px 14px;
  border: 1px solid var(--pwr-border);
}
.btn-ghost:hover { background: #ffffff0c; }

.btn-link {
  background: none;
  color: var(--pwr-link);
  padding: 6px 2px;
  text-decoration: underline dotted 1px;
}
.btn-link:hover { opacity: 0.9; }

.btn-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pwr-surface-2);
  border: 1px solid var(--pwr-border);
  color: var(--pwr-text);
}
.btn-icon[disabled] { opacity: 0.5; cursor: not-allowed; }

/* =========================
   Progress bar
   ========================= */
.progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #1c2129;
  border: 1px solid var(--pwr-border);
  overflow: hidden;
}
.progress .progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8bd5ff, #4d90f9);
  box-shadow: 0 0 16px #4d90f970 inset;
  transition: width .4s ease;
}
.progress-meta {
    margin-top: 5px;
    font-size: .9em;
    color: rgb(149, 149, 149);
}

/* =========================
   Drawer (fairness note)
   ========================= */
.drawer {
  border-top: 1px dashed var(--pwr-border);
  padding-top: 5px;
  margin-bottom:15px;
  color: var(--pwr-text-dim);
  font-size: var(--pwr-small);
}

/* =========================
   Pod Activity
   ========================= */
.pwr-pod-activity {
  /* Extra bottom room so last row (e.g., Luis) isn't obscured by fixed nav */
  padding-bottom: 54px;
}
.pwr-pod-activity .section-header,
.pwr-active-challenge .section-header,
.pwr-challenge-spotlight .section-header,
.pwr-score .section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  width:100%;
}
.section-title { font-size: var(--pwr-h2); margin: 0; }
.section-sub { color: var(--pwr-muted); font-size: var(--pwr-small); margin: 0; }

.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.activity-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--pwr-surface);
  border: 1px solid var(--pwr-border);
  border-radius: var(--pwr-radius-sm);
}
/* Ledger rows (no avatar) */
.activity-row.no-avatar { grid-template-columns: 1fr auto; }
.avatar {
  width: 48px;
  height: 48px;
  display: block;                 /* avoid inline-gap quirks */
  border-radius: 50%;             /* circle */
  object-fit: cover;              /* crop to fill */
  clip-path: circle(50% at 50% 50%); /* force circle even if overridden */
  background: #222733;
  border: 1px solid var(--pwr-border);
}
.activity-content { display: grid; gap: 2px; }
.activity-text { margin: 0; font-size:.9em;}
.activity-time { color: var(--pwr-muted); font-size: var(--pwr-small); }
.cheer { font-size: 18px; }

.activity-empty {
  text-align: center;
  color: var(--pwr-muted);
  padding: 18px;
  border: 1px dashed var(--pwr-border);
  border-radius: var(--pwr-radius-sm);
  margin-top: 8px;
}

/* FAB removed */

/* =========================
   Toasts
   ========================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 14px;
  font-size: var(--pwr-small);
  border-radius: 10px;
  border: 1px solid var(--pwr-border);
  background: var(--pwr-surface);
  box-shadow: var(--pwr-shadow-2);
  opacity: 0;
  pointer-events: none;
}
.toast-success { border-color: #1f3c2f; background: linear-gradient(180deg, #122017, #0f1411); color: #cde9da; }
.toast-error   { border-color: #3c1f1f; background: linear-gradient(180deg, #201212, #141010); color: #f2c6c6; }

/* Utility: show toasts by adding .is-showing */
.toast.is-showing {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}

/* =========================
   Accessibility & States
   ========================= */
[hidden] { display: none !important; }

.btn:focus-visible,
.btn-link:focus-visible,
.btn-ghost:focus-visible,
.btn-primary:focus-visible,
.btn-icon:focus-visible {
  outline: var(--pwr-outline);
  outline-offset: 2px;
}

.pwr-score-error {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #2a1314;
  border: 1px solid #4c2527;
  color: #ffd4d6;
}

/* =========================
   Responsive
   ========================= */
@media (min-width: 480px) {
  .card .card-body { padding: 16px; }
  .pwr-score-ring { width: 280px; height: 280px; }
}
@media (min-width: 768px) {
  .pwr-home { max-width: 720px; margin: 0 auto; }
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================
   Today's Focus (AI Coach)
   ========================= */
.pwr-focus { margin: 0px; overflow-x: hidden; max-width:108%;width:104%;}
.focus-header { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.focus-title { margin:0; font-size: var(--pwr-h3); }
.focus-sub { color: var(--pwr-muted); font-size: var(--pwr-small); }

.focus-list {
  list-style:none; margin:0; 
  /* base reset + adjustable left gutter for first card alignment */
  --focus-gutter: 0px;
  padding: 0 12px 0 var(--focus-gutter);
  display:flex; /* reliable slide sizing */
  gap:12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Keep within page padding to avoid horizontal bounce */
  scroll-padding-left: var(--focus-gutter); /* snap first slide with gutter */
  max-width: 100%;
  overscroll-behavior-x: contain;
}
/* hide native scrollbar where possible */
.focus-list{ scrollbar-width: none; }
.focus-list::-webkit-scrollbar{ display:none; }

.focus-card {
  display:grid; gap:12px; /* rows: main, actions */
  padding:15px; border:1px solid var(--pwr-border); border-radius:14px;
  background: var(--pwr-surface); box-shadow: var(--pwr-shadow-1);
  scroll-snap-align: start;
  /* Each slide fills most of the container; leave a visible peek */
  flex: 0 0 88%;
  position: relative;
}
/* main row layout: text left, dial right */
.focus-main { display:flex; align-items:center; justify-content: space-between; gap:12px; }
.focus-text { flex: 1 1 auto; min-width: 0; }
.focus-title { margin: 0; font-size: var(--pwr-h3); }
.focus-task { margin: 2px 0; color: var(--pwr-text); font-size: var(--pwr-body); }
.focus-time { margin: 0; color: var(--pwr-muted); font-size: var(--pwr-small); }

/* Dial on the right */
.focus-dial { position: relative; width: 64px; height: 64px; flex: 0 0 64px; }
.circular-chart { width: 64px; height: 64px; display:block; }
.circle-bg { fill: none; stroke: #3f454e; stroke-width: 3.8; }
/* current value = full white */
.circle-current { fill: none; stroke: #ffffff; stroke-width: 3.8; stroke-linecap: round; }
/* potential boost = semi-transparent white */
.circle-boost { fill: none; stroke: rgba(255,255,255,0.40); stroke-width: 3.8; stroke-linecap: round; }
/* Boost opacity standardized at 0.40 across all cards (no per-card overrides) */
.dial-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; }
/* center icon image */
.dial-center .dial-icon{
  display:block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  pointer-events: none;
}
@media (min-width: 480px){
  .dial-center .dial-icon{ width:22px; height:22px; }
}

/* Actions row */
.focus-actions { display:flex; align-items:center; gap:10px; justify-content: space-between; }
.focus-actions .impact { margin-left: auto; font-weight:700; color: var(--pwr-yellow); }
/* Pill badge for +PWR impact */
.impact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: var(--pwr-yellow);
  background: #10141a;
  border: 1px solid #3a3120; /* subtle warm border */
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.12);
}
.focus-actions .impact-pill { margin-left: auto; }
/* Scoped hooks to style Focus card buttons independently */
.pwr-focus .focus-btn {}
.pwr-focus .focus-primary {
    padding: 5px!important;
    background: rgba(255, 255, 255, 0.26)!important;
    color: white!important;
    font-weight: 500!important;
    max-width: 40%!important;
}
.pwr-focus .focus-btn {
    padding: 5px!important;
    min-width: 30%!important;
}

/* domain badge removed per design — keeping classes for future use */
.focus-headline { overflow-wrap: anywhere; }
.focus-left { display:flex; gap:10px; }
.focus-icon { font-size:25px; line-height:1; flex-shrink:0; }
.focus-title-verb { font-size: var(--pwr-h3); font-weight: 700; margin: 0 0 2px; }
.focus-task { font-size: .9em; color: #8b8b8b; margin: 0 0 2px; }
.focus-headline { font-size: var(--pwr-h3); }
.focus-window { color: var(--pwr-muted); font-size: var(--pwr-small); margin-top:2px; }
.focus-receipt { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.chip { padding:4px 8px; border:1px solid var(--pwr-border); border-radius:999px; font-size: var(--pwr-small); color: var(--pwr-text-dim); background: var(--pwr-surface-2); }

.focus-right { display:grid; gap:8px; justify-items:end; }
.focus-right { justify-items: stretch; }
.impact-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:26px; padding:0 8px; border-radius:999px;
  background: linear-gradient(180deg, #dff1ff, #bfe1ff); color:#0b1020;
  font-weight:700; border:1px solid #9ccafe; font-size:13px;
}
.focus-right .impact-badge { align-self: start; justify-self: start; }
/* Corner badge */
.focus-card .impact-badge { position: absolute; top: 10px; right: 12px; z-index: 2; }
.focus-actions { display:flex; align-items:center; gap:10px; justify-content: space-between; }
.focus-actions .impact { margin-left: auto; font-weight:700; color: var(--pwr-yellow); }

/* Icon halo */
.focus-icon {
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(100% 100% at 50% 50%, #2a3340 0%, #1a1e25 70%);
}
.focus-icon::before {
  content: ""; position: absolute; inset: -8px; border-radius: 999px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(154,206,255,.45), rgba(154,206,255,0) 70%);
  filter: blur(6px); opacity: .6; z-index: -1;
}

/* Progress strip at bottom of card */
.focus-progress {
  margin-top: 6px; position: relative; padding-top: 8px;
}
.focus-progress__bar {
  display: block; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #8bd5ff, #4d90f9);
  box-shadow: 0 0 12px #4d90f940 inset;
}
.focus-progress__meta { display: block; margin-top: 4px; font-size: var(--pwr-small); color: var(--pwr-muted); }

.focus-why {
  grid-column: 1 / -1;
  margin-top:8px; padding:10px; border:1px dashed var(--pwr-border);
  border-radius:10px; background: var(--pwr-surface-2); color: var(--pwr-text-dim);
}

/* Small screens: stack actions below text */
@media (max-width: 420px){
  .focus-card { grid-template-columns: 1fr; }
  .focus-right { justify-items:start; }
}

/* Wider screens: show two cards peeking */
@media (min-width: 768px){
  /* wider screens show larger slides, still peeking next */
  .focus-card { flex-basis: 46%; max-width: 420px; }
}

/* =========================
   Top-right Energy Indicator
   ========================= */
.pwr-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--pwr-border);
  background: var(--pwr-surface-2);
  color: var(--pwr-text);
  font-size: var(--pwr-small);
  box-shadow: var(--pwr-shadow-1);
  pointer-events: none; /* display-only */
  justify-self: start; /* left side when in header grid */
}
/* =========================
   Partner challenge card styling
   ========================= */
.card-challenge.featured {
  background: linear-gradient(180deg, #111217, #15171c);
  border: 1px solid var(--pwr-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.partner-logo { height: 20px; margin-right: auto; display:block; }
.badge-partner {
  background: linear-gradient(180deg, #e0f2ff, #b3d9ff);
  border-color: #94c9ff;
  color: #0b1020;
}
.challenge-meta {
  margin: 12px 0; padding: 0; list-style: none;
  font-size: var(--pwr-small); color: var(--pwr-muted);
}
.challenge-meta li { margin-bottom: 4px; }

/* Challenge hero header (used on all challenge cards) */
.card-challenge .challenge-hero,
.card-challenge.featured .challenge-hero {
  position: relative;
  aspect-ratio: 16/9;
  background-position: center;
  background-size: cover;
  border-radius: var(--pwr-radius) var(--pwr-radius) 0 0;
  overflow: hidden;
}
.card-challenge .challenge-hero::after,
.card-challenge.featured .challenge-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.6));
  z-index: 0;             /* keep overlay behind the logo */
  pointer-events: none;    /* avoid intercepting clicks */
}
.card-challenge .challenge-hero__overlay,
.card-challenge.featured .challenge-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  z-index: 1;             /* ensure logo is above gradient */
}
/* Top-left badges container in hero header */
.card-challenge .challenge-hero__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  z-index: 1;
}
.card-challenge .hero-logo,
.card-challenge.featured .hero-logo {
  max-width: 140px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
  opacity: 1;             /* force full opacity */
}
/* Limit Hyperice brand logo size inside featured card */
.card-challenge.featured .brand-logo {
  max-width: 140px; /* increased from 100px */
  height: auto;
  display: block; /* avoid baseline gap */
  margin-bottom: 72px; /* tighter space above title */
}
/* Tighter spacing between title and description in featured card */
.card-challenge.featured .card-sub {
    margin-top: 4px;
    color: #8b8b8b;
    font-size: .9em;
}
.card-challenge .card-sub.card-unlock,
.card-challenge.featured .card-sub.card-unlock {
  color: var(--pwr-primary);
}
.pwr-indicator__value { font-weight: 800; letter-spacing: .2px; }
.pwr-indicator--energy {
  background: linear-gradient(180deg, #1b1e24, #13161b);
  box-shadow: var(--pwr-shadow-1), 0 0 12px color-mix(in srgb, var(--pwr-accent-yellow), transparent 82%);
}

/* --- PWR compatibility patch (append to end of pwr.css) --- */

/* Ensure our font sizes & colors aren’t overridden by global h1/h2 rules */
.pwr-home .pwr-title,
.pwr-home .section-title,
.pwr-home .card-title { all: revert; margin:7px 0px;}

.pwr-home .pwr-title { 
  all: unset;
  display:block;
  font-size: var(--pwr-h1);
  letter-spacing:.4px;
  color: var(--pwr-white);
  font-weight:700;
}



/* Button resets vs theme/Tailwind */
.pwr-home .btn,
.pwr-home .btn-primary,
.pwr-home .btn-ghost,
.pwr-home .btn-link,
.pwr-home .btn-icon {
  all: unset;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 7px;
  box-sizing: border-box;
}

.pwr-home .btn-primary {
  background: linear-gradient(180deg, var(--pwr-primary), var(--pwr-primary-600));
  color: #0b1020;
  font-weight: 700;
  padding: 10px;
  width: 100%;
}

.pwr-home .btn-ghost {
  background: transparent;
  color: var(--pwr-text);
  padding: 10px 14px;
  border: 1px solid var(--pwr-border);
}

.pwr-home .btn-link {
    background: none;
    color: var(--pwr-link);
    padding: 5px 0px 15px 0px;
    font-size: .9em;
    text-decoration: underline dotted 1px;
}

.pwr-home .btn-icon {
  width: 40px; height: 40px;
  background: var(--pwr-surface-2);
  border: 1px solid var(--pwr-border);
  color: var(--pwr-text);
}

/* Card overflow: Safari/older Chrome dislike overflow: clip */
.pwr-home .card { overflow: hidden; }

/* 100dvh fallback */
.pwr-home { min-height: 100vh; }

/* Extra bottom room to clear fixed bottom nav on Vault */
.pwr-home.pwr-vault {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

/* Score ring fallbacks (older Safari/Chromium builds) */
.pwr-home .pwr-score-ring { background: #121419; }
.pwr-home .pwr-score-ring::before {
  background: conic-gradient(from -90deg, #28303b 0turn, #28303b 1turn);
}
.pwr-home .pwr-score-ring::after {
  /* if color-mix is unsupported, still show glow */
  box-shadow: inset 0 0 32px rgba(255, 210, 64, 0.25);
}

/* Progress bar width in some browsers inside inline style calc() */
.pwr-home .progress .progress-bar { min-width: 0; }

/* --- Override: Make featured challenge hero image cover entire card --- */
.card-challenge.featured { position: relative; }
.card-challenge.featured .challenge-hero {
  position: relative;           /* header area only */
  aspect-ratio: 16/9;           /* keep a nice header ratio */
  background-position: center;
  background-size: cover;
  border-radius: var(--pwr-radius) var(--pwr-radius) 0 0;
  overflow: hidden;
  z-index: 0;
}
.card-challenge.featured .card-body { position: relative; z-index: 1; }

/* --- Donut ring upgrade (clarity over pie) --- */
.pwr-score-ring {
  /* ring size stays as-is; we'll add a visible track + arc */
  --ring-thickness: 18px;          /* thickness of the donut */
  --ring-track: #2a3039;           /* neutral track color */
  --ring-glow: 28%;                /* inner glow strength */
  position: relative;
}

/* Base track as a donut (neutral) */
.pwr-score-ring::before {
  background:
    radial-gradient(closest-side, transparent calc(100% - var(--ring-thickness)), var(--ring-track) 0) /* ring track */,
    radial-gradient(120% 120% at 50% 0%, #1a1d24 0%, #121419 60%, #0f1115 100%);                       /* back face */
  box-shadow: inset 0 0 0 1px var(--pwr-border), var(--pwr-shadow-1);
}

/* Progress arc on top, also a donut */
.pwr-score-ring::after {
  --pct: 0.78; /* JS updates this */
  --accent: var(--pwr-accent-yellow);
  background:
    conic-gradient(from -90deg,
      var(--accent) calc(var(--pct) * 1turn),
      #0000 0)                                                   /* arc wedge */
    ,
    radial-gradient(closest-side, #0000 calc(100% - var(--ring-thickness)), #0000 0); /* keep donut hole */
  /* subtle glow on the arc edge */
  box-shadow: inset 0 0 0 1px #0000,
              0 0 28px color-mix(in srgb, var(--accent), transparent var(--ring-glow));
}

/* Make a true hole so it never reads as a pie */
.pwr-score-cutout {
  position: absolute;
  inset: calc(10px + var(--ring-thickness));
  border-radius: 999px;
  background: radial-gradient(120% 120% at 50% 0%, #161a20 0%, #101317 65%, #0e1014 100%);
  box-shadow: inset 0 0 0 1px var(--pwr-border);
  z-index: 1;   /* sits above the arc to create the hole */
}

/* Bring value/state above the cutout */
.pwr-score-value,
.pwr-score-state { z-index: 2; }

/* Value + state styles for legibility */
.pwr-score-value {
  font-size: 58px;
  font-weight: 800;
  color: #f4f6fb;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.pwr-score-state {
  margin: 2px 0 0;
  font-size: var(--pwr-small);
  color: #c2c9d4;
  opacity: .95;
}

/* State color bindings (keep) */
.pwr-score-ring[data-state="white"]::after { --accent: var(--pwr-accent-white); }
.pwr-score-ring[data-state="yellow"]::after { --accent: var(--pwr-accent-yellow); }
.pwr-score-ring[data-state="orange"]::after { --accent: var(--pwr-accent-orange); }
.pwr-score-ring[data-state="red"]::after { --accent: var(--pwr-accent-red); }

/* Fallbacks if color-mix unsupported */
@supports not (color-mix(in srgb, white, black)) {
  .pwr-score-ring::after { box-shadow: 0 0 22px rgba(255, 210, 64, .25); }
}

/* Space between stacked cards in Challenge Spotlight */
.pwr-home .pwr-challenge-spotlight { display: block; }
.pwr-home .pwr-challenge-spotlight .card + .card { margin-top: 25px; }



/* --- Fix card header badge wrapping --- */
.pwr-home .card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Let the title take leftover space (and wrap) */
.pwr-home .card .card-header .card-title {
  flex: 1 1 auto;
  min-width: 0;            /* prevents flex overflow quirks */
  line-height: 1.2;
  word-break: normal;
}

/* Keep the badge on one line and stop it shrinking */
.pwr-home .badge {
  flex: 0 0 auto;          /* no shrinking */
  white-space: nowrap;     /* no line break inside */
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
}

/* If you’re targeting very narrow screens, give a tiny responsive nudge */
@media (max-width: 360px) {
  .pwr-home .badge { font-size: 12px; padding: 3px 8px; }
}


/* PWR logo in header */
  .pwr-header .pwr-logo {
    display: block;
    height: auto;          /* keeps aspect ratio */
    width: 85px;           /* adjust this number as needed */
    max-width: 80%;        /* keeps it responsive on small screens */
    justify-self: center;  /* center in middle column */
    margin: 0;
  }
  
/* Small profile avatar (left) */
.pwr-avatar-mini {
  width: 28px;
  height: 28px;
  display: block;                  /* avoid inline-gap quirks */
  border-radius: 50%;              /* circle shape */
  clip-path: circle(50% at 50% 50%); /* enforce circle even if overridden */
  object-fit: cover;               /* crop to fill */
  background: #222733;             /* fallback bg */
  border: 1px solid var(--pwr-border);
  justify-self: end;               /* align avatar to the right in header */
}

/* Subtitle under the ring */
.pwr-score-sub {
  margin: 6px 0 2px;
  font-size: var(--pwr-small);
  color: var(--pwr-muted);
  text-align: center;
}

/* Drivers block */
.pwr-score-drivers {
  margin: 10px auto 6px;
  padding: 10px;
  list-style: none;
  max-width: 560px;
  display: grid;
  gap: 8px;
  background: rgba(27, 30, 36, 0.55);
  border: 1px solid var(--pwr-border);
  border-radius: 12px;
}
.pwr-score-drivers .driver {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(120px, 1fr);
  grid-template-areas: "label value note";
  align-items: center;
  gap: 6px 12px;
}
.driver-label { grid-area: label; color: var(--pwr-text); font-weight: 600; }
.driver-value { grid-area: value; color: var(--pwr-link); font-weight: 700; justify-self: end; text-align: right; }
.driver-note  { grid-area: note;  color: var(--pwr-text-dim); font-size: var(--pwr-small); }

/* Actions block */
.pwr-score-actions {
  margin: 8px auto 10px;
  padding: 10px 12px;
  max-width: 560px;
  background: var(--pwr-surface);
  border: 1px solid var(--pwr-border);
  border-radius: 12px;
  box-shadow: var(--pwr-shadow-1);
}
.actions-title {
  margin: 0 0 6px;
  font-size: var(--pwr-h3);
}
.actions-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  display: grid;
  gap: 6px;
}
.actions-list .action {
  font-size: var(--pwr-body);
  color: var(--pwr-text);
}
.actions-see-more { padding-left: 0; }

/* Tighten hero stack spacing */
.pwr-score { gap: 8px; }

/* =========================
   Score sub-metrics (Sleep/Recovery/Strain)
   ========================= */
.pwr-score-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin: 6px auto 2px;
}
.pwr-score-metrics .metric {
  --pct: 0;                 /* 0–100 set via JS */
  --accent: var(--pwr-primary);
  position: relative;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--pwr-border);
  background: linear-gradient(180deg, #191c22, #14171c);
  box-shadow: 0 6px 16px rgba(0,0,0,.25) inset;
  font-size: var(--pwr-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.pwr-score-metrics .metric::before {
  /* subtle track */
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .18;
  background: linear-gradient(180deg, #2a2f38, #212732);
}
.pwr-score-metrics .metric::after {
  /* progress fill */
  content: ""; position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  width: calc(var(--pct) * 1%);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent), transparent 40%));
  opacity: .28;
  transition: width .35s ease;
}
.pwr-score-metrics .metric span { font-weight: 700; color: var(--pwr-text); }
.pwr-score-metrics .metric { color: var(--pwr-text-dim); z-index: 1; }

/* Color accents per metric */
.pwr-score-metrics .metric.sleep    { --accent: #9cc7ff; }
.pwr-score-metrics .metric.recovery { --accent: var(--pwr-green); }
.pwr-score-metrics .metric.strain   { --accent: var(--pwr-accent-orange); }

@media (max-width: 420px) {
  .pwr-score-metrics { grid-template-columns: 1fr; }
}

/* ===== Modal ===== */
.pwr-modal[hidden] { display: none !important; }
.pwr-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
}
.pwr-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.pwr-modal__dialog {
  position: relative;
  width: min(680px, 92vw);
  max-height: 86vh;
  overflow: auto;
  border: 1px solid var(--pwr-border);
  border-radius: 16px;
  background: var(--pwr-surface);
  box-shadow: var(--pwr-shadow-2);
  padding: 12px;
}
.pwr-modal__header, .pwr-modal__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 4px;
}
.pwr-modal__header h3 { margin: 0; font-size: var(--pwr-h2); }
.pwr-modal__close {
  all: unset; cursor: pointer; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--pwr-border); background: var(--pwr-surface-2);
}
.pwr-modal__content { display: grid; gap: 12px; padding: 6px 2px; }
.pwr-modal__intro { color: var(--pwr-text-dim); margin: 0; }

.pwr-table {
  width: 100%; border-collapse: collapse; font-size: var(--pwr-small);
  border: 1px solid var(--pwr-border); border-radius: 10px; overflow: hidden;
}
.pwr-table thead th {
  background: #1c2129; color: var(--pwr-text); text-align: left; padding: 10px;
  border-bottom: 1px solid var(--pwr-border);
}
.pwr-table tbody td, .pwr-table tbody th { padding: 10px; border-bottom: 1px solid #222733; }
.pwr-table tfoot td, .pwr-table tfoot th { padding: 10px; background: #161a20; }

.pwr-modal__actions-hint h4 { margin: 4px 0 6px; font-size: var(--pwr-h3); }
.pwr-modal__actions-hint ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Nice little pop for the dialog */
@media (prefers-reduced-motion: no-preference) {
  .pwr-modal:not([hidden]) .pwr-modal__dialog {
    animation: pwr-modal-in .18s ease-out both;
  }
  @keyframes pwr-modal-in {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* =========================
   Active Challenge hero
   ========================= */
.pwr-active-challenge { margin-bottom: 16px; }
.pwr-active-challenge{ }
.card-active-challenge { overflow: hidden; position: relative; }

.card-active-challenge .ac-media {
  position: relative; height: 200px; border-bottom: 1px solid var(--pwr-border);
}
.card-active-challenge .ac-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .28; filter: saturate(1.05) contrast(1.05);
}

.card-active-challenge .card-body { padding-top: 12px; }

.ac-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ac-title { margin:5px 0 0 0; font-size: var(--pwr-h2); }
.ac-sub { margin: 6px 0 10px; color: var(--pwr-muted);font-size:.9em; }

/* Media overlay logo on hero image */
.card-active-challenge .ac-media__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;            /* keep logo anchored to bottom */
  justify-content: flex-start;      /* logo sits left */
  padding: 52px 20px 20px 20px;     /* add space under top-left badge */
  z-index: 1;
  pointer-events: none;             /* display-only */
}
/* Place the In Progress badge in the upper-left of the media header */
.card-active-challenge .ac-status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  flex: 0 0 auto;                   /* harmless if layout changes */
  pointer-events: none;             /* non-interactive visual tag */
}
.card-active-challenge .ac-hero-logo {
  max-width: 140px;
  height: auto;
  width: 100%;
  display: block;
  opacity: 1; /* ensure not dimmed */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

.ac-progress { margin: 15px 0px; }
.ac-today { display: grid; gap: 8px; margin: 25px 0px; }
.ac-task { background: var(--pwr-surface-2); border: 1px solid var(--pwr-border);
  padding: 10px; border-radius: 10px; }

/* Pod leaderboard */
.ac-pod { margin-top: 6px; border-top: 1px dashed var(--pwr-border); padding-top: 10px; }
.ac-rank { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ac-rank .you-rank { font-weight: 700; }
.ac-rank .you-delta { color: var(--pwr-text-dim); font-size: var(--pwr-small); }


.ac-leaderboard { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lb-item {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center;
  padding: 8px; border: 1px solid var(--pwr-border); border-radius: 12px; background: var(--pwr-surface-2);
}
.lb-item.is-first { background: linear-gradient(180deg, #18202a, #15171c); border-color: #2a3a4a; }
.lb-item.is-you { outline: 2px solid #4d90f933; }

.lb-meta { display: grid; gap: 2px; }
.lb-meta .name { font-weight: 600; }

.lb-meta .stat { color: var(--pwr-muted); font-size: var(--pwr-small); }
.lb-score { font-weight: 700; color: var(--pwr-white); }

/* Avatar progress ring (mini) */
.ring {
  --pct: .78; /* fallback */
  position: relative; width: 44px; height: 44px; border-radius: 999px;
  background:
    conic-gradient(var(--pwr-primary) calc(var(--pct)*1turn), #222733 0);
  padding: 2px; /* ring thickness */
}
.ring img {
  width: 100%; height: 100%; border-radius: 999px; display: block;
  background: #12161d; border: 1px solid var(--pwr-border);
}

/* Responsive */
@media (min-width: 768px){
  .card-active-challenge .ac-media{ height: 120px; }
}
/* =========================
   Bottom Navigation
   -----------------
   - Fixed, safe-area aware bottom bar with frosted blur
   - Spacer prevents overlap with page content
   - Tunable via --pwr-nav-* vars
   ========================= */
.pwr-nav-spacer { height: calc(var(--pwr-nav-h) + env(safe-area-inset-bottom) + var(--pwr-nav-safe-extra)); }

.pwr-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--pwr-nav-h) + env(safe-area-inset-bottom) + var(--pwr-nav-safe-extra));
  /* fallback then override with extra padding */
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--pwr-nav-safe-extra));
  /* horizontal padding to keep edge items off the screen edge */
  padding-left: calc(var(--pwr-nav-x) + env(safe-area-inset-left));
  padding-right: calc(var(--pwr-nav-x) + env(safe-area-inset-right));
  /* Frosted-glass effect (Apple-style) */
  background: rgba(17, 20, 26, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,0.03);
  z-index: 999;
}

.pwr-nav__list {
  list-style: none; margin: 0; padding: 0;
  height: var(--pwr-nav-h);
  display: grid; grid-template-columns: repeat(5, 1fr);
}

.pwr-nav__item { display: contents; }

.pwr-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pwr-nav-gap); /* space between icon and label */
  color: var(--pwr-text-dim);
  text-decoration: none;
  font-size: var(--pwr-nav-font);
  padding-top: var(--pwr-nav-y);
  padding-bottom: var(--pwr-nav-y);
  opacity: .5; /* dim by default for concept */
  transition: color .18s ease, opacity .18s ease;
}

.pwr-nav__link[aria-current="page"] {
  color: var(--pwr-white);
  font-weight: 700;
  opacity: 1; /* only active (Play) at full opacity */
}

/* Hover/focus: brighten label and icon */
.pwr-nav__link:hover,
.pwr-nav__link:focus-visible {
  color: var(--pwr-white);
  opacity: 1;
}
.pwr-nav__link:hover .pwr-nav__icon,
.pwr-nav__link:focus-visible .pwr-nav__icon {
  opacity: 1;
  filter: brightness(1.15) saturate(1.05);
}

/* Slightly tighten label line height */
.pwr-nav__label { line-height: 1.05; }

/* Icon above label */
.pwr-nav__icon {
  width: var(--pwr-nav-icon);
  height: var(--pwr-nav-icon);
  display: block;
  object-fit: contain;
  opacity: .85;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
.pwr-nav__link[aria-current="page"] .pwr-nav__icon {
  opacity: 1;
}

.pwr-nav__label { pointer-events: none; }

/* =========================
   Vault Screen (PWR_VAULT)
   ------------------------
   Styles specific to the Vault shortcode. Reuses core tokens/components
   and only fills the gaps needed for filters, drop cards, and balance.
   ========================= */

/* Balance header: large number with subtle glow */
.pwr-vault .pwr-balance { text-align: center; }
.pwr-vault .pwr-balance .balance-amount {
  font-size: 42px;
  font-weight: 800;
  color: var(--pwr-white);
  text-shadow: 0 2px 12px rgba(106,169,255,.25);
}
/* Balance container spacing now that it’s not a card */
.pwr-vault .pwr-balance-header { margin: 15px 0 25px; padding: 6px 0 2px; }
.pwr-vault .pwr-balance-header .btn-ghost { margin-top: 6px; }


/* Black-card treatment removed; wallet card provides chrome */
.pwr-vault .pwr-balance-header {
  position: relative;
  padding: 18px 14px 14px;
  border-radius: 18px;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(70,78,92,.22) 0%, rgba(30,34,41,.12) 40%, rgba(15,17,21,0) 62%)
    ,linear-gradient(180deg, #1b1f27 0%, #12161d 60%, #0f1115 100%);
  border: 1px solid var(--pwr-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.45);
  overflow: hidden;
}
.pwr-vault .pwr-balance-header::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%; height: 56px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  filter: blur(8px);
  pointer-events: none;
}
.pwr-vault .pwr-balance-header::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events: none;
}
.pwr-vault .pwr-balance {
  display: grid; place-items: center; gap: 6px;
}
.pwr-vault .pwr-balance .balance-amount {
  font-size: 48px;
  letter-spacing: 0.5px;
  color: #f4f6fb;
  text-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 8px 24px rgba(0,0,0,.55);
}
.pwr-vault .pwr-balance .card-sub { color: var(--pwr-text-dim); }
.pwr-vault .pwr-balance-header .btn-ghost {
  background: rgba(28,32,40,.6);
  border: 1px solid var(--pwr-border);
  color: var(--pwr-text);
  padding: 6px 10px;
}



/* Filters and search row above drops */
.pwr-vault .filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap; /* stack nicely on small screens */
}
.pwr-vault .filters-left { display: flex; gap: 6px; flex-wrap: wrap; }
.pwr-vault .filters-left .btn { padding: 6px 10px; font-size: var(--pwr-small); }

/* Search input (kept minimal to match theme) */
.pwr-vault .filters-search input[type="search"] {
  padding: 8px 10px;
  border: 1px solid var(--pwr-border);
  border-radius: 12px;
  background: var(--pwr-surface-2);
  color: var(--pwr-text);
  min-width: 42vw;
}
.pwr-vault .filters-search input[type="search"]::placeholder { color: var(--pwr-muted); }

/* Drop cards (reusing focus-card structure) */
.pwr-vault .drop-card { min-width: 260px; padding: 0; overflow: hidden; border-radius: var(--pwr-radius); gap: 0; }
.pwr-vault .drop-card .challenge-hero {
  position: relative;
  aspect-ratio: 16/9;              /* consistent header ratio */
  background-position: center;
  background-size: cover;
  border: 0;                        /* let image run to the edge */
  border-radius: 0;                 /* corners clip by parent */
  overflow: hidden;
}
.pwr-vault .drop-card .card-body { padding: 14px; }

/* Featured Drops: header stays in-page; list goes full-bleed */
.pwr-vault section[aria-label="Featured Drops"] { margin-left: 0; margin-right: 0; }
/* Make carousel truly edge-to-edge (even when page is centered/max-width) */
.pwr-vault section[aria-label="Featured Drops"] .focus-list {
  /* Force full-viewport width regardless of centered container */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: none;            /* override earlier max-width:100% */
  margin-left: -50vw;
  margin-right: -50vw;
  /* Use ::before spacer for first-card gutter; keep padding 0 */
  padding-left: 0;
  padding-right: 0;
  --focus-gutter: 0;
}
.pwr-vault section[aria-label="Featured Drops"] .focus-list .focus-spacer { flex: 0 0 calc(32px + env(safe-area-inset-left)); }
.pwr-vault section[aria-label="Featured Drops"] .focus-list::before {
  content: "";
  flex: 0 0 calc(32px + env(safe-area-inset-left));
}
.pwr-vault .drop-card .challenge-hero__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 2; }
.pwr-vault .drop-card .challenge-hero__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 12px 12px; }
.pwr-vault .drop-card .brand-logo { max-width: 140px; width: 100%; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* Earn-more hint sits inline with CTAs */
.pwr-vault .drop-card .earn-more { margin-left: 8px; }

/* Add breathing room above the Details button under Redeem */
.pwr-vault .drop-card .card-actions [data-action="view-details"] {
  margin-top: 10px;
}

/* Add space above 'Set a side wager' button */
.pwr-vault .card-actions [data-action="start-wager"] {
  margin-top: 10px;
}

/* Disabled buttons and redeemed state */
.pwr-vault .btn[disabled],
.pwr-vault .btn:disabled { opacity: .6; cursor: not-allowed; }
.pwr-vault .drop-card.is-redeemed { opacity: .8; }
.pwr-vault .drop-card.is-redeemed .btn-primary { pointer-events: none; }

/* Ledger drawer header spacing */
.pwr-vault #vault-ledger .section-header { margin-bottom: 8px; }

/* Add space above the Wagers & Wins title */
.pwr-vault section[aria-label="Wagers & Wins"] .section-header {
  margin-top: 25px;
}


/* =========================
   Vault Details Modal
   -------------------
   Refines the pop-out card used for drop details + confirm.
   Uses existing modal primitives; only adds sizing and polish.
   ========================= */
#vault-details-modal .pwr-modal__dialog {
  width: min(560px, 92vw);
  max-height: 86vh;
  overflow: auto;
  border: 1px solid var(--pwr-border);
  border-radius: var(--pwr-radius);
  background: var(--pwr-surface);
  box-shadow: var(--pwr-shadow-2);
}
#vault-details-modal .pwr-modal__header,
#vault-details-modal .pwr-modal__footer { padding: 10px 12px; }
#vault-details-modal .pwr-modal__header { border-bottom: 1px solid var(--pwr-border); }
#vault-details-modal .pwr-modal__footer { border-top: 1px solid var(--pwr-border); display:flex; gap:10px; justify-content: space-between; }
#vault-details-modal .pwr-modal__header h3 { margin: 0; font-size: var(--pwr-h2); color: var(--pwr-white); }
#vault-details-modal .pwr-modal__close {
  all: unset;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--pwr-border);
  background: var(--pwr-surface-2);
  color: var(--pwr-text);
}
#vault-details-modal .pwr-modal__content { padding: 0; }
#vault-details-modal .challenge-hero {
  position: relative;
  aspect-ratio: 16/9;
  background-position: center;
  background-size: cover;
  border-radius: var(--pwr-radius) var(--pwr-radius) 0 0;
  border-bottom: 1px solid var(--pwr-border);
  overflow: hidden;
}
#vault-details-modal .challenge-hero .brand-logo { max-width: 160px; width: 40%; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
#vault-details-modal .pwr-modal__intro { margin: 12px; color: var(--pwr-text-dim); }

/* Footer buttons: stack on small screens */
@media (max-width: 420px) {
  #vault-details-modal .pwr-modal__footer { flex-direction: column; }
  #vault-details-modal .pwr-modal__footer .btn { width: 100%; }
}


/* Position brand logo inside modal hero */
#vault-details-modal .challenge-hero__overlay { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start; padding: 48px 16px 14px 16px; pointer-events:none; }
#vault-details-modal .challenge-hero .brand-logo { width: 140px; max-width: 48%; height: auto; }


/* Wallet card (light gradient on dark background) */
.pwr-vault .pwr-wallet-card {
  position: relative;
  padding: 18px 16px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #1b1f27 0%, #12161d 60%, #0f1115 100%);
  border: 1px solid var(--pwr-border);
  color: var(--pwr-white);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.pwr-vault .pwr-wallet-card .wallet-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.pwr-vault .pwr-wallet-card .wallet-label { color: var(--pwr-text-dim); font-weight: 600; }
.pwr-vault .pwr-wallet-card .wallet-title { color: var(--pwr-white); font-weight: 700; }
.pwr-vault .pwr-wallet-card .wallet-amount { display:flex; align-items: center; gap: 10px; margin: 0; }
.pwr-vault .pwr-wallet-card .wallet-amount .amount { font-size: 48px; font-weight: 800; letter-spacing: 0;margin-top:-5px; color: var(--pwr-white); }
.pwr-vault .pwr-wallet-card .wallet-amount .unit { font-weight: 800; color: var(--pwr-white); }
.pwr-vault .pwr-wallet-card .wallet-meta { display:none; }
.pwr-vault .pwr-wallet-card .wallet-owner { display:none; }
.pwr-vault .pwr-wallet-card .wallet-number, .pwr-vault .pwr-wallet-card .wallet-number a { display:none; }
.pwr-vault .pwr-wallet-card .wallet-actions { display:flex; gap: 16px; padding: 0; margin-left: auto; align-items: center; }
.pwr-vault .pwr-wallet-card .wallet-btn { width: 45px; height: 45px; border-radius: 999px; background:#0f1115; color:#ffffff; border:1px solid rgba(255,255,255,.06); display:grid; place-items:center; }
.pwr-vault .pwr-wallet-card .wallet-btn-icon { width: 22px; height: 22px; display:block; }
.pwr-vault .pwr-wallet-card .wallet-help { position:absolute; top: 10px; right: 10px; }


/* Balance header is a plain container; wallet card provides chrome */
.pwr-vault .pwr-balance-header { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.pwr-vault .pwr-balance-header::before,
.pwr-vault .pwr-balance-header::after { content: none !important; display: none !important; }


/* Wallet meta: ensure number stacks under name and actions span right column */
/* meta grid removed; actions now inline with amount */

/* Send icon appears visually smaller; bump its size to match Wager */
.pwr-vault .pwr-wallet-card .wallet-btn[data-action="wallet-send"] .wallet-btn-icon { width: 40px; height: 45px; margin: 4px 0px 0px 8px;}


/* Wallet action captions: smaller labels under buttons */
.pwr-vault .pwr-wallet-card .wallet-action { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pwr-vault .pwr-wallet-card .wallet-action-label { font-size: 11px; line-height: 1.1; color: var(--pwr-text-dim); opacity: .9; }