/* =========================================================
   XCULPTED APP
   Visual system aligned with:
   Login → Create Account → Welcome → Questions
   ========================================================= */

:root{
  --navy:#102f46;
  --deep:#0b2537;

  --paper:#fbfbf9;
  --white:#ffffff;

  --sage:#8fa69a;
  --sage-dark:#748d80;
  --sage-soft:#e8eeea;

  --cream:#f4f1eb;
  --cream-2:#ebe5dc;

  --ink:#172b3a;
  --text:#354853;
  --muted:#71808a;

  --line:#dfe3e1;
  --line-strong:#cfd7d3;

  --blue-soft:#e8eef1;

  --danger:#a33b3b;

  --shadow-sm:
    0 8px 24px rgba(16,47,70,.06);

  --shadow:
    0 20px 55px rgba(16,47,70,.10);

  --shadow-lg:
    0 28px 80px rgba(16,47,70,.14);
}


/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  min-height:100%;
}

body{
  margin:0;
  min-height:100%;
  background:var(--paper);

  color:var(--text);

  font-family:"Manrope",sans-serif;
  font-size:15px;
  line-height:1.55;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,
input,
select,
textarea{
  font:inherit;
}

button,
a{
  cursor:pointer;
}

button{
  color:inherit;
}

img{
  max-width:100%;
}

p{
  margin-top:0;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3{
  margin-top:0;

  font-family:"Manrope",sans-serif;
  color:var(--navy);

  letter-spacing:-.04em;
}

h1{
  font-weight:700;
}

h2{
  font-weight:700;
}

h3{
  font-weight:650;
}

.eyebrow{
  display:inline-block;

  color:var(--sage-dark);

  font-size:11px;
  line-height:1.2;
  font-weight:700;

  letter-spacing:.14em;
  text-transform:uppercase;
}

.muted{
  color:var(--muted);
}


/* =========================================================
   MAIN APP SHELL — FULL SCREEN
   ========================================================= */

.app-shell{
  width:100%;
  max-width:none;
  min-height:100vh;

  margin:0;

  padding:
    0
    clamp(36px,4.5vw,88px)
    120px;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.topbar{
  width:100%;
  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid var(--line);
}

.brand{
  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:19px;
  font-weight:700;

  letter-spacing:.18em;

  text-decoration:none;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.save-state{
  color:var(--muted);
  font-size:12px;
}

.avatar-button{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  padding:0;

  border:0;
  border-radius:50%;

  background:var(--navy);
  color:#fff;

  font-weight:700;

  box-shadow:
    0 8px 20px rgba(16,47,70,.14);

  transition:
    transform .2s ease,
    background .2s ease;
}

.avatar-button:hover{
  background:var(--deep);
  transform:translateY(-1px);
}


/* =========================================================
   PAGE HEADERS
   ========================================================= */

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:28px;

  padding:54px 0 32px;
}

.page-head h1{
  margin:8px 0 10px;

  font-size:clamp(42px,5vw,62px);
  line-height:1;
}

.page-head p{
  max-width:590px;

  margin:0;

  color:var(--muted);

  font-size:16px;
  line-height:1.65;
}

.home-head{
  padding:48px 0 28px;
}

.home-head h1{
  margin:8px 0 10px;

  font-size:clamp(44px,5vw,64px);
  line-height:1;
}

.home-head p{
  margin:0;

  color:var(--muted);

  font-size:16px;
  line-height:1.6;
}


/* =========================================================
   BUTTONS
   Same rounded language as onboarding
   ========================================================= */

.button{
  min-height:50px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:13px 22px;

  border:0;
  border-radius:999px;

  background:var(--navy);
  color:#fff;

  font-weight:700;

  box-shadow:
    0 9px 22px rgba(16,47,70,.10);

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.button:hover{
  background:var(--deep);

  transform:translateY(-1px);

  box-shadow:
    0 12px 28px rgba(16,47,70,.14);
}

.button.secondary{
  background:#fff;
  color:var(--navy);

  border:1px solid var(--line-strong);

  box-shadow:none;
}

.button.secondary:hover{
  background:var(--paper);
  border-color:var(--navy);
}

.button.ghost{
  background:transparent;
  color:var(--navy);

  border:1px solid var(--line);

  box-shadow:none;
}

.button.ghost:hover{
  background:rgba(16,47,70,.04);
  border-color:var(--navy);
}

.button.danger{
  background:var(--danger);
}

.button.full{
  width:100%;
}

.text-button{
  border:0;
  background:none;

  padding:4px 0;

  color:var(--navy);

  font-size:13px;
  font-weight:700;
}

.text-button:hover{
  text-decoration:underline;
}

.icon-button{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:50%;

  background:#fff;
  color:var(--navy);

  font-size:19px;

  transition:.2s ease;
}

.icon-button:hover{
  border-color:var(--navy);
  transform:translateY(-1px);
}

.close-button{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  padding:0;

  border:0;
  border-radius:50%;

  background:var(--sage-soft);
  color:var(--navy);

  font-size:21px;
}


/* =========================================================
   SHARED LAYOUT
   ========================================================= */

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;
}

.actions{
  display:flex;
  flex-wrap:wrap;

  gap:10px;
}

.section{
  margin-top:38px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:18px;

  margin-bottom:16px;
}

.section-head h2{
  margin:0;

  font-size:27px;
  line-height:1.15;
}


/* =========================================================
   CARDS
   ========================================================= */

.card{
  padding:26px;

  border:1px solid var(--line);
  border-radius:24px;

  background:#fff;

  box-shadow:
    0 7px 24px rgba(16,47,70,.025);
}

.card.cream{
  background:var(--cream);
}

.card.sage{
  background:var(--sage-soft);
}

.card.dark{
  background:var(--navy);
  border-color:var(--navy);

  color:#fff;
}

.card.dark h2,
.card.dark h3{
  color:#fff;
}

.card.dark .muted{
  color:rgba(255,255,255,.72);
}


/* =========================================================
   WEEK STRIP
   ========================================================= */

.week-strip{
  display:grid;
  grid-template-columns:repeat(7,1fr);

  gap:7px;

  padding:7px;

  margin-bottom:22px;

  border:1px solid var(--line);
  border-radius:20px;

  background:#fff;
}

.week-day{
  min-height:66px;

  display:grid;
  place-items:center;
  align-content:center;

  padding:7px;

  border:0;
  border-radius:14px;

  background:transparent;

  color:var(--muted);

  font-size:10px;
  font-weight:600;

  letter-spacing:.09em;

  transition:.2s ease;
}

.week-day:hover{
  background:var(--sage-soft);
}

.week-day strong{
  display:block;

  margin-top:4px;

  color:var(--navy);

  font-size:15px;
  font-weight:700;

  letter-spacing:0;
}

.week-day.done{
  background:var(--sage-soft);
}

.week-day.today{
  background:var(--navy);
  color:rgba(255,255,255,.75);
}

.week-day.today strong{
  color:#fff;
}

.week-day.planned:after{
  content:"";

  width:5px;
  height:5px;

  margin-top:4px;

  border-radius:50%;

  background:var(--sage);
}


/* =========================================================
   HOME
   ========================================================= */

.home-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr);

  gap:20px;
}

.workout-hero{
  min-height:480px;

  position:relative;

  overflow:hidden;

  border-radius:30px;

  color:#fff;

  background:
    linear-gradient(
      0deg,
      rgba(11,37,55,.96) 0%,
      rgba(11,37,55,.58) 34%,
      rgba(11,37,55,.05) 75%
    ),
    url("https://images.unsplash.com/photo-1517963879433-6ad2b056d712?auto=format&fit=crop&w=1400&q=85")
    center/cover;

  box-shadow:
    0 18px 45px rgba(16,47,70,.10);
}

.hero-copy{
  position:absolute;

  left:34px;
  right:34px;
  bottom:32px;
}

.hero-copy .eyebrow{
  color:#d8e2dc;
}

.hero-copy h2{
  margin:7px 0;

  color:#fff;

  font-size:clamp(36px,4vw,50px);
  line-height:1.03;
}

.meta{
  display:flex;
  flex-wrap:wrap;

  gap:17px;

  color:var(--muted);

  font-size:13px;
}

.hero-copy .meta{
  margin:10px 0 23px;

  color:rgba(255,255,255,.82);
}

.side-stack{
  display:grid;

  gap:16px;
}

.score{
  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:44px;
  font-weight:600;
}

.bar{
  height:7px;

  overflow:hidden;

  margin:14px 0 9px;

  border-radius:99px;

  background:#e4e6e3;
}

.bar span{
  display:block;

  height:100%;

  border-radius:99px;

  background:var(--sage);
}

.stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:13px 0;

  border-top:1px solid var(--line);
}

.stat-row:first-of-type{
  border-top:0;
}

.stat-row span{
  color:var(--muted);
}

.stat-row strong{
  color:var(--navy);
}


/* =========================================================
   WEEK AGENDA
   ========================================================= */

.agenda{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:13px;
}

.agenda-item{
  display:grid;
  grid-template-columns:50px 1fr;

  gap:12px;

  padding:19px;

  border:1px solid var(--line);
  border-radius:19px;

  background:#fff;

  text-align:left;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.agenda-item:hover{
  transform:translateY(-2px);

  border-color:var(--line-strong);

  box-shadow:var(--shadow-sm);
}

.agenda-item.current{
  border-color:var(--navy);
}

.agenda-item.complete{
  background:var(--sage-soft);
}

.agenda-date{
  color:var(--muted);

  font-size:11px;
}

.agenda-item strong{
  display:block;

  color:var(--navy);
}

.agenda-item small{
  color:var(--muted);
}


/* =========================================================
   SYSTEM CARDS
   ========================================================= */

.system-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr .75fr;

  gap:14px;
}

.system-card{
  min-height:185px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  text-align:left;
}

.system-card h3{
  margin:8px 0;

  font-size:24px;
}

.spark{
  width:100%;
  height:55px;
}

.spark path{
  fill:none;
  stroke:var(--navy);
  stroke-width:3;
}


/* =========================================================
   TABS
   ========================================================= */

.tabs{
  display:flex;

  gap:28px;

  overflow:auto;

  margin-bottom:23px;

  border-bottom:1px solid var(--line);
}

.tab{
  padding:14px 1px;

  border:0;
  border-bottom:2px solid transparent;

  background:none;
  color:var(--muted);

  white-space:nowrap;
}

.tab.active{
  border-color:var(--navy);

  color:var(--navy);

  font-weight:700;
}


/* =========================================================
   TRAINING
   ========================================================= */

.training-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;

  gap:20px;
}

.program-panel{
  min-height:380px;

  padding:30px;

  border-radius:27px;

  background:var(--navy);
  color:#fff;

  box-shadow:
    0 18px 45px rgba(16,47,70,.10);
}

.program-panel h2{
  margin:10px 0;

  color:#fff;

  font-size:38px;
  line-height:1.07;
}

.program-panel p{
  color:rgba(255,255,255,.75);
}

.phase-bars{
  display:flex;

  gap:7px;

  margin:31px 0 13px;
}

.phase-bars span{
  flex:1;

  height:6px;

  border-radius:99px;

  background:rgba(255,255,255,.16);
}

.phase-bars .active{
  background:var(--sage);
}

.session-list{
  padding:6px 23px;

  border:1px solid var(--line);
  border-radius:25px;

  background:#fff;
}

.session-row{
  display:grid;
  grid-template-columns:64px 1fr auto;
  align-items:center;

  gap:15px;

  padding:21px 0;

  border-bottom:1px solid var(--line);
}

.session-row:last-child{
  border:0;
}

.day-code{
  color:var(--muted);

  font-size:11px;

  letter-spacing:.07em;
}

.session-row strong{
  display:block;

  color:var(--navy);
}

.session-row small{
  color:var(--muted);
}

.status{
  color:var(--sage-dark);

  font-size:12px;
  font-weight:700;
}


/* =========================================================
   PHASES
   ========================================================= */

.phase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:14px;
}

.phase-card{
  min-height:240px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.phase-card h3{
  margin:7px 0;

  font-size:25px;
}

.phase-number{
  color:var(--cream-2);

  font-family:"Manrope",sans-serif;
  font-size:43px;
  font-weight:500;
}

.phase-card.current{
  background:var(--navy);
  color:#fff;
}

.phase-card.current h3,
.phase-card.current .phase-number{
  color:#fff;
}


/* =========================================================
   PROGRAM LIBRARY
   ========================================================= */

.program-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:16px;
}

.program-card{
  min-height:320px;

  position:relative;

  overflow:hidden;

  border:0;
  border-radius:25px;

  background-position:center;
  background-size:cover;

  color:#fff;

  text-align:left;

  box-shadow:var(--shadow-sm);
}

.program-card:after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      0deg,
      rgba(11,37,55,.96),
      rgba(11,37,55,.05) 76%
    );
}

.program-copy{
  position:absolute;
  z-index:1;

  left:25px;
  right:25px;
  bottom:24px;
}

.program-copy h3{
  margin:5px 0;

  color:#fff;

  font-size:29px;
}

.program-copy span{
  color:rgba(255,255,255,.82);

  font-size:12px;
}


/* =========================================================
   PLANNER
   ========================================================= */

.planner-layout{
  display:grid;
  grid-template-columns:1.35fr .65fr;

  gap:20px;
}

.calendar-card{
  padding:26px;

  border:1px solid var(--line);
  border-radius:26px;

  background:#fff;
}

.calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:22px;
}

.calendar-head h2{
  margin:0;

  font-size:26px;
}

.calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);

  gap:7px;
}

.weekday{
  color:var(--muted);

  font-size:10px;

  letter-spacing:.09em;

  text-align:center;
}

.calendar-cell{
  min-height:84px;

  padding:9px;

  border:1px solid var(--line);
  border-radius:13px;

  background:var(--paper);

  text-align:left;

  transition:.2s ease;
}

.calendar-cell:hover{
  border-color:var(--sage);
}

.calendar-cell strong{
  color:var(--navy);
}

.calendar-cell.has{
  background:var(--sage-soft);
}

.calendar-cell.today{
  outline:2px solid var(--navy);
  outline-offset:-1px;
}

.calendar-cell small{
  display:block;

  margin-top:7px;

  color:var(--navy);

  font-size:11px;
  line-height:1.2;
}

.day-panel h2{
  font-size:30px;
}

.plan-row{
  padding:16px 0;

  border-bottom:1px solid var(--line);
}

.plan-row:last-child{
  border-bottom:0;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:12px;
}

.metric{
  padding:20px;

  border:1px solid var(--line);
  border-radius:19px;

  background:#fff;
}

.metric span{
  display:block;

  color:var(--muted);

  font-size:12px;
}

.metric strong{
  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:30px;
  font-weight:600;
}

.metric small{
  color:var(--sage-dark);
}

.progress-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;

  gap:18px;

  margin-top:18px;
}

.chart{
  width:100%;
  height:210px;

  margin-top:20px;
}

.chart .grid{
  stroke:#e7e8e5;
  stroke-width:1;
}

.chart .line{
  fill:none;

  stroke:var(--navy);
  stroke-width:3;
}

.chart .area{
  fill:var(--sage-soft);
}

.lift{
  padding:15px 0;

  border-bottom:1px solid var(--line);
}

.mini-bar{
  height:5px;

  margin-top:7px;

  border-radius:99px;

  background:#e6e7e3;
}

.mini-bar span{
  display:block;

  height:100%;

  border-radius:99px;

  background:var(--sage);
}

.body-grid{
  display:grid;
  grid-template-columns:.75fr 1.25fr;

  gap:18px;

  margin-top:18px;
}


/* =========================================================
   PROGRESS PHOTOS
   ========================================================= */

.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:10px;
}

.photo-slot{
  aspect-ratio:3/4;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:1px dashed #b9c5bf;
  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      var(--cream),
      var(--sage-soft)
    );

  color:var(--muted);

  text-align:center;
}

.photo-slot img{
  width:100%;
  height:100%;

  object-fit:cover;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.support-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:18px;
}

.support-card{
  min-height:295px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.support-card h2{
  margin:9px 0;

  font-size:36px;
  line-height:1.04;
}


/* =========================================================
   NUTRITION
   ========================================================= */

.nutrition-grid{
  display:grid;
  grid-template-columns:.75fr 1.25fr;

  gap:18px;
}

.target{
  margin-bottom:18px;
}

.target-head{
  display:flex;
  justify-content:space-between;

  gap:12px;
}

.target-head strong{
  color:var(--navy);
}

.recipe-list{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10px;
}

.recipe{
  padding:15px;

  border:1px solid var(--line);
  border-radius:15px;

  background:#fff;

  text-align:left;

  transition:.2s ease;
}

.recipe:hover{
  border-color:var(--sage);

  transform:translateY(-1px);
}

.recipe strong{
  display:block;

  color:var(--navy);
}

.recipe small{
  color:var(--muted);
}


/* =========================================================
   IGNIA
   ========================================================= */

.ignia-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:13px;
}

.ignia-card{
  min-height:180px;

  text-align:left;
}

.ignia-card.current{
  background:var(--navy);

  color:#fff;
}

.ignia-card.current h3{
  color:#fff;
}

.reflection{
  width:100%;
  min-height:110px;

  resize:vertical;

  padding:14px;

  border:1px solid var(--line);
  border-radius:14px;

  background:var(--paper);

  color:var(--text);
}


/* =========================================================
   FORMS
   ========================================================= */

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:14px;
}

.field{
  display:grid;

  gap:7px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  color:#465965;

  font-size:12px;
  font-weight:700;
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:52px;

  padding:0 15px;

  border:1px solid var(--line);
  border-radius:14px;

  outline:none;

  background:#fff;
  color:var(--ink);

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.field textarea{
  min-height:110px;

  padding:14px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--navy);

  box-shadow:
    0 0 0 3px rgba(16,47,70,.07);
}

.choice-row{
  display:flex;
  flex-wrap:wrap;

  gap:8px;
}

.choice{
  min-height:42px;

  padding:9px 14px;

  border:1px solid var(--line);
  border-radius:999px;

  background:#fff;
}

.choice.active{
  background:var(--navy);
  border-color:var(--navy);

  color:#fff;
}


/* =========================================================
   BOTTOM NAVIGATION — FULL SCREEN
   ========================================================= */

.bottom-nav{
  position:fixed;
  z-index:30;

  left:0;
  right:0;
  bottom:0;

  width:100%;
  min-height:76px;

  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;

  padding:
    8px
    clamp(24px,5vw,90px)
    calc(8px + env(safe-area-inset-bottom));

  border:0;
  border-top:1px solid rgba(207,215,211,.95);
  border-radius:0;

  background:rgba(251,251,249,.96);

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  box-shadow:
    0 -10px 35px rgba(16,47,70,.07);
}

.bottom-nav a{
  width:100%;
  min-height:54px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:12px 18px;

  border-radius:16px;

  color:var(--muted);

  font-size:12px;
  font-weight:600;

  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease;
}

.bottom-nav a:hover{
  color:var(--navy);

  background:rgba(16,47,70,.04);
}

.bottom-nav a.active{
  background:var(--navy);
  color:#fff;
}

/* =========================================================
   MODALS
   ========================================================= */

dialog{
  border:0;

  padding:0;

  background:transparent;
}

.modal::backdrop,
.runner-dialog::backdrop{
  background:rgba(11,37,55,.52);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.modal{
  width:min(800px,calc(100% - 28px));
  max-height:92vh;
}

.modal-panel{
  max-height:92vh;

  overflow:auto;

  padding:30px;

  border-radius:29px;

  background:var(--paper);

  box-shadow:var(--shadow-lg);
}

.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:17px;
}

.modal-head h2{
  margin:8px 0;

  font-size:36px;
}

.notice{
  margin:18px 0;

  padding:14px 16px;

  border-radius:14px;

  background:var(--sage-soft);
  color:var(--navy);

  font-size:13px;
}


/* =========================================================
   WORKOUT OVERVIEW
   ========================================================= */

.workout-cover{
  height:280px;

  display:flex;
  align-items:flex-end;

  padding:24px;

  border-radius:21px;

  color:#fff;

  background:
    linear-gradient(
      0deg,
      rgba(11,37,55,.95),
      rgba(11,37,55,.04)
    ),
    url("https://images.unsplash.com/photo-1517963879433-6ad2b056d712?auto=format&fit=crop&w=1400&q=85")
    center/cover;
}

.workout-cover h2{
  margin:7px 0;

  color:#fff;

  font-size:41px;
}

.overview-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  margin:21px 0;

  border-bottom:1px solid var(--line);
}

.overview-stat{
  padding:0 9px 18px;
}

.overview-stat strong{
  display:block;

  color:var(--navy);
}

.overview-stat span{
  color:var(--muted);

  font-size:11px;
}

.exercise-list-row{
  display:grid;
  grid-template-columns:43px 1fr auto;
  align-items:center;

  gap:13px;

  padding:14px 0;

  border-bottom:1px solid var(--line);
}

.exercise-num{
  width:41px;
  height:41px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:var(--sage-soft);
  color:var(--navy);

  font-weight:700;
}


/* =========================================================
   WORKOUT RUNNER
   ========================================================= */

.runner-dialog{
  width:min(1160px,calc(100% - 24px));
  max-height:95vh;
}

.runner-shell{
  min-height:690px;

  display:grid;
  grid-template-columns:1.18fr .82fr;

  overflow:hidden;

  border-radius:30px;

  background:#fff;

  box-shadow:var(--shadow-lg);
}

.video-stage{
  min-height:570px;

  position:relative;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      var(--deep),
      #315468
    );

  color:#fff;
}

.video-stage:before{
  content:"";

  position:absolute;
  inset:0;

  background:
    url("https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=1100&q=80")
    center/cover;

  opacity:.30;
}

.runner-top{
  position:absolute;
  z-index:1;

  left:24px;
  right:24px;
  top:24px;

  display:flex;
  justify-content:space-between;
}

.play-button{
  position:relative;

  width:84px;
  height:84px;

  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;

  background:rgba(255,255,255,.09);
  color:#fff;

  font-size:20px;

  backdrop-filter:blur(5px);
}

.runner-panel{
  padding:30px;

  overflow:auto;
}

.runner-panel h2{
  margin:8px 0;

  font-size:36px;
  line-height:1.05;
}

.set-header,
.set-row{
  display:grid;
  grid-template-columns:1fr 76px 114px 44px;

  gap:8px;

  align-items:center;
}

.set-header{
  padding-bottom:8px;

  color:var(--muted);

  font-size:11px;
}

.set-header span:nth-child(2),
.set-header span:nth-child(3){
  text-align:center;
}

.set-row{
  padding:13px 0;

  border-top:1px solid var(--line);
}

.weight-input{
  width:100%;
  min-width:0;

  padding:9px;

  border:1px solid var(--line);
  border-radius:11px;

  text-align:center;
}

.rep-stepper{
  height:42px;

  display:grid;
  grid-template-columns:32px 1fr 32px;
  align-items:center;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:11px;
}

.rep-stepper button{
  height:100%;

  border:0;

  background:transparent;
  color:var(--navy);

  font-size:18px;
}

.rep-stepper input{
  width:100%;
  min-width:0;

  border:0;

  text-align:center;
}

.set-check{
  width:34px;
  height:34px;

  border:1px solid #bdc7c2;
  border-radius:50%;

  background:#fff;

  color:transparent;
}

.set-check.done{
  background:var(--sage);
  border-color:var(--sage);

  color:#fff;
}

.set-tools{
  display:grid;
  grid-template-columns:1fr 1fr;

  border-top:1px solid var(--line);
}

.set-tools button{
  padding:14px 0;

  border:0;

  background:transparent;

  font-weight:700;
}

.set-tools button:first-child{
  color:var(--danger);

  text-align:left;
}

.set-tools button:last-child{
  color:var(--navy);

  text-align:right;
}

.circle-sign{
  width:24px;
  height:24px;

  display:inline-grid;
  place-items:center;

  margin:0 6px;

  border:1px solid currentColor;
  border-radius:50%;
}

.timer{
  display:flex;
  justify-content:space-between;

  margin:14px 0;

  padding:14px;

  border-radius:14px;

  background:var(--sage-soft);
}

.runner-actions{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:9px;
}

.runner-nav{
  display:grid;
  grid-template-columns:auto 1fr auto;

  gap:8px;

  margin-top:9px;
}

.runner-nav button{
  padding:11px;
}

.form-cues{
  margin-top:17px;

  padding-top:16px;

  border-top:1px solid var(--line);
}


/* =========================================================
   WORKOUT LIBRARY
   ========================================================= */

.queue-row{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;

  gap:12px;

  padding:14px 0;

  border-bottom:1px solid var(--line);
}

.queue-actions{
  display:flex;

  gap:5px;
}

.mini-button{
  padding:7px 10px;

  border:1px solid var(--line);
  border-radius:9px;

  background:#fff;

  font-size:12px;
}

.mini-button.danger{
  color:var(--danger);
}

.library-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10px;

  margin-top:13px;
}

.library-item{
  padding:14px;

  border:1px solid var(--line);
  border-radius:14px;

  background:#fff;

  text-align:left;

  transition:.2s ease;
}

.library-item:hover{
  border-color:var(--sage);

  transform:translateY(-1px);
}

.library-item strong{
  display:block;

  color:var(--navy);
}

.library-item small{
  color:var(--muted);
}


/* =========================================================
   WORKOUT SUMMARY
   ========================================================= */

.summary{
  padding:27px;

  text-align:center;
}

.summary-mark{
  width:72px;
  height:72px;

  display:grid;
  place-items:center;

  margin:auto;

  border-radius:50%;

  background:var(--sage-soft);
  color:var(--navy);

  font-size:26px;
}

.summary-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:9px;

  margin:24px 0;
}

.summary-stat{
  padding:16px;

  border-radius:15px;

  background:var(--cream);
}

.summary-stat strong{
  display:block;

  color:var(--navy);

  font-size:21px;
}

.summary-stat span{
  color:var(--muted);

  font-size:11px;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast{
  position:fixed;
  z-index:100;

  left:50%;
  bottom:100px;

  transform:
    translateX(-50%)
    translateY(16px);

  opacity:0;

  pointer-events:none;

  padding:12px 18px;

  border-radius:999px;

  background:var(--navy);
  color:#fff;

  font-size:12px;

  box-shadow:var(--shadow);

  transition:.22s ease;
}

.toast.show{
  opacity:1;

  transform:translateX(-50%);
}


/* =========================================================
   ACCOUNT / PROFILE
   Retained for current JS.
   We'll expand this when Profile becomes a nav page.
   ========================================================= */

.record-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:10px;
}

.record{
  padding:14px;

  border:1px solid var(--line);
  border-radius:14px;

  background:var(--paper);
}

.record strong{
  display:block;

  color:var(--navy);

  font-size:23px;
}

.record span{
  color:var(--muted);

  font-size:11px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .home-grid,
  .training-layout,
  .planner-layout,
  .progress-layout,
  .body-grid,
  .nutrition-grid{
    grid-template-columns:1fr;
  }

  .side-stack{
    grid-template-columns:1fr 1fr;
  }

  .system-grid{
    grid-template-columns:1fr 1fr;
  }

  .system-grid > :first-child{
    grid-column:1/-1;
  }

  .runner-shell{
    grid-template-columns:1fr;
  }

  .video-stage{
    min-height:360px;
  }

  .metric-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  body{
    font-size:14px;
  }

.app-shell{
  width:100%;
  max-width:none;

  padding:
    0
    18px
    100px;
}

  .topbar{
    height:70px;
  }

  .brand{
    font-size:17px;
  }

  .avatar-button{
    width:42px;
    height:42px;
  }

  .save-state{
    display:none;
  }

  .home-head{
    padding:32px 0 21px;
  }

  .home-head h1{
    font-size:38px;
    line-height:1.03;
  }

  .home-head p{
    font-size:14px;
  }

  .page-head{
    display:block;

    padding:35px 0 23px;
  }

  .page-head h1{
    font-size:39px;
  }

  .page-head p{
    font-size:14px;
  }

  .page-head .button{
    margin-top:17px;
  }

  .eyebrow{
    font-size:10px;
  }


  /* BUTTONS */

  .button{
    min-height:52px;

    padding:13px 20px;
  }


  /* WEEK */

  .week-strip{
    gap:3px;

    padding:5px;
  }

  .week-day{
    min-height:57px;

    padding:5px;

    border-radius:11px;
  }

  .week-day strong{
    font-size:14px;
  }


  /* GRIDS */

  .home-grid,
  .side-stack,
  .agenda,
  .system-grid,
  .support-grid,
  .phase-grid,
  .program-grid,
  .ignia-grid{
    grid-template-columns:1fr;
  }

  .system-grid > :first-child{
    grid-column:auto;
  }


  /* CARDS */

  .card{
    padding:21px;

    border-radius:21px;
  }

  .section{
    margin-top:30px;
  }

  .section-head h2{
    font-size:23px;
  }


  /* HOME HERO */

  .workout-hero{
    min-height:430px;

    border-radius:25px;
  }

  .hero-copy{
    left:23px;
    right:23px;
    bottom:23px;
  }

  .hero-copy h2{
    font-size:35px;
  }


  /* AGENDA */

  .agenda-item{
    padding:17px;

    border-radius:17px;
  }


  /* PROGRAM */

  .program-panel{
    min-height:340px;

    padding:24px;

    border-radius:23px;
  }

  .program-panel h2{
    font-size:34px;
  }

  .session-list{
    padding:4px 17px;
  }

  .session-row{
    grid-template-columns:54px 1fr auto;

    gap:10px;

    padding:18px 0;
  }


  /* PROGRAM CARDS */

  .program-card{
    min-height:290px;
  }


  /* CALENDAR */

  .calendar-card{
    padding:15px;

    border-radius:21px;
  }

  .calendar{
    gap:3px;
  }

  .calendar-cell{
    min-height:57px;

    padding:6px;
  }

  .calendar-cell small{
    font-size:0;
  }

  .calendar-cell small:after{
    content:"";

    display:block;

    width:5px;
    height:5px;

    margin-top:5px;

    border-radius:50%;

    background:var(--navy);
  }


  /* METRICS */

  .metric-grid{
    grid-template-columns:1fr 1fr;
  }

  .metric{
    padding:17px;
  }

  .metric strong{
    font-size:25px;
  }


  /* PHOTOS */

  .photo-grid{
    gap:6px;
  }


  /* FORMS */

  .form-grid,
  .recipe-list,
  .library-grid{
    grid-template-columns:1fr;
  }

  .field input,
  .field select{
    min-height:54px;
  }


  /* MODALS */

  .modal{
    width:calc(100% - 18px);
  }

  .modal-panel{
    padding:22px;

    border-radius:23px;
  }

  .modal-head h2{
    font-size:31px;
  }

  .overview-stats{
    grid-template-columns:1fr 1fr;
  }


  /* WORKOUT RUNNER */

  .runner-dialog{
    width:100%;
    max-height:100vh;
  }

  .runner-shell{
    min-height:100vh;

    border-radius:0;
  }

  .video-stage{
    min-height:275px;
  }

  .runner-panel{
    padding:21px;
  }

  .runner-panel h2{
    font-size:31px;
  }

  .set-header,
  .set-row{
    grid-template-columns:
      minmax(40px,1fr)
      65px
      106px
      36px;
  }

  .queue-row{
    grid-template-columns:32px 1fr;
  }

  .queue-actions{
    grid-column:2;

    flex-wrap:wrap;
  }

  .summary-stats{
    grid-template-columns:1fr;
  }


  /* PROFILE */

  .record-grid{
    grid-template-columns:1fr 1fr;
  }


  /* BOTTOM NAV */

.bottom-nav{
  left:0;
  right:0;
  bottom:0;

  width:100%;
  min-height:68px;

  grid-template-columns:repeat(5,1fr);

  padding:
    6px
    8px
    calc(6px + env(safe-area-inset-bottom));

  border-radius:0;
}

.bottom-nav a{
  min-height:50px;

  padding:9px 5px;

  border-radius:13px;

  font-size:10px;
}
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  .app-shell{
    padding-left:15px;
    padding-right:15px;
  }

  .home-head h1{
    font-size:35px;
  }

  .page-head h1{
    font-size:36px;
  }

  .week-day{
    min-height:54px;

    font-size:9px;
  }

  .week-day strong{
    font-size:13px;
  }

  .hero-copy h2{
    font-size:32px;
  }

  .metric-grid{
    gap:8px;
  }

  .metric{
    padding:14px;
  }

  .metric strong{
    font-size:23px;
  }

.bottom-nav a{
  padding:8px 3px;
  font-size:9px;
}
  .set-header,
  .set-row{
    grid-template-columns:
      minmax(38px,1fr)
      58px
      98px
      34px;

    gap:5px;
  }
}

/* =========================================================
   NEW XCULPTED PROFILE PAGE
   ========================================================= */

.profile-view{
  width:100%;
  max-width:none;
  padding:52px 0 48px;
}


/* =========================================================
   PROFILE HERO
   ========================================================= */

.profile-header{
  display:flex;
  align-items:center;
  gap:28px;

  padding:30px;

  border:1px solid var(--line);
  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      var(--sage-soft) 0%,
      #f4f7f5 55%,
      #fff 100%
    );
}


/* PHOTO */

.profile-photo-wrap{
  position:relative;
  flex:0 0 auto;

  width:116px;
  height:116px;
}

.profile-photo{
  width:116px;
  height:116px;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:5px solid #fff;
  border-radius:50%;

  object-fit:cover;

  box-shadow:
    0 14px 35px rgba(16,47,70,.14);
}

.profile-initials{
  background:var(--navy);
  color:#fff;

  font-family:"Manrope",sans-serif;
  font-size:31px;
  font-weight:700;

  letter-spacing:-.04em;
}

.profile-photo-edit{
  position:absolute;

  right:-1px;
  bottom:3px;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  padding:0;

  border:4px solid #fff;
  border-radius:50%;

  background:var(--navy);
  color:#fff;

  font-size:21px;
  line-height:1;

  box-shadow:
    0 7px 18px rgba(16,47,70,.18);

  transition:
    transform .2s ease,
    background .2s ease;
}

.profile-photo-edit:hover{
  background:var(--deep);
  transform:scale(1.05);
}


/* IDENTITY */

.profile-identity{
  min-width:0;
}

.profile-identity .eyebrow{
  margin-bottom:8px;
}

.profile-identity h1{
  margin:0 0 7px;

  color:var(--navy);

  font-size:clamp(38px,4vw,54px);
  line-height:1;

  letter-spacing:-.045em;
}

.profile-identity p{
  margin:0;

  color:var(--muted);

  font-size:15px;
}

.profile-photo-link{
  margin-top:9px;
}


/* =========================================================
   PROFILE SECTIONS
   ========================================================= */

.profile-section{
  margin-top:38px;
}

.profile-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:17px;
}

.profile-section-head h2{
  margin:7px 0 0;

  color:var(--navy);

  font-size:29px;
  line-height:1.1;
}


/* =========================================================
   TRAINING INFORMATION
   ========================================================= */

.profile-data-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}

.profile-data-card{
  min-height:150px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:23px;

  border:1px solid var(--line);
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 7px 24px rgba(16,47,70,.025);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.profile-data-card:hover{
  transform:translateY(-2px);

  border-color:var(--line-strong);

  box-shadow:var(--shadow-sm);
}

.profile-data-card span{
  color:var(--muted);

  font-size:12px;
  font-weight:500;
}

.profile-data-card strong{
  display:block;

  margin-top:20px;

  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:21px;
  font-weight:650;

  line-height:1.25;
}

.profile-complete-card{
  background:var(--sage-soft);
  border-color:#d4ded8;
}

.profile-complete-card strong{
  color:var(--navy);
}


/* =========================================================
   ACCOUNT DETAILS
   ========================================================= */

.profile-account-card{
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 7px 24px rgba(16,47,70,.025);
}

.profile-account-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:21px 23px;

  border-bottom:1px solid var(--line);
}

.profile-account-row:last-child{
  border-bottom:0;
}

.profile-account-row span{
  display:block;

  margin-bottom:4px;

  color:var(--muted);

  font-size:11px;
}

.profile-account-row strong{
  display:block;

  color:var(--navy);

  font-size:15px;
  font-weight:650;
}


/* =========================================================
   PROFILE ACTIVITY
   ========================================================= */

.profile-view .record-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}

.profile-view .record{
  min-height:115px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:20px;

  border:1px solid var(--line);
  border-radius:19px;

  background:#fff;

  box-shadow:
    0 7px 24px rgba(16,47,70,.025);
}

.profile-view .record strong{
  display:block;

  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:29px;
  font-weight:650;
}

.profile-view .record span{
  color:var(--muted);

  font-size:11px;
}


/* =========================================================
   TOPBAR PROFILE IMAGE
   ========================================================= */

.avatar-button{
  overflow:hidden;
}

.top-profile-photo{
  width:100%;
  height:100%;

  display:block;

  border-radius:50%;

  object-fit:cover;
}


/* =========================================================
   PROFILE TABLET
   ========================================================= */

@media(max-width:900px){

  .profile-data-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .profile-view .record-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   PROFILE MOBILE
   ========================================================= */

@media(max-width:620px){

  .profile-view{
    padding:30px 0 28px;
  }


  /* HERO */

  .profile-header{
    align-items:flex-start;

    gap:18px;

    padding:22px;

    border-radius:23px;
  }

  .profile-photo-wrap{
    width:82px;
    height:82px;
  }

  .profile-photo{
    width:82px;
    height:82px;

    border-width:4px;
  }

  .profile-initials{
    font-size:23px;
  }

  .profile-photo-edit{
    right:-3px;
    bottom:-1px;

    width:32px;
    height:32px;

    border-width:3px;

    font-size:17px;
  }

  .profile-identity h1{
    font-size:31px;
  }

  .profile-identity p{
    max-width:190px;

    overflow:hidden;

    font-size:12px;

    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .profile-photo-link{
    margin-top:6px;

    font-size:11px;
  }


  /* SECTIONS */

  .profile-section{
    margin-top:31px;
  }

  .profile-section-head{
    margin-bottom:14px;
  }

  .profile-section-head h2{
    font-size:24px;
  }


  /* TRAINING */

  .profile-data-grid{
    grid-template-columns:1fr;

    gap:10px;
  }

  .profile-data-card{
    min-height:108px;

    padding:18px;

    border-radius:18px;
  }

  .profile-data-card strong{
    margin-top:14px;

    font-size:18px;
  }


  /* ACCOUNT */

  .profile-account-card{
    border-radius:18px;
  }

  .profile-account-row{
    padding:18px;
  }


  /* ACTIVITY */

  .profile-view .record-grid{
    grid-template-columns:1fr 1fr;

    gap:9px;
  }

  .profile-view .record{
    min-height:100px;

    padding:16px;

    border-radius:17px;
  }

  .profile-view .record strong{
    font-size:25px;
  }

}


/* =========================================================
   PROFILE SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  .profile-header{
    gap:14px;

    padding:18px;
  }

  .profile-photo-wrap{
    width:72px;
    height:72px;
  }

  .profile-photo{
    width:72px;
    height:72px;
  }

  .profile-initials{
    font-size:20px;
  }

  .profile-photo-edit{
    width:29px;
    height:29px;
  }

  .profile-identity h1{
    font-size:27px;
  }

}

/* =========================================================
   XCULPTED HOME V2
   ========================================================= */

.home-dashboard{
  width:100%;
  padding:38px 0 48px;
}


/* =========================================================
   INTRO
   ========================================================= */

.home-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  margin-bottom:28px;
}

.home-heading h1{
  margin:8px 0 6px;

  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:clamp(40px,4vw,68px);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.055em;
}

.home-heading p{
  margin:0;

  color:var(--muted);
  font-size:14px;
}

.eyebrow{
  display:block;

  color:var(--sage);
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
}


/* =========================================================
   MAIN 60 / 40
   ========================================================= */

.home-dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(350px,2fr);

  gap:22px;
  align-items:stretch;
}

.home-primary-column,
.home-side-column{
  min-width:0;
}

/* =========================================================
   TODAY WORKOUT
   ========================================================= */

.today-workout-card{
  position:relative;

  width:100%;
  height:100%;
  min-height:580px;

  overflow:hidden;

  border-radius:26px;

  background:var(--ink);
}

.today-workout-image{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}

.today-workout-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(7,25,36,.03) 20%,
      rgba(7,25,36,.20) 52%,
      rgba(7,25,36,.90) 100%
    );
}

.today-workout-content{
  position:absolute;
  z-index:2;

  left:38px;
  right:38px;
  bottom:38px;

  color:#fff;
}

.workout-kicker{
  display:block;

  margin-bottom:12px;

  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;

  opacity:.8;
}

.today-workout-content h2{
  max-width:700px;

  margin:0 0 14px;

  font-family:"Manrope",sans-serif;
  font-size:clamp(38px,4vw,64px);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.05em;
}

.workout-meta{
  display:flex;
  flex-wrap:wrap;
  gap:18px;

  margin-bottom:25px;

  font-size:12px;
  font-weight:600;
}

.workout-primary-button{
  min-height:52px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;

  padding:0 22px;

  border:0;
  border-radius:999px;

  background:#fff;
  color:var(--navy);

  font:inherit;
  font-size:12px;
  font-weight:700;

  cursor:pointer;
}

.workout-primary-button span{
  font-size:19px;
}


/* =========================================================
   QUICK INFO
   ========================================================= */

.workout-quick-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  border:1px solid var(--line);
  border-radius:20px;

  background:#fff;
}

.workout-quick-info>div{
  padding:19px 22px;
}

.workout-quick-info>div+div{
  border-left:1px solid var(--line);
}

.quick-info-label{
  display:block;

  margin-bottom:6px;

  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
}

.workout-quick-info strong{
  color:var(--navy);
  font-size:13px;
}


/* =========================================================
   SIDE CARDS
   ========================================================= */

.side-dashboard-card,
.training-location-card{
  padding:22px;

  border:1px solid var(--line);
  border-radius:22px;

  background:#fff;
}

.side-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;
}

.side-card-heading h3{
  margin:6px 0 0;

  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.035em;
}

.text-action{
  padding:4px 0;

  border:0;
  background:transparent;

  color:var(--navy);

  font:inherit;
  font-size:10px;
  font-weight:700;

  cursor:pointer;
}


/* =========================================================
   HOME / GYM SELECTOR
   ========================================================= */

.training-location-card{
  background:#f3f6f4;
}

.training-location-switch{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;

  margin-top:18px;
  padding:5px;

  border-radius:18px;

  background:#fff;
}

.location-option{
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border:0;
  border-radius:14px;

  background:transparent;
  color:var(--muted);

  font:inherit;
  font-size:12px;
  font-weight:700;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.location-option:hover{
  color:var(--navy);
}

.location-option.active{
  background:var(--navy);
  color:#fff;
}

.location-icon{
  font-size:17px;
}


/* =========================================================
   COMPACT CALENDAR
   ========================================================= */

.compact-week{
  display:grid;
  grid-template-columns:repeat(7,1fr);

  gap:5px;

  margin-top:18px;
}

.compact-day{
  position:relative;

  min-height:62px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  border:0;
  border-radius:12px;

  background:#f5f7f6;
  color:var(--muted);

  cursor:pointer;

  transition:
    background-color .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}


/* DAY NAME */

.compact-day small{
  font-size:7px;
  font-weight:700;

  transition:
    color .22s ease,
    transform .22s ease;
}


/* DATE NUMBER */

.compact-day strong{
  color:var(--navy);
  font-size:12px;

  transition:
    color .22s ease,
    transform .22s ease;
}


/* HOVER — NORMAL DAYS */

.compact-day:hover{
  background:var(--sage-soft);

  transform:translateY(-3px);

  box-shadow:
    0 6px 14px
    rgba(16,47,70,.09);
}

.compact-day:hover small,
.compact-day:hover strong{
  transform:translateY(-1px);
}


/* =========================================================
   TODAY
   ========================================================= */

.compact-day.active{
  background:var(--sage);
  color:#fff;

  box-shadow:
    0 4px 10px
    rgba(16,47,70,.08);
}

.compact-day.active small{
  color:rgba(255,255,255,.85);
}

.compact-day.active strong{
  color:#fff;
}


/* TODAY HOVER */

.compact-day.active:hover{
  background:var(--sage-dark);

  transform:translateY(-3px);

  box-shadow:
    0 7px 16px
    rgba(16,47,70,.14);
}

.compact-day.active:hover small,
.compact-day.active:hover strong{
  color:#fff;
}


/* =========================================================
   READINESS
   ========================================================= */

.readiness-card{
  background:#edf2ef;
}

.readiness-description{
  margin:9px 0 16px;

  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}

.readiness-values{
  border-top:1px solid rgba(16,47,70,.08);
}

.readiness-values>div{
  min-height:42px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid rgba(16,47,70,.08);

  color:var(--muted);
  font-size:11px;
}

.readiness-values>div:last-child{
  border-bottom:0;
}

.readiness-values strong{
  color:var(--navy);
}


/* =========================================================
   THIS WEEK
   ========================================================= */

.weekly-count{
  color:var(--navy);
  font-size:26px;
}

.week-progress-track{
  height:5px;

  overflow:hidden;

  margin:17px 0;

  border-radius:999px;

  background:#e4e8e6;
}

.week-progress-track span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:var(--sage);
}

.compact-workout-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.compact-workout{
  width:100%;
  min-height:60px;

  display:grid;
  grid-template-columns:40px 1fr 32px;
  align-items:center;

  gap:10px;

  padding:10px 12px;

  border:1px solid var(--line);
  border-radius:14px;

  background:#fff;

  text-align:left;
  font:inherit;

  cursor:pointer;
}

.compact-workout.completed{
  background:#edf2ef;
}

.compact-workout.current{
  border-color:rgba(16,47,70,.25);
}

.workout-day{
  color:var(--muted);
  font-size:8px;
  font-weight:700;
}

.workout-list-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.workout-list-copy strong{
  color:var(--navy);
  font-size:11px;
}

.workout-list-copy small{
  color:var(--muted);
  font-size:9px;
}

.workout-state,
.workout-arrow{
  display:flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border-radius:50%;

  background:var(--navy);
  color:#fff;

  font-size:12px;
}


/* =========================================================
   HOME SECTIONS
   ========================================================= */

.home-section{
  margin-top:55px;
}

.home-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:30px;

  margin-bottom:18px;
}

.home-section-heading h2{
  margin:7px 0 0;

  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:-.045em;
}

.home-section-heading a{
  color:var(--navy);

  font-size:11px;
  font-weight:700;

  text-decoration:none;
}


/* =========================================================
   FEATURED TRAINING
   ========================================================= */

.featured-training-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;

  gap:18px;
}

.featured-plan{
  position:relative;

  min-height:500px;

  overflow:hidden;

  display:flex;
  align-items:flex-end;

  padding:30px;

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      #173d55,
      #0b2537
    );

  color:#fff;
}

.featured-plan-large{
  min-height:360px;
}

.featured-plan-content{
  max-width:430px;
}

.featured-plan-content>span{
  display:block;

  margin-bottom:10px;

  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;

  opacity:.7;
}

.featured-plan h3{
  margin:0 0 8px;

  font-family:"Manrope",sans-serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:-.04em;
}

.featured-plan p{
  max-width:350px;

  margin:0;

  color:rgba(255,255,255,.72);

  font-size:11px;
  line-height:1.6;
}

.featured-plan button,
.experience-arrow{
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:20px;

  border:0;
  border-radius:50%;

  background:#fff;
  color:var(--navy);

  font-size:18px;

  cursor:pointer;
}


/* =========================================================
   OTHER XCULPTED EXPERIENCES
   ========================================================= */

.experience-section{
  margin-bottom:30px;
}

.experience-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:18px;
}

.experience-card{
  position:relative;

  min-height:500px;

  display:flex;
  align-items:flex-end;

  overflow:hidden;

  padding:30px;

  border-radius:24px;
}

.meals-card{
  background:
    linear-gradient(
      135deg,
      #e5ece8,
      #f5f7f5
    );
}

.ignia-card-home{
  background:
    linear-gradient(
      135deg,
      #102f46,
      #0b2537
    );

  color:#fff;
}

.experience-card-copy{
  max-width:390px;
}

.experience-label{
  display:block;

  margin-bottom:10px;

  color:var(--sage);

  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}

.experience-card h3{
  margin:0 0 9px;

  font-family:"Manrope",sans-serif;
  font-size:32px;
  font-weight:600;
  letter-spacing:-.045em;
}

.meals-card h3{
  color:var(--navy);
}

.experience-card p{
  max-width:340px;

  margin:0;

  color:var(--muted);

  font-size:11px;
  line-height:1.6;
}

.ignia-card-home p{
  color:rgba(255,255,255,.7);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .home-dashboard-grid{
    grid-template-columns:1fr;
  }

  .today-workout-card{
    min-height:560px;
  }

  .home-side-column{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }

  .this-week-card{
    grid-column:1 / -1;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .home-dashboard{
    padding-top:22px;
  }

  .home-heading{
    margin-bottom:20px;
  }

  .home-heading h1{
    font-size:30px;
  }

  .home-heading p{
    font-size:12px;
  }


  /* Training location comes first like reference */

  .home-dashboard-grid{
    display:flex;
    flex-direction:column;
  }

  .home-primary-column{
    order:2;
  }

  .home-side-column{
    order:1;

    display:flex;
    flex-direction:column;
  }

  .training-location-card{
    order:1;
  }

  .calendar-card{
    order:3;
  }

  .readiness-card{
    order:4;
  }

  .this-week-card{
    order:5;
  }


  /* workout */

  .today-workout-card{
    min-height:460px;

    border-radius:22px;
  }

  .today-workout-content{
    left:22px;
    right:22px;
    bottom:24px;
  }

  .today-workout-content h2{
    font-size:38px;
  }


  /* quick info */

  .workout-quick-info{
    grid-template-columns:1fr;
  }

  .workout-quick-info>div+div{
    border-left:0;
    border-top:1px solid var(--line);
  }


  /* side */

  .side-dashboard-card,
  .training-location-card{
    padding:18px;
    border-radius:19px;
  }

  .compact-week{
    gap:3px;
  }

  .compact-day{
    min-height:56px;
  }


  /* featured */

  .home-section{
    margin-top:42px;
  }

  .featured-training-grid{
    grid-template-columns:1fr;
  }

  .featured-plan,
  .featured-plan-large{
    min-height:260px;
  }


  /* Experiences */

  .experience-grid{
    grid-template-columns:1fr;
  }

  .experience-card{
    min-height:240px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:430px){

  .home-heading h1{
    font-size:34px;
  }

  .today-workout-card{
    min-height:420px;
  }

  .today-workout-content h2{
    font-size:34px;
  }

  .compact-day{
    min-height:52px;
    border-radius:10px;
  }

  .compact-day small{
    font-size:6px;
  }

  .compact-day strong{
    font-size:10px;
  }

  .side-card-heading h3{
    font-size:18px;
  }

  .home-section-heading h2{
    font-size:24px;
  }

}

/* =========================================================
   XCULPTED — HOME DASHBOARD FINAL LAYOUT OVERRIDES
   Full-screen desktop + corrected spacing
   ========================================================= */


/* ---------- APP FRAME ---------- */

html,
body{
  width:100%;
  min-height:100%;
}

body{
  margin:0;
  overflow-x:hidden;
}

.app-shell{
  width:100%;
  max-width:none;
  min-height:100vh;
  margin:0;

  padding:
    0
    clamp(28px,3.4vw,64px)
    110px;
}

.topbar{
  width:100%;
  height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid var(--line);
}


/* ---------- MAIN ---------- */

#app{
  width:100%;
}

.home-dashboard{
  width:100%;
  padding-top:34px;
}


/* ---------- INTRO ---------- */

.home-heading{
  margin-bottom:26px;
}

.home-heading h1{
  margin:5px 0 5px;

  font-family:Manrope,sans-serif;
  font-size:clamp(42px,4vw,64px);
  line-height:.98;
  letter-spacing:-.055em;

  color:var(--ink);
}

.home-heading p{
  margin:0;
  max-width:600px;

  font-size:15px;
  line-height:1.6;

  color:var(--muted);
}


/* =========================================================
   MAIN DASHBOARD
   ========================================================= */

.home-dashboard-grid{
  width:100%;

  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(390px,1fr);

  gap:18px;

  align-items:stretch;
}

.home-primary-column,
.home-side-column{
  min-width:0;
}


/* =========================================================
   TODAY WORKOUT
   ========================================================= */

.today-workout-card{
  position:relative;

  width:100%;
height:100%;
  overflow:hidden;

  border-radius:26px;

  background:var(--ink);
}

.today-workout-image{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  display:block;
}

.today-workout-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(7,29,43,.02) 20%,
      rgba(7,29,43,.18) 52%,
      rgba(7,29,43,.94) 100%
    );
}

.today-workout-content{
  position:absolute;

  left:30px;
  right:30px;
  bottom:30px;

  z-index:2;

  color:#fff;
}

.workout-kicker{
  display:block;

  margin-bottom:8px;

  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;

  color:#c8d8d1;
}

.today-workout-content h2{
  margin:0 0 10px;

  font-family:Manrope,sans-serif;

  font-size:clamp(36px,3.2vw,56px);
  line-height:1;

  letter-spacing:-.05em;

  color:#fff;
}

.workout-meta{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;

  margin-bottom:21px;

  font-size:12px;
  font-weight:600;

  color:#e5ebea;
}

.workout-primary-button{
  min-height:47px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:24px;

  padding:0 19px;

  border:0;
  border-radius:999px;

  background:#fff;
  color:var(--ink);

  font-weight:700;

  cursor:pointer;
}

.workout-primary-button:hover{
  transform:translateY(-1px);
}


/* ---------- QUICK INFO ---------- */

.workout-quick-info{
  width:100%;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  margin-top:0px;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:16px;

  background:#fff;
}

.workout-quick-info > div{
  min-height:68px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:12px 18px;

  border-right:1px solid var(--line);
}

.workout-quick-info > div:last-child{
  border-right:0;
}

.quick-info-label{
  margin-bottom:5px;

  font-size:9px;
  font-weight:700;

  letter-spacing:.12em;

  color:var(--muted);
}

.workout-quick-info strong{
  font-size:12px;
  color:var(--ink);
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.home-side-column{
  display:flex;
  flex-direction:column;

  gap:12px;
}


/* ---------- ALL RIGHT CARDS ---------- */

.training-location-card,
.side-dashboard-card{
  width:100%;

  border:1px solid var(--line);
  border-radius:20px;

  background:#fff;

  padding:18px;
}

.training-location-card,
.readiness-card{
  background:var(--sage-soft);
}

.side-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  margin-bottom:13px;
}

.side-card-heading h3{
  margin:4px 0 0;

  font-family:Manrope,sans-serif;
  font-size:18px;
  line-height:1.15;

  letter-spacing:-.025em;

  color:var(--ink);
}

.side-card-heading .eyebrow{
  font-size:9px;
}

.text-action{
  padding:2px 0;

  border:0;
  background:transparent;

  font-size:10px;
  font-weight:700;

  color:var(--ink);

  cursor:pointer;
}


/* ---------- HOME / GYM ---------- */

.training-location-switch{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:7px;

  padding:4px;

  border-radius:14px;

  background:rgba(255,255,255,.7);
}

.location-option{
  min-height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  border:0;
  border-radius:11px;

  background:transparent;

  color:var(--muted);

  font-weight:600;

  cursor:pointer;
}

.location-option.active{
  background:var(--ink);
  color:#fff;
}

.location-icon{
  font-size:13px;
}


/* ---------- WEEK ---------- */

.compact-week{
  display:grid;
  grid-template-columns:repeat(7,1fr);

  gap:5px;
}

.compact-day{
  min-width:0;
  min-height:56px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:3px;

  padding:5px;

  border:0;
  border-radius:10px;

  background:#f4f6f5;

  color:var(--muted);
}

.compact-day small{
  font-size:7px;
  font-weight:700;
}

.compact-day strong{
  font-size:11px;
  color:var(--ink);
}

.compact-day.completed{
  background:var(--sage-soft);
}

.compact-day.active{
  background:var(--ink);
  color:#fff;
}

.compact-day.active strong{
  color:#fff;
}


/* ---------- READINESS ---------- */

.readiness-description{
  margin:0 0 13px;

  font-size:11px;
  line-height:1.5;

  color:var(--muted);
}

.readiness-values{
  border-top:1px solid rgba(16,47,70,.10);
}

.readiness-values > div{
  min-height:37px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid rgba(16,47,70,.10);

  font-size:10px;
}

.readiness-values > div:last-child{
  border-bottom:0;
}

.readiness-values span{
  color:var(--muted);
}

.readiness-values strong{
  color:var(--ink);
}


/* ---------- THIS WEEK ---------- */

.weekly-count{
  font-family:Manrope,sans-serif;
  font-size:23px;

  color:var(--ink);
}

.week-progress-track{
  width:100%;
  height:5px;

  margin-bottom:11px;

  overflow:hidden;

  border-radius:999px;

  background:#e5e9e7;
}

.week-progress-track span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:var(--sage);
}

.compact-workout-list{
  display:grid;
  gap:6px;
}

.compact-workout{
  width:100%;
  min-height:50px;

  display:grid;
  grid-template-columns:40px 1fr 28px;

  align-items:center;

  gap:9px;

  padding:8px 10px;

  border:1px solid var(--line);
  border-radius:11px;

  background:#fff;

  text-align:left;
}

.compact-workout.completed{
  background:var(--sage-soft);
}

.workout-day{
  font-size:8px;
  font-weight:700;

  color:var(--muted);
}

.workout-list-copy{
  min-width:0;
}

.workout-list-copy strong{
  display:block;

  font-size:10px;

  color:var(--ink);
}

.workout-list-copy small{
  display:block;

  margin-top:2px;

  font-size:8px;

  color:var(--muted);
}

.workout-state,
.workout-arrow{
  width:24px;
  height:24px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:var(--ink);

  color:#fff;

  font-size:10px;
}


/* =========================================================
   HOME SECTIONS
   Fix excessive empty space
   ========================================================= */

.home-section{
  width:100%;

  margin-top:52px;
}

.home-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;
}

.home-section-heading h2{
  margin:4px 0 0;

  font-family:Manrope,sans-serif;

  font-size:clamp(24px,2vw,32px);
  line-height:1.1;

  letter-spacing:-.035em;

  color:var(--ink);
}

.home-section-heading a{
  font-size:11px;
  font-weight:700;

  color:var(--ink);

  text-decoration:none;
}


/* =========================================================
   FEATURED TRAINING
   ========================================================= */

.featured-training-grid{
  display:grid;

  grid-template-columns:2fr 1fr;

  gap:14px;
}

.featured-plan{
  min-height:550px;
}

.featured-plan-large{
  min-height:285px;
}

.featured-plan-content span{
  font-size:8px;
  font-weight:700;

  letter-spacing:.12em;

  color:#b9cbc1;
}

.featured-plan-content h3{
  margin:8px 0;

  font-family:Manrope,sans-serif;

  font-size:27px;

  color:#fff;
}

.featured-plan-content p{
  max-width:430px;

  margin:0 0 17px;

  font-size:11px;
  line-height:1.55;

  color:#d4dfdc;
}

.featured-plan-content button,
.experience-arrow{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;

  background:#fff;

  color:var(--ink);

  cursor:pointer;
}


/* =========================================================
   EXPERIENCES
   ========================================================= */

.experience-section{
  margin-top:46px;
}

.experience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:14px;
}

.experience-card{
  min-height:220px;

  display:flex;
  align-items:flex-end;

  padding:25px;

  border-radius:22px;

  overflow:hidden;
}

.meals-card{
  background:var(--sage-soft);
}

.ignia-card-home{
  background:var(--ink);
  color:#fff;
}

.experience-label{
  font-size:8px;
  font-weight:700;

  letter-spacing:.12em;

  color:var(--sage);
}

.experience-card h3{
  margin:8px 0;

  font-family:Manrope,sans-serif;

  font-size:27px;

  color:var(--ink);
}

.ignia-card-home h3{
  color:#fff;
}

.experience-card p{
  max-width:440px;

  margin:0 0 17px;

  font-size:11px;
  line-height:1.55;

  color:var(--muted);
}

.ignia-card-home p{
  color:#d0dcda;
}


/* =========================================================
   FULL WIDTH NAVIGATION
   ========================================================= */

.bottom-nav{
  position:fixed;

  z-index:30;

  left:0;
  right:0;
  bottom:0;

  transform:none;

  width:100%;
  height:74px;

  display:grid;

  grid-template-columns:repeat(5,1fr);

  align-items:center;

  padding:
    8px
    clamp(28px,4vw,72px)
    calc(8px + env(safe-area-inset-bottom));

  border:0;
  border-top:1px solid var(--line);

  border-radius:0;

  background:rgba(251,251,249,.96);

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  box-shadow:0 -10px 32px rgba(16,47,70,.06);
}

.bottom-nav a{
  width:100%;
  min-height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px 15px;

  border-radius:14px;

  color:var(--muted);

  font-size:11px;
  font-weight:600;

  text-decoration:none;
}

.bottom-nav a:hover{
  background:rgba(16,47,70,.04);

  color:var(--ink);
}

.bottom-nav a.active{
  background:var(--ink);

  color:#fff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

  .app-shell{
    padding-left:24px;
    padding-right:24px;
  }

  .home-dashboard-grid{
    grid-template-columns:1.3fr .9fr;
  }

  .today-workout-card{
    height:500px;
  }

  .compact-week{
    gap:3px;
  }

}


/* =========================================================
   MOBILE / TABLET STACK
   ========================================================= */

@media(max-width:900px){

  .home-dashboard-grid{
    grid-template-columns:1fr;
  }

  .home-side-column{
    display:grid;

    grid-template-columns:1fr 1fr;
  }

  .today-workout-card{
    height:520px;
  }

  .featured-training-grid{
    grid-template-columns:1fr 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .app-shell{
    width:100%;
    max-width:none;

    padding:
      0
      16px
      88px;
  }

  .topbar{
    height:66px;
  }

  .home-dashboard{
    padding-top:27px;
  }

  .home-heading{
    margin-bottom:20px;
  }

  .home-heading h1{
    font-size:40px;
  }

  .home-heading p{
    font-size:13px;
  }

  .home-side-column{
    display:flex;
  }

  .today-workout-card{
    height:470px;

    border-radius:22px;
  }

  .today-workout-content{
    left:21px;
    right:21px;
    bottom:22px;
  }

  .today-workout-content h2{
    font-size:36px;
  }

  .workout-quick-info{
    grid-template-columns:1fr;
  }

  .workout-quick-info > div{
    min-height:58px;

    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .workout-quick-info > div:last-child{
    border-bottom:0;
  }

  .home-section{
    margin-top:38px;
  }

  .featured-training-grid,
  .experience-grid{
    grid-template-columns:1fr;
  }

  .featured-plan,
  .featured-plan-large{
    min-height:240px;
  }

  .experience-card{
    min-height:200px;
  }

  .bottom-nav{
    height:68px;

    padding:
      6px
      7px
      calc(6px + env(safe-area-inset-bottom));
  }

  .bottom-nav a{
    min-height:48px;

    padding:8px 4px;

    border-radius:12px;

    font-size:10px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:390px){

  .app-shell{
    padding-left:13px;
    padding-right:13px;
  }

  .home-heading h1{
    font-size:36px;
  }

  .compact-day{
    min-height:51px;
  }

  .compact-day strong{
    font-size:10px;
  }

  .bottom-nav a{
    font-size:9px;
  }

}

/* =========================================================
   XCULPTED HOME CARD IMAGES
   ========================================================= */

/* Featured workout cards */

.featured-plan{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.featured-plan-content{
  position:relative;
  z-index:2;
}


/* Meals + IGNIA image cards */

.experience-card{
  position:relative;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.experience-card-copy{
  position:relative;
  z-index:2;
}


/* Meals now uses photography */

.meals-card h3{
  color:#fff;
}

.meals-card p{
  color:rgba(255,255,255,.78);
}

.meals-card .experience-label{
  color:#d1ded7;
}


/* IGNIA */

.ignia-card-home h3{
  color:#fff;
}

.ignia-card-home .experience-label{
  color:#b9cbc1;
}


/* Slight image movement on hover */

.featured-plan,
.experience-card{
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.featured-plan:hover,
.experience-card:hover{
  transform:translateY(-2px);

  box-shadow:
    0 18px 40px rgba(16,47,70,.12);
}

/* =========================================
   MEALS + IGNIA CARD HEIGHT
   ========================================= */

.experience-card{
  height:500px;
  min-height:500px;
}

/* =========================================================
   XCULPTED HOME — FINAL SIZE + TOPBAR OVERRIDES
   ========================================================= */


/* ---------------------------------------------------------
   REMOVE OUTER BLUE / DARK BORDER
   --------------------------------------------------------- */

#app,
.home-dashboard,
.home-dashboard-grid{
  border:none !important;
  outline:none !important;
  box-shadow:none;
}


/* ---------------------------------------------------------
   TOPBAR PROFILE
   --------------------------------------------------------- */

.top-actions{
  display:flex;
  align-items:center;
  gap:18px;
}

/* This is where the user's name will appear */
.save-state{
  display:block;
  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:16px;
  font-weight:600;

  white-space:nowrap;
}


/* 44px before → approximately 3x larger */
.avatar-button{
  width:100px !important;
  height:100px !important;

  flex:0 0 100px;

  padding:0;

  border:4px solid #fff;
  border-radius:50%;

  overflow:hidden;

  background:var(--navy);

  box-shadow:
    0 10px 28px rgba(16,47,70,.18);
}

.top-profile-photo{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;

  border-radius:50%;
}


/* Give larger profile enough vertical space */
.topbar{
  height:125px;
}


/* ---------------------------------------------------------
   HOME INTRO — APPROXIMATELY 2X CURRENT TEXT
   --------------------------------------------------------- */

.home-heading .eyebrow{
  font-size:18px;
}

.home-heading h1{
  font-size:clamp(64px,6vw,96px);
}

.home-heading p{
  max-width:900px;
  font-size:28px;
}


/* ---------------------------------------------------------
   MAIN WORKOUT
   --------------------------------------------------------- */

.workout-kicker{
  font-size:18px;
}

.today-workout-content h2{
  font-size:clamp(58px,5vw,88px);
}

.workout-meta{
  font-size:22px;
}

.workout-primary-button{
  min-height:66px;

  padding:0 30px;

  font-size:20px;
}

.workout-primary-button span{
  font-size:26px;
}


/* ---------------------------------------------------------
   QUICK INFO
   --------------------------------------------------------- */

.quick-info-label{
  font-size:16px;
}

.workout-quick-info strong{
  font-size:20px;
}


/* ---------------------------------------------------------
   RIGHT COLUMN
   --------------------------------------------------------- */

.side-card-heading .eyebrow{
  font-size:15px;
}

.side-card-heading h3{
  font-size:28px;
}

.text-action{
  font-size:16px;
}


/* HOME / GYM */

.location-option{
  font-size:18px;
}

.location-icon{
  font-size:20px;
}


/* CALENDAR */

.compact-day small{
  font-size:11px;
}

.compact-day strong{
  font-size:18px;
}


/* DAILY DECISION */

.readiness-description{
  font-size:17px;
}

.readiness-values > div{
  min-height:48px;
  font-size:16px;
}


/* THIS WEEK */

.weekly-count{
  font-size:36px;
}

.workout-day{
  font-size:13px;
}

.workout-list-copy strong{
  font-size:17px;
}

.workout-list-copy small{
  font-size:13px;
}


/* ---------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------- */

.home-section-heading .eyebrow{
  font-size:16px;
}

.home-section-heading h2{
  font-size:44px;
}

.home-section-heading a{
  font-size:16px;
}


/* ---------------------------------------------------------
   FEATURED TRAINING
   --------------------------------------------------------- */

.featured-plan-content > span{
  font-size:14px;
}

.featured-plan-content h3{
  font-size:40px;
}

.featured-plan-content p{
  max-width:650px;
  font-size:18px;
}


/* ---------------------------------------------------------
   MEALS + IGNIA
   --------------------------------------------------------- */

.experience-label{
  font-size:14px;
}

.experience-card h3{
  font-size:40px;
}

.experience-card p{
  max-width:650px;
  font-size:18px;
}


/* ---------------------------------------------------------
   BOTTOM NAV
   --------------------------------------------------------- */

.bottom-nav a{
  font-size:18px;
  font-weight:600;
}


/* =========================================================
   MOBILE — DON'T APPLY DESKTOP 2X SIZES
   ========================================================= */

@media(max-width:620px){

  .topbar{
    height:82px;
  }

  .avatar-button{
    width:58px !important;
    height:58px !important;
    flex-basis:58px;

    border-width:3px;
  }

  .save-state{
    font-size:13px;
  }


  .home-heading .eyebrow{
    font-size:11px;
  }

  .home-heading h1{
    font-size:40px;
  }

  .home-heading p{
    font-size:14px;
  }


  .workout-kicker{
    font-size:11px;
  }

  .today-workout-content h2{
    font-size:38px;
  }

  .workout-meta{
    font-size:13px;
  }

  .workout-primary-button{
    min-height:50px;
    padding:0 20px;
    font-size:13px;
  }


  .quick-info-label{
    font-size:10px;
  }

  .workout-quick-info strong{
    font-size:14px;
  }


  .side-card-heading .eyebrow{
    font-size:10px;
  }

  .side-card-heading h3{
    font-size:20px;
  }

  .text-action{
    font-size:11px;
  }

  .location-option{
    font-size:13px;
  }

  .compact-day small{
    font-size:7px;
  }

  .compact-day strong{
    font-size:11px;
  }

  .readiness-description{
    font-size:12px;
  }

  .readiness-values > div{
    font-size:12px;
  }

  .weekly-count{
    font-size:26px;
  }

  .workout-day{
    font-size:9px;
  }

  .workout-list-copy strong{
    font-size:12px;
  }

  .workout-list-copy small{
    font-size:10px;
  }


  .home-section-heading .eyebrow{
    font-size:10px;
  }

  .home-section-heading h2{
    font-size:28px;
  }

  .home-section-heading a{
    font-size:11px;
  }


  .featured-plan-content > span,
  .experience-label{
    font-size:9px;
  }

  .featured-plan-content h3,
  .experience-card h3{
    font-size:30px;
  }

  .featured-plan-content p,
  .experience-card p{
    font-size:13px;
  }


  .bottom-nav a{
    font-size:11px;
  }

}



/* =========================================================
   XCULPTED — PROGRAMS DISCOVERY BANNER
   ========================================================= */

.programs-discovery-section {
  margin-top: 55px;
}


/* MAIN BANNER */

.programs-discovery-card {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;

  border: 0;
  border-radius: 28px;

  background: #102f46;

  cursor: pointer;

  box-shadow:
    0 24px 55px rgba(16, 47, 70, 0.12);

  isolation: isolate;
}


/* IMAGE */

.programs-discovery-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  z-index: 0;

  transition:
    transform 0.7s ease;
}


/* SUBTLE IMAGE MOVEMENT */

.programs-discovery-card:hover
.programs-discovery-image {
  transform: scale(1.025);
}


/* OVERLAY */

.programs-discovery-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(7, 29, 43, 0.02) 15%,
      rgba(7, 29, 43, 0.18) 42%,
      rgba(7, 29, 43, 0.82) 72%,
      rgba(7, 29, 43, 0.96) 100%
    );
}


/* CONTENT */

.programs-discovery-content {
  position: absolute;

  z-index: 2;

  left: 50%;
  bottom: 38px;

  transform: translateX(-50%);

  width: min(760px, calc(100% - 60px));

  text-align: center;

  color: #ffffff;
}


/* EYEBROW */

.programs-discovery-eyebrow {
  display: block;

  margin-bottom: 10px;

  font-family: "Manrope", sans-serif;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.15em;

  color: #c7d5cf;
}


/* HEADLINE */

.programs-discovery-content h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -0.04em;

  color: #ffffff;
}


/* DESCRIPTION */

.programs-discovery-content p {
  max-width: 650px;

  margin:
    15px auto
    0;

  font-size: 17px;
  line-height: 1.6;

  color: rgba(255, 255, 255, 0.86);
}


/* FOUR PROGRAM TYPES */

.programs-discovery-types {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 19px;
}


.programs-discovery-types span {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 32px;

  padding:
    6px
    13px;

  border:
    1px solid
    rgba(255, 255, 255, 0.26);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.10);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-size: 12px;
  font-weight: 600;

  color: #ffffff;
}


/* BUTTON */

.programs-discovery-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 13px;

  min-height: 48px;

  margin-top: 22px;

  padding:
    0
    22px;

  border: 0;

  border-radius: 999px;

  background: #ffffff;

  color: #102f46;

  font-family: "Manrope", sans-serif;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.programs-discovery-button:hover {
  transform: translateY(-2px);

  background: #f2f4f2;
}


.programs-discovery-button span {
  font-size: 18px;
  line-height: 1;
}


/* KEYBOARD FOCUS */

.programs-discovery-card:focus-visible {
  outline:
    3px solid
    rgba(16, 47, 70, 0.25);

  outline-offset: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .programs-discovery-card {
    min-height: 500px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .programs-discovery-section {
    margin-top: 42px;
  }


  .programs-discovery-card {
    min-height: 500px;

    border-radius: 22px;
  }


  .programs-discovery-image {
    object-position: center;
  }


  .programs-discovery-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(7, 29, 43, 0.02) 5%,
        rgba(7, 29, 43, 0.15) 32%,
        rgba(7, 29, 43, 0.88) 68%,
        rgba(7, 29, 43, 0.98) 100%
      );
  }


  .programs-discovery-content {
    bottom: 27px;

    width:
      calc(100% - 36px);
  }


  .programs-discovery-content h3 {
    font-size: 35px;
  }


  .programs-discovery-content p {
    margin-top: 12px;

    font-size: 15px;
    line-height: 1.5;
  }


  .programs-discovery-types {
    gap: 6px;

    margin-top: 16px;
  }


  .programs-discovery-types span {
    padding:
      5px
      10px;

    font-size: 11px;
  }


  .programs-discovery-button {
    width: 100%;

    margin-top: 19px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .programs-discovery-card {
    min-height: 500px;
  }


  .programs-discovery-content h3 {
    font-size: 31px;
  }


  .programs-discovery-content p {
    font-size: 14px;
  }

}

/* =========================================================
   XCULPTED — MACRO CALCULATOR
   ========================================================= */

.macro-calculator {
  max-width: 900px;
  margin: 0 auto;
}


.macro-intro {
  max-width: 650px;

  margin:
    8px 0
    30px;

  color: #71808a;

  font-size: 16px;
  line-height: 1.65;
}


/* FORM */

.macro-calculator-form {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;

  padding: 25px;

  border:
    1px solid #dfe3e1;

  border-radius: 22px;

  background: #fbfbf9;
}


.macro-field {
  display: flex;
  flex-direction: column;

  gap: 8px;

  min-width: 0;
}


.macro-field-full {
  grid-column: 1 / -1;
}


.macro-field label {
  color: #172b3a;

  font-size: 13px;
  font-weight: 700;
}


.macro-field input,
.macro-field select {
  width: 100%;

  min-height: 50px;

  padding:
    0
    14px;

  border:
    1px solid #dfe3e1;

  border-radius: 13px;

  background: #ffffff;

  color: #172b3a;

  font: inherit;

  outline: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.macro-field input:focus,
.macro-field select:focus {
  border-color: #8fa69a;

  box-shadow:
    0 0 0 3px
    rgba(143, 166, 154, .15);
}


/* INPUT WITH UNIT */

.macro-input-unit {
  display: flex;

  align-items: center;

  gap: 8px;
}


.macro-input-unit input {
  flex: 1;

  min-width: 0;
}


.macro-input-unit > span {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding:
    0
    15px;

  border-radius: 13px;

  background: #eef1ef;

  color: #71808a;

  font-size: 13px;
  font-weight: 700;
}


.macro-input-unit select {
  width: 88px;
}


/* GOAL OPTIONS */

.macro-goal-options {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}


.macro-goal-option {
  position: relative;

  cursor: pointer;
}


.macro-goal-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.macro-goal-option > span {
  display: flex;
  flex-direction: column;

  min-height: 82px;

  justify-content: center;

  padding: 15px;

  border:
    1px solid #dfe3e1;

  border-radius: 15px;

  background: #ffffff;

  transition:
    .2s ease;
}


.macro-goal-option strong {
  color: #172b3a;

  font-size: 15px;
}


.macro-goal-option small {
  margin-top: 4px;

  color: #71808a;
}


.macro-goal-option input:checked + span {
  border-color: #102f46;

  background:
    rgba(16, 47, 70, .06);

  box-shadow:
    inset 0 0 0 1px #102f46;
}


.macro-calculate-button {
  margin-top: 4px;

  min-height: 54px;
}


/* RESULTS */

.macro-results {
  margin-top: 24px;

  padding: 28px;

  border-radius: 24px;

  background: #102f46;

  color: #ffffff;

  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity .45s ease,
    transform .45s ease;
}


.macro-results:empty {
  display: none;
}


.macro-results.show {
  opacity: 1;

  transform:
    translateY(0);
}


.macro-result-heading {
  text-align: center;
}


.macro-result-heading .eyebrow {
  color: #b9cbc1;
}


.macro-result-heading h3 {
  margin:
    8px 0
    6px;

  color: #ffffff;

  font-size: 29px;
}


.macro-result-heading p {
  max-width: 560px;

  margin:
    0 auto;

  color:
    rgba(255,255,255,.72);

  line-height: 1.55;
}


/* CALORIES */

.macro-calorie-result {
  display: flex;
  flex-direction: column;

  align-items: center;

  margin:
    30px 0
    25px;
}


.macro-calorie-result span {
  color:
    rgba(255,255,255,.7);

  font-size: 13px;
}


.macro-calorie-result strong {
  margin-top: 4px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(50px, 8vw, 78px);

  font-weight: 500;

  line-height: 1;

  letter-spacing: -.05em;
}


.macro-calorie-result small {
  margin-top: 6px;

  color: #b9cbc1;
}


/* MACRO CARDS */

.macro-result-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}


.macro-result-card {
  padding: 20px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 17px;

  background:
    rgba(255,255,255,.07);

  text-align: center;
}


.macro-result-card span {
  display: block;

  color:
    rgba(255,255,255,.7);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.macro-result-card strong {
  display: block;

  margin-top: 8px;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 34px;

  font-weight: 500;
}


.macro-result-card small {
  color: #b9cbc1;
}


/* SECONDARY DATA */

.macro-secondary-results {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;

  margin-top: 10px;
}


.macro-secondary-results > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 14px 16px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 13px;
}


.macro-secondary-results span {
  color:
    rgba(255,255,255,.65);

  font-size: 12px;
}


.macro-secondary-results strong {
  font-size: 13px;
}


.macro-recalculate {
  margin-top: 18px;

  background: #ffffff;

  color: #102f46;
}


.macro-disclaimer {
  margin:
    18px 4px
    0;

  color: #71808a;

  font-size: 11px;
  line-height: 1.55;
}


/* MOBILE */

@media (max-width: 700px) {

  .macro-calculator-form {
    grid-template-columns: 1fr;

    padding: 18px;
  }


  .macro-field-full {
    grid-column: auto;
  }


  .macro-goal-options {
    grid-template-columns: 1fr;
  }


  .macro-goal-option > span {
    min-height: 65px;
  }


  .macro-results {
    padding: 22px 17px;
  }


  .macro-result-grid {
    grid-template-columns: 1fr;
  }


  .macro-secondary-results {
    grid-template-columns: 1fr;
  }


  .macro-calorie-result strong {
    font-size: 55px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .macro-results {
    transition: none;
  }

}
/* =========================================================
   XCULPTED — INLINE MACRO CALCULATOR
   ========================================================= */

.macro-card-inline {
  height: auto !important;
  min-height: 0 !important;
  padding: 34px;
  border: 1px solid #dfe3e1;
  border-radius: 26px;
  background: #fbfbf9 !important;
  background-image: none !important;
  color: #172b3a;
  box-shadow: 0 18px 45px rgba(16, 47, 70, 0.08);
}

.macro-home-header {
  margin-bottom: 28px;
}

.macro-home-header .experience-label {
  color: #71808a;
}

.macro-home-header h3 {
  margin: 7px 0 8px;
  font-family: "Manrope", sans-serif;
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #102f46;
}

.macro-home-header p {
  max-width: 560px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #71808a;
}

.home-macro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.home-macro-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-macro-field label {
  font-size: 12px;
  font-weight: 700;
  color: #172b3a;
}

.home-macro-field input,
.home-macro-field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #dfe3e1;
  border-radius: 13px;
  outline: none;
  background: #ffffff;
  color: #172b3a;
  font: inherit;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.home-macro-field input:focus,
.home-macro-field select:focus {
  border-color: #8fa69a;
  box-shadow: 0 0 0 3px rgba(143, 166, 154, .15);
}

.home-macro-input-unit {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dfe3e1;
  border-radius: 13px;
  background: #ffffff;
}

.home-macro-input-unit input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}

.home-macro-input-unit span {
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: #71808a;
}

.home-macro-input-unit select {
  width: 80px;
  border: 0;
  border-left: 1px solid #dfe3e1;
  border-radius: 0;
  box-shadow: none !important;
}

.home-macro-button {
  margin-top: 19px;
  min-height: 51px;
  border-radius: 999px;
  background: #102f46;
}

.home-macro-results {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition:
    max-height .55s ease,
    margin .4s ease,
    opacity .4s ease,
    transform .4s ease;
}

.home-macro-results.show {
  max-height: 700px;
  margin-top: 30px;
  opacity: 1;
  transform: translateY(0);
}

.home-macro-result-heading {
  margin-bottom: 16px;
}

.home-macro-result-heading h3 {
  margin: 5px 0 0;
  font-size: 22px;
  color: #102f46;
}

.home-macro-calories {
  padding: 24px;
  border-radius: 19px;
  background: #102f46;
  color: #ffffff;
}

.home-macro-calories span,
.home-macro-calories small {
  display: block;
  color: rgba(255,255,255,.72);
}

.home-macro-calories strong {
  display: block;
  margin: 5px 0 1px;
  font-family: "Manrope", sans-serif;
  font-size: 42px;
  line-height: 1;
}

.home-macro-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.home-macro-result {
  padding: 18px;
  border: 1px solid #dfe3e1;
  border-radius: 17px;
  background: #ffffff;
}

.home-macro-result span,
.home-macro-result small {
  display: block;
  color: #71808a;
}

.home-macro-result strong {
  display: block;
  margin: 5px 0 2px;
  font-family: "Manrope", sans-serif;
  font-size: 27px;
  color: #102f46;
}

.home-macro-estimates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.home-macro-estimates > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f2f4f2;
}

.home-macro-estimates span {
  color: #71808a;
}

.home-macro-estimates strong {
  color: #102f46;
}

.home-macro-disclaimer {
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #8a969e;
}


/* MOBILE */

@media (max-width: 700px) {

  .macro-card-inline {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .macro-home-header h3 {
    font-size: 27px;
  }

  .home-macro-grid {
    grid-template-columns: 1fr;
  }

  .home-macro-result-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-macro-result {
    padding: 13px 9px;
    text-align: center;
  }

  .home-macro-result strong {
    font-size: 23px;
  }

  .home-macro-result span,
  .home-macro-result small {
    font-size: 10px;
  }

  .home-macro-estimates {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   XCULPTED
   PREMIUM INLINE MACRO CALCULATOR
   ========================================================= */


/* =========================================================
   MAIN CARD
   ========================================================= */

.macro-premium-card {
  position: relative;

  width: 100%;
  min-height: 720px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.72);

  border-radius: 32px;

  background: #eef2ef;

  box-shadow:
    0 26px 70px rgba(16,47,70,.10);

  isolation: isolate;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.macro-premium-bg {
  position: absolute;

  inset: -25px;

  z-index: 0;

  background-image:
    url("/assets/macro-calculator.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  filter:
    blur(12px)
    saturate(.72);

  transform: scale(1.06);
}


/* =========================================================
   SOFT WHITE / SAGE OVERLAY
   ========================================================= */

.macro-premium-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(
      90deg,
      rgba(251,251,249,.95) 0%,
      rgba(251,251,249,.86) 35%,
      rgba(251,251,249,.66) 68%,
      rgba(251,251,249,.48) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.18),
      rgba(143,166,154,.18)
    );
}


/* =========================================================
   CONTENT
   ========================================================= */

.macro-premium-content {
  position: relative;

  z-index: 2;

  width: 100%;

  padding:
    58px
    clamp(38px,5vw,76px)
    40px;
}


/* =========================================================
   HEADER
   ========================================================= */

.macro-premium-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 40px;

  margin-bottom: 42px;
}


.macro-premium-header > div:first-child {
  max-width: 820px;
}


.macro-premium-eyebrow {
  display: block;

  margin-bottom: 11px;

  color: #789083;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .18em;
}


.macro-premium-header h3 {
  margin: 0;

  color: #102f46;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(40px,4vw,62px);

  font-weight: 500;

  line-height: 1;

  letter-spacing: -.05em;
}


.macro-premium-header p {
  max-width: 760px;

  margin:
    17px
    0
    0;

  color: #657782;

  font-size: 17px;

  line-height: 1.6;
}


/* Decorative right-side text */

.macro-premium-note {
  flex: 0 0 auto;

  margin:
    10px
    20px
    0
    0;

  color: #102f46;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 23px;

  font-weight: 500;

  line-height: 1.15;

  text-align: right;

  transform: rotate(-4deg);

  opacity: .82;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.macro-premium-form {
  width: 100%;
}


.macro-premium-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 16px;
}


/* =========================================================
   QUESTION CARDS
   ========================================================= */

.macro-question {
  position: relative;

  min-width: 0;
  min-height: 145px;

  display: grid;

  grid-template-columns:
    58px minmax(0,1fr);

  align-items: center;

  gap: 17px;

  padding: 21px;

  border:
    1px solid rgba(255,255,255,.78);

  border-radius: 22px;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  box-shadow:
    0 12px 30px rgba(16,47,70,.07);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.macro-question:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(255,255,255,.95);

  box-shadow:
    0 17px 36px rgba(16,47,70,.11);
}


/* =========================================================
   SIX DIFFERENT LIGHT XCULPTED COLORS
   ========================================================= */


/* SEX — blush / warm */

.macro-question-sex {
  background:
    rgba(250,235,232,.87);
}


/* AGE — sage */

.macro-question-age {
  background:
    rgba(226,235,228,.89);
}


/* WEIGHT — warm cream */

.macro-question-weight {
  background:
    rgba(245,237,225,.90);
}


/* HEIGHT — light blue */

.macro-question-height {
  background:
    rgba(227,237,244,.90);
}


/* ACTIVITY — muted lavender */

.macro-question-activity {
  background:
    rgba(235,232,242,.90);
}


/* GOAL — pale sage */

.macro-question-goal {
  background:
    rgba(224,238,233,.90);
}


/* =========================================================
   QUESTION ICON
   ========================================================= */

.macro-question-icon {
  width: 58px;
  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #102f46;

  background:
    rgba(255,255,255,.52);

  font-family:
    "Manrope",
    sans-serif;

  font-size: 22px;

  font-weight: 600;

  line-height: 1;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.42);
}


.macro-question-sex
.macro-question-icon {
  color: #a9605d;

  background:
    rgba(194,105,100,.12);
}


.macro-question-age
.macro-question-icon {
  color: #4f7562;

  background:
    rgba(79,117,98,.12);
}


.macro-question-weight
.macro-question-icon {
  color: #846547;

  background:
    rgba(132,101,71,.12);
}


.macro-question-height
.macro-question-icon {
  color: #496e88;

  background:
    rgba(73,110,136,.12);
}


.macro-question-activity
.macro-question-icon {
  color: #62637e;

  background:
    rgba(98,99,126,.12);
}


.macro-question-goal
.macro-question-icon {
  color: #477565;

  background:
    rgba(71,117,101,.12);
}


/* =========================================================
   QUESTION CONTENT
   ========================================================= */

.macro-question-body {
  min-width: 0;
}


.macro-question-body label {
  display: block;

  margin:
    0
    0
    9px;

  color: #102f46;

  font-size: 13px;

  font-weight: 700;
}


/* =========================================================
   INPUTS
   ========================================================= */

.macro-question-body > input,
.macro-question-body > select,
.macro-question-input-unit {
  width: 100%;

  min-width: 0;

  height: 54px;

  border:
    1px solid
    rgba(255,255,255,.82);

  border-radius: 13px;

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 3px 10px
    rgba(16,47,70,.025);
}


.macro-question-body > input,
.macro-question-body > select {
  padding:
    0
    15px;

  color: #172b3a;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 14px;

  outline: none;
}


/* =========================================================
   INPUT + UNIT
   ========================================================= */

.macro-question-input-unit {
  display: flex;

  align-items: center;

  overflow: hidden;
}


.macro-question-input-unit input {
  flex:
    1
    1
    auto;

  width: 1px;

  min-width: 0;

  height: 52px;

  padding:
    0
    15px;

  border: 0;

  outline: none;

  background:
    transparent;

  color: #172b3a;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 14px;
}


.macro-question-input-unit > span {
  flex:
    0
    0
    auto;

  padding:
    0
    15px;

  color: #71808a;

  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;
}


/* LB / KG */

.macro-question-input-unit select {
  flex:
    0
    0
    80px;

  width: 80px;

  height: 52px;

  padding:
    0
    9px;

  border: 0;

  border-left:
    1px solid #e2e7e4;

  outline: none;

  background:
    rgba(255,255,255,.58);

  color: #172b3a;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 13px;
}


/* =========================================================
   FOCUS EFFECT
   ========================================================= */

.macro-question:focus-within {
  transform:
    translateY(-3px);

  border-color:
    rgba(143,166,154,.75);

  box-shadow:
    0 18px 38px
    rgba(16,47,70,.12);
}


.macro-question input:focus,
.macro-question select:focus {
  outline: none;
}


/* =========================================================
   CALCULATE BUTTON
   ========================================================= */

.macro-premium-button {
  width: 100%;

  min-height: 66px;

  margin-top: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  padding:
    0
    28px;

  border: 0;

  border-radius: 999px;

  background: #102f46;

  color: #ffffff;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 16px 32px
    rgba(16,47,70,.18);

  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


.macro-premium-button:hover {
  background: #0b2537;

  transform:
    translateY(-2px);

  box-shadow:
    0 20px 38px
    rgba(16,47,70,.23);
}


.macro-premium-button-arrow {
  font-size: 23px;

  font-weight: 400;

  transition:
    transform .2s ease;
}


.macro-premium-button:hover
.macro-premium-button-arrow {
  transform:
    translateX(5px);
}


/* =========================================================
   RESULTS
   Keep compatibility with existing JS
   ========================================================= */

.macro-premium-results {
  position: relative;

  z-index: 3;

  width: 100%;

  max-height: 0;

  margin-top: 0;

  overflow: hidden;

  opacity: 0;

  transform:
    translateY(15px);

  transition:
    max-height .6s ease,
    margin .45s ease,
    opacity .45s ease,
    transform .45s ease;
}


.macro-premium-results.show {
  max-height: 900px;

  margin-top: 30px;

  opacity: 1;

  transform:
    translateY(0);
}


/* Existing result components */

.macro-premium-card
.home-macro-result-heading h3 {
  color: #102f46;
}


.macro-premium-card
.home-macro-calories {
  border-radius: 20px;

  background: #102f46;

  box-shadow:
    0 15px 32px
    rgba(16,47,70,.15);
}


.macro-premium-card
.home-macro-result {
  border:
    1px solid
    rgba(255,255,255,.78);

  background:
    rgba(255,255,255,.76);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.macro-premium-card
.home-macro-estimates > div {
  background:
    rgba(251,251,249,.76);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* =========================================================
   FOOTER
   ========================================================= */

.macro-premium-footer {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 27px;
}


.macro-premium-footer p {
  max-width: 800px;

  margin: 0;

  color: #71808a;

  font-size: 11px;

  line-height: 1.55;
}


.macro-premium-footer > span {
  flex:
    0
    0
    auto;

  color: #8fa69a;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .15em;

  text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px) {

  .macro-premium-content {
    padding:
      45px
      36px
      36px;
  }


  .macro-premium-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .macro-premium-note {
    display: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px) {

  .macro-premium-card {
    min-height: 0;

    border-radius: 24px;
  }


  .macro-premium-bg {
    inset: -20px;

    filter:
      blur(14px)
      saturate(.68);
  }


  .macro-premium-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(251,251,249,.90),
        rgba(239,244,241,.84)
      );
  }


  .macro-premium-content {
    padding:
      30px
      18px
      25px;
  }


  .macro-premium-header {
    margin-bottom: 27px;
  }


  .macro-premium-header h3 {
    font-size: 36px;
  }


  .macro-premium-header p {
    margin-top: 12px;

    font-size: 14px;
  }


  .macro-premium-grid {
    grid-template-columns: 1fr;

    gap: 11px;
  }


  .macro-question {
    min-height: 120px;

    grid-template-columns:
      48px
      minmax(0,1fr);

    gap: 13px;

    padding: 16px;

    border-radius: 18px;
  }


  .macro-question-icon {
    width: 48px;
    height: 48px;

    font-size: 18px;
  }


  .macro-question-body > input,
  .macro-question-body > select,
  .macro-question-input-unit {
    height: 52px;
  }


  .macro-question-input-unit input,
  .macro-question-input-unit select {
    height: 50px;
  }


  .macro-premium-button {
    min-height: 58px;

    margin-top: 16px;

    font-size: 14px;
  }


  .macro-premium-footer {
    display: block;

    margin-top: 20px;
  }


  .macro-premium-footer > span {
    display: block;

    margin-top: 13px;

    text-align: left;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:390px) {

  .macro-premium-content {
    padding:
      27px
      14px
      22px;
  }


  .macro-premium-header h3 {
    font-size: 32px;
  }


  .macro-question {
    grid-template-columns: 1fr;

    min-height: 0;

    padding: 16px;
  }


  .macro-question-icon {
    width: 42px;
    height: 42px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce) {

  .macro-question,
  .macro-premium-button,
  .macro-premium-button-arrow,
  .macro-premium-results {
    transition: none;
  }

}

/* =========================================================
   XCULPTED — MACRO + IGNIA FINAL CARD FIX
   KEEP THIS AT THE ABSOLUTE BOTTOM OF app.css
   ========================================================= */


/* =========================================================
   TWO CARDS
   ========================================================= */

.experience-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
}


/* =========================================================
   MACRO CARD
   REMOVE THE EMPTY WHITE SPACE
   ========================================================= */

.macro-premium-card {
  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  border-radius: 24px !important;

  overflow: hidden !important;
}


/* =========================================================
   MACRO CONTENT
   ========================================================= */

.macro-premium-content {
  width: 100% !important;

  height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  padding:
    30px
    30px
    24px !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.macro-premium-header {
  display: flex !important;

  justify-content: space-between !important;
  align-items: flex-start !important;

  gap: 25px !important;

  margin:
    0
    0
    22px !important;
}


.macro-premium-header > div:first-child {
  max-width: 75% !important;
}


.macro-premium-eyebrow {
  display: block !important;

  margin-bottom: 7px !important;

  color: #8fa69a !important;

  font-size: 11px !important;
  font-weight: 700 !important;

  letter-spacing: .15em !important;
}


/* Main title */

.macro-premium-header h3 {
  margin: 0 !important;

  color: #102f46 !important;

  font-family:
    "Manrope",
    sans-serif !important;

  font-size: 32px !important;
  font-weight: 500 !important;

  line-height: 1.05 !important;

  letter-spacing: -.04em !important;
}


/* Description */

.macro-premium-header p {
  max-width: 520px !important;

  margin:
    9px
    0
    0 !important;

  color: #71808a !important;

  font-size: 14px !important;

  line-height: 1.5 !important;
}


/* Fuel your progress */

.macro-premium-note {
  margin:
    4px
    0
    0 !important;

  color: #102f46 !important;

  font-size: 15px !important;
  font-weight: 500 !important;

  line-height: 1.15 !important;
}


/* =========================================================
   SIX QUESTION GRID
   ========================================================= */

.macro-premium-grid {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;
}


/* =========================================================
   QUESTION CARDS
   ========================================================= */

.macro-question {
  width: 100% !important;

  min-width: 0 !important;
  min-height: 112px !important;

  display: grid !important;

  grid-template-columns:
    44px
    minmax(0, 1fr) !important;

  align-items: center !important;

  gap: 12px !important;

  padding: 14px !important;

  border-radius: 17px !important;
}


/* =========================================================
   QUESTION ICON
   ========================================================= */

.macro-question-icon {
  width: 44px !important;
  height: 44px !important;

  font-size: 16px !important;

  color: #102f46;
}


/* =========================================================
   LABELS
   Make these readable again
   ========================================================= */

.macro-question-body label {
  display: block !important;

  margin:
    0
    0
    7px !important;

  color: #102f46 !important;

  font-family:
    "Manrope",
    sans-serif !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  line-height: 1.25 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.macro-question-body > input,
.macro-question-body > select,
.macro-question-input-unit {
  width: 100% !important;

  height: 46px !important;

  min-height: 46px !important;

  border-radius: 11px !important;
}


.macro-question-body > input,
.macro-question-body > select {
  padding:
    0
    13px !important;

  color: #172b3a !important;

  font-family:
    "Manrope",
    sans-serif !important;

  font-size: 13px !important;
}


/* =========================================================
   INPUT + UNIT
   ========================================================= */

.macro-question-input-unit input {
  height: 44px !important;

  padding:
    0
    13px !important;

  color: #172b3a !important;

  font-size: 13px !important;
}


.macro-question-input-unit > span {
  padding:
    0
    12px !important;

  color: #71808a !important;

  font-size: 11px !important;
  font-weight: 600 !important;
}


.macro-question-input-unit select {
  flex:
    0
    0
    68px !important;

  width: 68px !important;
  min-width: 68px !important;

  height: 44px !important;

  padding:
    0
    7px !important;

  color: #172b3a !important;

  font-size: 12px !important;
}


/* =========================================================
   CALCULATE BUTTON
   XCULPTED BLUE
   ========================================================= */

.macro-premium-button {
  width: 100% !important;

  min-height: 54px !important;

  margin-top: 16px !important;

  padding:
    0
    24px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 16px !important;

  border: 0 !important;

  border-radius: 999px !important;

  /* XCULPTED BLUE */
  background: #102f46 !important;

  color: #ffffff !important;

  font-family:
    "Manrope",
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  box-shadow:
    0 12px 28px
    rgba(16, 47, 70, .18) !important;
}


.macro-premium-button:hover {
  /* SAME XCULPTED BLUE */
  background: #102f46 !important;

  color: #ffffff !important;

  transform:
    translateY(-2px) !important;
}


.macro-premium-button-arrow {
  color: #ffffff !important;

  font-size: 19px !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.macro-premium-footer {
  width: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 20px !important;

  margin-top: 17px !important;
}


.macro-premium-footer p {
  max-width: 70% !important;

  margin: 0 !important;

  color: #71808a !important;

  font-size: 10px !important;

  line-height: 1.45 !important;
}


.macro-premium-footer > span {
  color: #8fa69a !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  letter-spacing: .12em !important;

  white-space: nowrap !important;
}


/* =========================================================
   RESULTS
   ========================================================= */

.macro-premium-results.show {
  max-height: 900px !important;

  margin-top: 22px !important;
}


/* Results blue */

.macro-premium-card
.home-macro-calories {
  background: #102f46 !important;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.macro-premium-bg {
  inset: -20px !important;

  filter:
    blur(13px)
    saturate(.72) !important;

  transform:
    scale(1.08) !important;
}


/* Reduce the large white washed-out area */

.macro-premium-overlay {
  background:

    linear-gradient(
      90deg,
      rgba(251,251,249,.88) 0%,
      rgba(251,251,249,.76) 48%,
      rgba(251,251,249,.52) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(143,166,154,.12)
    ) !important;
}


/* =========================================================
   IGNIA
   MATCH MACRO'S NATURAL HEIGHT
   ========================================================= */

.experience-grid .ignia-card-home {
  width: 100% !important;

  height: 100% !important;

  min-height: 0 !important;

  align-self: stretch !important;

  border-radius: 24px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .macro-premium-content {
    padding:
      26px
      24px
      22px !important;
  }


  .macro-premium-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .macro-premium-note {
    display: none !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .experience-grid {
    grid-template-columns:
      1fr !important;
  }


  .macro-premium-card {
    height: auto !important;
  }


  .macro-premium-content {
    padding:
      27px
      18px
      23px !important;
  }


  .macro-premium-header {
    margin-bottom: 22px !important;
  }


  .macro-premium-header > div:first-child {
    max-width: 100% !important;
  }


  .macro-premium-header h3 {
    font-size: 30px !important;
  }


  .macro-premium-header p {
    font-size: 13px !important;
  }


  .macro-premium-grid {
    grid-template-columns:
      1fr !important;
  }


  .macro-question {
    min-height: 105px !important;
  }


  .macro-question-body label {
    font-size: 12px !important;
  }


  .macro-question-body > input,
  .macro-question-body > select,
  .macro-question-input-unit input {
    font-size: 14px !important;
  }


  .macro-premium-button {
    min-height: 56px !important;

    font-size: 14px !important;
  }


  .macro-premium-footer {
    display: block !important;
  }


  .macro-premium-footer p {
    max-width: 100% !important;

    font-size: 10px !important;
  }


  .macro-premium-footer > span {
    display: block !important;

    margin-top: 10px !important;

    font-size: 9px !important;

    white-space: normal !important;
  }


  /* IGNIA gets its normal mobile presentation */

  .experience-grid .ignia-card-home {
    height: 340px !important;
    min-height: 340px !important;
  }

}

/* =========================================================
   XCULPTED — FORCE MACRO QUESTION COLORS
   THIS MUST BE THE LAST CSS IN app.css
   ========================================================= */


/* ---------------------------------------------------------
   FORCE ALL 6 CARDS TO WHITE
   --------------------------------------------------------- */

.macro-premium-card
.macro-premium-content
.macro-premium-form
.macro-premium-grid
.macro-question,

.macro-premium-card
.macro-premium-grid
.macro-question-sex,

.macro-premium-card
.macro-premium-grid
.macro-question-age,

.macro-premium-card
.macro-premium-grid
.macro-question-weight,

.macro-premium-card
.macro-premium-grid
.macro-question-height,

.macro-premium-card
.macro-premium-grid
.macro-question-activity,

.macro-premium-card
.macro-premium-grid
.macro-question-goal {

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  border: 1px solid rgba(16,47,70,.10) !important;

  box-shadow:
    0 10px 28px rgba(16,47,70,.08) !important;
}


/* ---------------------------------------------------------
   HOVER — STILL WHITE
   --------------------------------------------------------- */

.macro-premium-card
.macro-premium-grid
.macro-question:hover,

.macro-premium-card
.macro-premium-grid
.macro-question:focus-within {

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  border-color:
    rgba(16,47,70,.22) !important;

  box-shadow:
    0 15px 32px rgba(16,47,70,.12) !important;
}


/* ---------------------------------------------------------
   LABELS — XCULPTED BLUE
   --------------------------------------------------------- */

.macro-premium-card
.macro-question
.macro-question-body
label {

  color: #102f46 !important;
}


/* ---------------------------------------------------------
   ICON CIRCLES — XCULPTED BLUE
   --------------------------------------------------------- */

.macro-premium-card
.macro-question
.macro-question-icon,

.macro-premium-card
.macro-question-sex
.macro-question-icon,

.macro-premium-card
.macro-question-age
.macro-question-icon,

.macro-premium-card
.macro-question-weight
.macro-question-icon,

.macro-premium-card
.macro-question-height
.macro-question-icon,

.macro-premium-card
.macro-question-activity
.macro-question-icon,

.macro-premium-card
.macro-question-goal
.macro-question-icon {

  background: #102f46 !important;
  background-color: #102f46 !important;
  background-image: none !important;

  color: #ffffff !important;

  border: 0 !important;

  box-shadow:
    0 6px 15px rgba(16,47,70,.18) !important;
}


/* ---------------------------------------------------------
   INPUTS — KEEP LIGHT
   --------------------------------------------------------- */

.macro-premium-card
.macro-question
.macro-question-body
> input,

.macro-premium-card
.macro-question
.macro-question-body
> select,

.macro-premium-card
.macro-question
.macro-question-input-unit {

  background: #f8f9f8 !important;
  background-color: #f8f9f8 !important;

  border:
    1px solid #e1e6e3 !important;

  color: #102f46 !important;
}


/* ---------------------------------------------------------
   INPUT INSIDE UNIT FIELD
   --------------------------------------------------------- */

.macro-premium-card
.macro-question
.macro-question-input-unit
input {

  background: transparent !important;

  color: #102f46 !important;
}


/* Placeholder */

.macro-premium-card
.macro-question
input::placeholder {

  color: #7d898f !important;

  opacity: 1 !important;
}


/* ---------------------------------------------------------
   LB / KG
   --------------------------------------------------------- */

.macro-premium-card
.macro-question
.macro-question-input-unit
select {

  background: #f8f9f8 !important;
  background-color: #f8f9f8 !important;

  color: #102f46 !important;

  border-left:
    1px solid #dfe3e1 !important;
}


/* ---------------------------------------------------------
   YRS / CM
   --------------------------------------------------------- */

.macro-premium-card
.macro-question
.macro-question-input-unit
> span {

  color: #71808a !important;
}


/* ---------------------------------------------------------
   DROPDOWN OPTIONS
   --------------------------------------------------------- */

.macro-premium-card
.macro-question
select {

  color: #102f46 !important;

  color-scheme: light !important;
}


.macro-premium-card
.macro-question
select option {

  background: #ffffff !important;

  color: #102f46 !important;
}


/* ---------------------------------------------------------
   CALCULATE BUTTON
   Keep XCULPTed blue
   --------------------------------------------------------- */

.macro-premium-card
.macro-premium-button {

  background: #102f46 !important;
  background-color: #102f46 !important;

  color: #ffffff !important;
}


.macro-premium-card
.macro-premium-button:hover {

  background: #102f46 !important;
  background-color: #102f46 !important;

  color: #ffffff !important;
}


.macro-premium-card
.macro-premium-button-arrow {

  color: #ffffff !important;
}
/* =========================================================
   HOME — THIS WEEK EXERCISE LIST
   ========================================================= */

.exercise-week-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:14px;
}

.week-exercise-row{
  width:100%;
  min-height:74px;

  display:grid;
  grid-template-columns:58px minmax(0,1fr) 34px;
  align-items:center;
  gap:13px;

  padding:10px 0;

  border:0;
  border-bottom:1px solid var(--line);

  background:transparent;

  text-align:left;
  font:inherit;

  cursor:pointer;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.week-exercise-row:first-child{
  border-top:1px solid var(--line);
}

.week-exercise-row:hover{
  transform:translateX(3px);
}

.week-exercise-image{
  width:58px;
  height:58px;

  display:block;

  border-radius:11px;

  object-fit:cover;
  object-position:center;

  background:var(--sage-soft);
}

.week-exercise-copy{
  min-width:0;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:3px;
}

.week-exercise-copy strong{
  overflow:hidden;

  color:var(--navy);

  font-family:"Manrope",sans-serif;
  font-size:12px;
  font-weight:700;

  line-height:1.3;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.week-exercise-copy small{
  overflow:hidden;

  color:var(--muted);

  font-size:10px;
  font-weight:500;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.week-exercise-arrow{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  justify-self:end;

  border-radius:50%;

  background:var(--sage-soft);
  color:var(--navy);

  font-size:15px;
  font-weight:700;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.week-exercise-row:hover .week-exercise-arrow{
  background:var(--navy);
  color:#fff;

  transform:translateX(2px);
}


/* MOBILE */

@media(max-width:620px){

  .week-exercise-row{
    grid-template-columns:54px minmax(0,1fr) 32px;

    min-height:70px;

    gap:11px;
  }

  .week-exercise-image{
    width:54px;
    height:54px;
  }

  .week-exercise-copy strong{
    font-size:11px;
  }

  .week-exercise-copy small{
    font-size:9px;
  }

  .week-exercise-arrow{
    width:28px;
    height:28px;
  }

}




/* =========================================================
   XCULPTED — DAILY CHECK-IN CARD
   ========================================================= */

.daily-checkin-card {
  width: 100%;
  padding: 28px;
  border: 1px solid #dfe3e1;
  border-radius: 24px;
  background: #fbfbf9;
  box-shadow: 0 16px 40px rgba(16, 47, 70, 0.06);
}

.daily-checkin-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.daily-checkin-top h3 {
  margin: 6px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #102f46;
}

.daily-checkin-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(143, 166, 154, 0.16);
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #667f72;
}

.daily-checkin-description {
  max-width: 460px;
  margin: 15px 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: #71808a;
}


/* METRICS */

.daily-checkin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}

.checkin-metric {
  width: 100%;
  min-width: 0;
  min-height: 90px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 12px 6px;

  border: 1px solid #e4e8e5;
  border-radius: 15px;

  background: #ffffff;

  box-sizing: border-box;

  text-align: center;
}

.checkin-icon {
  display: flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  color: #102f46;
}

.checkin-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.checkin-metric span {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #536672;
}


/* BUTTON */

.daily-checkin-button {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 0 19px;
  border: 0;
  border-radius: 999px;
  background: #102f46;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.daily-checkin-button:hover {
  transform: translateY(-1px);
  background: #0b2537;
  box-shadow: 0 10px 24px rgba(16, 47, 70, 0.17);
}

.daily-checkin-arrow {
  font-size: 19px;
  font-weight: 400;
}


/* TABLET / MOBILE */

@media (max-width: 700px) {

  .daily-checkin-card {
    padding: 22px;
    border-radius: 21px;
  }

  .daily-checkin-top h3 {
    font-size: 23px;
  }

  .daily-checkin-description {
    margin-bottom: 18px;
  }

  .daily-checkin-metrics {
    gap: 7px;
  }

  .checkin-metric {
    min-height: 76px;
    padding: 10px 4px;
  }

  .checkin-icon {
    width: 23px;
    height: 23px;
  }

  .checkin-icon svg {
    width: 20px;
    height: 20px;
  }

  .checkin-metric span {
    font-size: 10px;
  }

}


@media (max-width: 430px) {

  .daily-checkin-card {
    padding: 20px;
  }

  .daily-checkin-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .checkin-metric {
    min-height: 72px;
  }

}


/* =========================================================
   XCULPTED — TODAY'S PROGRESS
   ========================================================= */

.todays-progress-card {
  padding: 25px;
  border: 1px solid #dfe3e1;
  border-radius: 22px;
  background: #fbfbf9;
}

.todays-progress-description {
  margin: 9px 0 21px;
  font-size: 13px;
  color: #71808a;
}


/* FOUR RINGS */

.daily-progress-rings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.daily-progress-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}


/* RING */

.daily-progress-ring {
  --progress: 0;

  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;

  background:
    conic-gradient(
      #102f46 calc(var(--progress) * 1%),
      #e8ecea 0
    );
}

.daily-progress-ring::before {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fbfbf9;
  content: "";
}

.daily-progress-ring-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.progress-ring-icon {
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: #102f46;
}

.progress-ring-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}

.daily-progress-ring strong {
  max-width: 56px;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  color: #102f46;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-progress-item > span {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #71808a;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

  .daily-progress-rings {
    gap: 8px;
  }

  .daily-progress-ring {
    width: 68px;
    height: 68px;
  }

  .daily-progress-ring::before {
    width: 55px;
    height: 55px;
  }

}


@media (max-width: 430px) {

  .daily-progress-rings {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }

  .daily-progress-ring {
    width: 78px;
    height: 78px;
  }

  .daily-progress-ring::before {
    width: 64px;
    height: 64px;
  }

}




/* =========================================================
   XCULPTED — DAILY CHECK-IN FINAL ADJUSTMENTS
   ========================================================= */

.daily-checkin-button {
  position: relative;
  justify-content: center;
  text-align: center;
  margin-top: 16px;
}

.daily-checkin-button > span:first-child {
  width: 100%;
  text-align: center;
}

.daily-checkin-button .daily-checkin-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}


/* =========================================================
   TODAY'S PROGRESS — INDIVIDUAL RING COLORS
   ========================================================= */

.daily-progress-ring {
  --ring-color: #102f46;

  background:
    conic-gradient(
      var(--ring-color) calc(var(--progress) * 1%),
      #e8ecea 0
    );

  transition: background 0.45s ease;
}


/* Sleep — soft slate blue */
.ring-sleep {
  --ring-color: #7895a6;
}


/* Energy — soft sage */
.ring-energy {
  --ring-color: #8fa69a;
}


/* Water — muted aqua */
.ring-water {
  --ring-color: #79a9ad;
}


/* Recovery — soft blue-gray */
.ring-steps {
  --ring-color: #9a9fb0;
}


/* FIRST USER / NO CHECK-IN YET */

.daily-progress-ring.no-data {
  background: #e8ecea;
}

.daily-progress-ring.no-data .progress-ring-icon {
  color: #9ba7ad;
}

.daily-progress-ring.no-data strong {
  color: #8b989f;
  font-size: 10px;
}


/* COMPLETED CHECK-IN */

.daily-progress-ring.has-data {
  transition: background 0.5s ease;
}


.daily-checkin-results {
  margin-top: 18px;
  margin-bottom: 18px;
}

.daily-checkin-results .daily-progress-item {
  min-width: 0;
}





/* =========================================================
   WEEKLY CONSISTENCY CARD
   ========================================================= */

.weekly-consistency-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 20px;

  padding: 22px 24px;

  background: #fbfbf9;
  border: 1px solid #dfe3e1;
  border-radius: 20px;

  font-family: "Manrope", sans-serif;
}


/* LEFT PROGRESS RING */

.weekly-ring-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekly-goal-ring {
  --weekly-progress: 0;

  width: 70px;
  height: 70px;
  padding: 5px;

  border-radius: 50%;

  background:
    conic-gradient(
      #8fa69a calc(var(--weekly-progress) * 1%),
      #e7ebe8 0
    );

  display: grid;
  place-items: center;
}

.weekly-goal-ring-inner {
  width: 100%;
  height: 100%;

  border-radius: 50%;
  background: #fbfbf9;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: #102f46;
}

.weekly-goal-icon {
  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  margin-bottom: 2px;
}

.weekly-goal-icon svg {
  width: 100%;
  height: 100%;
}

.weekly-goal-ring-inner strong {
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}


/* RIGHT SIDE */

.weekly-consistency-main {
  min-width: 0;
}

.weekly-consistency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.weekly-consistency-title {
  display: flex;
  align-items: center;
  gap: 5px;

  color: #102f46;
}

.weekly-consistency-title strong {
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.weekly-mini-icon {
  width: 15px;
  height: 15px;

  display: grid;
  place-items: center;

  color: #8fa69a;
}

.weekly-mini-icon svg {
  width: 100%;
  height: 100%;
}


/* DONE BADGE */

.weekly-goal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 5px 8px;

  background: rgba(143, 166, 154, 0.12);
  border-radius: 999px;

  color: #71808a;

  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.weekly-goal-badge svg {
  width: 12px;
  height: 12px;

  color: #8fa69a;
}


/* SUMMARY */

.weekly-workout-summary {
  margin: 4px 0 13px;

  font-size: 10px;
  line-height: 1.4;

  color: #71808a;
}


/* WEEK DAYS */

.weekly-day-tracker {
  position: relative;

  display: grid;
  grid-template-columns: repeat(7, 1fr);

  z-index: 2;
}

.weekly-day-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.weekly-day-name {
  font-size: 8px;
  font-weight: 600;

  color: #8b989f;
}

.weekly-day-circle {
  width: 17px;
  height: 17px;

  display: grid;
  place-items: center;

  border: 1.5px solid #d5ddda;
  border-radius: 50%;

  background: #fbfbf9;

  color: #ffffff;
}

.weekly-day-circle svg {
  width: 10px;
  height: 10px;
}

.weekly-day-item.is-complete .weekly-day-circle {
  background: #8fa69a;
  border-color: #8fa69a;
}

.weekly-day-item.is-complete .weekly-day-name {
  color: #102f46;
}


/* CONNECTING LINE */

.weekly-tracker-line {
  position: relative;

  height: 2px;

  margin:
    -10px
    calc(100% / 14)
    0;

  background: #dfe3e1;

  z-index: 1;
}

.weekly-tracker-line > span {
  position: absolute;
  inset: 0 auto 0 0;

  display: block;

  height: 100%;

  background: #8fa69a;

  transition: width 0.4s ease;
}


/* MESSAGE */

.weekly-consistency-message {
  margin: 12px 0 0;

  font-size: 9px;
  line-height: 1.4;

  color: #71808a;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .weekly-consistency-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;

    padding: 18px 16px;

    border-radius: 18px;
  }

  .weekly-goal-ring {
    width: 54px;
    height: 54px;
    padding: 4px;
  }

  .weekly-goal-icon {
    width: 14px;
    height: 14px;
  }

  .weekly-goal-ring-inner strong {
    font-size: 8px;
  }

  .weekly-consistency-title strong {
    font-size: 11px;
  }

  .weekly-goal-badge {
    padding: 4px 6px;
    font-size: 8px;
  }

  .weekly-workout-summary {
    font-size: 9px;
  }

  .weekly-day-circle {
    width: 15px;
    height: 15px;
  }

  .weekly-day-name {
    font-size: 7px;
  }

  .weekly-consistency-message {
    font-size: 8px;
  }

}

/* =========================================================
   HOME — DAILY CHECK-IN / THIS WEEK SPACING
   ========================================================= */

.daily-checkin-card {
  margin-bottom: 14px;
}

.weekly-consistency-card {
  margin-top: 14px;
}

/* =========================================================
   THIS WEEK — FEATURED CARD
   ========================================================= */

.weekly-consistency-card {
  background: #102f46;
  border-color: #102f46;
  color: #ffffff;
}


/* Main content */

.weekly-consistency-main {
  color: #ffffff;
}


/* THIS WEEK headline */

.weekly-consistency-title strong {
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #ffffff;
}


/* Small flame icon */

.weekly-mini-icon {
  color: #ffffff;
}

.weekly-mini-icon svg {
  color: #ffffff;
}


/* Explanation */

.weekly-workout-summary {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}


/* Bottom explanation */

.weekly-consistency-message {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}


/* 0/3 DONE badge */

.weekly-goal-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

.weekly-goal-badge svg {
  color: #ffffff;
}


/* =========================================================
   WEEKLY RING
   ========================================================= */

.weekly-goal-ring {
  background:
    conic-gradient(
      #ffffff calc(var(--weekly-progress) * 1%),
      rgba(255, 255, 255, 0.18) 0
    );
}

.weekly-goal-ring-inner {
  background: #102f46;
}

.weekly-goal-ring-inner strong {
  color: #ffffff;
}

.weekly-goal-icon {
  color: #ffffff;
}

.weekly-goal-icon svg {
  color: #ffffff;
}


/* =========================================================
   WEEKDAY TRACKER
   ========================================================= */

.weekly-day-name {
  color: rgba(255, 255, 255, 0.68);
}

.weekly-day-dot {
  background: #102f46;
  border-color: rgba(255, 255, 255, 0.6);
}


/* completed day */

.weekly-day-item.is-complete .weekly-day-dot {
  background: #ffffff;
  border-color: #ffffff;
}

.weekly-day-item.is-complete .weekly-day-name {
  color: #ffffff;
}


/* horizontal tracker */

.weekly-tracker-line {
  background: rgba(255, 255, 255, 0.22);
}

.weekly-tracker-line > span {
  background: #ffffff;
}



/* =========================================================
   THIS WEEK CARD — FINAL VISUAL REFINEMENT
   ========================================================= */

.weekly-consistency-card {
  background: #102f46;
  border-color: #102f46;
  color: #ffffff;

  /* More breathing room inside the card */
  padding: 26px 28px;
  min-height: 220px;

  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  column-gap: 34px;
}


/* =========================================================
   LEFT — LARGE PROGRESS RING
   ========================================================= */

.weekly-ring-column {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Approximately 3× the visual size of the current ring */

.weekly-goal-ring {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;

  background:
    conic-gradient(
      #ffffff calc(var(--weekly-progress) * 1%),
      rgba(255, 255, 255, 0.20) 0
    );
}


/* Keep the center navy */

.weekly-goal-ring-inner {
  width: calc(100% - 14px);
  height: calc(100% - 14px);

  background: #102f46;
}


/* Larger check icon */

.weekly-goal-icon {
  width: 25px;
  height: 25px;
  margin-bottom: 7px;
}

.weekly-goal-icon svg {
  width: 25px;
  height: 25px;
  color: #ffffff;
}


/* Larger 0 of 5 */

.weekly-goal-ring-inner strong {
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.weekly-consistency-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}


/* Header */

.weekly-consistency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}


/* Align flame + headline perfectly */

.weekly-consistency-title {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* Fire icon matches headline height */

.weekly-mini-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
}

.weekly-mini-icon svg {
  width: 25px;
  height: 25px;
  display: block;
}


/* Main headline */

.weekly-consistency-title strong {
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.035em;
  color: #ffffff;
}


/* =========================================================
   0/5 DONE — MAKE IT POP
   ========================================================= */

.weekly-goal-badge {
  min-height: 34px;
  padding: 7px 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;

  background: #ffffff;
  color: #102f46;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;

  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}

.weekly-goal-badge svg {
  width: 14px;
  height: 14px;
  color: #102f46;
}


/* =========================================================
   WORKOUT COUNT
   ========================================================= */

.weekly-workout-summary {
  margin: 0 0 17px;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   DAYS / TRACKER
   ========================================================= */

.weekly-day-tracker {
  margin-top: 2px;
}

.weekly-day-name {
  color: rgba(255, 255, 255, 0.72);
}

.weekly-tracker-line {
  background: rgba(255, 255, 255, 0.30);
}

.weekly-tracker-line > span {
  background: #ffffff;
}


/* =========================================================
   BOTTOM MESSAGE
   ========================================================= */

.weekly-consistency-message {
  width: 100%;

  margin: 22px 0 0;

  text-align: center;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.78);
}
/* =========================================================
   HOME MACRO EXPERIENCE CARD
   ========================================================= */

.macro-experience-card {
  position: relative;
  min-height: 405px;
  overflow: hidden;
  border-radius: 20px;
  background: #102f46;
}


/* INTRO IMAGE STATE */

.macro-experience-intro {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;

  padding: 30px;

  background-image:
    linear-gradient(
      180deg,
      rgba(7, 29, 43, .05) 15%,
      rgba(7, 29, 43, .30) 50%,
      rgba(7, 29, 43, .92) 100%
    ),
    url("../assets/macro-calculator.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.macro-experience-copy {
  position: relative;
  z-index: 2;
  max-width: 390px;
  color: #fff;
}


.macro-experience-copy .experience-label {
  display: block;
  margin-bottom: 18px;
  color: #dfe8e2;
}


.macro-experience-copy h3 {
  margin: 0 0 14px;

  font-family: "Manrope", sans-serif;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.04em;

  color: #fff;
}


.macro-experience-copy p {
  max-width: 370px;
  margin: 0 0 20px;

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;

  color: rgba(255, 255, 255, .92);
}


/* CALCULATOR STATE */

.macro-calculator-panel {
  position: relative;
  z-index: 3;

  width: 100%;
  min-height: 405px;

  padding: 28px;

  background: #fbfbf9;
}


.macro-calculator-panel[hidden] {
  display: none !important;
}


.macro-calculator-panel-header {
  margin-bottom: 22px;
}


.macro-calculator-panel-header .experience-label {
  display: block;
  margin-bottom: 8px;
  color: #8fa69a;
}


.macro-calculator-panel-header h3 {
  margin: 0 0 7px;

  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.03em;

  color: #102f46;
}


.macro-calculator-panel-header p {
  max-width: 520px;
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.5;

  color: #71808a;
}

/* =========================================================
   XCULPTED — LOCK MORE FROM XCULPTED CARD HEIGHT
   Desktop/tablet only
   ========================================================= */

@media (min-width: 701px) {

  .experience-grid {
    align-items: stretch !important;
  }

  .macro-premium-card {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;

    overflow: hidden !important;
  }

  .experience-grid .ignia-card-home {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;

    align-self: stretch !important;
  }

  .macro-premium-content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

}


/* =========================================================
   XCULPTED — MACRO RESULTS
   COMPACT PREMIUM CARD
   ========================================================= */

.home-macro-results {
  position: absolute;
  inset: 0;
  z-index: 50;

  width: 100%;
  height: 100%;

  box-sizing: border-box;

  padding: 22px 24px;

  background:
    linear-gradient(
      145deg,
      #fbfbf9 0%,
      #f7f9f7 100%
    );

  overflow: hidden;
}

.home-macro-results[hidden] {
  display: none !important;
}


/* MAIN RESULT */

.home-macro-dashboard-result {
  width: 100%;
  height: 100%;

  display: grid;

  grid-template-rows:
    auto
    1fr
    auto
    auto
    42px;

  gap: 11px;

  box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.home-macro-result-top {
  margin: 0;
}

.home-macro-result-top .experience-label {
  display: block;

  margin: 0 0 4px;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .13em;

  color: #8fa69a;
}

.home-macro-result-top h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.035em;

  color: #102f46;
}


/* =========================================================
   CALORIES + DONUT
   ========================================================= */

.home-macro-result-main {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    112px;

  align-items: center;

  gap: 20px;

  margin: 0;

  min-height: 0;
}


/* CALORIE NUMBER */

.home-macro-calorie-focus {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.home-macro-calorie-focus strong {
  display: block;

  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 43px;
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.055em;

  color: #102f46;
}

.home-macro-calorie-focus > span {
  display: block;

  margin-top: 7px;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .13em;

  color: #71808a;
}


/* =========================================================
   DONUT
   ========================================================= */

.home-macro-donut {
  position: relative;

  width: 108px;
  height: 108px;

  justify-self: end;

  border-radius: 50%;

  background:
    conic-gradient(
      #102f46
        0
        calc(var(--protein) * 1%),

      #8fa69a
        calc(var(--protein) * 1%)
        calc(
          (var(--protein) + var(--carbs)) * 1%
        ),

      #cbbba8
        calc(
          (var(--protein) + var(--carbs)) * 1%
        )
        100%
    );

  box-shadow:
    0 8px 22px rgba(16,47,70,.08);
}

.home-macro-donut::after {
  content: "";

  position: absolute;
  inset: 14px;

  border-radius: 50%;

  background: #fbfbf9;
}

.home-macro-donut-center {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}

.home-macro-donut-center span {
  font-family: "Manrope", sans-serif;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .12em;

  color: #8fa69a;
}

.home-macro-donut-center strong {
  margin-top: 4px;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;

  color: #102f46;
}


/* =========================================================
   MACRO BREAKDOWN
   ========================================================= */

.home-macro-breakdown {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin: 0;
}

.home-macro-breakdown-item {
  position: relative;

  min-width: 0;

  padding: 11px 12px 10px;

  border:
    1px solid #dfe3e1;

  border-radius: 13px;

  background: #fff;

  overflow: hidden;
}

.home-macro-breakdown-item::before {
  content: "";

  display: block;

  width: 20px;
  height: 3px;

  margin-bottom: 7px;

  border-radius: 999px;
}


/* Protein */

.home-macro-breakdown-item.protein::before {
  background: #102f46;
}


/* Carbs */

.home-macro-breakdown-item.carbs::before {
  background: #8fa69a;
}


/* Fat */

.home-macro-breakdown-item.fat::before {
  background: #cbbba8;
}


.home-macro-breakdown-item > span {
  display: block;

  margin-bottom: 3px;

  font-family: "Manrope", sans-serif;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .09em;

  color: #71808a;
}

.home-macro-breakdown-item strong {
  display: block;

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 600;

  color: #102f46;
}

.home-macro-breakdown-item small {
  display: block;

  margin-top: 3px;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  line-height: 1.2;

  color: #8a969e;
}


/* =========================================================
   GOAL
   ========================================================= */

.home-macro-goal {
  display: grid;

  grid-template-columns:
    auto 1fr;

  column-gap: 10px;
  row-gap: 2px;

  align-items: center;

  margin: 0;

  padding: 9px 12px;

  border-radius: 12px;

  background:
    rgba(143,166,154,.13);
}

.home-macro-goal > span {
  grid-column: 1;

  font-family: "Manrope", sans-serif;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .10em;

  color: #8fa69a;
}

.home-macro-goal > strong {
  grid-column: 2;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;

  color: #102f46;
}

.home-macro-goal p {
  grid-column: 1 / -1;

  margin: 3px 0 0;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 400;

  color: #71808a;
}


/* =========================================================
   UPDATE BUTTON
   ========================================================= */

.macro-update-button {
  width: 100%;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  border: 0;
  border-radius: 999px;

  background: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;

  color: #fff;

  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease;
}

.macro-update-button:hover {
  background: #0b2537;

  transform:
    translateY(-1px);
}

.macro-update-button span:last-child {
  font-size: 16px;
  font-weight: 400;
}


/* =========================================================
   RESULT STATE
   NEVER SCROLL INSIDE CARD
   ========================================================= */

#homeMacroCard.has-macro-result
#homeMacroCalculatorPanel {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  padding: 0 !important;

  overflow: hidden !important;

  background: #fbfbf9 !important;
}

#homeMacroCard.has-macro-result
#homeMacroResults {
  display: block !important;

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  max-height: none !important;

  margin: 0 !important;

  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

  overflow: hidden !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .home-macro-results {
    position: relative;

    padding: 20px;
  }

  .home-macro-dashboard-result {
    height: auto;

    grid-template-rows:
      auto auto auto auto 42px;
  }

  .home-macro-result-main {
    grid-template-columns:
      1fr 100px;
  }

  .home-macro-donut {
    width: 96px;
    height: 96px;
  }

  .home-macro-calorie-focus strong {
    font-size: 38px;
  }

}


@media (max-width: 460px) {

  .home-macro-breakdown {
    gap: 6px;
  }

  .home-macro-breakdown-item {
    padding: 9px;
  }

  .home-macro-breakdown-item strong {
    font-size: 16px;
  }

}




/* =========================================================
   XCULPTED — PREMIUM MACRO RESULT
   ========================================================= */

#homeMacroCard.has-macro-result #homeMacroResults {
  padding: 26px 30px !important;
  overflow: hidden !important;
}


/* RESULT CONTAINER */

.home-macro-dashboard-result {
  position: relative;

  width: 100%;
  height: 100%;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column;

  color: #102f46;
}


/* CLOSE X */

.macro-result-close {
  position: absolute;
  top: 0;
  right: 0;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid #dfe3e1;
  border-radius: 50%;

  background: #fff;
  color: #102f46;

  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  z-index: 10;

  transition:
    transform .2s ease,
    background .2s ease;
}

.macro-result-close:hover {
  background: #f1f4f2;
  transform: scale(1.05);
}


/* HEADER */

.macro-result-heading {
  padding-right: 55px;
  margin-bottom: 14px;
}

.macro-result-heading .experience-label {
  display: block;

  margin-bottom: 4px;

  color: #78958a;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}

.macro-result-heading h3 {
  margin: 0 0 4px;

  color: #102f46;

  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.035em;
}

.macro-result-heading p {
  max-width: 440px;

  margin: 0;

  color: #71808a;

  font-size: 11px;
  line-height: 1.45;
}


/* =========================================================
   THREE COLUMNS
   ========================================================= */

.macro-result-columns {
  display: grid;

  grid-template-columns:
    minmax(180px, .85fr)
    minmax(220px, 1fr)
    minmax(330px, 1.55fr);

  align-items: stretch;

  gap: 22px;

  flex: 1;
  min-height: 0;
}


/* COLUMN DIVIDERS */

.macro-chart-column,
.macro-breakdown-column {
  border-left: 1px solid #e3e7e5;
  padding-left: 22px;
}


/* =========================================================
   COLUMN 1 — CALORIES
   ========================================================= */

.macro-calorie-column {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
}

.macro-calorie-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-bottom: 8px;

  border-radius: 50%;

  background: #f2eee8;
  color: #756b60;

  font-size: 18px;
}

.macro-result-label {
  color: #486475;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

.macro-calorie-number {
  display: block;

  margin: 3px 0 0;

  color: #102f46;

  font-size: clamp(38px, 4vw, 56px);
  line-height: .98;

  font-weight: 600;
  letter-spacing: -.055em;
}

.macro-calorie-unit {
  margin-top: 3px;

  color: #102f46;

  font-size: 13px;
  font-weight: 600;
}

.macro-calorie-note {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 14px;
  padding: 10px;

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #edf3ef,
      #f8f8f5
    );
}

.macro-check {
  flex: 0 0 28px;

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #8fa69a;
  color: #fff;

  font-size: 13px;
}

.macro-calorie-note strong {
  display: block;

  color: #102f46;

  font-size: 10px;
  font-weight: 600;
}

.macro-calorie-note p {
  margin: 2px 0 0;

  color: #71808a;

  font-size: 8px;
  line-height: 1.35;
}


/* =========================================================
   COLUMN 2 — LARGE DONUT
   ========================================================= */

.macro-chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.macro-result-donut {
  position: relative;

  width: 205px;
  height: 205px;

  flex: 0 0 205px;

  border-radius: 50%;

  background:
    conic-gradient(
      #102f46
        0%
        calc(var(--protein) * 1%),

      #8fa69a
        calc(var(--protein) * 1%)
        calc(
          (var(--protein) + var(--carbs)) * 1%
        ),

      #cdbda9
        calc(
          (var(--protein) + var(--carbs)) * 1%
        )
        100%
    );

  box-shadow:
    0 16px 35px rgba(16, 47, 70, .08);
}

.macro-result-donut::after {
  content: "";

  position: absolute;
  inset: 32px;

  border-radius: 50%;

  background: #fbfbf9;
}

.macro-result-donut-hole {
  position: absolute;
  inset: 32px;

  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.macro-result-donut-hole span {
  color: #78958a;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}

.macro-result-donut-hole strong {
  margin-top: 3px;

  color: #102f46;

  font-size: 18px;
  font-weight: 600;
}

.macro-result-donut-hole small {
  margin-top: 5px;

  color: #71808a;

  font-size: 11px;
}


/* LEGEND */

.macro-chart-legend {
  display: flex;
  justify-content: center;

  gap: 13px;

  margin-top: 12px;
}

.macro-chart-legend > div {
  display: flex;
  align-items: center;

  gap: 6px;

  color: #486475;

  font-size: 9px;
}

.macro-chart-legend span {
  display: flex;
  flex-direction: column;
}

.macro-chart-legend strong {
  color: #102f46;

  font-size: 10px;
}

.macro-chart-legend i {
  width: 10px;
  height: 10px;

  border-radius: 50%;
}

.macro-chart-legend i.protein {
  background: #102f46;
}

.macro-chart-legend i.carbs {
  background: #8fa69a;
}

.macro-chart-legend i.fat {
  background: #cdbda9;
}


/* =========================================================
   COLUMN 3 — MACROS
   ========================================================= */

.macro-breakdown-column {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
}

.macro-column-eyebrow {
  color: #78958a;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}

.macro-column-description {
  margin: 3px 0 10px;

  color: #71808a;

  font-size: 9px;
}

.macro-result-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 8px;
}

.macro-result-card {
  min-width: 0;

  padding: 13px 12px;

  border: 1px solid #dfe3e1;
  border-radius: 14px;

  background: rgba(255, 255, 255, .78);
}

.macro-color-line {
  display: block;

  width: 25px;
  height: 4px;

  margin-bottom: 10px;

  border-radius: 999px;
}

.macro-result-card.protein .macro-color-line {
  background: #102f46;
}

.macro-result-card.carbs .macro-color-line {
  background: #8fa69a;
}

.macro-result-card.fat .macro-color-line {
  background: #cdbda9;
}

.macro-card-label {
  display: block;

  color: #71808a;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.macro-result-card > strong {
  display: block;

  margin-top: 4px;

  color: #102f46;

  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.04em;
}

.macro-result-card > small {
  display: block;

  margin-top: 1px;

  color: #71808a;

  font-size: 10px;
}

.macro-result-card p {
  margin: 10px 0 0;

  color: #71808a;

  font-size: 8px;
  line-height: 1.4;
}


/* =========================================================
   GOAL — FULL WIDTH BELOW COLUMNS
   ========================================================= */

.macro-result-goal {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-top: 14px;
  padding: 14px 18px;

  border-radius: 16px;

  background:
    linear-gradient(
      120deg,
      #edf3ef 0%,
      #f7f7f3 58%,
      #eee7de 100%
    );

  border: 1px solid rgba(143, 166, 154, .15);
}

.macro-goal-mark {
  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #8fa69a;
  color: #fff;

  font-size: 24px;
}

.macro-goal-copy span {
  display: block;

  color: #78958a;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .17em;
}

.macro-goal-copy strong {
  display: block;

  margin-top: 2px;

  color: #102f46;

  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.03em;
}

.macro-goal-copy p {
  max-width: 700px;

  margin: 3px 0 0;

  color: #617686;

  font-size: 10px;
  line-height: 1.4;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  #homeMacroCard.has-macro-result #homeMacroResults {
    padding: 22px !important;
    overflow-y: auto !important;
  }

  .macro-result-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .macro-chart-column,
  .macro-breakdown-column {
    padding-left: 0;
    padding-top: 20px;

    border-left: 0;
    border-top: 1px solid #e3e7e5;
  }

  .macro-result-donut {
    width: 190px;
    height: 190px;

    flex-basis: 190px;
  }

  .macro-result-cards {
    grid-template-columns: repeat(3, 1fr);
  }

}


/* =========================================================
   XCULPTED — MACRO RESULT READABILITY FIX
   ========================================================= */


/* BETTER COLUMN PROPORTIONS */

.macro-result-columns {
  grid-template-columns:
    minmax(170px, .75fr)
    minmax(240px, 1.05fr)
    minmax(390px, 1.65fr) !important;

  gap: 18px !important;
}


/* =========================================================
   THIRD COLUMN
   ========================================================= */

.macro-breakdown-column {
  padding-left: 20px !important;

  overflow: visible !important;
}


.macro-column-eyebrow {
  display: block;

  margin-bottom: 12px;

  font-family: "Manrope", sans-serif;

  font-size: 9px !important;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: .14em !important;

  color: #78958a;
}


/* OLD DESCRIPTION IS NO LONGER USED */

.macro-column-description {
  display: none !important;
}


/* =========================================================
   MACRO CARDS
   ========================================================= */

.macro-result-cards {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 9px !important;

  width: 100%;
}


.macro-result-card {
  min-width: 0 !important;

  display: flex;
  flex-direction: column;

  padding: 14px 12px !important;

  box-sizing: border-box;

  overflow: visible !important;

  border:
    1px solid #dfe3e1;

  border-radius: 14px;

  background:
    rgba(255,255,255,.82);
}


/* COLOR BAR */

.macro-result-card .macro-color-line {
  width: 24px;
  height: 4px;

  flex: 0 0 4px;

  margin-bottom: 9px;

  border-radius: 999px;
}


/* LABEL */

.macro-result-card .macro-card-label {
  display: block;

  margin: 0 0 5px;

  font-family: "Manrope", sans-serif;

  font-size: 8px !important;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: .1em;

  color: #71808a;
}


/* MAIN NUMBER */

.macro-result-card .macro-card-value {
  display: flex !important;

  align-items: baseline;

  gap: 4px;

  margin: 0 !important;

  font-family: "Manrope", sans-serif;

  font-size: 25px !important;
  line-height: 1 !important;

  font-weight: 600;

  letter-spacing: -.04em;

  color: #102f46;
}


/* "GRAMS" */

.macro-result-card
.macro-card-value small {
  display: inline !important;

  margin: 0 !important;

  font-family: "Manrope", sans-serif;

  font-size: 9px !important;
  line-height: 1;

  font-weight: 500;

  letter-spacing: 0;

  color: #71808a;
}


/* PERCENTAGE */

.macro-card-percent {
  display: block;

  margin-top: 5px;

  font-family: "Manrope", sans-serif;

  font-size: 8px;
  line-height: 1.25;

  color: #8fa69a;

  font-weight: 600;
}


/* DESCRIPTION */

.macro-result-card p {
  display: block !important;

  margin: 9px 0 0 !important;

  font-family: "Manrope", sans-serif;

  font-size: 8px !important;
  line-height: 1.35 !important;

  color: #71808a;

  overflow: visible !important;

  white-space: normal !important;

  text-overflow: clip !important;
}


/* =========================================================
   KEEP LARGE DONUT BUT PREVENT CUTTING
   ========================================================= */

.macro-chart-column {
  overflow: visible !important;
}


.macro-result-donut {
  width: 190px !important;
  height: 190px !important;

  flex:
    0 0 190px !important;
}


.macro-chart-legend {
  width: 100%;

  flex-wrap: nowrap;

  margin-top: 9px !important;
}


/* =========================================================
   GOAL READABILITY
   ========================================================= */

.macro-result-goal {
  flex-shrink: 0;

  margin-top: 12px !important;

  padding:
    12px 16px !important;
}


.macro-goal-copy strong {
  font-size: 20px !important;
}


.macro-goal-copy p {
  font-size: 9px !important;
  line-height: 1.4 !important;
}


/* =========================================================
   MACRO HEIGHT — FEET + INCHES SIDE BY SIDE
   ========================================================= */

.macro-height-imperial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.macro-height-imperial .macro-question-input-unit {
  width: 100%;
  min-width: 0;
}

.macro-height-imperial input {
  width: 100%;
  min-width: 0;
}


/* =========================================
   THIS WEEK — ICON SIZES
   ========================================= */

.weekly-goal-icon {
  width: 34px;
  height: 34px;
}

.weekly-goal-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}


.weekly-mini-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}

.weekly-mini-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}


.weekly-consistency-card {
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.weekly-consistency-card:hover {
  transform: translateY(-2px);
}

.weekly-consistency-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* =========================================================
   XCULPTED — NEW PROGRESS PAGE
   ========================================================= */

.progress-page {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding-bottom: 50px;
}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.progress-page-heading {
  margin-bottom: 28px;
}

.progress-page-heading .eyebrow {
  display: block;
  margin-bottom: 8px;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;

  color: #8fa69a;
}

.progress-page-heading h1 {
  max-width: 720px;
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -.045em;

  color: #102f46;
}

.progress-page-heading p {
  max-width: 650px;

  margin:
    12px 0 0;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.6;

  color: #71808a;
}


/* =========================================================
   THIS WEEK
   ========================================================= */

.progress-week-card {
  width: 100%;

  padding: 28px 30px;

  border-radius: 24px;
  border: 1px solid rgba(16,47,70,.08);

  background: #102f46;
  color: #ffffff;

  box-shadow:
    0 18px 42px rgba(16,47,70,.12);
}


/* HEADER */

.progress-week-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;
}

.progress-card-eyebrow {
  display: block;

  margin-bottom: 7px;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  line-height: 1.2;

  font-weight: 700;
  letter-spacing: .14em;

  color: #8fa69a;
}

.progress-week-card .progress-card-eyebrow {
  color: #b9cbc1;
}

.progress-week-header h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.025em;

  color: #ffffff;
}


/* SCORE */

.progress-week-score {
  display: flex;
  align-items: baseline;

  flex-shrink: 0;
}

.progress-week-score strong {
  font-family: "Manrope", sans-serif;
  font-size: 42px;
  line-height: 1;

  letter-spacing: -.05em;

  color: #ffffff;
}

.progress-week-score span {
  margin-left: 4px;

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 600;

  color: #b9cbc1;
}


/* WEEKLY PROGRESS BAR */

.progress-week-bar {
  width: 100%;
  height: 7px;

  margin-top: 24px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255,255,255,.14);
}

.progress-week-bar > span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background: #ffffff;

  transition: width .35s ease;
}


/* SUMMARY */

.progress-week-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-top: 10px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
}

.progress-week-summary span {
  color: #b9cbc1;
}

.progress-week-summary strong {
  font-weight: 600;

  color: #ffffff;
}


/* =========================================================
   WORKOUT LIST
   ========================================================= */

.progress-workout-list {
  display: grid;

  gap: 9px;

  margin-top: 24px;
}

.progress-workout-row {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;

  gap: 14px;

  min-height: 64px;

  padding: 12px 15px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 16px;

  background:
    rgba(255,255,255,.055);
}

.progress-workout-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border:
    1px solid rgba(255,255,255,.22);

  border-radius: 50%;

  font-size: 13px;
  font-weight: 700;

  color: #ffffff;
}

.progress-workout-copy {
  min-width: 0;
}

.progress-workout-copy strong {
  display: block;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.3;

  color: #ffffff;
}

.progress-workout-copy > span {
  display: block;

  margin-top: 3px;

  font-family: "Manrope", sans-serif;
  font-size: 10px;

  color: #b9cbc1;
}

.progress-workout-state {
  font-family: "Manrope", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #b9cbc1;
}


/* COMPLETED */

.progress-workout-row.is-complete {
  background:
    rgba(143,166,154,.14);
}

.progress-workout-row.is-complete
.progress-workout-status-icon {
  border-color: #b9cbc1;

  background: #b9cbc1;

  color: #102f46;
}


/* ACTIVE WORKOUT */

.progress-workout-row.is-active {
  border-color:
    rgba(255,255,255,.28);

  background:
    rgba(255,255,255,.1);
}

.progress-workout-mini-bar {
  width: min(300px,100%);
  height: 4px;

  margin-top: 8px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.14);
}

.progress-workout-mini-bar span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: #ffffff;
}

.progress-continue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 36px;

  padding: 0 14px;

  border: 0;
  border-radius: 999px;

  background: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;

  color: #102f46;

  cursor: pointer;
}


/* EMPTY */

.progress-empty-week {
  padding: 12px 2px 4px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;

  color: #b9cbc1;
}


/* =========================================================
   LOWER TWO CARDS
   ========================================================= */

.progress-insight-grid {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap: 18px;

  margin-top: 18px;
}

.progress-insight-card {
  min-width: 0;

  padding: 25px;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 12px 34px rgba(16,47,70,.055);
}

.progress-insight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 22px;
}

.progress-insight-header h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.025em;

  color: #102f46;
}


/* =========================================================
   DAILY CHECK-IN
   ========================================================= */

.progress-checkin-badge {
  flex-shrink: 0;

  padding: 6px 9px;

  border-radius: 999px;

  background: #f3f4f2;

  font-family: "Manrope", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;

  color: #71808a;
}

.progress-checkin-badge.is-complete {
  background:
    rgba(143,166,154,.18);

  color: #102f46;
}

.progress-checkin-grid {
  display: grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 10px;
}

.progress-checkin-item {
  min-height: 105px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 16px;

  border: 1px solid #dfe3e1;
  border-radius: 16px;

  background: #fbfbf9;
}

.progress-checkin-item span {
  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;

  color: #8fa69a;
}

.progress-checkin-item strong {
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1;

  letter-spacing: -.035em;

  color: #102f46;
}

.progress-card-footer {
  margin-top: 16px;
}

.progress-complete-note {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  color: #8fa69a;
}


/* =========================================================
   SHARED ACTION
   ========================================================= */

.progress-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 42px;

  padding: 0 16px;

  border: 0;
  border-radius: 999px;

  background: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;

  color: #ffffff;

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.progress-card-action:hover {
  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(16,47,70,.14);
}


/* =========================================================
   MACRO CARD
   ========================================================= */

.progress-macro-content {
  display: grid;
  grid-template-columns:
    minmax(180px,.8fr)
    minmax(0,1.2fr);

  align-items: center;

  gap: 22px;
}

.progress-macro-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-macro-donut {
  --protein: 0;
  --carbs: 0;
  --fat: 0;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 175px;
  height: 175px;

  border-radius: 50%;

  background:
    conic-gradient(
      #102f46
        0
        calc(var(--protein) * 1%),

      #8fa69a
        calc(var(--protein) * 1%)
        calc(
          (var(--protein) + var(--carbs))
          * 1%
        ),

      #dfe3e1
        calc(
          (var(--protein) + var(--carbs))
          * 1%
        )
        100%
    );
}

.progress-macro-donut::after {
  content: "";

  position: absolute;

  inset: 20px;

  border-radius: 50%;

  background: #ffffff;
}

.progress-macro-donut-center {
  position: relative;
  z-index: 2;

  text-align: center;
}

.progress-macro-donut-center strong {
  display: block;

  font-family: "Manrope", sans-serif;
  font-size: 26px;
  line-height: 1;

  letter-spacing: -.04em;

  color: #102f46;
}

.progress-macro-donut-center span {
  display: block;

  margin-top: 5px;

  font-family: "Manrope", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;

  color: #71808a;
}


/* MACRO VALUES */

.progress-macro-values {
  display: grid;

  gap: 8px;
}

.progress-macro-value {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px 14px;

  border: 1px solid #dfe3e1;
  border-radius: 14px;

  background: #fbfbf9;
}

.progress-macro-value span {
  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;

  color: #71808a;
}

.progress-macro-value strong {
  font-family: "Manrope", sans-serif;
  font-size: 18px;

  color: #102f46;
}


/* GOAL */

.progress-macro-goal {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: 18px;

  padding-top: 16px;

  border-top: 1px solid #dfe3e1;
}

.progress-macro-goal span {
  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;

  color: #8fa69a;
}

.progress-macro-goal strong {
  font-family: "Manrope", sans-serif;
  font-size: 17px;

  color: #102f46;
}


/* NO SAVED MACROS */

.progress-macro-empty {
  min-height: 230px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding: 24px;

  border: 1px dashed #dfe3e1;
  border-radius: 17px;

  background: #fbfbf9;
}

.progress-macro-empty > span {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 700;

  color: #102f46;
}

.progress-macro-empty p {
  max-width: 330px;

  margin: 8px 0 17px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1.55;

  color: #71808a;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .progress-insight-grid {
    grid-template-columns: 1fr;
  }

  .progress-macro-content {
    grid-template-columns:
      minmax(170px,.7fr)
      minmax(0,1.3fr);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .progress-page {
    padding-bottom: 30px;
  }

  .progress-page-heading {
    margin-bottom: 20px;
  }

  .progress-page-heading h1 {
    font-size: 31px;
  }

  .progress-page-heading p {
    font-size: 12px;
  }


  /* WEEK */

  .progress-week-card {
    padding: 21px 18px;

    border-radius: 20px;
  }

  .progress-week-header {
    gap: 14px;
  }

  .progress-week-header h2 {
    font-size: 20px;
  }

  .progress-week-score strong {
    font-size: 34px;
  }

  .progress-week-score span {
    font-size: 13px;
  }

  .progress-week-summary {
    align-items: flex-start;
    flex-direction: column;

    gap: 4px;
  }

  .progress-workout-row {
    grid-template-columns:
      34px minmax(0,1fr);

    gap: 11px;

    padding: 12px;
  }

  .progress-workout-state {
    display: none;
  }

  .progress-continue-button {
    grid-column: 2;

    justify-self: start;

    margin-top: 2px;
  }


  /* LOWER CARDS */

  .progress-insight-grid {
    grid-template-columns: 1fr;

    gap: 12px;
    margin-top: 12px;
  }

  .progress-insight-card {
    padding: 19px;

    border-radius: 19px;
  }

  .progress-insight-header {
    margin-bottom: 17px;
  }

  .progress-insight-header h2 {
    font-size: 19px;
  }


  /* CHECK-IN */

  .progress-checkin-item {
    min-height: 92px;

    padding: 14px;
  }

  .progress-checkin-item strong {
    font-size: 22px;
  }


  /* MACRO */

  .progress-macro-content {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .progress-macro-donut {
    width: 160px;
    height: 160px;
  }

  .progress-macro-goal {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .progress-page-heading h1 {
    font-size: 28px;
  }

  .progress-checkin-grid {
    gap: 8px;
  }

  .progress-checkin-item {
    min-height: 86px;

    padding: 12px;
  }

  .progress-checkin-item strong {
    font-size: 20px;
  }

  .progress-checkin-badge {
    font-size: 7px;
  }
}



/* =========================================================
   XCULPTED PROGRESS V2
   FINAL 40 / 60 DESKTOP STRUCTURE
   LEFT 40%  = MACROS + CHECK-IN
   RIGHT 60% = WORKOUT + THIS WEEK
   ========================================================= */


/* =========================================================
   FULL DESKTOP WIDTH
   ========================================================= */

.progress-page.progress-dashboard-v2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 48px;
}


/* PAGE HEADER */

.progress-v2-heading {
  width: 100%;
  margin: 0 0 24px;
}

.progress-v2-heading .eyebrow {
  display: block;
  margin-bottom: 7px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;

  color: #8fa69a;
}

.progress-v2-heading h1 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 2.5vw, 42px);
  line-height: 1.08;
  letter-spacing: -.045em;

  color: #102f46;
}

.progress-v2-heading p {
  margin: 10px 0 0;

  font-size: 13px;
  line-height: 1.55;

  color: #71808a;
}


/* =========================================================
   MAIN GRID

   LEFT  = 40%
   RIGHT = 60%
   ========================================================= */

.progress-v2-grid {
  width: 100%;

  display: grid !important;
  grid-template-columns:
    minmax(0, 40fr)
    minmax(0, 60fr) !important;

  align-items: start;

  gap: 20px;
}


/* BOTH COLUMNS */

.progress-v2-left,
.progress-v2-right {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 20px;
}


/* =========================================================
   SHARED WHITE CARD
   ========================================================= */

.progress-v2-card {
  width: 100%;
  box-sizing: border-box;

  padding: 26px;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(16, 47, 70, .055);
}


.progress-v2-card-heading {
  margin-bottom: 20px;
}

.progress-v2-card-heading .eyebrow {
  display: block;

  margin-bottom: 6px;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;

  color: #8fa69a;
}

.progress-v2-card-heading h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.025em;

  color: #102f46;
}


/* =========================================================
   LEFT — MACRO RESULT
   ========================================================= */

.progress-v2-macro {
  min-height: 0;
}


/* CALORIES */

.progress-v2-calories {
  padding-bottom: 18px;

  border-bottom: 1px solid #dfe3e1;
}

.progress-v2-calories > span {
  display: block;

  margin-bottom: 4px;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #71808a;
}

.progress-v2-calories strong {
  display: inline-block;

  font-family: "Manrope", sans-serif;
  font-size: 40px;
  line-height: 1;

  letter-spacing: -.05em;

  color: #102f46;
}

.progress-v2-calories small {
  margin-left: 5px;

  font-size: 11px;
  font-weight: 600;

  color: #71808a;
}


/* DONUT AREA */

.progress-v2-macro-main {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 28px;

  padding: 22px 0;
}


.progress-v2-donut {
  --protein: 0;
  --carbs: 0;

  position: relative;

  width: 160px;
  height: 160px;

  flex: 0 0 160px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    conic-gradient(
      #102f46
      0
      calc(var(--protein) * 1%),

      #8fa69a
      calc(var(--protein) * 1%)
      calc(
        (var(--protein) + var(--carbs))
        * 1%
      ),

      #d1c0a9
      calc(
        (var(--protein) + var(--carbs))
        * 1%
      )
      100%
    );
}


.progress-v2-donut::after {
  content: "";

  position: absolute;

  inset: 21px;

  border-radius: 50%;

  background: #ffffff;
}


.progress-v2-donut-inner {
  position: relative;
  z-index: 2;

  text-align: center;
}


.progress-v2-donut-inner span {
  display: block;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #71808a;
}


.progress-v2-donut-inner strong {
  display: block;

  margin-top: 4px;

  font-family: "Manrope", sans-serif;
  font-size: 18px;

  color: #102f46;
}


.progress-v2-donut-inner small {
  display: block;

  margin-top: 4px;

  font-size: 9px;

  color: #71808a;
}


/* LEGEND */

.progress-v2-macro-legend {
  display: flex;
  flex-direction: column;

  gap: 12px;
}


.progress-v2-macro-legend > span {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;

  gap: 8px;

  min-width: 105px;

  font-size: 10px;

  color: #71808a;
}


.progress-v2-macro-legend strong {
  font-size: 10px;

  color: #102f46;
}


.progress-v2-macro-legend i {
  width: 8px;
  height: 8px;

  display: block;

  border-radius: 50%;
}


.progress-v2-macro-legend i.protein {
  background: #102f46;
}

.progress-v2-macro-legend i.carbs {
  background: #8fa69a;
}

.progress-v2-macro-legend i.fat {
  background: #d1c0a9;
}


/* PROTEIN / CARBS / FAT */

.progress-v2-macro-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 9px;
}


.progress-v2-macro-values > div {
  min-width: 0;

  padding: 14px 10px;

  text-align: center;

  border: 1px solid #dfe3e1;
  border-radius: 14px;

  background: #fbfbf9;
}


.progress-v2-macro-values span {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;

  color: #71808a;
}


.progress-v2-macro-values strong {
  font-family: "Manrope", sans-serif;
  font-size: 18px;

  color: #102f46;
}


/* GOAL */

.progress-v2-goal {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);

  gap: 12px;

  margin-top: 15px;
  padding: 15px;

  border-radius: 15px;

  background:
    linear-gradient(
      110deg,
      rgba(143,166,154,.14),
      rgba(209,192,169,.20)
    );
}


.progress-v2-goal-icon {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #8fa69a;

  font-size: 18px;

  color: #ffffff;
}


.progress-v2-goal > div > span {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #71808a;
}


.progress-v2-goal strong {
  display: block;

  font-family: "Manrope", sans-serif;
  font-size: 17px;

  color: #102f46;
}


.progress-v2-goal p {
  margin: 5px 0 0;

  font-size: 9px;
  line-height: 1.45;

  color: #71808a;
}


/* =========================================================
   LEFT — DAILY CHECK-IN
   ========================================================= */

.progress-v2-checkin {
  min-height: 0;
}


.progress-v2-checkin-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;
}


.progress-v2-checkin-copy {
  margin: -4px 0 18px;

  font-size: 11px;
  line-height: 1.55;

  color: #71808a;
}


/* BEFORE CHECK-IN */

.progress-v2-checkin-empty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 9px;
}


.progress-v2-checkin-empty-grid > div {
  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #dfe3e1;
  border-radius: 14px;

  background: #fbfbf9;
}


.progress-v2-checkin-empty-grid span {
  font-size: 10px;
  font-weight: 600;

  color: #102f46;
}


.progress-v2-checkin-button {
  width: 100%;

  margin-top: 12px;
}


/* AFTER CHECK-IN */

.progress-v2-rings {
  width: 100%;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;
}


.progress-v2-rings .daily-progress-item {
  min-width: 0;
}


.progress-v2-rings .daily-progress-ring {
  width: 78px;
  height: 78px;

  margin-left: auto;
  margin-right: auto;
}


.progress-v2-rings
.daily-progress-ring-inner strong {
  font-size: 12px;
}


.progress-v2-rings
.progress-ring-icon {
  width: 18px;
  height: 18px;
}


.progress-v2-rings
.daily-progress-item > span {
  display: block;

  margin-top: 7px;

  text-align: center;

  font-size: 9px;
  font-weight: 600;

  color: #71808a;
}


.progress-v2-checkin-complete {
  margin-top: 17px;
  padding-top: 14px;

  border-top: 1px solid #dfe3e1;

  font-size: 10px;
  font-weight: 600;

  color: #8fa69a;
}


/* =========================================================
   RIGHT — WORKOUT CARD
   ========================================================= */

.progress-v2-workout-card {
  width: 100%;
  box-sizing: border-box;

  overflow: hidden;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(16, 47, 70, .055);
}


.progress-v2-workout-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 24px 26px 18px;
}


.progress-v2-workout-heading .eyebrow {
  display: block;

  margin-bottom: 6px;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;

  color: #8fa69a;
}


.progress-v2-workout-heading h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1.15;

  letter-spacing: -.03em;

  color: #102f46;
}


.progress-v2-workout-position {
  flex-shrink: 0;

  padding: 7px 10px;

  border-radius: 999px;

  background: #f0f3f1;

  font-size: 9px;
  font-weight: 700;

  color: #71808a;
}


/* =========================================================
   MEDIA PLAYER
   ========================================================= */

.progress-v2-media {
  position: relative;

  width: calc(100% - 52px);
  aspect-ratio: 16 / 9;

  margin: 0 26px;

  overflow: hidden;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #102f46,
      #0b2537
    );
}


.progress-v2-media-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.08),
      transparent 48%
    );
}


.progress-v2-play {
  width: 72px;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 0 0 4px;

  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;

  background: rgba(255,255,255,.96);

  font-size: 22px;

  color: #102f46;

  cursor: pointer;

  box-shadow:
    0 10px 30px rgba(0,0,0,.15);
}


/* WORKOUT DETAILS */

.progress-v2-workout-details {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding: 20px 26px 25px;
}


.progress-v2-workout-details > div > span {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #8fa69a;
}


.progress-v2-workout-details h3 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 19px;

  color: #102f46;
}


.progress-v2-workout-details p {
  margin: 6px 0 0;

  font-size: 11px;

  color: #71808a;
}


.progress-v2-workout-button {
  flex-shrink: 0;
}


/* =========================================================
   RIGHT — THIS WEEK

   REUSE EXISTING HOME CARD
   ========================================================= */

.progress-v2-weekly {
  width: 100%;
}


.progress-v2-weekly
.weekly-consistency-card {
  width: 100%;

  box-sizing: border-box;

  margin: 0;

  cursor: default;
}


/* =========================================================
   EMPTY MACRO
   ========================================================= */

.progress-v2-empty {
  min-height: 260px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding: 22px;

  border: 1px dashed #dfe3e1;
  border-radius: 16px;

  background: #fbfbf9;
}


.progress-v2-empty strong {
  font-family: "Manrope", sans-serif;
  font-size: 16px;

  color: #102f46;
}


.progress-v2-empty p {
  max-width: 300px;

  margin: 7px 0 16px;

  font-size: 10px;
  line-height: 1.5;

  color: #71808a;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .progress-v2-grid {
    grid-template-columns:
      minmax(0, 40fr)
      minmax(0, 60fr) !important;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  .progress-v2-grid {
    grid-template-columns: 1fr !important;
  }

  .progress-v2-left,
  .progress-v2-right {
    width: 100%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .progress-page.progress-dashboard-v2 {
    padding-bottom: 28px;
  }


  .progress-v2-heading {
    margin-bottom: 18px;
  }


  .progress-v2-heading h1 {
    font-size: 29px;
  }


  .progress-v2-grid {
    display: flex !important;
    flex-direction: column;

    gap: 12px;
  }


  .progress-v2-left,
  .progress-v2-right {
    gap: 12px;
  }


  .progress-v2-card {
    padding: 19px;

    border-radius: 18px;
  }


  .progress-v2-workout-card {
    border-radius: 18px;
  }


  .progress-v2-workout-heading {
    padding: 19px 19px 15px;
  }


  .progress-v2-media {
    width: calc(100% - 38px);

    margin-left: 19px;
    margin-right: 19px;

    border-radius: 15px;
  }


  .progress-v2-workout-details {
    align-items: flex-start;
    flex-direction: column;

    padding: 17px 19px 20px;
  }


  .progress-v2-workout-button {
    width: 100%;
  }


  .progress-v2-macro-main {
    flex-direction: column;

    gap: 16px;
  }


  .progress-v2-macro-legend {
    width: 100%;

    display: grid;
    grid-template-columns:
      repeat(3, 1fr);

    gap: 6px;
  }


  .progress-v2-macro-legend > span {
    min-width: 0;

    display: flex;
    flex-direction: column;

    text-align: center;
  }


  .progress-v2-macro-values {
    gap: 6px;
  }


  .progress-v2-rings {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    row-gap: 16px;
  }

}


/* =========================================================
   PROGRESS LEFT COLUMN ORDER
   1. DAILY CHECK-IN
   2. MACRO RESULT
   3. PROGRESS PHOTOS — NEXT
   ========================================================= */

.progress-v2-left .progress-v2-checkin {
  order: 1;
}

.progress-v2-left .progress-v2-macro {
  order: 2;
}

/* =========================================================
   PROGRESS — EMPTY MACRO CALCULATOR
   ========================================================= */

/*
 * Remove the normal Progress white-card treatment.
 * The image itself becomes the card.
 */
.progress-v2-card.progress-v2-macro:has(.progress-macro-empty) {
  position: relative;

  width: 100%;
  height: 405px;
  min-height: 405px;

  padding: 0 !important;

  overflow: hidden;

  border: 1px solid #dfe3e1;
  border-radius: 20px;

  background: #102f46;

  box-shadow:
    0 10px 30px rgba(16, 47, 70, .055);
}


/*
 * Image fills 100% of the card.
 */
.progress-v2-card.progress-v2-macro
.progress-macro-empty {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  box-sizing: border-box;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  padding: 30px !important;

  overflow: hidden;

  border: 0;
  border-radius: 0;

  background-image:
    linear-gradient(
      180deg,
      rgba(7, 29, 43, .05) 15%,
      rgba(7, 29, 43, .30) 50%,
      rgba(7, 29, 43, .92) 100%
    ),
    url("../assets/macro-calculator.jpg") !important;

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


.progress-v2-card.progress-v2-macro
.progress-macro-empty
.macro-experience-copy {
  position: absolute !important;

  left: 30px !important;
  right: auto !important;
  top: auto !important;
  bottom: 30px !important;

  z-index: 2;

  width: calc(100% - 60px) !important;
  max-width: 390px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  text-align: left !important;

  color: #ffffff;
}


/* NUTRITION */

.progress-v2-card.progress-v2-macro
.progress-macro-empty
.experience-label {
  display: block;

  margin: 0 0 18px;

  text-align: left;

  color: #dfe8e2;
}


/* TITLE */

.progress-v2-card.progress-v2-macro
.progress-macro-empty
h3 {
  margin: 0 0 14px;

  font-family: "Manrope", sans-serif;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.04em;

  text-align: left;

  color: #ffffff;
}


/* DESCRIPTION */

.progress-v2-card.progress-v2-macro
.progress-macro-empty
p {
  max-width: 370px;

  margin: 0 0 20px;

  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;

  text-align: left;

  color: rgba(255, 255, 255, .92);
}


/* ARROW */

.progress-v2-card.progress-v2-macro
.progress-macro-empty
.experience-arrow {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #ffffff;
  color: #102f46;

  font-size: 18px;

  cursor: pointer;
}


/* =========================================================
   PROGRESS PHOTOS
   ========================================================= */
/* =========================================================
   PROGRESS PHOTOS — RIGHT COLUMN
   ========================================================= */

.progress-v2-right .progress-v2-photos {
  width: 100%;
  margin: 0;
}

.progress-v2-right .progress-photo-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 760px) {

  .progress-v2-right .progress-photo-grid {
    grid-template-columns: 1fr;
  }

}

.progress-photo-intro {
  max-width: 360px;
  margin: 7px 0 0;

  font-size: 10px;
  line-height: 1.5;

  color: #71808a;
}


/* BEFORE + AFTER */

.progress-photo-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.progress-photo-column {
  min-width: 0;
}

.progress-photo-label {
  margin-bottom: 8px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;

  color: #102f46;
}


/* PHOTO AREA */

.progress-photo-upload {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 15px;

  border: 1px dashed
    rgba(16, 47, 70, .22);

  border-radius: 15px;

  background: #fbfbf9;

  color: #102f46;

  cursor: pointer;

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.progress-photo-upload:hover {
  border-color: #8fa69a;

  background:
    rgba(143, 166, 154, .07);

  transform: translateY(-1px);
}


.progress-photo-plus {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 2px;

  border-radius: 50%;

  background:
    rgba(143, 166, 154, .16);

  font-size: 22px;
  font-weight: 300;

  color: #102f46;
}

.progress-photo-upload strong {
  font-family: "Manrope", sans-serif;
  font-size: 11px;

  color: #102f46;
}

.progress-photo-upload small {
  max-width: 120px;

  font-size: 8px;
  line-height: 1.4;

  color: #71808a;
}


/* DATE */

.progress-photo-date {
  display: block;

  margin-top: 9px;
}

.progress-photo-date > span,
.progress-photo-notes > span {
  display: block;

  margin-bottom: 6px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #71808a;
}

.progress-photo-date input {
  width: 100%;
  height: 40px;

  box-sizing: border-box;

  padding: 0 11px;

  border: 1px solid #dfe3e1;
  border-radius: 11px;

  outline: none;

  background: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 10px;

  color: #102f46;
}

.progress-photo-date input:focus {
  border-color: #8fa69a;
}


/* NOTES */

.progress-photo-notes {
  display: block;

  margin-top: 18px;
}

.progress-photo-notes textarea {
  width: 100%;
  min-height: 90px;

  box-sizing: border-box;

  resize: vertical;

  padding: 12px 13px;

  border: 1px solid #dfe3e1;
  border-radius: 13px;

  outline: none;

  background: #fbfbf9;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1.5;

  color: #102f46;
}

.progress-photo-notes textarea::placeholder {
  color: #9aa5ab;
}

.progress-photo-notes textarea:focus {
  border-color: #8fa69a;

  background: #ffffff;
}


/* FOOTER */

.progress-photo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: 14px;
}

.progress-photo-privacy {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  font-size: 8px;

  color: #71808a;
}

.progress-photo-privacy svg {
  width: 14px;
  height: 14px;

  flex: 0 0 14px;

  color: #8fa69a;
}

.progress-photo-save {
  flex-shrink: 0;
}


/* MOBILE */

@media (max-width: 700px) {

  .progress-photo-grid {
    grid-template-columns: 1fr 1fr;

    gap: 8px;
  }

  .progress-photo-upload {
    border-radius: 13px;
  }

  .progress-photo-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .progress-photo-save {
    width: 100%;
  }

}


/* =========================================================
   PROGRESS PHOTO — IMAGE PREVIEW
   ========================================================= */

.progress-photo-upload.has-progress-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-style: solid;
  background: #0b2537;
}


.progress-photo-preview-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.progress-photo-change {
  position: absolute;

  left: 50%;
  bottom: 14px;

  transform: translateX(-50%);

  z-index: 2;

  padding: 7px 11px;

  border-radius: 999px;

  background: rgba(11, 37, 55, .82);

  color: #ffffff;

  font-size: 8px;
  font-weight: 700;

  white-space: nowrap;

  backdrop-filter: blur(8px);
}

/* =========================================================
   PROGRESS PHOTOS — SHORTER IMAGE HEIGHT
   ========================================================= */

.progress-v2-photos .progress-photo-upload {
  aspect-ratio: auto;
  height: 280px;
  min-height: 0;
}

.progress-v2-photos .progress-photo-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}



/* =========================================================
   PROGRESS — HOME STYLE MACRO RESULT
   ========================================================= */

.progress-macro-home-style {
  padding: 24px;
}


.progress-home-macro-header {
  position: relative;

  text-align: center;

  margin-bottom: 22px;
}


.progress-home-macro-header .eyebrow {
  display: block;

  margin-bottom: 7px;
}


.progress-home-macro-header h2 {
  margin: 0;

  color: #102f46;

  font-size: 22px;
  line-height: 1.1;
}


/* =========================================================
   MAIN 3-COLUMN AREA
   ========================================================= */

.progress-home-macro-layout {
  display: grid;

  grid-template-columns:
    minmax(135px, .8fr)
    minmax(150px, .9fr)
    minmax(280px, 1.8fr);

  align-items: center;

  gap: 18px;
}


/* =========================================================
   CALORIES
   ========================================================= */

.progress-home-calories {
  min-width: 0;

  padding-right: 18px;

  border-right: 1px solid #dfe3e1;
}


.progress-home-calorie-icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  margin-bottom: 10px;

  border-radius: 50%;

  background: #f4f1eb;

  color: #102f46;

  font-size: 12px;
}


.progress-home-calories > span {
  display: block;

  color: #71808a;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}


.progress-home-calorie-number strong {
  display: block;

  margin-top: 3px;

  color: #102f46;

  font-size: clamp(34px, 4vw, 48px);
  line-height: .95;

  letter-spacing: -.045em;
}


.progress-home-calories > small {
  display: block;

  margin-top: 6px;

  color: #102f46;

  font-size: 10px;
  font-weight: 700;
}


.progress-home-tailored {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 14px;

  padding: 9px;

  border-radius: 10px;

  background: #f7f8f5;
}


.progress-home-check {
  flex: 0 0 auto;

  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #8fa69a;

  color: white;

  font-size: 11px;
}


.progress-home-tailored strong,
.progress-home-tailored small {
  display: block;
}


.progress-home-tailored strong {
  color: #102f46;

  font-size: 8px;
}


.progress-home-tailored small {
  margin-top: 2px;

  color: #71808a;

  font-size: 6px;
  line-height: 1.35;
}


/* =========================================================
   DONUT
   ========================================================= */

.progress-home-donut-column {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}


.progress-home-donut {
  width: 150px;
  height: 150px;
}


.progress-home-donut-legend {
  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 9px;
}


.progress-home-donut-legend > span {
  display: grid;

  grid-template-columns: 7px auto;

  column-gap: 4px;

  align-items: center;
}


.progress-home-donut-legend i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}


.progress-home-donut-legend small {
  color: #71808a;

  font-size: 7px;
}


.progress-home-donut-legend strong {
  grid-column: 2;

  color: #102f46;

  font-size: 8px;
}


/* =========================================================
   DAILY MACROS
   ========================================================= */

.progress-home-macro-targets {
  min-width: 0;

  padding-left: 18px;

  border-left: 1px solid #dfe3e1;
}


.progress-home-macro-targets > .eyebrow {
  display: block;

  margin-bottom: 11px;
}


.progress-home-target-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;
}


.progress-home-target {
  min-width: 0;

  min-height: 130px;

  padding: 12px 10px;

  border: 1px solid #dfe3e1;

  border-radius: 11px;

  background: #ffffff;
}


.progress-home-target > i {
  display: block;

  width: 20px;
  height: 3px;

  margin-bottom: 13px;

  border-radius: 10px;
}


.progress-home-target > span {
  display: block;

  color: #71808a;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .1em;
}


.progress-home-target > div {
  display: flex;

  align-items: baseline;

  gap: 3px;

  margin-top: 6px;
}


.progress-home-target strong {
  color: #102f46;

  font-size: 23px;
  line-height: 1;
}


.progress-home-target small {
  color: #71808a;

  font-size: 6px;
}


.progress-home-target p {
  margin: 22px 0 0;

  color: #71808a;

  font-size: 6px;
  line-height: 1.45;
}


/* =========================================================
   MACRO COLORS
   ========================================================= */

.progress-home-target i.protein,
.progress-home-donut-legend i.protein {
  background: #102f46;
}


.progress-home-target i.carbs,
.progress-home-donut-legend i.carbs {
  background: #8fa69a;
}


.progress-home-target i.fat,
.progress-home-donut-legend i.fat {
  background: #d5c5aa;
}


/* =========================================================
   GOAL
   ========================================================= */

.progress-home-goal {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 18px;

  padding: 14px;

  border-radius: 12px;

  background: #f4f1eb;
}


.progress-home-goal-icon {
  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #8fa69a;

  color: #ffffff;
}


.progress-home-goal > div > span {
  display: block;

  margin-bottom: 3px;

  color: #71808a;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .1em;
}


.progress-home-goal strong {
  display: block;

  color: #102f46;

  font-size: 14px;
}


.progress-home-goal p {
  margin: 4px 0 0;

  color: #71808a;

  font-size: 7px;
  line-height: 1.45;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .progress-home-macro-layout {
    grid-template-columns: 1fr 1fr;
  }

  .progress-home-macro-targets {
    grid-column: 1 / -1;

    padding-top: 18px;
    padding-left: 0;

    border-top: 1px solid #dfe3e1;
    border-left: 0;
  }

}


@media (max-width: 700px) {

  .progress-home-macro-layout {
    grid-template-columns: 1fr;
  }

  .progress-home-calories {
    padding-right: 0;
    padding-bottom: 18px;

    border-right: 0;
    border-bottom: 1px solid #dfe3e1;
  }

  .progress-home-macro-targets {
    grid-column: auto;
  }

  .progress-home-target-grid {
    grid-template-columns: 1fr;
  }

}




/* =========================================================
   BODY WEIGHT TRACKING
   ========================================================= */

.weight-tracking-section {
  width: 100%;
  padding: 4px 0 0;
}


/* HEADER */

.weight-tracking-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.weight-tracking-header .eyebrow {
  display: block;
  margin-bottom: 7px;
}

.weight-tracking-header h2 {
  margin: 0;
  color: #172b3a;
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: -0.04em;
}


/* VIEW ALL */

.weight-view-all {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #102f46;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.weight-view-all span {
  font-size: 17px;
  line-height: 1;
  transition: transform .2s ease;
}

.weight-view-all:hover span {
  transform: translateX(3px);
}


/* TWO CARDS */

.weight-tracking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}


/* CARD */

.weight-tracking-card {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 280px;
  padding: 24px 24px 18px;
  overflow: hidden;
  position: relative;

  display: flex;
  flex-direction: column;

  text-align: left;
  font: inherit;
  color: #172b3a;

  border: 1px solid #e4e8e6;
  border-radius: 26px;
  background: #ffffff;

  box-shadow:
    0 12px 35px rgba(16, 47, 70, .055);

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.weight-tracking-card:hover {
  transform: translateY(-2px);
  border-color: #ccd6d1;

  box-shadow:
    0 18px 42px rgba(16, 47, 70, .09);
}


/* TOP */

.weight-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  position: relative;
  z-index: 2;
}

.weight-card-label {
  display: block;
  margin-bottom: 13px;

  color: #172b3a;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 750;
}


/* NUMBER */

.weight-card-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.weight-card-value strong {
  color: #102f46;
  font-family: "Manrope", sans-serif;
  font-size: clamp(40px, 4vw, 55px);
  line-height: .95;
  font-weight: 760;
  letter-spacing: -0.055em;
}

.weight-card-value span {
  color: #71808a;
  font-size: 17px;
  font-weight: 650;
}


/* EDIT ICON */

.weight-card-edit {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border: 1px solid #dfe3e1;
  border-radius: 50%;

  color: #102f46;
  background: #fbfbf9;
}

.weight-card-edit svg {
  width: 15px;
  height: 15px;
}


/* CURRENT BADGE */

.weight-card-current-badge {
  padding: 7px 9px;

  border-radius: 999px;

  background: rgba(143, 166, 154, .16);

  color: #60776c;

  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .09em;
}


/* CHART */

.weight-mini-chart {
  width: calc(100% + 48px);
  height: 105px;

  margin:
    auto
    -24px
    -1px;

  position: relative;
}

.weight-mini-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.weight-chart-area {
  fill: url(#previousWeightFill);
}

.weight-chart-area.current {
  fill: url(#currentWeightFill);
}

.weight-chart-line {
  fill: none;
  stroke: #8fa69a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.weight-chart-line.current {
  stroke: #102f46;
}

.weight-chart-marker {
  stroke: #cfd6d2;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}

.weight-chart-point {
  fill: #8fa69a;
  stroke: #ffffff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.weight-chart-point.current {
  fill: #102f46;
}


/* BOTTOM LABEL */

.weight-card-footer {
  padding-top: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  border-top: 1px solid #eef1ef;

  color: #8a969e;

  font-size: 10px;
  font-weight: 650;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .weight-tracking-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .weight-tracking-header {
    align-items: flex-start;
  }

  .weight-tracking-header h2 {
    font-size: 24px;
  }

  .weight-view-all {
    font-size: 11px;
  }

  .weight-tracking-card {
    min-height: 250px;
    padding: 21px 20px 16px;
    border-radius: 22px;
  }

  .weight-card-value strong {
    font-size: 44px;
  }

  .weight-mini-chart {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }

}


/* =========================================================
   XCULPTED — WEIGHT PICKER MODAL
   ========================================================= */

.weight-picker-modal {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 6px 4px 2px;
  box-sizing: border-box;
}


/* HEADER */

.weight-picker-header {
  position: relative;
  display: block;
  margin-bottom: 22px;
  text-align: center;
}

.weight-picker-header .eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #8fa69a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.weight-picker-header h2 {
  margin: 0;
  color: #102f46;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 780;
  letter-spacing: -.04em;
}

.weight-picker-header p {
  max-width: 280px;
  margin: 8px auto 0;
  color: #71808a;
  font-size: 12px;
  line-height: 1.45;
}


/* CLOSE BUTTON */

.weight-picker-header .close-button {
  position: absolute;
  top: -3px;
  right: 0;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid #dfe3e1;
  border-radius: 50%;

  background: #ffffff;
  color: #102f46;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   KG / LB SEGMENT
   ========================================================= */

.weight-unit-toggle {
  width: 220px;
  max-width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;

  margin: 0 auto 20px;
  padding: 4px;

  border: 0;
  border-radius: 999px;

  background: #f0f2f1;
}

.weight-unit-option {
  appearance: none;

  min-height: 38px;
  padding: 0 14px;

  border: 0;
  border-radius: 999px;

  background: transparent;
  color: #9aa4a8;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.weight-unit-option.is-active {
  background: #102f46;
  color: #ffffff;

  box-shadow:
    0 5px 14px rgba(16, 47, 70, .16);
}


/* =========================================================
   NUMBER WHEEL
   ========================================================= */

.weight-wheel {
  position: relative;

  width: 220px;
  max-width: 100%;
  height: 220px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 0;
  border-radius: 18px;

  background: #ffffff;

  user-select: none;
  touch-action: pan-x;
}


/* CENTER SELECTION AREA */

.weight-wheel-selection {
  position: absolute;

  left: 34px;
  right: 34px;
  top: 50%;

  height: 54px;

  transform: translateY(-50%);

  border-top: 2px solid #8fa69a;
  border-bottom: 2px solid #8fa69a;

  background: rgba(143, 166, 154, .05);

  pointer-events: none;
  z-index: 1;
}


/* NUMBER COLUMN */

.weight-wheel-column {
  position: relative;
  z-index: 3;

  width: 115px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* ALL NUMBERS */

.weight-wheel-number {
  appearance: none;

  width: 100%;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  background: transparent;

  color: #aeb6b9;

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 650;

  cursor: pointer;

  transition:
    color .15s ease,
    opacity .15s ease,
    font-size .15s ease,
    transform .15s ease;
}


/* SELECTED NUMBER */

.weight-wheel-number.is-selected {
  height: 54px;

  color: #102f46;

  font-size: 34px;
  font-weight: 800;

  letter-spacing: -.04em;

  pointer-events: none;
}


/* NUMBERS CLOSE TO CENTER */

.weight-wheel-up-one,
.weight-wheel-down-one {
  color: #9da7ab;
  font-size: 19px;
  opacity: .72;
}


/* OUTER NUMBERS */

.weight-wheel-up-two,
.weight-wheel-down-two {
  color: #bcc3c6;
  font-size: 15px;
  opacity: .38;
}


/* KG / LB BESIDE SELECTED VALUE */

.weight-wheel-unit {
  position: absolute;

  top: 50%;
  left: calc(50% + 43px);

  transform: translateY(-50%);

  z-index: 4;

  color: #9aa4a8;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;

  pointer-events: none;
}


/* TOP/BOTTOM FADE */

.weight-wheel-fade {
  position: absolute;
  left: 0;
  right: 0;

  height: 58px;

  z-index: 5;
  pointer-events: none;
}

.weight-wheel-fade-top {
  top: 0;

  background:
    linear-gradient(
      to bottom,
      #ffffff 20%,
      rgba(255, 255, 255, 0)
    );
}

.weight-wheel-fade-bottom {
  bottom: 0;

  background:
    linear-gradient(
      to top,
      #ffffff 20%,
      rgba(255, 255, 255, 0)
    );
}


/* HINT */

.weight-picker-hint {
  margin: 7px 0 0;

  text-align: center;

  color: #929da3;

  font-size: 11px;
  line-height: 1.4;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.weight-picker-actions {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1.35fr;

  gap: 10px;

  margin-top: 23px;
}

.weight-picker-actions .button {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 750;
}

.weight-picker-cancel {
  border: 1px solid #dfe3e1 !important;

  background: #f7f8f7 !important;
  color: #102f46 !important;
}

.weight-picker-confirm {
  border: 1px solid #102f46 !important;

  background: #102f46 !important;
  color: #ffffff !important;

  box-shadow:
    0 8px 18px rgba(16, 47, 70, .13);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .weight-picker-modal {
    max-width: 340px;
  }

  .weight-picker-header h2 {
    font-size: 23px;
  }

  .weight-unit-toggle {
    width: 205px;
  }

  .weight-wheel {
    width: 205px;
    height: 210px;
  }

  .weight-picker-actions {
    grid-template-columns: 1fr 1.25fr;
  }

}


/* Weight picker only — compact popup */

#modal:has(.weight-picker-modal) .modal-panel {
  width: min(92vw, 440px) !important;
  max-width: 440px !important;

  padding: 28px 30px 26px !important;

  border-radius: 24px !important;

  background: #ffffff !important;

  box-sizing: border-box;
}


#modal:has(.weight-picker-modal) {
  padding: 0;
}


@media (max-width: 600px) {

  #modal:has(.weight-picker-modal) .modal-panel {
    width: min(92vw, 380px) !important;

    padding:
      24px 22px
      22px !important;

    border-radius: 22px !important;
  }

}


/* =========================================================
   WEIGHT HISTORY PAGE
   ========================================================= */

.weight-history-page {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 6px 0 55px;
  color: #172b3a;
}


/* BACK */

.weight-history-back {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0 0 28px;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  background: transparent;
  color: #71808a;

  font: inherit;
  font-size: 12px;
  font-weight: 750;

  cursor: pointer;
}

.weight-history-back span {
  color: #102f46;
  font-size: 18px;
}


/* HEADER */

.weight-history-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;

  margin-bottom: 25px;
}

.weight-history-heading h1 {
  margin: 5px 0 7px;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
  font-weight: 780;
  letter-spacing: -.05em;
}

.weight-history-heading p {
  margin: 0;
  color: #71808a;
  font-size: 13px;
}


/* PERIOD SELECTOR */

.weight-period-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);

  padding: 4px;

  border: 1px solid #dfe3e1;
  border-radius: 999px;

  background: #f3f5f3;
}

.weight-period-button {
  appearance: none;
  border: 0;

  min-width: 90px;
  min-height: 39px;

  padding: 0 17px;

  border-radius: 999px;

  background: transparent;
  color: #71808a;

  font: inherit;
  font-size: 11px;
  font-weight: 750;

  cursor: pointer;
}

.weight-period-button.is-active {
  background: #102f46;
  color: #ffffff;

  box-shadow:
    0 5px 14px rgba(16, 47, 70, .12);
}


/* =========================================================
   GRAPH CARD
   ========================================================= */

.weight-history-chart-card {
  padding: 28px 30px 25px;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(16, 47, 70, .045);
}

.weight-history-chart-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.weight-history-chart-top h2 {
  margin: 5px 0 0;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 760;
  letter-spacing: -.035em;
}

.weight-chart-legend {
  color: #71808a;
  font-size: 11px;
  font-weight: 700;
}

.weight-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.weight-legend-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: #102f46;
}


/* CHART AREA */

.weight-history-chart {
  position: relative;

  width: 100%;
  height: 330px;

  margin-top: 25px;

  border-radius: 16px;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 65px,
      #edf0ee 66px
    );

  overflow: hidden;
}

.weight-chart-empty {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #929da3;

  font-size: 12px;
}


/* =========================================================
   RECORDS
   ========================================================= */

.weight-history-records {
  margin-top: 20px;

  padding: 27px 30px 10px;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(16, 47, 70, .04);
}

.weight-history-records-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 24px;
}

.weight-history-records-head h2 {
  margin: 5px 0 0;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.035em;
}

.weight-record-count {
  padding: 7px 11px;

  border-radius: 999px;

  background: #eef2ef;
  color: #71808a;

  font-size: 10px;
  font-weight: 800;
}


/* COLUMNS */

.weight-history-column-headings,
.weight-history-row {
  display: grid;

  grid-template-columns:
    minmax(170px, 1.3fr)
    minmax(120px, .8fr)
    minmax(120px, .8fr)
    minmax(140px, .8fr);

  gap: 20px;

  align-items: center;
}

.weight-history-column-headings {
  padding: 0 16px 10px;

  color: #929da3;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.weight-history-row {
  min-height: 78px;

  padding: 14px 16px;

  border-top: 1px solid #edf0ee;
}

.weight-history-date,
.weight-history-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weight-history-date strong,
.weight-history-value strong {
  color: #172b3a;
  font-size: 13px;
  font-weight: 750;
}

.weight-history-date span,
.weight-history-value span {
  color: #929da3;
  font-size: 10px;
}


/* CHANGE */

.weight-history-change {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weight-history-change > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.weight-history-change > div > span {
  color: #929da3;
  font-size: 10px;
}

.weight-history-change strong {
  color: #71808a;
  font-size: 12px;
}

.weight-change-arrow {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 16px;
  font-weight: 800;
}

.weight-history-change.down
.weight-change-arrow {
  background: rgba(143, 166, 154, .14);
  color: #647f71;
}

.weight-history-change.up
.weight-change-arrow {
  background: rgba(16, 47, 70, .09);
  color: #102f46;
}

.weight-history-change.same
.weight-change-arrow {
  background: #f1f3f2;
  color: #929da3;
}


/* EMPTY */

.weight-history-empty {
  padding: 55px 20px;

  border-top: 1px solid #edf0ee;

  text-align: center;

  color: #929da3;
  font-size: 12px;
}


/* =========================================================
   WEIGHT HISTORY — MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .weight-history-page {
    padding-bottom: 35px;
  }


  /* BACK BUTTON */

  .weight-history-back {
    margin-bottom: 20px;
  }


  /* HEADING */

  .weight-history-heading {
    display: block;
  }

  .weight-history-heading h1 {
    font-size: 32px;
  }


/* =========================================
   WEIGHT RANGE — MOBILE
   Outside card + right aligned
   ========================================= */

.weight-history-new-top {
  position: relative;

  /* Creates dedicated space below the back arrow */
  padding-bottom: 58px;

  margin-bottom: 0;
}


/* =========================================
   BACK BUTTON
   ========================================= */

.weight-history-back {
  margin-bottom: 0;
}


/* =========================================
   2W / 1M / 3M / 6M / 1Y
   ========================================= */

.weight-history-range-tabs {
  position: absolute;

  right: 0;
  bottom: 12px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: auto;

  gap: 7px;

  margin: 0;

  z-index: 2;
}


/* =========================================
   INDIVIDUAL RANGE BUTTON
   ========================================= */

.weight-history-range-tab {
  flex: 0 0 auto;

  width: 38px;
  min-width: 38px;
  height: 32px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================
   GRAPH LAYOUT
   ========================================= */

.weight-history-new-layout {
  margin-top: 0;
}


  /* =========================================
     CARDS
     ========================================= */

  .weight-history-chart-card,
  .weight-history-records {
    padding-left: 18px;
    padding-right: 18px;

    border-radius: 18px;
  }


  /* GRAPH */

  .weight-history-chart {
    height: 260px;
  }


  /* =========================================
     RECORDS
     ========================================= */

  .weight-history-column-headings {
    display: none;
  }


  /*
   * Date = full first row.
   *
   * Previous / New Weight / Change
   * = three columns underneath.
   */

  .weight-history-row {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    column-gap: 10px;
    row-gap: 14px;

    padding:
      18px
      4px;
  }


  /* DATE */

  .weight-history-date {
    grid-column:
      1 / -1;

    padding-bottom: 10px;

    border-bottom:
      1px solid #edf0ee;
  }


  /* PREVIOUS + NEW WEIGHT */

  .weight-history-value {
    min-width: 0;
  }


  /* CHANGE */

  .weight-history-change {
    min-width: 0;

    justify-content: flex-start;

    gap: 7px;
  }


  .weight-change-arrow {
    flex:
      0
      0
      30px;

    width: 30px;
    height: 30px;
  }


  /* SMALLER TEXT SO ALL 3 COLUMNS FIT */

  .weight-history-value span,
  .weight-history-change span {
    font-size: 9px;
  }

  .weight-history-value strong,
  .weight-history-change strong {
    font-size: 11px;
  }

}


/* =========================================================
   REAL WEIGHT HISTORY CHART
   ========================================================= */

.weight-history-chart {
  position: relative;

  width: 100%;
  height: 330px;

  margin-top: 24px;

  overflow: hidden;

  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      #fbfcfb 0%,
      #ffffff 100%
    );
}


.weight-history-svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}


.weight-chart-grid-line {
  stroke: #e7ebe8;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


.weight-chart-axis-label,
.weight-chart-date-label {
  fill: #929da3;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
}


.weight-chart-line {
  fill: none;

  stroke: #102f46;
  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


.weight-chart-area {
  pointer-events: none;
}


.weight-chart-dot {
  fill: #8fa69a;

  stroke: #ffffff;
  stroke-width: 3;

  vector-effect: non-scaling-stroke;

  transition:
    r .18s ease,
    fill .18s ease;
}


.weight-chart-point:hover
.weight-chart-dot {
  r: 8;
  fill: #102f46;
}


/* =========================================================
   WEIGHT RECORDS — XCULPTED COLOR SYSTEM
   ========================================================= */

yy


/* HEADER */

.weight-history-records-head {
  margin:
    -27px
    -30px
    0;

  padding:
    25px
    30px
    22px;

  background: #102f46;
}


.weight-history-records-head
.eyebrow {
  color: #aebfb6;
}


.weight-history-records-head h2 {
  color: #ffffff;
}


.weight-history-records-head
.weight-record-count {
  background:
    rgba(255, 255, 255, .12);

  color: #ffffff;
}


/* COLUMN HEADER */

.weight-history-column-headings {
  margin:
    0
    -30px;

  padding:
    13px
    46px;

  background: #eef2ef;

  color: #64776d;

  border-bottom:
    1px solid #dfe5e1;
}


/* RECORD ROW */

.weight-history-row {
  position: relative;

  margin:
    0
    -30px;

  padding:
    17px
    46px;

  border-top: 0;
  border-bottom:
    1px solid #e7ebe8;

  background: #ffffff;

  transition:
    background .18s ease;
}


.weight-history-row:nth-child(even) {
  background: rgba(141, 169, 157, 0.08);
}


/* HOVER — LIGHT SAGE */

@media (hover: hover) {

  .weight-history-row:hover,
  .weight-history-row:nth-child(even):hover {
    background: rgba(141, 169, 157, 0.18);
  }

}


/* DATE */

.weight-history-date strong {
  color: #102f46;
}


.weight-history-date span {
  color: #8a979d;
}


/* VALUES */

.weight-history-value span {
  color: #8a979d;
}


.weight-history-value strong {
  color: #172b3a;
}


/* WEIGHT CHANGE — LOSS */

.weight-history-change.down
.weight-change-arrow {
  background:
    rgba(143, 166, 154, .18);

  color: #5f7c6c;
}


.weight-history-change.down strong {
  color: #5f7c6c;
}


/* WEIGHT CHANGE — GAIN */

.weight-history-change.up
.weight-change-arrow {
  background:
    rgba(16, 47, 70, .10);

  color: #102f46;
}


.weight-history-change.up strong {
  color: #102f46;
}


/* NO CHANGE / START */

.weight-history-change.same
.weight-change-arrow {
  background: #eef1ef;
  color: #71808a;
}


/* MOBILE */

@media (max-width: 760px) {

  .weight-history-records-head {
    margin:
      -27px
      -18px
      0;

    padding:
      22px
      18px;
  }


  .weight-history-row {
    margin:
      0
      -18px;

    padding:
      18px;
  }

}


.weight-record-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weight-record-period {
  color: rgba(255, 255, 255, .62);

  font-size: 10px;
  font-weight: 650;
}

@media (max-width: 600px) {

  .weight-record-period {
    display: none;
  }

}

/* =========================================================
   WEIGHT PICKER — WIDER CONTENT
   ========================================================= */

.weight-picker-modal {
  width: 100%;
  max-width: none;
}


/* UNIT TOGGLE */

.weight-picker-modal
.weight-unit-toggle {
  width: 100%;
  max-width: none;

  margin-left: 0;
  margin-right: 0;
}


/* PICKER */

.weight-picker-modal
.weight-wheel {
  width: 100%;
  max-width: none;

  height: 235px;

  margin-left: 0;
  margin-right: 0;
}


/* CENTER NUMBER AREA */

.weight-picker-modal
.weight-wheel-column {
  width: 160px;
}


/* SELECTION LINES */

.weight-picker-modal
.weight-wheel-selection {
  left: 45px;
  right: 45px;
}


/* UNIT BESIDE NUMBER */

.weight-picker-modal
.weight-wheel-unit {
  left: calc(50% + 53px);
}


/* BUTTON AREA */

.weight-picker-modal
.weight-picker-actions {
  width: 100%;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.35fr);

  gap: 10px;
}


/* BUTTONS USE THEIR FULL COLUMN */

.weight-picker-modal
.weight-picker-actions .button {
  width: 100%;
}


/* MOBILE */

@media (max-width: 600px) {

  .weight-picker-modal {
    width: 100%;
    max-width: none;
  }


  .weight-picker-modal
  .weight-unit-toggle {
    width: 100%;
  }


  .weight-picker-modal
  .weight-wheel {
    width: 100%;
  }


  .weight-picker-modal
  .weight-wheel-selection {
    left: 24px;
    right: 24px;
  }

}


/* =========================================================
   PROGRESS PICTURE TRACKING — DASHBOARD CARD
   ========================================================= */

.progress-picture-preview-card {
  width: 100%;

  padding: 26px;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(16, 47, 70, .045);
}


.progress-picture-preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}


.progress-picture-preview-head h2 {
  margin: 5px 0 0;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 760;
  letter-spacing: -.035em;
}


.progress-picture-view-more {
  appearance: none;
  border: 0;
  padding: 0;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: transparent;
  color: #102f46;

  font: inherit;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}


.progress-picture-latest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: 22px;
  padding-top: 16px;

  border-top: 1px solid #edf0ee;
}


.progress-picture-latest-label {
  color: #172b3a;
  font-size: 12px;
  font-weight: 750;
}


.progress-picture-latest-date {
  color: #929da3;
  font-size: 10px;
  font-weight: 650;
}


.progress-picture-preview-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-top: 14px;
}


.progress-picture-preview-item {
  appearance: none;

  min-width: 0;

  padding: 0;

  border: 0;
  background: transparent;

  text-align: left;

  cursor: pointer;
}


.progress-picture-preview-image {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 5;

  overflow: hidden;

  border: 1px solid #dfe3e1;
  border-radius: 14px;

  background: #f4f6f4;
}


.progress-picture-preview-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.progress-picture-placeholder {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #9aa7a0;
}


.progress-picture-placeholder svg {
  width: 28px;
  height: 28px;
}


.progress-picture-preview-item > span {
  display: block;

  margin-top: 8px;

  color: #172b3a;

  font-size: 10px;
  font-weight: 750;
  text-align: center;
}


@media (max-width: 760px) {

  .progress-picture-preview-card {
    padding: 20px;
  }

  .progress-picture-preview-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}

/* =========================================================
   PROGRESS PICTURES — FULL SCREEN
   ========================================================= */

.progress-pictures-page {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;

  padding: 6px 0 55px;

  color: #172b3a;
}


/* BACK */

.progress-pictures-back {
  appearance: none;

  margin: 0 0 27px;
  padding: 0;

  border: 0;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  background: transparent;
  color: #71808a;

  font: inherit;
  font-size: 12px;
  font-weight: 750;

  cursor: pointer;
}


.progress-pictures-back span {
  color: #102f46;
  font-size: 18px;
}


/* HEADER */

.progress-pictures-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 25px;

  margin-bottom: 26px;
}


.progress-pictures-heading h1 {
  margin: 5px 0 8px;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 4vw, 45px);
  line-height: 1;
  font-weight: 780;
  letter-spacing: -.05em;
}


.progress-pictures-heading p {
  max-width: 520px;

  margin: 0;

  color: #71808a;

  font-size: 13px;
  line-height: 1.55;
}


.progress-picture-history-button {
  appearance: none;

  min-height: 44px;

  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  border: 1px solid #dfe3e1;
  border-radius: 999px;

  background: #ffffff;
  color: #102f46;

  font: inherit;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}


/* ANGLE LIST */

.progress-picture-angle-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}


.progress-picture-angle {
  padding: 22px;

  border: 1px solid #dfe3e1;
  border-radius: 20px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(16, 47, 70, .04);
}


.progress-picture-angle-heading {
  margin-bottom: 16px;
}


.progress-picture-angle-heading h2 {
  margin: 4px 0 0;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -.03em;
}


/* BEFORE / AFTER */

.progress-picture-comparison {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}


.progress-picture-stage {
  min-width: 0;

  text-align: center;
}


.progress-picture-upload {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 5;

  display: block;

  overflow: hidden;

  border: 1px dashed #cfd7d2;
  border-radius: 16px;

  background: #f7f9f7;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}


@media (hover: hover) {

  .progress-picture-upload:hover {
    border-color: #8fa69a;
    background: #f1f5f2;
  }

}


.progress-picture-file-input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}


.progress-picture-upload-empty {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 18px;

  color: #71808a;
}


.progress-picture-camera {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 11px;

  border-radius: 50%;

  background: #e9efeb;
  color: #102f46;
}


.progress-picture-camera svg {
  width: 21px;
  height: 21px;
}


.progress-picture-upload-empty strong {
  color: #102f46;

  font-size: 12px;
  font-weight: 800;
}


.progress-picture-upload-empty > span:last-child {
  margin-top: 4px;

  color: #929da3;

  font-size: 9px;
}


.progress-picture-upload-preview {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.progress-picture-upload-preview[hidden] {
  display: none;
}


.progress-picture-upload.has-photo
.progress-picture-upload-empty {
  display: none;
}


.progress-picture-add-button {
  position: absolute;

  right: 9px;
  bottom: 9px;

  z-index: 3;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #102f46;
  color: #ffffff;

  font-size: 17px;
  line-height: 1;

  box-shadow:
    0 4px 10px rgba(16, 47, 70, .18);
}


.progress-picture-stage-badge {
  display: inline-flex;

  margin-top: 9px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;
}


.progress-picture-stage-badge.before {
  background: #f1ebe3;
  color: #796856;
}


.progress-picture-stage-badge.after {
  background: #102f46;
  color: #ffffff;
}


/* SAVE BAR */

.progress-picture-save-bar {
  margin-top: 20px;

  padding: 20px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border-radius: 18px;

  background: #eef3f0;
}


.progress-picture-save-bar > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.progress-picture-save-bar strong {
  color: #102f46;

  font-size: 13px;
  font-weight: 800;
}


.progress-picture-save-bar > div > span {
  color: #71808a;

  font-size: 10px;
}


.progress-picture-save {
  min-width: 190px;
  min-height: 48px;

  border-radius: 999px;

  background: #102f46;
  color: #ffffff;
}


/* MOBILE */

@media (max-width: 760px) {

  .progress-pictures-heading {
    display: block;
  }

  .progress-picture-history-button {
    margin-top: 18px;
  }

  .progress-picture-angle-list {
    grid-template-columns: 1fr;
  }

  .progress-picture-save-bar {
    display: block;
  }

  .progress-picture-save {
    width: 100%;

    margin-top: 16px;
  }

}


@media (max-width: 430px) {

  .progress-picture-angle {
    padding: 16px;
  }

  .progress-picture-comparison {
    gap: 9px;
  }

}


/* =========================================================
   PROGRESS PICTURES — DATE
   ========================================================= */

.progress-picture-date-row {
  width: 100%;

  margin-bottom: 18px;
  padding: 18px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  box-sizing: border-box;

  border: 1px solid #dfe3e1;
  border-radius: 16px;

  background: #ffffff;
}


.progress-picture-date-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.progress-picture-date-row strong {
  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 750;
}


.progress-picture-date-input {
  min-width: 165px;
  height: 44px;

  padding: 0 13px;

  box-sizing: border-box;

  border: 1px solid #dfe3e1;
  border-radius: 11px;

  outline: none;

  background: #fbfbf9;
  color: #102f46;

  font: inherit;
  font-size: 12px;
  font-weight: 700;
}


.progress-picture-date-input:focus {
  border-color: #8fa69a;

  box-shadow:
    0 0 0 3px
    rgba(143, 166, 154, .13);
}


@media (max-width: 600px) {

  .progress-picture-date-row {
    align-items: stretch;
    flex-direction: column;
  }


  .progress-picture-date-input {
    width: 100%;
  }

}


//* =========================================================
   PROGRESS PICTURES — HISTORY + CHECK-IN
   ========================================================= */

.picture-history-page {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0 0 55px;

  box-sizing: border-box;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.picture-history-top {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 26px;
}


.picture-history-top .eyebrow {
  display: block;

  margin-top: 18px;
  margin-bottom: 6px;
}


.picture-history-top h1 {
  margin: 0 0 7px;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1;
  font-weight: 780;

  letter-spacing: -.05em;
}


.picture-history-top p {
  margin: 0;

  color: #71808a;

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   DESKTOP WORKSPACE — 60 / 40
   ========================================================= */

.progress-picture-workspace {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 3fr)
    minmax(320px, 2fr);

  gap: 18px;

  align-items: start;
}


/* =========================================================
   LEFT — PHOTO HISTORY
   ========================================================= */

.progress-picture-history-panel {
  min-width: 0;

  padding: 24px;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #ffffff;
}


.progress-picture-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;
}


.progress-picture-panel-heading h2 {
  margin: 6px 0 0;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 650;

  letter-spacing: -.04em;
}


/* =========================================================
   FRONT / SIDE / BACK HEADERS
   ========================================================= */

.progress-gallery-headings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  width: 100%;

  gap: 7px;

  margin: 0 0 10px;

  align-items: center;

  text-align: center;
  white-space: nowrap;

  font-size: 8px;
}

.progress-gallery-headings strong {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}


/* =========================================================
   PHOTO ROWS
   ========================================================= */

.progress-gallery-list {
  display: flex;
  flex-direction: column;

  gap: 18px;
}


.progress-gallery-row {
  display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}


.progress-gallery-item {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
}


.progress-gallery-photo {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 4 / 4;

  padding: 0;

  overflow: hidden;

  border: 1px solid #e1e5e2;
  border-radius: 14px;

  background: #f2f5f3;

  cursor: pointer;
}


.progress-gallery-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.progress-gallery-date {
  display: block;

  margin-top: 7px;

  color: #71808a;

  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;

  text-align: center;
}


.progress-gallery-placeholder {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #a7b2ac;
}


.progress-gallery-placeholder svg {
  width: 28px;
  height: 28px;
}


.progress-gallery-item.is-empty
.progress-gallery-photo {
  cursor: default;

  border-style: dashed;
}


/* =========================================================
   EMPTY HISTORY
   ========================================================= */

.progress-gallery-empty {
  min-height: 300px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 30px;

  border: 1px dashed #d7ded9;
  border-radius: 18px;

  background: #f8faf8;

  text-align: center;
}


.progress-gallery-empty strong {
  color: #102f46;

  font-size: 14px;
  font-weight: 800;
}


.progress-gallery-empty span {
  max-width: 320px;

  margin-top: 6px;

  color: #71808a;

  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   RIGHT — TODAY'S PHOTO CHECK-IN
   ========================================================= */

.progress-picture-checkin-panel {
  min-width: 0;

  padding: 24px;

  border: 1px solid #dfe3e1;
  border-radius: 22px;

  background: #fbfbf9;
}


.progress-picture-checkin-heading h2 {
  margin: 7px 0 7px;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 650;

  letter-spacing: -.04em;
}


.progress-picture-checkin-heading p {
  margin: 0;

  color: #71808a;

  font-size: 12px;
  line-height: 1.55;
}


/* DATE */

.history-progress-date {
  margin-top: 22px;
}


.history-progress-date label {
  display: block;

  margin-bottom: 7px;

  color: #71808a;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;

  letter-spacing: .08em;
  text-transform: uppercase;
}


.history-progress-date
.progress-picture-date-input {
  width: 100%;

  box-sizing: border-box;
}


/* =========================================================
   RIGHT UPLOAD CARDS
   ========================================================= */

.history-upload-list {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 20px;
}


.history-upload-position {
  min-width: 0;
}


.history-upload-label {
  display: block;

  margin-bottom: 7px;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}


.history-upload-box {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 4 / 5;

  overflow: hidden;

  border: 1px dashed #cfd8d3;
  border-radius: 14px;

  background: #ffffff;

  cursor: pointer;
}


.history-upload-box
.progress-picture-file-input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


.history-upload-box
.progress-picture-upload-empty {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 10px;

  text-align: center;
}


.history-upload-box
.progress-picture-camera {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 3px;

  border-radius: 50%;

  background: #eef3f0;

  color: #102f46;
}


.history-upload-box
.progress-picture-camera svg {
  width: 16px;
  height: 16px;
}


.history-upload-box
.progress-picture-upload-empty strong {
  color: #102f46;

  font-size: 10px;
  font-weight: 700;
}


.history-upload-box
.progress-picture-upload-empty > span:last-child {
  color: #8a9890;

  font-size: 8px;
  line-height: 1.35;
}


.history-upload-box
.progress-picture-upload-preview {
  position: absolute;
  inset: 0;

  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.history-upload-box
.progress-picture-upload-preview[hidden] {
  display: none;
}


/* SAVE */

.history-save-progress {
  width: 100%;

  margin-top: 20px;
}


/* =========================================================
   MOBILE ADD BUTTON
   Hidden on desktop
   ========================================================= */

.progress-gallery-mobile-add {
  display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .progress-picture-workspace {
    grid-template-columns:
      minmax(0, 1.45fr)
      minmax(300px, 1fr);
  }


  .progress-picture-history-panel,
  .progress-picture-checkin-panel {
    padding: 20px;
  }


  .history-upload-list {
    grid-template-columns: 1fr;
  }


  .history-upload-box {
    aspect-ratio: 16 / 7;
  }

}


/* =========================================================
   MOBILE
   Gallery only — exactly 3 columns
   ========================================================= */

@media (max-width: 767px) {

  .picture-history-page {
    width: 100%;
    max-width: none;

    padding-bottom: 34px;
  }


  .picture-history-top {
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 20px;
  }


  .picture-history-top .eyebrow {
    margin-top: 14px;
  }


  .picture-history-top h1 {
    font-size: 29px;
  }


  .picture-history-top p {
    max-width: 290px;

    font-size: 11px;
  }


  /* ROUND + BUTTON */

  .progress-gallery-mobile-add {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 30px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #102f46;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 400;

    cursor: pointer;
  }


  /* ONLY SHOW HISTORY */

  .progress-picture-workspace {
    display: block;
  }


  .progress-picture-checkin-panel {
    display: none;
  }


  .progress-picture-history-panel {
    width: 100%;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
  }


  .progress-picture-panel-heading {
    display: none;
  }


  /* THREE COLUMNS */

.progress-gallery-headings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  width: 100%;

  gap: 7px;

  margin: 0 0 10px;

  align-items: center;

  text-align: center;
  white-space: nowrap;

  font-size: 8px;
}


  .progress-gallery-list {
    gap: 14px;
  }


  .progress-gallery-row {
grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 7px;
  }


  .progress-gallery-photo {
    aspect-ratio: 3 / 4;

    border-radius: 7px;
  }


  .progress-gallery-date {
    margin-top: 5px;

    font-size: 8px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .picture-history-top h1 {
    font-size: 26px;
  }


  .picture-history-top p {
    max-width: 245px;
  }


  .progress-gallery-mobile-add {
    flex-basis: 38px;

    width: 38px;
    height: 38px;

    font-size: 21px;
  }


  .progress-gallery-row,
  .progress-gallery-headings {
    gap: 5px;
  }


  .progress-gallery-date {
    font-size: 7px;
  }

}
/* =========================================================
   XCULPTED — PROGRAMS DISCOVERY
   DESKTOP: 4 COLUMNS
   MOBILE: SWIPE GALLERY
   ========================================================= */

.programs-discovery-section {
  width: 100%;
  min-width: 0;
  margin-top: 34px;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.programs-discovery-heading {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.programs-discovery-heading .eyebrow {
  display: block;

  margin-bottom: 6px;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;

  letter-spacing: .14em;
  text-transform: uppercase;

  color: #8fa69a;
}


.programs-discovery-heading h2 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 700;

  letter-spacing: -.035em;

  color: #102f46;
}


/* =========================================================
   VIEW ALL
   ========================================================= */

.programs-view-all {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;

  color: #102f46;

  cursor: pointer;

  transition:
    gap .2s ease,
    opacity .2s ease;
}


.programs-view-all:hover {
  gap: 11px;
  opacity: .78;
}


.programs-view-all span {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}


/* =========================================================
   DESKTOP — FOUR COLUMNS
   ========================================================= */

.programs-card-grid {
  width: 100%;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}



/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.program-thumbnail-card:focus-visible,
.programs-view-all:focus-visible {
  outline: 2px solid #8fa69a;
  outline-offset: 3px;
}


/* =========================================================
   SMALLER DESKTOP / TABLET
   Keep four columns until tablet size
   ========================================================= */

@media (max-width: 1100px) {

  .programs-card-grid {
    gap: 10px;
  }


  .program-thumbnail-content {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }


  .program-thumbnail-content h3 {
    font-size: 16px;
  }


  .program-thumbnail-meta {
    padding-left: 9px;
    padding-right: 9px;
  }


  .program-thumbnail-meta span {
    font-size: 8px;
  }

}


/* =========================================================
   PROGRAMS DISCOVERY — MOBILE HEADER
   ========================================================= */

@media (max-width: 767px) {

  .programs-discovery-section {
    margin-top: 28px;
  }


  .programs-discovery-heading {
    align-items: flex-end;

    gap: 12px;

    margin-bottom: 15px;
  }


  .programs-discovery-heading .eyebrow {
    margin-bottom: 5px;

    font-size: 8px;
  }


  .programs-discovery-heading h2 {
    font-size: 23px;
  }


  .programs-view-all {
    font-size: 10px;
  }

}

/* =========================================================
   XCULPTED — PROGRAM CARDS
   MATCH STRENGTH & CONTROL HERO
   ========================================================= */


/* =========================================================
   CARD
   ========================================================= */

.program-thumbnail-card {
  position: relative;

  width: 100%;
  min-width: 0;

  aspect-ratio: .76;

  overflow: hidden;

  border: 0;
  border-radius: 20px;

  background: #102f46;

  cursor: pointer;

  isolation: isolate;

  box-shadow:
    0 10px 30px rgba(16, 47, 70, .08);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.program-thumbnail-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 14px 34px rgba(16, 47, 70, .12);
}


/* =========================================================
   IMAGE
   ========================================================= */

.program-thumbnail-image {
  position: absolute;
  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .4s ease;
}


.program-thumbnail-card:hover
.program-thumbnail-image {
  transform: scale(1.02);
}


/* =========================================================
   NAVY IMAGE FADE
   Same visual treatment as main workout hero
   ========================================================= */

.program-thumbnail-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(7, 29, 43, .01) 15%,
      rgba(7, 29, 43, .05) 38%,
      rgba(7, 29, 43, .22) 58%,
      rgba(7, 29, 43, .76) 78%,
      rgba(7, 29, 43, .98) 100%
    );
}


/* =========================================================
   12 WEEKS
   ========================================================= */

.program-duration-badge {
  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  min-height: 32px;

  padding: 0 14px;

  border: 0;
  border-radius: 999px;

  background: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;

  letter-spacing: .08em;
  text-transform: uppercase;

  color: #102f46;

  box-shadow: none;
}


/* =========================================================
   LOCK
   ========================================================= */

.program-lock {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #ffffff;
  color: #102f46;

  box-shadow:
    0 8px 24px rgba(11, 37, 55, .16);
}


.program-lock svg {
  display: block;

  width: 19px;
  height: 19px;
}


/* =========================================================
   BOTTOM CONTENT
   ========================================================= */

.program-thumbnail-content {
  position: absolute;

  left: 22px;
  right: 22px;
  bottom: 22px;

  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: #ffffff;
}


/* =========================================================
   TITLE
   Larger + more line spacing
   ========================================================= */

.program-thumbnail-content h3 {
  width: 100%;
  max-width: 360px;

  margin: 0 0 22px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(
    24px,
    1.55vw,
    30px
  );

  line-height: 1.20;

  font-weight: 500;

  letter-spacing: -.045em;

  color: #ffffff;
}


.program-thumbnail-content h3 strong {
  display: inline;

  font-family: "Manrope", sans-serif;

  font-weight: 750;

  color: #ffffff;
}


/* =========================================================
   INFORMATION PILL
   NOT FULL WIDTH
   Styled like Start Workout
   ========================================================= */

.program-thumbnail-meta {
  width: auto;
  max-width: 100%;

  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  gap: 24px;

  padding: 0 22px;

  box-sizing: border-box;

  border: 0;
  border-radius: 999px;

  background: #ffffff;

  color: #102f46;

  box-shadow: none;
}


/* =========================================================
   META TEXT
   ========================================================= */

.program-thumbnail-meta span {
  display: inline-flex;
  align-items: center;

  min-width: 0;

  font-family: "Manrope", sans-serif;

  font-size: 12px;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: 0;

  color: #102f46;

  white-space: nowrap;
}


/* REMOVE OLD DIVIDER */

.program-thumbnail-meta span + span {
  padding-left: 0;
}


.program-thumbnail-meta span + span::before {
  display: none;
}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

  .program-thumbnail-content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }


  .program-thumbnail-content h3 {
    margin-bottom: 18px;

    font-size: 22px;
    line-height: 1.20;
  }


  .program-thumbnail-meta {
    min-height: 46px;

    gap: 16px;

    padding: 0 17px;
  }


  .program-thumbnail-meta span {
    font-size: 10px;
  }

}


/* =========================================================
   MOBILE
   HORIZONTAL SWIPE GALLERY
   ========================================================= */

@media (max-width: 767px) {

  .programs-card-grid {
    display: flex !important;

    width: auto !important;

    grid-template-columns: none !important;

    gap: 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding:
      0 30px 8px 0 !important;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }


  .programs-card-grid::-webkit-scrollbar {
    display: none;
  }


  .program-thumbnail-card {
    flex:
      0 0
      min(84vw, 340px) !important;

    width:
      min(84vw, 340px) !important;

    min-width:
      min(84vw, 340px) !important;

    aspect-ratio: .76;

    scroll-snap-align: start;

    border-radius: 20px;
  }


  /* CONTENT */

  .program-thumbnail-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }


  /* TITLE */

  .program-thumbnail-content h3 {
    max-width: 290px;

    margin-bottom: 20px;

    font-size: 25px;
    line-height: 1.20;
  }


  /* INFO BUTTON */

  .program-thumbnail-meta {
    width: auto;

    min-height: 48px;

    gap: 18px;

    padding: 0 18px;
  }


  .program-thumbnail-meta span {
    font-size: 10px;
  }


  /* BADGE */

  .program-duration-badge {
    top: 16px;
    left: 16px;

    min-height: 30px;

    padding: 0 12px;

    font-size: 9px;
  }


  /* LOCK */

  .program-lock {
    width: 52px;
    height: 52px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
    
      .programs-discovery-heading h2 {
    font-size: 21px;
  }

  .program-thumbnail-card {
    flex-basis: 84vw !important;

    width: 84vw !important;
    min-width: 84vw !important;
  }


  .program-thumbnail-content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }


  .program-thumbnail-content h3 {
    margin-bottom: 18px;

    font-size: 23px;
    line-height: 1.22;
  }


  .program-thumbnail-meta {
    min-height: 46px;

    gap: 14px;

    padding: 0 16px;
  }


  .program-thumbnail-meta span {
    font-size: 9px;
  }

}


/* =========================================
   DAILY CHECK-IN — CLICKABLE TODAY
   ========================================= */

button.daily-checkin-status {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

button.daily-checkin-status:hover {
  opacity: 0.82;
}

button.daily-checkin-status:focus-visible {
  outline: 2px solid #102f46;
  outline-offset: 3px;
}



/* =========================================================
   DAILY CHECK-IN — HISTORY PAGE
   ========================================================= */

.checkin-history-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 48px;
}


/* =========================================================
   TODAY'S SCORE CARD
   ========================================================= */

.checkin-score-card {
  margin-top: 24px;
  padding: 30px;
  border: 1px solid #dfe3e1;
  border-radius: 24px;
  background: #fbfbf9;
}

.checkin-score-main {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 0;

  text-align: center;
}

.checkin-score-main > div:first-child {
  width: 100%;
  min-width: 0;
  max-width: 760px;

  margin: 0 auto;
}

.checkin-score-main h2 {
  margin: 8px 0 10px;

  font-family: "Manrope", sans-serif;
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.04em;

  color: #102f46;

  text-align: center;
}


.checkin-score-card .eyebrow {
  color: #8fa69a;
}

.checkin-score-main p {
  max-width: 680px;

  margin: 0 auto;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1.7;

  color: #71808a;

  text-align: center;
}


/* =========================================================
   SCORE CIRCLE
   ========================================================= */

.checkin-score-circle {
  width: 128px;
  height: 128px;

  flex: 0 0 128px;

  margin: 24px auto 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at center,
      #fbfbf9 61%,
      transparent 62%
    ),
    conic-gradient(
      #8fa69a 0deg,
      #8fa69a calc(var(--checkin-score, 0) * 3.6deg),
      #dfe3e1 calc(var(--checkin-score, 0) * 3.6deg),
      #dfe3e1 360deg
    );
}

.checkin-score-circle strong {
  font-family: "Manrope", sans-serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: #102f46;
}

.checkin-score-circle span {
  margin-left: 3px;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #71808a;
}


/* =========================================================
   TODAY'S METRICS
   ========================================================= */

.checkin-score-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;

  margin-top: 28px;
  padding-top: 22px;

  border-top: 1px solid #dfe3e1;
}

.checkin-score-metrics > div {
  min-width: 0;
  padding: 16px 18px;

  border: 1px solid #e4e7e5;
  border-radius: 16px;

  background: #ffffff;
}

.checkin-score-metrics span {
  display: block;

  margin-bottom: 6px;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  color: #71808a;
}

.checkin-score-metrics strong {
  display: block;

  font-family: "Manrope", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.035em;

  color: #102f46;
}


/* =========================================================
   HISTORY GRAPH
   ========================================================= */

.checkin-history-page .weight-history-chart-card {
  margin-top: 20px;
}

.checkin-history-chart {
  width: 100%;
  min-height: 300px;
  margin-top: 20px;
}

.checkin-history-chart .weight-history-svg {
  display: block;
  width: 100%;
  height: 300px;
}


/* =========================================================
   DAILY RECORDS
   ========================================================= */

.checkin-history-records-card {
  margin-top: 20px;
  padding: 28px;

  border: 1px solid #dfe3e1;
  border-radius: 24px;

  background: #fbfbf9;
}

.checkin-history-records-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 22px;
}

.checkin-history-records-heading h2 {
  margin: 7px 0 0;

  font-family: "Manrope", sans-serif;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.04em;

  color: #172b3a;
}

.checkin-history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;
  padding: 0 13px;

  border-radius: 999px;

  background: #eef1ef;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;

  color: #102f46;
}


/* =========================================================
   INDIVIDUAL HISTORY RECORD
   ========================================================= */

.checkin-history-record-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkin-history-record {
  padding: 20px;

  border: 0;
  border-radius: 18px;

  background: #ffffff;

  transition:
    background 0.18s ease;
}

.checkin-history-record-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 16px;
}

.checkin-history-record-date span {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;

  color: #172b3a;
}

.checkin-history-record-date strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;
  padding: 0 12px;

  border-radius: 999px;

  background: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;

  color: #ffffff;
}

.checkin-history-record-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.checkin-history-record-metrics > div {
  min-width: 0;
}

.checkin-history-record-metrics span {
  display: block;

  margin-bottom: 4px;

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;

  color: #71808a;
}

.checkin-history-record-metrics strong {
  display: block;

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;

  color: #172b3a;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .checkin-history-page {
    padding-bottom: 32px;
  }

  .checkin-score-card {
    margin-top: 18px;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .checkin-score-main {
    align-items: flex-start;
    gap: 18px;
  }

  .checkin-score-main h2 {
    font-size: 23px;
  }

  .checkin-score-circle {
    width: 94px;
    height: 94px;
    flex-basis: 94px;

    padding-top: 28px;
  }

  .checkin-score-circle strong {
    font-size: 25px;
  }

  .checkin-score-circle span {
    font-size: 9px;
  }

  .checkin-score-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 9px;
  }

  .checkin-score-metrics > div {
    padding: 14px;
  }

  .checkin-history-chart {
    overflow-x: auto;
  }

  .checkin-history-chart .weight-history-svg {
    min-width: 600px;
  }

  .checkin-history-records-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

/* DAILY RECORD — 4 METRICS IN ONE ROW */

.checkin-history-record-metrics {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  column-gap: 8px;
  row-gap: 0;
}

.checkin-history-record-metrics > div {
  min-width: 0;
}

.checkin-history-record-metrics span {
  font-size: 7px;
  letter-spacing: 0.05em;

  white-space: nowrap;
}

.checkin-history-record-metrics strong {
  font-size: 12px;

  white-space: nowrap;
}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .checkin-score-main {
    flex-direction: column;
  }

  .checkin-score-circle {
    align-self: flex-start;
  }

  .checkin-history-records-heading {
    align-items: center;
  }

}



/* =========================================================
   TODAY'S METRICS
   Keep clean + lightly colored
   ========================================================= */



/* Sleep */

.checkin-score-metrics > div:nth-child(1) {
  background: #fbfbf9;
  border-color: #8fa69a;
}


/* Energy */

.checkin-score-metrics > div:nth-child(2) {
  background: #fbfbf9;
  border-color: #dfe3e1;
}


/* Water */

.checkin-score-metrics > div:nth-child(3) {
  background: #fbfbf9;
  border-color: #8fa69a;
}


/* Steps */

.checkin-score-metrics > div:nth-child(4) {
  background: #fbfbf9;
  border-color: #dfe3e1;
}


.checkin-score-metrics strong {
  color: #102f46;
}


/* =========================================================
   DAILY RECORDS
   Outer section stays light
   ========================================================= */

.checkin-history-records-card {
  background: #fbfbf9;
  border-color: #dfe3e1;
}


.checkin-history-records-card .eyebrow {
  color: #8fa69a;
}


.checkin-history-records-heading h2 {
  color: #102f46;
}


/* Record count */

.checkin-history-count {
  background: #dfe3e1;
  color: #102f46;
}

/* =========================================================
   DAILY RECORDS — ALTERNATING ROWS
   ========================================================= */

/* 1st, 3rd, 5th... = WHITE */

.checkin-history-record:nth-child(odd) {
  background: #ffffff;
}


/* 2nd, 4th, 6th... = LIGHT SAGE */

.checkin-history-record:nth-child(even) {
  background: rgba(141, 169, 157, 0.08);
}


/* HOVER — LIGHT SAGE */

@media (hover: hover) {

  .checkin-history-record:hover {
    background: rgba(141, 169, 157, 0.14);
  }

}

/* =========================================================
   HISTORY SCORE BADGE
   Change current navy badge
   ========================================================= */

.checkin-history-record-date strong {
  background: #8fa69a;
  color: #fbfbf9;

  min-height: 34px;
  padding: 0 14px;
}


/* Second record gets navy badge */

.checkin-history-record:nth-child(3n + 2)
.checkin-history-record-date strong {
  background: #102f46;
  color: #fbfbf9;
}


/* Third record gets deep navy badge */

.checkin-history-record:nth-child(3n + 3)
.checkin-history-record-date strong {
  background: #0b2537;
  color: #fbfbf9;
}


/* Record text */

.checkin-history-record-date span {
  color: #102f46;
}


.checkin-history-record-metrics span {
  color: #71808a;
}


.checkin-history-record-metrics strong {
  color: #102f46;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .checkin-score-main {
    align-items: center;
    text-align: center;
  }


  .checkin-score-circle {
    width: 108px;
    height: 108px;
    flex-basis: 108px;

    margin: 20px auto 2px;

    padding: 0;
  }


  .checkin-score-main h2,
  .checkin-score-main p {
    text-align: center;
  }

}

/* =========================================================
   DAILY RECORDS — MOBILE HEADER CONTROLS
   ========================================================= */

.checkin-history-records-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  column-gap: 12px;
  row-gap: 10px;

  margin-bottom: 18px;
}


/* Keep HISTORY + Daily Records on left */

.checkin-history-records-heading > div:first-child {
  min-width: 0;
}


/* RECORD COUNT */

.checkin-history-count {
  justify-self: end;

  min-height: 28px;

  padding:
    0
    10px;

  font-size: 9px;
}


@media (max-width: 480px) {

  .checkin-score-main {
    flex-direction: column;
    align-items: center;
  }


  .checkin-score-circle {
    align-self: center;
  }

}


/* =========================================================
   MOBILE HOME — THIS WEEK CARD
   ========================================================= */

@media (max-width: 720px) {

  /* CARD */
  .weekly-consistency-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;

    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 16px !important;

    align-items: center !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }


  /* =====================================================
     LEFT — SMALLER PROGRESS RING
     ===================================================== */

  .weekly-ring-column {
    width: 92px !important;
    min-width: 92px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  .weekly-goal-ring {
    width: 88px !important;
    height: 88px !important;

    min-width: 88px !important;
    min-height: 88px !important;

    flex: 0 0 88px !important;
  }


  .weekly-goal-ring-inner {
    width: 66px !important;
    height: 66px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }


  .weekly-goal-icon {
    width: 19px !important;
    height: 19px !important;
    margin-bottom: 3px !important;
  }


  .weekly-goal-icon svg {
    width: 19px !important;
    height: 19px !important;
  }


  .weekly-goal-ring strong {
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }


  /* =====================================================
     RIGHT SIDE
     ===================================================== */

  .weekly-consistency-main {
    width: 100% !important;
    min-width: 0 !important;
  }


  /* TITLE + BADGE */

  .weekly-consistency-header {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;
    margin: 0 0 7px !important;
  }


  .weekly-consistency-title {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 5px !important;
  }


  .weekly-mini-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }


  .weekly-mini-icon svg {
    width: 16px !important;
    height: 16px !important;
  }


  .weekly-consistency-title strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }


  /* KEEP BADGE INSIDE CARD */

  .weekly-goal-badge {
    position: static !important;

    width: auto !important;
    max-width: 100% !important;

    flex: 0 0 auto !important;

    padding: 6px 8px !important;
    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    transform: none !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
  }


  .weekly-goal-badge svg {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
  }


  /* WORKOUT COUNT */

  .weekly-workout-summary {
    margin: 0 0 10px !important;

    font-size: 10px !important;
    line-height: 1.3 !important;
  }


  /* =====================================================
     DAYS — ALL 7 STAY IN ONE LINE
     ===================================================== */

  .weekly-day-tracker {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;

    gap: 2px !important;

    margin: 0 !important;
  }


  .weekly-day-item {
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 4px !important;
  }


  .weekly-day-name {
    font-size: 7px !important;
    line-height: 1 !important;
  }


  .weekly-day-circle {
    width: 13px !important;
    height: 13px !important;

    min-width: 13px !important;
    min-height: 13px !important;
  }


  .weekly-day-circle svg {
    width: 9px !important;
    height: 9px !important;
  }


  /* LINE UNDER DAY CIRCLES */

  .weekly-tracker-line {
    width: calc(100% - 10px) !important;
    height: 2px !important;

    margin: -8px auto 0 !important;
  }


  .weekly-tracker-line > span {
    height: 2px !important;
  }


  /* MESSAGE */

  .weekly-consistency-message {
    margin: 12px 0 0 !important;

    font-size: 10px !important;
    line-height: 1.35 !important;
  }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .weekly-consistency-card {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 15px !important;
  }


  .weekly-ring-column {
    width: 78px !important;
    min-width: 78px !important;
  }


  .weekly-goal-ring {
    width: 76px !important;
    height: 76px !important;

    min-width: 76px !important;
    min-height: 76px !important;

    flex-basis: 76px !important;
  }


  .weekly-goal-ring-inner {
    width: 57px !important;
    height: 57px !important;
  }


  .weekly-goal-icon,
  .weekly-goal-icon svg {
    width: 16px !important;
    height: 16px !important;
  }


  .weekly-goal-ring strong {
    font-size: 10px !important;
  }


  .weekly-consistency-title strong {
    font-size: 14px !important;
  }


  .weekly-goal-badge {
    padding: 5px 6px !important;
    font-size: 8px !important;
  }


  .weekly-goal-badge svg {
    width: 9px !important;
    height: 9px !important;
    flex-basis: 9px !important;
  }


  .weekly-day-circle {
    width: 11px !important;
    height: 11px !important;

    min-width: 11px !important;
    min-height: 11px !important;
  }

}



/* =========================================================
   MOBILE HOME — DAILY CHECK-IN
   FORCE ALL 4 ITEMS INTO ONE ROW
   ========================================================= */

@media (max-width: 720px) {

  /* =====================================================
     DAILY CHECK-IN CARD
     ===================================================== */

  .daily-checkin-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }


  /* =====================================================
     BEFORE CHECK-IN
     SLEEP / ENERGY / WATER / STEPS
     ===================================================== */

  .daily-checkin-card .daily-checkin-metrics {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 6px !important;

    margin: 16px 0 0 !important;

    box-sizing: border-box !important;
  }


  .daily-checkin-card .daily-checkin-metrics .checkin-metric {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 76px !important;

    margin: 0 !important;
    padding: 10px 3px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    box-sizing: border-box !important;
  }


  .daily-checkin-card .checkin-icon {
    width: 25px !important;
    height: 25px !important;

    min-width: 25px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  .daily-checkin-card .checkin-icon svg {
    width: 21px !important;
    height: 21px !important;
  }


  .daily-checkin-card .checkin-metric > span {
    font-size: 10px !important;
    line-height: 1 !important;

    text-align: center !important;
    white-space: nowrap !important;
  }


  /* =====================================================
     AFTER CHECK-IN
     FORCE ALL 4 RESULT RINGS INTO ONE ROW
     ===================================================== */

  .daily-checkin-card .daily-progress-rings.daily-checkin-results {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 5px !important;

    align-items: start !important;
    justify-items: center !important;

    margin: 18px 0 0 !important;

    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;
  }


  .daily-checkin-card
  .daily-progress-rings.daily-checkin-results
  .daily-progress-item {

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;

    box-sizing: border-box !important;
  }


  /* RESULT RINGS */

  .daily-checkin-card
  .daily-checkin-results
  .daily-progress-ring {

    width: 60px !important;
    height: 60px !important;

    min-width: 60px !important;
    min-height: 60px !important;

    max-width: 60px !important;

    flex: 0 0 60px !important;

    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    visibility: visible !important;
    opacity: 1 !important;
  }


  .daily-checkin-card
  .daily-checkin-results
  .daily-progress-ring-inner {

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;
  }


  /* RESULT ICON */

  .daily-checkin-card
  .daily-checkin-results
  .progress-ring-icon {

    width: 17px !important;
    height: 17px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  .daily-checkin-card
  .daily-checkin-results
  .progress-ring-icon svg {

    width: 17px !important;
    height: 17px !important;
  }


  /* NUMBER INSIDE RING */

  .daily-checkin-card
  .daily-checkin-results
  .daily-progress-ring strong {

    display: block !important;

    margin-top: 2px !important;

    font-size: 9px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    color: #102f46 !important;
  }


  /* LABEL UNDER RING */

  .daily-checkin-card
  .daily-checkin-results
  .daily-progress-item > span {

    display: block !important;

    font-size: 9px !important;
    line-height: 1.15 !important;

    font-weight: 600 !important;

    text-align: center !important;
    white-space: nowrap !important;

    color: #102f46 !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .daily-checkin-card .daily-checkin-metrics {
    gap: 4px !important;
  }


  .daily-checkin-card .daily-checkin-metrics .checkin-metric {
    min-height: 70px !important;
    padding: 8px 2px !important;
  }


  .daily-checkin-card
  .daily-progress-rings.daily-checkin-results {

    gap: 3px !important;
  }


  .daily-checkin-card
  .daily-checkin-results
  .daily-progress-ring {

    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    max-width: 54px !important;

    flex-basis: 54px !important;
  }


  .daily-checkin-card
  .daily-checkin-results
  .progress-ring-icon,
  .daily-checkin-card
  .daily-checkin-results
  .progress-ring-icon svg {

    width: 15px !important;
    height: 15px !important;
  }


  .daily-checkin-card
  .daily-checkin-results
  .daily-progress-ring strong {

    font-size: 8px !important;
  }

}

/* =========================================================
   MOBILE HOME — PROGRAM CARDS HEIGHT
   ========================================================= */

@media (max-width: 720px) {

  .programs-card-grid .program-thumbnail-card {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
  }


  .programs-card-grid .program-thumbnail-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;
  }

}


/* =========================================================
   SMALLER PHONES
   ========================================================= */

@media (max-width: 430px) {

  .programs-card-grid .program-thumbnail-card {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 375px) {

  .programs-card-grid .program-thumbnail-card {
    height: 290px !important;
    min-height: 290px !important;
    max-height: 290px !important;
  }

}

/* =========================================================
   MOBILE HOME — DASHBOARD ORDER

   1. DAILY CHECK-IN
   2. TODAY'S WORKOUT
   3. TRAINING SCHEDULE
   4. THIS WEEK
   ========================================================= */

@media (max-width: 720px) {

  .home-dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Allow side-column cards to participate individually */
  .home-side-column {
    display: contents !important;
  }

  /* 1 — DAILY CHECK-IN */
  .daily-checkin-card {
    order: 1 !important;
    width: 100% !important;
  }

  /* 2 — TODAY'S WORKOUT */
  .home-primary-column {
    order: 2 !important;
    width: 100% !important;
  }

  /* 3 — TRAINING SCHEDULE */
  .calendar-card {
    order: 3 !important;
    width: 100% !important;
  }

  /* 4 — THIS WEEK */
  .weekly-consistency-card {
    order: 4 !important;
    width: 100% !important;
  }

}

/* =========================================================
   XCULPTED — FINAL MOBILE MACRO RESULT
   1. DONUT + LEGEND
   2. CALORIES | MACRO TARGETS
   3. GOAL
   MOBILE ONLY
   ========================================================= */

@media (max-width: 720px) {

  /* =========================================
     MAIN RESULT
     ========================================= */

  #homeMacroResults .home-macro-dashboard-result {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 20px 14px !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }


  /* =========================================
     MAIN GRID

             DONUT
        CALORIES | MACROS
     ========================================= */

  #homeMacroResults .macro-result-columns {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-template-areas:
      "donut donut"
      "calories targets" !important;

    column-gap: 10px !important;
    row-gap: 16px !important;

    align-items: stretch !important;

    height: auto !important;
    min-height: 0 !important;
  }


  /* =========================================
     1. DONUT — TOP CENTER
     ========================================= */

  #homeMacroResults .macro-chart-column {
    grid-area: donut !important;

    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 0 16px !important;
    margin: 0 !important;

    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dfe3e1 !important;

    box-sizing: border-box !important;
  }


  #homeMacroResults .macro-result-donut {
    width: 150px !important;
    height: 150px !important;

    min-width: 150px !important;
    min-height: 150px !important;

    max-width: 150px !important;
    max-height: 150px !important;

    margin: 0 auto !important;
  }


  /* =========================================
     LEGEND — DIRECTLY BELOW DONUT
     ========================================= */

  #homeMacroResults .macro-chart-legend {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    margin: 12px 0 0 !important;
  }


  #homeMacroResults .macro-chart-legend > div {
    width: auto !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 4px !important;
  }


  #homeMacroResults .macro-chart-legend span {
    font-size: 9px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
  }


  /* =========================================
     2 LEFT — CALORIES
     ========================================= */

  #homeMacroResults .macro-calorie-column {
    grid-area: calories !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 14px 8px !important;

    text-align: center !important;

    border: 1px solid #dfe3e1 !important;
    border-radius: 14px !important;

    box-sizing: border-box !important;
  }


  #homeMacroResults .macro-calorie-number {
    display: block !important;

    margin: 5px 0 0 !important;

    font-size: 30px !important;
    line-height: 1 !important;

    text-align: center !important;
  }


  #homeMacroResults .macro-calorie-unit {
    margin-top: 4px !important;
    font-size: 9px !important;
  }


  #homeMacroResults .macro-calorie-note {
    width: 100% !important;

    margin: 10px 0 0 !important;
    padding: 8px !important;

    font-size: 8px !important;
    line-height: 1.35 !important;

    box-sizing: border-box !important;
  }


  /* =========================================
     2 RIGHT — MACRO TARGETS
     ========================================= */

  #homeMacroResults .macro-breakdown-column {
    grid-area: targets !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* YOUR DAILY MACROS */

  #homeMacroResults .macro-breakdown-column > .macro-result-label,
  #homeMacroResults .macro-breakdown-column > .macro-column-eyebrow {
    display: block !important;

    width: 100% !important;

    margin: 0 0 3px !important;

    font-size: 8px !important;
    line-height: 1.2 !important;

    letter-spacing: 0.8px !important;

    white-space: normal !important;
  }


  /* =========================================
     PROTEIN
     CARBS
     FAT

     ONE CARD PER ROW
     ========================================= */

  #homeMacroResults .macro-result-cards {
    width: 100% !important;

    display: grid !important;

    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, auto) !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  #homeMacroResults .macro-result-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 9px 10px !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    align-items: center !important;

    column-gap: 6px !important;

    border-radius: 12px !important;

    box-sizing: border-box !important;
  }


  /* PROTEIN / CARBS / FAT */

  #homeMacroResults .macro-card-label {
    font-size: 8px !important;
    line-height: 1 !important;

    letter-spacing: 0.6px !important;

    white-space: nowrap !important;
  }


  /* NUMBER */

  #homeMacroResults .macro-card-value {
    font-size: 19px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    text-align: right !important;
  }


  #homeMacroResults .macro-card-value small {
    font-size: 7px !important;
  }


  /* Remove extra text to keep each target compact */

  #homeMacroResults .macro-card-percent,
  #homeMacroResults .macro-result-card p {
    display: none !important;
  }


  /* =========================================
     3. GOAL — FULL WIDTH BELOW
     ========================================= */

  #homeMacroResults .macro-goal-card {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 16px 0 0 !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    box-sizing: border-box !important;
  }

}


/* =========================================================
   MOBILE — MACRO CARD CONTENT LOWER LEFT
   MATCH IGNIA POSITIONING
   ========================================================= */

@media (max-width: 720px) {

  #homeMacroCard #homeMacroIntro {
    position: relative !important;
  }

  #homeMacroCard .macro-experience-copy {
    position: absolute !important;

    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    top: auto !important;

    width: auto !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    text-align: left !important;

    z-index: 3 !important;
  }


  /* NUTRITION */

  #homeMacroCard .macro-experience-copy .experience-label {
    margin: 0 0 12px !important;
  }


  /* MACRO CALCULATOR */

  #homeMacroCard .macro-experience-copy h3 {
    margin: 0 0 10px !important;

    text-align: left !important;
  }


  /* DESCRIPTION */

  #homeMacroCard .macro-experience-copy p {
    width: 100% !important;
    max-width: 350px !important;

    margin: 0 0 18px !important;

    text-align: left !important;
  }


  /* ARROW BUTTON */

  #homeMacroCard .macro-experience-copy .experience-arrow {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    align-self: flex-start !important;
  }

}/* =========================================================
   MOBILE HOME — KEEP MACRO CALCULATOR VISIBLE
   ========================================================= */

@media (max-width: 720px) {

  #homeMacroCard {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    position: relative !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }

}




/* =========================================================
   MOBILE — MACRO INTRO / CALCULATOR STATE FIX
   Only ONE state can be visible at a time
   ========================================================= */

@media (max-width: 720px) {

  /* Default state:
     show Macro image card */
  #homeMacroCard #homeMacroIntro {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-height: 330px !important;

    position: relative !important;
  }


  /* Calculator/result is closed */
  #homeMacroCard #homeMacroCalculatorPanel[hidden] {
    display: none !important;
  }


  /* Calculator/result is open */
  #homeMacroCard #homeMacroCalculatorPanel:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    position: relative !important;
  }


  /* CRITICAL:
     When calculator/result is open,
     completely remove the image/intro card */
  #homeMacroCard:has(#homeMacroCalculatorPanel:not([hidden]))
  #homeMacroIntro {
    display: none !important;
  }

}

/* =========================================================
   MOBILE — REMOVE MACRO RESULT HEADER
   ========================================================= */

@media (max-width: 720px) {

  #homeMacroResults .macro-result-heading {
    display: none !important;
  }

}


/* =========================================================
   XCULPTED — MACRO CALCULATOR WIZARD
   DESKTOP + MOBILE
   ========================================================= */



  /* HEADER */

  .macro-mobile-wizard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    text-align: left;
  }

  .macro-mobile-wizard-header h2 {
    margin: 5px 0 0;

    font-size: 22px;
    line-height: 1.1;

    color: #102f46;
  }


  /* STEP NUMBER */

  .macro-mobile-progress {
    margin: 20px 0 8px;

    text-align: center;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.4px;

    color: #8fa69a;
  }


  /* QUESTION */

  .macro-mobile-question {
    min-height: 330px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    padding-top: 12px;

    text-align: center;
  }

  .macro-mobile-question-label {
    display: block;

    font-size: 19px;
    font-weight: 700;

    color: #102f46;
  }

  .macro-mobile-question > p {
    max-width: 290px;

    margin: 7px auto 18px;

    font-size: 11px;
    line-height: 1.5;

    color: #71808a;
  }


  /* =========================================
     NUMBER WHEEL
     ========================================= */

  .macro-mobile-wheel {
    position: relative;

    width: 250px;
    height: 220px;

    margin: 2px auto 0;

    overflow: hidden;

    touch-action: pan-x;
  }


  .macro-mobile-wheel-values {
    height: 100%;

    display: grid;
    grid-template-rows: repeat(5, 44px);

    align-items: center;
  }


  .macro-mobile-wheel-values button {
    width: 100%;

    padding: 0;

    border: 0;
    background: transparent;

    font: inherit;

    font-size: 16px;
    font-weight: 600;

    color: rgba(113,128,138,.22);

    cursor: pointer;
  }


  .macro-mobile-wheel-values button:nth-child(2),
  .macro-mobile-wheel-values button:nth-child(4) {
    font-size: 18px;

    color: rgba(113,128,138,.55);
  }


  .macro-mobile-wheel-values button.is-selected {
    font-size: 32px;
    font-weight: 700;

    color: #102f46;
  }


  .macro-mobile-wheel-selection {
    position: absolute;

    left: 18px;
    right: 18px;
    top: 88px;

    height: 44px;

    border-top: 1px solid #8fa69a;
    border-bottom: 1px solid #8fa69a;

    pointer-events: none;

    z-index: 2;
  }


  .macro-mobile-wheel-unit {
    position: absolute;

    top: 103px;
    right: 35px;

    z-index: 3;

    font-size: 9px;
    font-weight: 700;

    color: #8fa69a;
  }


  .macro-mobile-wheel-fade {
    position: absolute;

    left: 0;
    right: 0;

    height: 60px;

    z-index: 4;

    pointer-events: none;
  }


  .macro-mobile-wheel-fade-top {
    top: 0;

    background:
      linear-gradient(
        to bottom,
        #fbfbf9,
        rgba(251,251,249,0)
      );
  }


  .macro-mobile-wheel-fade-bottom {
    bottom: 0;

    background:
      linear-gradient(
        to top,
        #fbfbf9,
        rgba(251,251,249,0)
      );
  }


  /* =========================================
     CHOICE BUTTONS
     ========================================= */

  .macro-mobile-options {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 6px;
  }


  .macro-mobile-option {
    width: 100%;

    min-height: 52px;

    padding: 12px 16px;

    border: 1px solid #dfe3e1;
    border-radius: 15px;

    background: #fbfbf9;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    color: #102f46;

    text-align: left;

    cursor: pointer;
  }


  .macro-mobile-option.is-selected {
    border-color: #102f46;

    background: #102f46;

    color: #fbfbf9;
  }


  /* =========================================
     KG / LB
     ========================================= */

  .macro-mobile-unit-toggle {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 4px;

    margin: 0 0 10px;

    border-radius: 999px;

    background: rgba(223,227,225,.6);
  }


  .macro-mobile-unit-toggle button {
    min-height: 38px;

    border: 0;
    border-radius: 999px;

    background: transparent;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    color: #71808a;
  }


  .macro-mobile-unit-toggle button.is-selected {
    background: #102f46;

    color: #fbfbf9;
  }


  /* =========================================
     BOTTOM BUTTONS
     ========================================= */

  .macro-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;

    gap: 10px;

    margin-top: 8px;
  }


  .macro-mobile-actions .button {
    min-height: 52px;

    border-radius: 999px;
  }

}

/* =========================================================
   DESKTOP — MACRO WIZARD MODAL
   ========================================================= */

@media (min-width: 721px) {

  #modal .macro-wizard-modal-panel {
    width: 400px !important;
    min-width: 0 !important;
    max-width: 400px !important;

    padding: 26px !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;
  }


  #modal .macro-wizard-modal-panel .macro-mobile-wizard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
  }


  #modal .macro-wizard-modal-panel .macro-mobile-question {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 240px !important;
  }


  #modal .macro-wizard-modal-panel .macro-mobile-options {
    width: 100% !important;
  }


  #modal .macro-wizard-modal-panel .macro-mobile-actions {
    width: 100% !important;
  }

}

/* =========================================================
   MACRO WIZARD DIALOG — DESKTOP
   ========================================================= */

@media (min-width: 721px) {

  /* Actual browser dialog */
  #modal.macro-wizard-dialog {
    position: fixed !important;

    inset: 0 !important;

    width: 340px !important;
    max-width: calc(100vw - 48px) !important;

    height: fit-content !important;
    max-height: calc(100vh - 48px) !important;

    margin: auto !important;
    padding: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /* Dialog content wrapper */
  #modal.macro-wizard-dialog #modalContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }


  /* White Macro Wizard card */
  #modal.macro-wizard-dialog .macro-wizard-modal-panel {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 24px !important;

    box-sizing: border-box !important;
  }


  /* Macro Wizard X */
  #modal.macro-wizard-dialog .close-button {
    z-index: 20 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
  }

}

/* =========================================================
   MACRO WIZARD — CLOSE BUTTON
   ========================================================= */

.macro-wizard-modal-panel .close-button {
  position: relative !important;

  z-index: 100 !important;

  pointer-events: auto !important;

  cursor: pointer !important;

  flex: 0 0 auto !important;
}



@media (max-width: 720px) {

  .macro-wizard-modal-panel .close-button {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10 !important;
  }

  .macro-wizard-modal-panel {
    position: relative !important;
  }

}

/* =========================================================
   MACRO WIZARD — MOBILE SIZE
   ========================================================= */

@media (max-width: 720px) {

  /* Actual dialog */
  #modal.macro-wizard-dialog {
    width: 80vw !important;
    max-width: 300px !important;
    min-width: 0 !important;

    height: auto !important;
    max-height: 90vh !important;

    margin: auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }


  /* Content wrapper */
  #modal.macro-wizard-dialog #modalContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }


  /* White popup */
  #modal.macro-wizard-dialog .macro-wizard-modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 90vh !important;

    margin: 0 !important;
    padding: 20px !important;

    box-sizing: border-box !important;
  }


  /* Remove the large forced space */
  #modal.macro-wizard-dialog .macro-mobile-question {
    min-height: 0 !important;
    height: auto !important;
  }


  /* Keep buttons below the question instead of at bottom */
  #modal.macro-wizard-dialog .macro-mobile-actions {
    margin-top: 28px !important;
  }

}

/* =========================================================
   MOBILE — REMOVE LINE ABOVE MACRO DONUT
   ========================================================= */

@media (max-width: 720px) {

  #homeMacroResults .macro-chart-column,
  #homeMacroResults .macro-donut-column {
    border-top: none !important;
  }

  #homeMacroResults .macro-result-columns {
    border-top: none !important;
  }

}

/* =========================================================
   DESKTOP — FINAL MACRO RESULT
   Calories 30% | Donut 40% | Daily Macros 30%
   ========================================================= */

@media (min-width: 721px) {

  /* -----------------------------------------
     RESULT CONTAINER
     ----------------------------------------- */

  #homeMacroResults {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #homeMacroResults .home-macro-dashboard-result {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 16px 18px 18px !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }


  /* -----------------------------------------
     RESULT HEADING
     ----------------------------------------- */

  #homeMacroResults .macro-result-heading {
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  #homeMacroResults .macro-result-heading h2,
  #homeMacroResults .macro-result-heading h3 {
    margin: 0 !important;
  }


  /* -----------------------------------------
     MAIN 3-COLUMN AREA

     Calories = 30%
     Donut    = 40%
     Macros   = 30%
     ----------------------------------------- */

  #homeMacroResults .macro-result-columns {
    display: grid !important;

    grid-template-columns:
      minmax(0, 30%)
      minmax(0, 40%)
      minmax(0, 30%) !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }


  /* -----------------------------------------
     ALL THREE COLUMNS
     ----------------------------------------- */

  #homeMacroResults .macro-calorie-column,
  #homeMacroResults .macro-chart-column,
  #homeMacroResults .macro-donut-column,
  #homeMacroResults .macro-breakdown-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;
  }


  /* -----------------------------------------
     CALORIES
     ----------------------------------------- */

  #homeMacroResults .macro-calorie-column {
    padding: 8px 18px 8px 4px !important;

    align-self: center !important;
  }


  /* -----------------------------------------
     DONUT
     ----------------------------------------- */

  #homeMacroResults .macro-chart-column,
  #homeMacroResults .macro-donut-column {
    padding: 6px 20px !important;

    align-self: center !important;
  }


  /* -----------------------------------------
     DAILY MACROS COLUMN
     ----------------------------------------- */

  #homeMacroResults .macro-breakdown-column {
    display: flex !important;
    flex-direction: column !important;

    align-self: center !important;
    justify-content: center !important;

    padding: 0 10px 0 18px !important;

    overflow: visible !important;
  }


  /* YOUR DAILY MACROS */
  #homeMacroResults .macro-breakdown-column > .macro-result-label,
  #homeMacroResults .macro-breakdown-column > .macro-column-eyebrow {
    display: block !important;

    width: 100% !important;

    margin: 0 0 8px !important;

    box-sizing: border-box !important;
  }


  /* -----------------------------------------
     PROTEIN / CARBS / FAT CONTAINER
     ----------------------------------------- */

  #homeMacroResults .macro-result-cards {
    display: grid !important;

    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, 50px) !important;

    width: 100% !important;

    /* REAL SPACE BETWEEN EVERY CARD */
    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }


  /* -----------------------------------------
   INDIVIDUAL MACRO CARDS
   ----------------------------------------- */

#homeMacroResults .macro-result-card {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  margin: 0 !important;

  /* More breathing room from card edges */
  padding: 9px 12px !important;

  display: grid !important;

  /* Value left | Label right */
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr !important;

  column-gap: 10px !important;
  row-gap: 4px !important;

  align-items: center !important;

  overflow: hidden !important;

  box-sizing: border-box !important;
}


/* PROTEIN / CARBS / FAT */
#homeMacroResults .macro-card-label {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;

  align-self: center !important;
  justify-self: end !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 7px !important;
  line-height: 1 !important;

  letter-spacing: 0.7px !important;

  white-space: nowrap !important;
}


/* 126 / 86 / 56 */
#homeMacroResults .macro-card-value {
  grid-column: 1 !important;
  grid-row: 2 !important;

  align-self: end !important;
  justify-self: start !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 19px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


/* grams */
#homeMacroResults .macro-card-value small {
  margin-left: 3px !important;

  font-size: 7px !important;
  line-height: 1 !important;

  vertical-align: baseline !important;
}


/* Small colored line at top-left */
#homeMacroResults .macro-result-card::before {
  align-self: start !important;
  justify-self: start !important;
}


  /* Descriptions do not fit this compact desktop layout */
  #homeMacroResults .macro-card-percent,
  #homeMacroResults .macro-result-card p {
    display: none !important;
  }


  /* -----------------------------------------
     GOAL
     ----------------------------------------- */

  #homeMacroResults .home-macro-goal,
  #homeMacroResults .macro-goal-card {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;

    /* IMPORTANT:
       Creates clear separation from donut/macros */
    margin: 24px 0 0 !important;

    padding: 10px 16px !important;

    overflow: visible !important;

    box-sizing: border-box !important;
    clear: both !important;
  }

}

/* =========================================================
   DESKTOP — COMPACT DAILY MACROS
   ========================================================= */

@media (min-width: 721px) {

  /* Make the entire Daily Macros area narrower */
  #homeMacroResults .macro-breakdown-column {
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;

    justify-self: start !important;
    align-self: start !important;

    overflow: visible !important;
  }


  /* Keep heading aligned with cards */
  #homeMacroResults .macro-breakdown-column > .macro-result-label,
  #homeMacroResults .macro-breakdown-column > .macro-column-eyebrow {
    width: 100% !important;
    margin-bottom: 7px !important;
  }


  /* Three vertical rows */
  #homeMacroResults .macro-result-cards {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, auto) !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* Individual card */
  #homeMacroResults .macro-result-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  /* Description text */
  #homeMacroResults .macro-result-card p {
    display: block !important;

    margin: 5px 0 0 !important;

    font-size: 7px !important;
    line-height: 1.25 !important;

    white-space: normal !important;

    overflow: hidden !important;
  }

}


/* =========================================================
   DESKTOP — SHOW FULL MACRO RESULT + GOAL
   ========================================================= */

@media (min-width: 721px) {

  /* Let the entire result grow with its content */
  #homeMacroResults {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #homeMacroResults .home-macro-dashboard-result {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    overflow: visible !important;

    padding-bottom: 20px !important;
  }

  /* Top section: Calories | Donut | Daily Macros */
  #homeMacroResults .macro-result-columns {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    overflow: visible !important;
  }

  /* Goal stays below the top section */
  #homeMacroResults .home-macro-goal,
  #homeMacroResults .macro-goal-card {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: auto !important;
    max-width: none !important;

    height: auto !important;
    min-height: 70px !important;
    max-height: none !important;

    margin: 18px 0 0 !important;

    transform: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }

}


/* =========================================================
   DESKTOP — FIT COMPLETE MACRO RESULT INSIDE CARD
   ========================================================= */

@media (min-width: 721px) {

  /* Reduce overall internal spacing */
  #homeMacroResults .home-macro-dashboard-result {
    padding-top: 16px !important;
    padding-bottom: 12px !important;
  }


  /* Header */
  #homeMacroResults .macro-result-heading {
    margin-bottom: 10px !important;
  }


  /* Main Calories | Donut | Daily Macros area */
  #homeMacroResults .macro-result-columns {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;

    margin-bottom: 10px !important;

    align-items: center !important;
  }


  /* Calories column */
  #homeMacroResults .macro-calorie-column {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }


  /* Donut column */
  #homeMacroResults .macro-donut-column {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }


  /* Make donut slightly smaller */
  #homeMacroResults .home-macro-donut {
    width: 140px !important;
    height: 140px !important;
  }


  /* Daily Macros column */
  #homeMacroResults .macro-breakdown-column {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
  }


  /* Smaller spacing between macro cards */
  #homeMacroResults .macro-result-cards {
    gap: 5px !important;
  }


  /* Protein / Carbs / Fat */
  #homeMacroResults .macro-result-card {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    padding: 6px 10px !important;

    overflow: hidden !important;
  }


  /* Hide descriptions inside these small cards */
  #homeMacroResults .macro-result-card p {
    display: none !important;
  }


  /* Goal section */
  #homeMacroResults .home-macro-goal,
  #homeMacroResults .macro-goal-card {
    position: relative !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 8px 0 0 !important;
    padding: 8px 14px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }

}


/* =========================================================
   CHECK-IN HISTORY — TODAY'S METRIC RINGS
   Uses the same rings as Home
   ========================================================= */

.checkin-history-page .checkin-history-rings {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  width: 100% !important;

  margin: 28px 0 0 !important;
  padding: 24px 0 0 !important;

  border-top: 1px solid #dfe3e1;

  gap: 24px !important;
}

.checkin-history-page .checkin-history-rings .daily-progress-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  min-width: 0 !important;

  text-align: center !important;
}

.checkin-history-page .checkin-history-rings .daily-progress-ring {
  margin: 0 auto !important;
}

.checkin-history-page .checkin-history-rings .daily-progress-item > span {
  display: block;

  margin-top: 8px;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  color: #71808a;
}


/* MOBILE — KEEP ALL 4 RINGS IN ONE ROW */

@media (max-width: 720px) {

  .checkin-history-page .checkin-history-rings {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 6px !important;

    margin-top: 22px !important;
    padding-top: 20px !important;
  }

  .checkin-history-page .checkin-history-rings .daily-progress-ring {
    transform: scale(0.82);
    transform-origin: center;
  }

  .checkin-history-page .checkin-history-rings .daily-progress-item > span {
    margin-top: 2px;

    font-size: 9px;
  }

}


@media (max-width: 720px) {

  .checkin-history-records-heading {
    align-items: flex-start;
  }

  .checkin-history-heading-actions {
    width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: 8px;
  }

  .checkin-history-count {
    align-self: flex-end;
  }

}

/* =========================================================
   MACRO HISTORY — FINAL MOBILE LAYOUT
   ========================================================= */

@media (max-width: 720px) {

  /* =======================================================
     PANEL
     Main positioning parent
     ======================================================= */

  .macro-history-panel {
    position: relative !important;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  .macro-history-panel-header {
    position: static !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 0 !important;

    min-height: 86px !important;

    margin-bottom: 12px !important;
    padding-right: 0 !important;
  }

/* =======================================================
   MACRO HISTORY — MOBILE WIDTH
   ALIGN WITH MAIN PAGE CONTENT
   ======================================================= */

.macro-history-page {
  width: 100% !important;

  padding-left: 20px !important;
  padding-right: 20px !important;

  box-sizing: border-box !important;
}


.macro-history-panel {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}

  /* =======================================================
     CONTROLS
     Do NOT use this as positioning parent
     ======================================================= */

  .macro-history-panel-controls {
    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


/* =======================================================
   + NEW MACRO
   MATCH PROGRESS PICTURES + BUTTON
   ======================================================= */

.macro-history-new-button {
  position: absolute !important;

  top: 16px !important;
  right: 16px !important;

  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #102f46 !important;
  color: #ffffff !important;

  box-sizing: border-box !important;

  font-size: 0 !important;
  line-height: 1 !important;

  box-shadow: none !important;
  overflow: hidden !important;

  z-index: 10;
}


/* =======================================================
   EXACT CENTERED + SYMBOL
   ======================================================= */

.macro-history-new-button span {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  display: block !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  transform: translate(-50%, -50%) !important;

  pointer-events: none;
}


/* REMOVE ANY OLD GENERATED + */

.macro-history-new-button::before,
.macro-history-new-button::after {
  content: none !important;
  display: none !important;
}



/* HOVER */

.macro-history-new-button:hover {
  background: #102f46 !important;
  color: #ffffff !important;
}


/* =======================================================
   WEEKLY / MONTHLY / YEARLY
   MATCH DAILY RECORDS
   ======================================================= */

.macro-history-periods {
  position: absolute !important;

  top: 72px !important;
  right: 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 3px !important;

  border: 1px solid #dfe3e1 !important;
  border-radius: 999px !important;

  background: #ffffff !important;

  box-sizing: border-box !important;

  z-index: 5;
}

.macro-history-periods button {
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 70px !important;
  height: 36px !important;

  margin: 0 !important;
  padding: 0 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #71808a !important;

  font-family: "Manrope", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  cursor: pointer;
}

.macro-history-periods button.active {
  background: #102f46 !important;
  color: #ffffff !important;
}

.macro-history-periods button:not(.active) {
  background: transparent !important;
  color: #71808a !important;
}


/* HOVER */

.macro-history-periods button:not(.active):hover {
  background: rgba(141, 169, 157, 0.12) !important;
  color: #102f46 !important;
}


  /* =======================================================
     REMOVE RECORD COUNT BADGE
     ======================================================= */

  .macro-history-record-count {
    display: none !important;
  }


  /* =======================================================
   RECORD GRID
   6 VALUES IN ONE ROW
   ======================================================= */

.macro-history-record-grid {
    display: grid !important;

    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;

    align-items: start !important;

    width: 100% !important;

    column-gap: 5px !important;
    row-gap: 0 !important;
  }


  /* =======================================================
     INDIVIDUAL VALUE
     ======================================================= */

  .macro-history-value {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* LABEL
     DAILY TARGET / PROTEIN / CARBS / FAT / WEIGHT / GOAL
     ======================================================= */

  .macro-history-value > span {
    display: block !important;

    margin: 0 0 4px !important;

    color: #74878d !important;

    font-size: 6px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
  }


  /* VALUE */

  .macro-history-value > strong {
    display: block !important;

    margin: 0 !important;

    color: #0c3046 !important;

    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
  }


  /* KCAL */

  .macro-history-value > strong small {
    font-size: 6px !important;
  }

}

/* =========================================================
   CHECK-IN HISTORY PERIOD SELECTOR
   ========================================================= */

.checkin-history-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.checkin-history-period-filter {
  display: flex;
  align-items: center;

  padding: 4px;

  background: #fbfbf9;
  border: 1px solid #dfe3e1;
  border-radius: 999px;
}

.checkin-history-period-btn {
  appearance: none;
  -webkit-appearance: none;

  margin: 0;
  padding: 9px 18px;

  border: 0 !important;
  outline: 0;

  border-radius: 999px;

  background: transparent !important;
  color: #71808a;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease;
}

.checkin-history-period-btn:hover {
  color: #102f46;
}

.checkin-history-period-btn.active {
  background: #102f46 !important;
  color: #fbfbf9 !important;
}

.checkin-history-count {
  white-space: nowrap;
}


@media (max-width: 720px) {

  .checkin-history-records-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .checkin-history-heading-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .checkin-history-period-filter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: 100%;
  }

  .checkin-history-period-btn {
    width: 100%;
    padding: 10px 8px;
  }

  .checkin-history-count {
    align-self: flex-end;
  }

}

/* =========================================================
   MACRO RESULT — VIEW ALL
   ========================================================= */

.macro-result-view-all {
  appearance: none;
  -webkit-appearance: none;

  position: absolute;
  top: 22px;
  right: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  margin: 0;
  padding: 8px 13px;

  border: 1px solid #dfe3e1;
  border-radius: 999px;

  background: #fbfbf9;
  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  cursor: pointer;

  z-index: 5;
}

.macro-result-view-all:hover {
  background: #102f46;
  color: #fbfbf9;
  border-color: #102f46;
}

.macro-result-view-all span {
  font-size: 14px;
  line-height: 1;
}


@media (max-width: 720px) {

  .macro-result-view-all {
    top: 14px;
    right: 14px;

    padding: 7px 11px;

    font-size: 10px;
  }

}

/* =========================================================
   MACRO RESULT — VIEW ALL
   ========================================================= */

.macro-view-all-button {
  width: auto;
  height: auto;

  top: 26px;
  right: 28px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border: 0;
  border-radius: 0;

  background: transparent;

  color: #0c3046;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;

  transition:
    opacity 0.2s ease,
    gap 0.2s ease;
}


.macro-view-all-button span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;

  transition:
    transform 0.2s ease;
}


.macro-view-all-button:hover {
  background: transparent;
  color: #0c3046;

  opacity: 0.7;
}


.macro-view-all-button:hover span {
  transform: translateX(3px);
}



/* =========================================================
   MACRO HISTORY
   Matches Check-In History layout
   ========================================================= */

.macro-history-page {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 8px 28px 120px;
}


/* =========================================================
   BACK TO DASHBOARD
   ========================================================= */

.macro-history-back {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  margin: 0 0 30px;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #5f7380;

  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.macro-history-back span {
  color: #0c3046;

  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.macro-history-back:hover {
  background: transparent;
  color: #0c3046;
}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.macro-history-heading {
  margin: 0 0 32px;
}

.macro-history-eyebrow {
  display: block;

  margin: 0 0 7px;

  color: #8ba197;

  font-size: 9px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.macro-history-heading h1 {
  margin: 0;

  color: #0c3046;

  font-size: 36px;
  font-weight: 500;
  line-height: 1;

  letter-spacing: -0.045em;
}

.macro-history-heading p {
  margin: 10px 0 0;

  color: #71808a;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}


/* =========================================================
   MAIN HISTORY PANEL
   ========================================================= */

.macro-history-panel {
  width: 100%;

  padding: 28px 30px 30px;

  border:
    1px solid
    rgba(12, 48, 70, 0.14);

  border-radius: 20px;

  background: #ffffff;
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.macro-history-panel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;
}


/* LEFT TITLE */

.macro-history-panel-title {
  min-width: 0;
}

.macro-history-panel-title > span {
  display: block;

  margin-bottom: 6px;

  color: #8ba197;

  font-size: 9px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.macro-history-panel-title h2 {
  margin: 0;

  color: #0c3046;

  font-size: 22px;
  font-weight: 500;
  line-height: 1;

  letter-spacing: -0.035em;
}


/* =========================================================
   RIGHT CONTROLS
   ========================================================= */

.macro-history-panel-controls {
  display: flex;
  align-items: center;

  gap: 14px;
}


/* =========================================================
   WEEKLY / MONTHLY / YEARLY
   ========================================================= */

.macro-history-periods {
  display: inline-flex;
  align-items: center;

  padding: 3px;

  border:
    1px solid
    rgba(12, 48, 70, 0.08);

  border-radius: 999px;

  background: #f4f5f2;
}

.macro-history-periods button {
  min-width: 78px;

  padding: 8px 15px;

  border: 0;
  border-radius: 999px;

  background: transparent;
  color: #667982;

  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.macro-history-periods button:hover {
  color: #0c3046;
}

.macro-history-periods button.active {
  background: #0c3046;
  color: #ffffff;
}


/* =========================================================
   RECORD COUNT
   ========================================================= */

.macro-history-record-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;

  padding: 0 12px;

  border-radius: 999px;

  background: #edf1ef;
  color: #526873;

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;
}


/* =========================================================
   HISTORY LIST
   ========================================================= */

.macro-history-list {
  display: flex;
  flex-direction: column;

  gap: 12px;
}


/* =========================================================
   MACRO HISTORY — RECORD ROWS
   ========================================================= */

.macro-history-record {
  width: 100%;

  padding: 20px 18px 18px;

  box-sizing: border-box;

  /* NO INDIVIDUAL RECORD BORDER */
  border: none;

  border-radius: 14px;

  /* FIRST RECORD STARTS WHITE */
  background: transparent;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}


/* =========================================================
   ALTERNATING RECORD BACKGROUNDS

   1 = WHITE
   2 = LIGHT SAGE
   3 = WHITE
   4 = LIGHT SAGE
   ========================================================= */

.macro-history-record:nth-child(odd) {
  background: transparent;
}

.macro-history-record:nth-child(even) {
  background: rgba(142, 169, 154, 0.10);
}


/* =========================================================
   HOVER — ALL RECORDS
   ========================================================= */

.macro-history-record:hover {
  background: rgba(142, 169, 154, 0.16);
}


/* =========================================================
   CURRENT RECORD

   Do not change the row background.
   CURRENT badge identifies the current record.
   ========================================================= */

.macro-history-record.is-current {
  border: none;
}


/* CURRENT RECORD HOVER */

.macro-history-record.is-current:hover {
  background: rgba(142, 169, 154, 0.16);
}


/* =========================================================
   RECORD TOP
   ========================================================= */

.macro-history-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;
}

.macro-history-record-top > strong {
  color: #0c3046;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}


/* CURRENT BADGE */

.macro-history-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 27px;

  padding: 0 11px;

  border-radius: 999px;

  background: var(--sage);
  color: #ffffff;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.04em;
}


/* =========================================================
   MACRO VALUES GRID
   ========================================================= */

.macro-history-record-grid {
  display: grid;

  grid-template-columns:
    1.15fr
    1fr
    1fr
    1fr
    1fr
    1.1fr;

  align-items: start;

  gap: 26px;
}


/* =========================================================
   INDIVIDUAL VALUE
   ========================================================= */

.macro-history-value {
  min-width: 0;
}

.macro-history-value > span {
  display: block;

  margin-bottom: 7px;

  color: #74878d;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.macro-history-value > strong {
  display: block;

  color: #0c3046;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;
}


/* KCAL */

.macro-history-value > strong small {
  color: #6e8189;

  font-size: 9px;
  font-weight: 500;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.macro-history-empty {
  width: 100%;

  padding: 55px 24px;

  border:
    1px solid
    rgba(12, 48, 70, 0.12);

  border-radius: 16px;

  background: #f7f8f7;

  text-align: center;
}

.macro-history-empty > span {
  display: block;

  margin-bottom: 7px;

  color: #8ba197;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.macro-history-empty h3 {
  margin: 0;

  color: #0c3046;

  font-size: 20px;
  font-weight: 500;
}

.macro-history-empty p {
  margin: 8px auto 20px;

  color: #71808a;

  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .macro-history-record-grid {
    grid-template-columns:
      repeat(3, 1fr);

    row-gap: 22px;
  }

}



/* =========================================================
   MACRO HISTORY — NEW MACRO
   ========================================================= */

.macro-history-new-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 30px;

  padding: 0 13px;

  border: 1px solid #0c3046;
  border-radius: 999px;

  background: #0c3046;
  color: #ffffff;

  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.macro-history-new-button span {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.macro-history-new-button:hover {
  background: transparent;
  color: #0c3046;
}


/* =========================================================
   TRAINING SCHEDULE — FINAL CURRENT DAY COLORS
   ========================================================= */

/* TODAY — ALWAYS GREEN */
.compact-day.active,
.compact-day.active:not(:hover) {
  background-color: var(--sage) !important;
  color: #ffffff !important;
}

.compact-day.active small,
.compact-day.active strong {
  color: #ffffff !important;
}


/* TODAY — VERY SLIGHT CHANGE ON HOVER */
.compact-day.active:hover {
  background-color: var(--sage-dark) !important;

  transform: translateY(-3px);

  box-shadow:
    0 6px 14px
    rgba(16, 47, 70, 0.10);
}


/* =========================================================
   MACRO HISTORY — MONTH / YEAR SELECTOR
   ========================================================= */

.macro-history-period-list{
  display:grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:12px;

  margin-top:20px;
}


.macro-history-period-card{
  width:100%;
  min-height:90px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:18px 20px;

  border:1px solid var(--line);
  border-radius:16px;

  background:#f8faf9;

  text-align:left;

  cursor:pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


.macro-history-period-card:hover{
  background:var(--sage-soft);

  border-color:var(--sage);

  transform:translateY(-2px);

  box-shadow:
    0 6px 16px
    rgba(16,47,70,.07);
}


.macro-history-period-card > div:first-child{
  display:flex;
  flex-direction:column;

  gap:5px;
}


.macro-history-period-card > div:first-child span{
  color:var(--muted);

  font-size:8px;
  font-weight:800;

  letter-spacing:.12em;
}


.macro-history-period-card > div:first-child strong{
  color:var(--navy);

  font-size:16px;
  font-weight:700;
}


.macro-history-period-card-right{
  display:flex;
  align-items:center;

  gap:14px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;
}


.macro-history-period-card-right b{
  color:var(--navy);

  font-size:16px;
  font-weight:500;

  transition:
    transform .2s ease;
}


.macro-history-period-card:hover
.macro-history-period-card-right b{
  transform:translateX(3px);
}


/* DRILLDOWN HEADER */

.macro-history-drilldown-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin:18px 0;
}


.macro-history-drilldown-heading button{
  border:0;
  background:transparent;

  color:var(--navy);

  font-size:11px;
  font-weight:700;

  cursor:pointer;
}


.macro-history-drilldown-heading strong{
  color:var(--navy);

  font-size:14px;
}


/* MOBILE */

@media(max-width:760px){

  .macro-history-period-list{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:520px){

  .macro-history-period-list{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   CHECK-IN HISTORY — MONTH / YEAR DRILLDOWN
   ========================================================= */


/* MONTH / YEAR GRID */

.checkin-history-period-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:12px;

  margin-top:4px;
}


/* INDIVIDUAL MONTH / YEAR */

.checkin-history-period-card{
  position:relative;

  min-height:105px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  gap:5px;

  padding:18px 20px;

  border:1px solid var(--line);
  border-radius:14px;

  background:#f7f9f8;

  color:var(--navy);

  text-align:left;

  cursor:pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


/* MONTH / YEAR NAME */

.checkin-history-period-card > span{
  color:var(--muted);

  font-size:9px;
  font-weight:700;

  letter-spacing:.08em;
  text-transform:uppercase;
}


/* RECORD NUMBER / YEAR */

.checkin-history-period-card > strong{
  color:var(--navy);

  font-size:20px;
  font-weight:700;

  line-height:1.1;
}


/* RECORD LABEL */

.checkin-history-period-card > small{
  color:var(--muted);

  font-size:10px;
  font-weight:600;
}


/* HOVER */

.checkin-history-period-card:hover{
  background:var(--sage-soft);

  border-color:var(--sage);

  transform:translateY(-2px);

  box-shadow:
    0 7px 18px
    rgba(16,47,70,.07);
}


/* CURRENT MONTH / YEAR */

.checkin-history-period-card.current{
  background:
    rgba(143,166,154,.12);

  border-color:
    rgba(143,166,154,.7);
}


.checkin-history-period-card.current::after{
  content:"CURRENT";

  position:absolute;

  top:12px;
  right:12px;

  padding:4px 8px;

  border-radius:999px;

  background:var(--sage);

  color:#fff;

  font-size:7px;
  font-weight:800;

  letter-spacing:.08em;
}


/* CURRENT — SLIGHT HOVER */

.checkin-history-period-card.current:hover{
  background:
    rgba(143,166,154,.18);

  border-color:var(--sage-dark);
}


/* =========================================================
   YEAR VIEW
   ========================================================= */

.checkin-history-year-grid{
  grid-template-columns:
    repeat(4,minmax(0,1fr));
}


/* =========================================================
   SELECTED MONTH / YEAR HEADER
   ========================================================= */

.checkin-history-drill-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-bottom:18px;

  padding-bottom:14px;

  border-bottom:1px solid var(--line);
}


/* Override normal back-button spacing inside card */

.checkin-history-drill-header
.weight-history-back{
  margin:0;
}


.checkin-history-drill-header > strong{
  color:var(--navy);

  font-size:14px;
  font-weight:700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .checkin-history-period-grid,
  .checkin-history-year-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

  .checkin-history-period-grid,
  .checkin-history-year-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:9px;
  }


  .checkin-history-period-card{
    min-height:92px;

    padding:15px 16px;

    border-radius:12px;
  }


  .checkin-history-period-card > strong{
    font-size:17px;
  }


  .checkin-history-period-card.current::after{
    top:9px;
    right:9px;

    padding:3px 6px;

    font-size:6px;
  }


  .checkin-history-drill-header{
    align-items:flex-start;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:390px){

  .checkin-history-period-grid,
  .checkin-history-year-grid{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   CHECK-IN HISTORY — EMPTY RECORD STATE
   ========================================================= */

.checkin-history-empty {
  width: 100%;
  padding: 42px 20px;
  text-align: center;

  color: var(--muted);
  background: transparent;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;

  position: static;
  inset: auto;
  transform: none;

  pointer-events: none;
}



/* =========================================================
   PROGRAM OVERVIEW — DESKTOP
   ========================================================= */

.program-overview-page {
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;

  overflow: hidden;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  background: #ffffff;
}


/* =========================================================
   LEFT IMAGE COLUMN
   ========================================================= */

.program-overview-visual {
  position: relative;

  width: 100%;
  height: 100%;
  min-height: 0;

  overflow: hidden;

  background: var(--navy);
}


.program-overview-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  margin: 0;
  padding: 0;
}


.program-overview-image-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(8, 35, 52, 0.50) 0%,
      rgba(8, 35, 52, 0.08) 42%,
      rgba(8, 35, 52, 0.02) 100%
    );

  pointer-events: none;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.program-overview-back {
  position: absolute;

  top: 26px;
  left: 26px;

  z-index: 5;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #ffffff;
  color: var(--navy);

  font-size: 22px;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 8px 24px rgba(8, 35, 52, 0.12);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.program-overview-back:hover {
  transform: translateX(-3px);

  box-shadow:
    0 10px 28px rgba(8, 35, 52, 0.18);
}


/* =========================================================
   IMAGE COPY
   ========================================================= */

.program-overview-image-copy {
  position: absolute;

  left: 34px;
  right: 34px;
  bottom: 30px;

  z-index: 3;

  color: #ffffff;
}


.program-overview-image-label {
  display: inline-flex;

  padding: 7px 12px;

  border-radius: 999px;

  background: #ffffff;
  color: var(--navy);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.program-overview-image-copy h1 {
  max-width: 520px;

  margin:
    14px
    0
    0;

  color: #ffffff;

  font-size: clamp(
    28px,
    2.5vw,
    46px
  );

  line-height: 0.98;
  letter-spacing: -0.04em;
}


/* =========================================================
   RIGHT CONTENT COLUMN
   ========================================================= */

.program-overview-content {
  width: 100%;
  height: 100%;
  min-height: 0;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: #ffffff;
}


.program-overview-inner {
  width: 100%;
  max-width: 650px;

  margin: 0 auto;

  padding:
    28px
    42px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 22px;
}


/* =========================================================
   HEADING
   ========================================================= */

.program-overview-heading .eyebrow {
  display: block;

  margin-bottom: 8px;
}


.program-overview-heading h2 {
  margin: 0;

  color: var(--navy);

  font-size: clamp(
    38px,
    3.3vw,
    58px
  );

  line-height: 0.95;
  letter-spacing: -0.055em;
}


.program-overview-heading p {
  margin:
    10px
    0
    0;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   PROGRAM STATS
   ========================================================= */

.program-overview-stats {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;
}


.program-overview-stat {
  min-width: 0;
  min-height: 108px;

  padding:
    14px
    10px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  border:
    1px solid
    var(--line);

  border-radius: 14px;

  background: #ffffff;
}


.program-overview-stat-icon {
  width: 34px;
  height: 34px;

  margin-bottom: 9px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--sage-soft);
  color: var(--sage-dark);

  font-size: 14px;
}


.program-overview-stat strong {
  color: var(--navy);

  font-size: 10px;
  line-height: 1.25;
}


.program-overview-stat span {
  margin-top: 5px;

  color: var(--muted);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.program-overview-description {
  padding-top: 2px;
}


.program-overview-description .eyebrow {
  display: block;

  margin-bottom: 8px;
}


.program-overview-description h3 {
  margin: 0;

  color: var(--navy);

  font-size: 22px;
  line-height: 1.1;
}


.program-overview-description p {
  max-width: 590px;

  margin:
    10px
    0
    0;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   START BUTTON — NAVY VERSION
   ========================================================= */

.program-overview-start {
  width: 220px;
  min-height: 58px;

  padding: 0 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0;
  border-radius: 999px;

  background: var(--navy);
  color: #ffffff;

  font-size: 16px;
  font-weight: 700;

  letter-spacing: 0;

  cursor: pointer;

  box-shadow:
    0 6px 20px rgba(8, 35, 52, 0.12);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}


/* ARROW */

.program-overview-start::after {
  content: "→";

  margin-left: 28px;

  color: #ffffff;

  font-size: 20px;
  font-weight: 400;
  line-height: 1;

  transition:
    transform 0.2s ease;
}


/* HOVER */

.program-overview-start:hover {
  background: #172B3A;
  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 10px 26px rgba(8, 35, 52, 0.18);
}


.program-overview-start:hover::after {
  color: #ffffff;

  transform: translateX(4px);
}


/* =========================================================
   PROGRAM OVERVIEW — MOBILE
   ========================================================= */

@media (max-width: 760px) {

  /* STACK IMAGE + CONTENT */

  .program-overview-page {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    grid-template-columns: none !important;

    overflow: visible !important;

    border-top: 1px solid var(--line);
  }


  /* =========================================================
     IMAGE FIRST
     ========================================================= */

  .program-overview-visual {
    position: relative;

    order: 1;

    width: 100% !important;
    height: 58vh !important;
    min-height: 440px !important;

    flex: none;

    overflow: hidden;
  }


  .program-overview-image {
    position: absolute;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    object-position: center;

    display: block;
  }


  .program-overview-image-overlay {
    position: absolute;
    inset: 0;

    background:
      linear-gradient(
        to top,
        rgba(8, 35, 52, 0.72) 0%,
        rgba(8, 35, 52, 0.10) 55%,
        rgba(8, 35, 52, 0.02) 100%
      );
  }


  /* BACK BUTTON */

  .program-overview-back {
    top: 20px;
    left: 20px;

    width: 42px;
    height: 42px;
  }


  /* IMAGE TEXT */

  .program-overview-image-copy {
    left: 28px;
    right: 28px;
    bottom: 28px;
  }


  .program-overview-image-copy h1 {
    max-width: 330px;

    margin-top: 12px;

    font-size: 36px;
    line-height: 0.98;
  }



/* =========================================================
   PROGRAM OVERVIEW — INDIVIDUAL IMAGE POSITION
   ========================================================= */

/* BOOTY BLISS */
.program-booty-bliss .program-overview-image {
  object-position: 50% 25%;
}


/* BODY BLITZ */
.program-body-blitz .program-overview-image {
  object-position: 50% 20%;
}


/* SCULPT YOU */
.program-sculpt-you .program-overview-image {
  object-position: 50% 18%;
}
  /* =========================================================
     CONTENT SECOND
     ========================================================= */

  .program-overview-content {
    order: 2;

    width: 100% !important;
    height: auto !important;

    display: block !important;

    overflow: visible !important;

    background: #ffffff;
  }


  .program-overview-inner {
    width: 100%;
    max-width: none;

    margin: 0;

    padding:
      34px
      22px
      110px;

    display: flex;
    flex-direction: column;

    gap: 26px;
  }


  /* TITLE */

  .program-overview-heading h2 {
    font-size: 42px;
    line-height: 0.95;
  }


  .program-overview-heading p {
    font-size: 13px;
  }


  /* =========================================================
     STATS — 2 × 2 ON MOBILE
     ========================================================= */

  .program-overview-stats {
    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }


  .program-overview-stat {
    min-height: 110px;

    padding: 16px 12px;
  }


  .program-overview-stat strong {
    font-size: 11px;
  }


  /* =========================================================
     DESCRIPTION
     ========================================================= */

  .program-overview-description h3 {
    font-size: 24px;
  }


  .program-overview-description p {
    font-size: 13px;
    line-height: 1.6;
  }


/* =========================================================
   START
   ========================================================= */

.program-overview-start {
  width: 220px;
  max-width: 100%;
  min-height: 58px;

  align-self: flex-start;
}


/* CLOSE PROGRAM OVERVIEW MOBILE MEDIA QUERY */
}

/* =========================================================
   PROGRAM DASHBOARD
   ========================================================= */

.program-dashboard-page {
  width: 100%;
  max-width: none;

  margin: 0;

  padding: 22px 28px 110px;

  box-sizing: border-box;
}


/* =========================================================
   MAIN — ONLY TWO COLUMNS
   ========================================================= */

.program-dashboard-main {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(330px, 35%)
    minmax(0, 1fr);

  gap: 20px;

  align-items: start;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.program-dashboard-left {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 14px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.program-dashboard-topbar {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 48px;
}


.program-dashboard-back {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: #ffffff;
  color: var(--navy);

  font: inherit;
  font-size: 20px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.program-dashboard-back:hover {
  background: var(--sage-soft);
  border-color: var(--sage);

  transform: translateX(-2px);
}


.program-dashboard-program {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.program-dashboard-program .eyebrow {
  color: var(--muted);
}


.program-dashboard-program strong {
  color: var(--navy);

  font-size: 16px;
  line-height: 1.2;
}


/* =========================================================
   YOUR PROGRAM
   ========================================================= */

.program-dashboard-hero {
  width: 100%;
  min-height: 190px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    86px;

  align-items: center;

  gap: 16px;

  padding: 24px;

  box-sizing: border-box;

  border-radius: 18px;

  background: var(--navy);
  color: #ffffff;

  overflow: hidden;
}


.program-dashboard-hero-copy {
  min-width: 0;
}


.program-dashboard-hero-copy .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}


.program-dashboard-hero-copy h1 {
  margin: 8px 0 10px;

  color: #ffffff;

  font-size: clamp(34px, 3vw, 44px);
  line-height: 0.95;

  letter-spacing: -0.05em;
}


.program-dashboard-hero-copy p {
  max-width: 330px;

  margin: 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   WEEK NUMBER
   ========================================================= */

.program-dashboard-week-number {
  width: 84px;
  height: 84px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.06);

  text-align: center;
}


.program-dashboard-week-number span,
.program-dashboard-week-number small {
  color: rgba(255, 255, 255, 0.62);

  font-size: 8px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.12em;
}


.program-dashboard-week-number strong {
  margin: 4px 0;

  color: #ffffff;

  font-size: 27px;
  line-height: 1;

  letter-spacing: -0.04em;
}


/* =========================================================
   WEEK PROGRESS
   ========================================================= */

.program-dashboard-progress {
  width: 100%;

  padding: 18px;

  box-sizing: border-box;

  border: 1px solid var(--line);
  border-radius: 16px;

  background: #ffffff;
}


.program-dashboard-progress-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;
}


.program-dashboard-progress-top > div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.program-dashboard-progress-top .eyebrow {
  color: var(--muted);
}


.program-dashboard-progress-top strong {
  color: var(--navy);

  font-size: 14px;
}


.program-dashboard-progress-percent {
  color: var(--navy);

  font-size: 22px !important;
  line-height: 1;
}


.program-dashboard-progress-track {
  position: relative;

  width: 100%;
  height: 7px;

  margin-top: 14px;

  overflow: hidden;

  border-radius: 999px;

  background: var(--sage-soft);
}


.program-dashboard-progress-track span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background: var(--sage-dark);

  transition: width 0.35s ease;
}


/* =========================================================
   WORKOUTS
   ========================================================= */

.program-dashboard-workouts {
  width: 100%;

  margin: 2px 0 0;
}


.program-dashboard-section-heading {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 10px;
}


.program-dashboard-section-heading > div {
  min-width: 0;
}


.program-dashboard-section-heading .eyebrow {
  color: var(--muted);
}


.program-dashboard-section-heading h2 {
  margin: 4px 0 0;

  color: var(--navy);

  font-size: 25px;
  line-height: 1;

  letter-spacing: -0.04em;
}


.program-dashboard-workout-count {
  flex: 0 0 auto;

  color: var(--muted);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.10em;
}


/* =========================================================
   WORKOUT LIST
   ========================================================= */

.program-dashboard-workout-list {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 9px;

  box-sizing: border-box;

  border: 1px solid var(--line);
  border-radius: 16px;

  background: #ffffff;
}


.program-dashboard-workout {
  width: 100%;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    28px;

  align-items: center;

  gap: 10px;

  padding: 11px 12px;

  box-sizing: border-box;

  border: 1px solid transparent;
  border-radius: 12px;

  background: transparent;

  color: var(--navy);

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.program-dashboard-workout:hover {
  background: var(--sage-soft);

  transform: translateY(-1px);
}


.program-dashboard-workout.active {
  border-color: var(--sage);

  background: var(--sage-soft);
}


.program-dashboard-workout.completed {
  background: var(--sage-soft);
}


.program-dashboard-workout-number {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--navy);
  color: #ffffff;

  font-size: 11px;
  font-weight: 800;
}


.program-dashboard-workout.active
.program-dashboard-workout-number {
  background: var(--sage-dark);
}


.program-dashboard-workout-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.program-dashboard-workout-copy strong {
  overflow: hidden;

  color: var(--navy);

  font-size: 13px;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.program-dashboard-workout-copy small {
  color: var(--muted);

  font-size: 10px;
  line-height: 1.2;
}


.program-dashboard-workout-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--navy);

  font-size: 15px;
  font-weight: 800;
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.program-dashboard-right {
  width: 100%;
  min-width: 0;

  padding-top: 0;
}


/* =========================================================
   WORKOUT PLAYER
   ========================================================= */

.program-workout-player {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 8px 28px
    rgba(8, 35, 52, 0.05);
}


/* =========================================================
   MEDIA
   ========================================================= */

.program-workout-media {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: var(--navy);
}


.program-workout-media video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #000000;
}


.program-workout-media-placeholder {
  position: absolute;

  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 14px;

  background: var(--navy);

  color: #ffffff;
}


.program-workout-media-play {
  width: 68px;
  height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-left: 4px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255, 255, 255, 0.30);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);

  color: #ffffff;

  font-size: 24px;
}


.program-workout-media-placeholder > span {
  color:
    rgba(255, 255, 255, 0.72);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.14em;
}


/* =========================================================
   WORKOUT DETAILS
   ========================================================= */

.program-workout-details {
  padding: 24px;

  box-sizing: border-box;
}


.program-workout-details-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.program-workout-details-title {
  min-width: 0;
}


.program-workout-details-title .eyebrow {
  color: var(--muted);
}


.program-workout-details-title h3 {
  margin: 5px 0 0;

  color: var(--navy);

  font-size: 28px;
  line-height: 1;

  letter-spacing: -0.04em;
}


.program-workout-details-duration {
  flex: 0 0 auto;

  padding: 7px 10px;

  border-radius: 999px;

  background: var(--sage-soft);
  color: var(--navy);

  font-size: 10px;
  font-weight: 800;

  white-space: nowrap;
}


.program-workout-description {
  max-width: 700px;

  margin: 16px 0 0;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.6;
}


/* =========================================================
   WORKOUT META
   ========================================================= */

.program-workout-meta {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 20px;
}


.program-workout-meta-item {
  min-width: 0;

  padding: 13px;

  box-sizing: border-box;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: #ffffff;
}


.program-workout-meta-item span {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.10em;
}


.program-workout-meta-item strong {
  display: block;

  overflow: hidden;

  color: var(--navy);

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

  .program-dashboard-main {
    grid-template-columns:
      minmax(300px, 40%)
      minmax(0, 1fr);

    gap: 14px;
  }


  .program-dashboard-page {
    padding-left: 20px;
    padding-right: 20px;
  }


  .program-dashboard-hero {
    grid-template-columns:
      minmax(0, 1fr)
      72px;

    padding: 20px;
  }


  .program-dashboard-week-number {
    width: 70px;
    height: 70px;
  }


  .program-dashboard-week-number strong {
    font-size: 23px;
  }


  .program-workout-details {
    padding: 20px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .program-dashboard-page {
    padding:
      16px
      16px
      110px;
  }


  .program-dashboard-main {
    display: flex;
    flex-direction: column;

    gap: 18px;
  }

  .program-dashboard-hero {
    min-height: 175px;

    grid-template-columns:
      minmax(0, 1fr)
      74px;

    gap: 12px;

    padding: 20px;
  }


  .program-dashboard-hero-copy h1 {
    font-size: 36px;
  }


  .program-dashboard-week-number {
    width: 72px;
    height: 72px;
  }


  .program-dashboard-section-heading h2 {
    font-size: 23px;
  }


  .program-dashboard-workout {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      24px;

    padding: 10px;
  }


  .program-workout-details-top {
    flex-direction: column;

    gap: 12px;
  }


  .program-workout-details-title h3 {
    font-size: 25px;
  }


  .program-workout-meta {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   WEEKLY PROGRESS PAGE
   ========================================================= */

.weekly-progress-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px 28px 110px;
  box-sizing: border-box;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.weekly-progress-page-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.weekly-progress-page-header > div {
  min-width: 0;
}

.weekly-progress-page-header h1 {
  margin: 4px 0 5px;
  color: var(--navy);
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1;
}

.weekly-progress-page-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.weekly-progress-back {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-size: 18px;
  transition:
    transform .2s ease,
    background-color .2s ease;
}

.weekly-progress-back:hover {
  transform: translateX(-2px);
  background: var(--sage-soft);
}


/* =========================================================
   UNIVERSAL 50 / 50 WEEKLY GRID
   ========================================================= */

.weekly-dashboard-grid,
.weekly-insight-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.weekly-dashboard-grid {
  margin-bottom: 18px;
}


/* =========================================================
   COMMON CARDS
   ========================================================= */

.weekly-training-card,
.weekly-planner-card,
.weekly-progress-bar-card,
.weekly-detail-card,
.weekly-macro-card,
.weekly-checkin-card,
.weekly-summary-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 24px;
}

.weekly-detail-card {
  margin-bottom: 18px;
}

.weekly-card-heading,
.weekly-detail-heading,
.weekly-progress-bar-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.weekly-card-heading h3,
.weekly-detail-heading h3,
.weekly-progress-bar-heading h3 {
  margin: 4px 0 0;
  color: var(--navy);
  font-size: 21px;
  line-height: 1.15;
}


/* =========================================================
   TOP LEFT — LAST / NEXT WORKOUT
   ========================================================= */

.weekly-workout-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.weekly-workout-item {
  min-width: 0;
  padding: 20px;
  border-radius: 16px;
  background: var(--sage-soft);
}

.weekly-workout-item.is-next {
  background: var(--navy);
  color: #fff;
}

.weekly-workout-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.weekly-workout-item.is-next .weekly-workout-label {
  color: rgba(255, 255, 255, .65);
}

.weekly-workout-item h4 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 20px;
}

.weekly-workout-item.is-next h4 {
  color: #fff;
}

.weekly-workout-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.weekly-workout-item.is-next .weekly-workout-meta {
  color: rgba(255, 255, 255, .72);
}


/* =========================================================
   TOP RIGHT — PLANNER / WEEKLY SCHEDULE
   ========================================================= */

.weekly-planner-card {
  display: flex;
  flex-direction: column;
}


/* DAYS */

.weekly-planner-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}


/* DAY BUTTON */

.weekly-planner-day {
  appearance: none;

  min-width: 0;
  min-height: 92px;

  padding: 12px 6px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border: 1px solid var(--line);
  border-radius: 13px;

  background: #fff;
  color: var(--navy);

  text-align: center;

  cursor: pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


/* DAY */

.weekly-planner-day small {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
}


/* NUMBER */

.weekly-planner-day strong {
  color: var(--navy);

  font-size: 19px;
  line-height: 1;
}


/* STATUS */

.weekly-planner-day span {
  display: block;

  margin-top: 8px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
}


/* =========================================================
   NORMAL DAY HOVER
   ========================================================= */

.weekly-planner-day:not(.is-today):hover {
background: #f7f7f3;
  transform: translateY(-3px);

  box-shadow:
    0 6px 14px
    rgba(16, 47, 70, .08);
}


/* =========================================================
   TODAY
   ========================================================= */

.weekly-planner-day.is-today {
  border-color: var(--sage);

  background: var(--sage);

  color: #fff;
}

.weekly-planner-day.is-today small,
.weekly-planner-day.is-today strong,
.weekly-planner-day.is-today span {
  color: #fff;
}


/* TODAY HOVER */

.weekly-planner-day.is-today:hover {
  background: var(--sage-dark);

  transform: translateY(-3px);

  box-shadow:
    0 6px 14px
    rgba(16, 47, 70, .10);
}


/* =========================================================
   WEEKLY PLANNER — SCHEDULE LIST
   ========================================================= */

.weekly-planner-schedule {
  margin-top: 22px;
  padding-top: 20px;

  border-top: 1px solid var(--line);

  background: #ffffff;
}


/* =========================================================
   HEADER
   ========================================================= */

.weekly-planner-schedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 12px;

  background: #ffffff;
}


/* WEEKLY SCHEDULE */

.weekly-planner-schedule-head .eyebrow {
  color: var(--navy);
}


/* YOUR PLANNED WEEK */

.weekly-planner-schedule-head h4 {
  margin: 4px 0 0;

  color: var(--navy);

  font-size: 18px;
  line-height: 1.15;
}


/* ACTIVITY COUNT */

.weekly-planner-count {
  padding: 6px 10px;

  border-radius: 999px;

  background: #edf1ef;
  color: var(--navy);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
}




/* =========================================================
   LIST
   ========================================================= */

.weekly-planner-schedule-list {
  display: flex;
  flex-direction: column;

  background: #ffffff;
}


/* =========================================================
   RECORD
   ========================================================= */

.weekly-planner-schedule-item {
  appearance: none;

  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    auto
    18px;

  align-items: center;

  gap: 14px;

  padding: 13px 8px;

  border: 0;
  border-bottom: 1px solid var(--line);

  border-radius: 0;

  background: #ffffff;
  color: inherit;

  box-shadow: none;

  text-align: left;
  font: inherit;

  cursor: pointer;

  transition:
    background-color .18s ease;
}


/* WHITE / SAGE / WHITE / SAGE */

.weekly-planner-schedule-item:nth-child(odd) {
  background: #ffffff;
}

.weekly-planner-schedule-item:nth-child(even) {
  background: rgba(141, 169, 157, 0.08);
}


/* TODAY MUST NOT BREAK ALTERNATING COLORS */

.weekly-planner-schedule-item.is-today {
  background: #ffffff;
}

.weekly-planner-schedule-item.is-today:nth-child(even) {
  background: rgba(141, 169, 157, 0.08);
}


/* LAST RECORD */

.weekly-planner-schedule-item:last-child {
  border-bottom: 0;
}


/* =========================================================
   HOVER — LIGHT SAGE
   ========================================================= */

@media (hover: hover) {

  .weekly-planner-schedule-item:hover,
  .weekly-planner-schedule-item:nth-child(odd):hover,
  .weekly-planner-schedule-item:nth-child(even):hover,
  .weekly-planner-schedule-item.is-today:hover {
    background: rgba(141, 169, 157, 0.18);
  }

}


/* =========================================================
   DATE
   ========================================================= */

.weekly-planner-schedule-date {
  text-align: center;
}

.weekly-planner-schedule-date span {
  display: block;

  color: var(--muted);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.weekly-planner-schedule-date strong {
  display: block;

  margin-top: 3px;

  color: var(--navy);

  font-size: 18px;
  line-height: 1;
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.weekly-planner-schedule-info {
  min-width: 0;
}

.weekly-planner-schedule-info strong {
  display: block;

  color: var(--navy);

  font-size: 12px;
  line-height: 1.3;
}

.weekly-planner-schedule-info span {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: var(--muted);

  font-size: 9px;
  line-height: 1.4;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   STATUS
   ========================================================= */

.weekly-planner-schedule-status {
  min-width: 70px;

  padding: 6px 9px;

  border-radius: 999px;

  text-align: center;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
}


/* TODAY */

.weekly-planner-schedule-status.is-today {
  background: var(--navy);
  color: #ffffff;
}


/* UPCOMING */

.weekly-planner-schedule-status.is-upcoming {
  background: var(--navy);
  color: #ffffff;
}


/* MISSED */

.weekly-planner-schedule-status.is-missed {
  background: #A33B3B;
  color: #ffffff;
}


/* COMPLETED */

.weekly-planner-schedule-status.is-completed {
  background: var(--sage);
  color: #ffffff;
}


/* CANCELLED */

.weekly-planner-schedule-status.is-cancelled {
  background: #f1f3f2;
  color: var(--muted);

  text-decoration: line-through;
}


/* =========================================================
   ARROW
   ========================================================= */

.weekly-planner-schedule-arrow {
  color: var(--navy);

  font-size: 15px;

  transition:
    transform .18s ease;
}

.weekly-planner-schedule-item:hover
.weekly-planner-schedule-arrow {
  transform: translateX(3px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .weekly-planner-schedule {
    margin-top: 18px;
    padding-top: 18px;
  }


  .weekly-planner-schedule-item {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto;

    gap: 10px;

    padding: 13px 4px;
  }


  .weekly-planner-schedule-arrow {
    display: none;
  }


  .weekly-planner-schedule-status {
    min-width: 0;

    padding: 6px 8px;

    font-size: 7px;
  }


  .weekly-planner-schedule-info span {
    white-space: normal;
  }

}

/* =========================================================
   WEEKLY COMPLETION
   ========================================================= */

.weekly-progress-bar-card {
  margin: 0;
}

.weekly-progress-bar {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sage-soft);
}

.weekly-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sage);
}

.weekly-training-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
}

.weekly-training-stats > div {
  padding: 5px 14px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.weekly-training-stats > div:last-child {
  border-right: 0;
}

.weekly-training-stats strong {
  display: block;
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
}

.weekly-training-stats span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}


/* =========================================================
   WEEKLY AVERAGES GRAPH
   ========================================================= */

.weekly-average-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  min-height: 190px;
  padding-top: 10px;
}

.weekly-average-column {
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.weekly-average-value {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.weekly-average-track {
  width: 38px;
  height: 115px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sage-soft);
}

.weekly-average-fill {
  width: 100%;
  min-height: 4px;
  border-radius: inherit;
  background: var(--sage);
}

.weekly-average-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}


/* EXISTING METRIC FALLBACK */

.weekly-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.weekly-metric {
  padding: 18px 10px;
  border-radius: 15px;
  background: var(--sage-soft);
  text-align: center;
}

.weekly-metric span,
.weekly-metric small {
  display: block;
  color: var(--muted);
}

.weekly-metric strong {
  display: block;
  margin: 7px 0 3px;
  color: var(--navy);
  font-size: 20px;
}


/* =========================================================
   MACRO TARGET
   ========================================================= */

.weekly-macro-row {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  gap: 12px;
}

.weekly-macro-calories,
.weekly-macro-stat {
  min-width: 0;
  padding: 20px;
  border-radius: 16px;
  background: var(--sage-soft);
}

.weekly-macro-calories strong {
  display: block;
  color: var(--navy);
  font-size: 32px;
  line-height: 1;
}

.weekly-macro-calories span,
.weekly-macro-stat span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.weekly-macro-stat strong {
  display: block;
  margin-top: 7px;
  color: var(--navy);
  font-size: 21px;
}


/* MACRO VISUAL */

.weekly-macro-chart {
  display: flex;
  align-items: center;
  gap: 26px;
}

.weekly-macro-ring {
  width: 132px;
  height: 132px;
  flex: 0 0 132px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--sage) 0 34%,
      var(--navy) 34% 74%,
      var(--sage-soft) 74% 100%
    );
}

.weekly-macro-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
}

.weekly-macro-ring-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.weekly-macro-ring-inner strong {
  display: block;
  color: var(--navy);
  font-size: 24px;
}

.weekly-macro-ring-inner span {
  color: var(--muted);
  font-size: 9px;
}


/* =========================================================
   DAILY CHECK-IN
   ========================================================= */

.weekly-checkin-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.weekly-checkin-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.weekly-checkin-day > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.weekly-checkin-circle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.weekly-checkin-circle.is-complete {
  border-color: var(--sage);
  background: var(--sage);
}

.weekly-checkin-circle.is-future {
  opacity: .42;
}

.weekly-checkin-summary {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 12px;
}





/* =========================================================
   SUMMARY / INSIGHT
   ========================================================= */

.weekly-summary-card {
  margin-top: 18px;
  background: var(--sage-soft);
}

.weekly-summary-card h3 {
  margin: 5px 0 8px;
  color: var(--navy);
  font-size: 23px;
}

.weekly-summary-card p {
  max-width: 1000px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}


/* =========================================================
   EMPTY
   ========================================================= */

.weekly-empty-state {
  padding: 20px 0 4px;
}

.weekly-empty-state p {
  color: var(--muted);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .weekly-workout-stack {
    grid-template-columns: 1fr;
  }

  .weekly-macro-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekly-macro-calories {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .weekly-progress-page {
    width: 100%;
    max-width: none;
    padding: 20px 16px 100px;
  }

  .weekly-progress-page-header h1 {
    font-size: 34px;
  }

  .weekly-dashboard-grid,
  .weekly-insight-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .weekly-training-card,
  .weekly-planner-card,
  .weekly-progress-bar-card,
  .weekly-detail-card,
  .weekly-macro-card,
  .weekly-checkin-card,
  .weekly-summary-card {
    padding: 20px;
    border-radius: 18px;
  }

  .weekly-planner-days {
    grid-template-columns: repeat(7, minmax(66px, 1fr));
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .weekly-planner-day {
    min-width: 66px;
  }

  .weekly-workout-stack {
    grid-template-columns: 1fr;
  }

  .weekly-training-stats > div {
    padding: 4px 7px;
  }

  .weekly-training-stats strong {
    font-size: 23px;
  }

  .weekly-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekly-average-chart {
    gap: 8px;
  }

  .weekly-average-track {
    width: 30px;
  }

  .weekly-macro-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekly-macro-calories {
    grid-column: 1 / -1;
  }

  .weekly-macro-chart {
    flex-direction: column;
    align-items: flex-start;
  }

  .weekly-checkin-days {
    grid-template-columns: repeat(7, minmax(40px, 1fr));
    overflow-x: auto;
  }

}


/* =========================================================
   WEEKLY PROGRESS — WORKOUT VIDEO PREVIEWS
   ========================================================= */

.weekly-workout-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}


/* =========================================================
   CARD
   ========================================================= */

.weekly-workout-video-card {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 450px;
  min-height: 450px;

  overflow: hidden;

  border: 0;
  border-radius: 18px;

  background: var(--navy);
  color: #fff;
}


/* NEXT WORKOUT IMAGE AREA */

.weekly-workout-video-placeholder.is-next {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  min-height: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   TOP LABELS — OVER IMAGE
   ========================================================= */

.weekly-workout-video-head {
  position: absolute;
  z-index: 5;

  top: 0;
  left: 0;
  right: 0;

  min-height: 48px;
  padding: 16px 18px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  box-sizing: border-box;

  pointer-events: none;
}

.weekly-workout-label {
  color: rgba(255,255,255,.85);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.weekly-workout-state {
  padding: 6px 9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}

.weekly-workout-state.is-completed {
  background: var(--sage);
  color: #fff;
}

.weekly-workout-state.is-upcoming {
  background: #fff;
  color: var(--navy);
}

/* =========================================================
   MEDIA — FILLS ENTIRE CARD
   ========================================================= */

.weekly-workout-video-player,
.weekly-workout-video-placeholder {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: var(--navy);
}


/* REAL VIDEO */

.weekly-workout-video-player video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  border: 0;
}


/* =========================================================
   DARK GRADIENT OVER MEDIA
   ========================================================= */

.weekly-workout-video-card::after {
  content: "";

  position: absolute;
  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(5, 29, 45, .05) 15%,
      rgba(5, 29, 45, .18) 42%,
      rgba(5, 29, 45, .78) 78%,
      rgba(5, 29, 45, .96) 100%
    );
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.weekly-workout-video-placeholder {
  position: absolute;
  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  box-sizing: border-box;

  overflow: hidden;

  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
}


/* EMPTY LAST WORKOUT */

.weekly-workout-video-placeholder.is-empty {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

.weekly-workout-video-placeholder.is-next {
  color: #fff;
}


/* =========================================================
   PLAY ICON
   ========================================================= */

.weekly-video-play-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,.18);

  color: #fff;

  font-size: 15px;

  backdrop-filter: blur(4px);
}

.weekly-workout-video-placeholder.is-empty
.weekly-video-play-icon {
  background: #fff;
  color: var(--navy);
}


/* =========================================================
   WORKOUT INFO — OVER IMAGE
   ========================================================= */

.weekly-workout-video-info {
  position: absolute;

  z-index: 4;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 22px 20px 18px;

  box-sizing: border-box;

  color: #fff;
}


/* TITLE */

.weekly-workout-video-info h4 {
  margin: 0;

  color: #fff;

  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.08;
  font-weight: 700;
}


/* META */

.weekly-workout-video-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 7px 14px;

  margin-top: 9px;
}

.weekly-workout-video-meta span {
  color: rgba(255,255,255,.88);

  font-size: 11px;
  font-weight: 600;
}


/* DESCRIPTION */

.weekly-workout-meta {
  margin: 8px 0 0;

  color: rgba(255,255,255,.78);

  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   START WORKOUT BUTTON
   ========================================================= */

.weekly-start-workout {
  width: auto;
  min-width: 184px;
  min-height: 48px;

  margin-top: 16px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  border: 0;
  border-radius: 999px;

  background: #fff;
  color: var(--navy);

  font: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  box-shadow: none;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.weekly-start-workout:hover {
  transform: translateY(-2px);
  opacity: .94;
}

.weekly-start-workout span {
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
}


/* =========================================================
   REAL VIDEO CONTROLS
   ========================================================= */

/*
 * If a real <video> is loaded, keep the native controls
 * usable above the gradient.
 */

.weekly-workout-video-player {
  z-index: 1;
}

.weekly-workout-video-player video {
  z-index: 1;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .weekly-workout-video-grid {
    grid-template-columns: 1fr;
  }

  .weekly-workout-video-card {
    min-height: 390px;
  }

  .weekly-workout-video-head {
    padding: 15px 16px;
  }

  .weekly-workout-video-info {
    padding: 20px 16px 16px;
  }

  .weekly-workout-video-info h4 {
    font-size: 23px;
  }

}


/* =========================================================
   WEEKLY PROGRESS — LINE CHARTS
   ========================================================= */

.weekly-line-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.weekly-line-card-heading h3 {
  margin: 4px 0 0;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.2;
}

.weekly-line-summary {
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}


/* =========================================================
   CHART AREA
   ========================================================= */

.weekly-line-chart-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  margin-top: 8px;
}

.weekly-line-chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* horizontal guide lines */

.weekly-chart-grid-line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


/* actual graph line */

.weekly-chart-line {
  fill: none !important;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


/* data points */

.weekly-chart-point {
  fill: #ffffff;
  stroke: var(--sage-dark);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}


/* =========================================================
   MON–SUN LABELS
   ========================================================= */

.weekly-line-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  margin-top: 7px;
}

.weekly-line-days span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.04em;
}


/* =========================================================
   STATS UNDER GRAPH
   ========================================================= */

.weekly-chart-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.weekly-chart-footer > div {
  min-width: 0;
  padding: 0 12px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.weekly-chart-footer > div:first-child {
  padding-left: 0;
}

.weekly-chart-footer > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.weekly-chart-footer strong {
  display: block;
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.weekly-chart-footer span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
}


/* =========================================================
   RECOVERY GRAPH
   ========================================================= */

.weekly-line-chart.is-recovery .weekly-chart-line {
  stroke: var(--navy);
}

.weekly-line-chart.is-recovery .weekly-chart-point {
  fill: #ffffff;
  stroke: var(--navy);
}


/* =========================================================
   WEEKLY CARDS
   ========================================================= */

.weekly-progress-bar-card,
.weekly-detail-card {
  min-width: 0;
  overflow: hidden;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .weekly-line-card-heading {
    gap: 14px;
    margin-bottom: 14px;
  }

  .weekly-line-card-heading h3 {
    font-size: 17px;
  }

  .weekly-line-summary {
    font-size: 20px;
  }

  .weekly-line-chart-wrap {
    height: 150px;
  }

  .weekly-line-days span {
    font-size: 8px;
  }

  .weekly-chart-footer {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 18px;
  }

  .weekly-chart-footer > div {
    border-right: 1px solid var(--line);
  }

  .weekly-chart-footer > div:nth-child(2),
  .weekly-chart-footer > div:nth-child(4) {
    border-right: 0;
  }

  .weekly-chart-footer > div:nth-child(3),
  .weekly-chart-footer > div:nth-child(4) {
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

}

/* =========================================================
   DAILY CHECK-IN — WIZARD
   ========================================================= */

.checkin-wizard {
  width: 100%;
}

.checkin-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.checkin-wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 32px;
}

.checkin-wizard-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.checkin-wizard-progress-bar.is-active {
  background: var(--sage-dark);
}

.checkin-wizard-question {
  text-align: center;
}

.checkin-wizard-step {
  display: block;
  margin-bottom: 9px;

  color: var(--sage-dark);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.checkin-wizard-question h2 {
  margin: 0;

  color: var(--navy);

  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.08;
}

.checkin-wizard-question > p {
  margin: 10px auto 24px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   DAILY CHECK-IN — NUMBER WHEEL
   ========================================================= */

.checkin-wheel {
  position: relative;

  width: min(100%, 320px);
  height: 250px;

  margin: 8px auto 20px;

  overflow: hidden;

  cursor: ns-resize;

  user-select: none;
  touch-action: none;
}

.checkin-wheel-values {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.checkin-wheel-number {
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--muted);

  font-size: 20px;
  font-weight: 600;

  opacity: .34;

  transition:
    transform .18s ease,
    opacity .18s ease;
}

.checkin-wheel-number:nth-child(2),
.checkin-wheel-number:nth-child(4) {
  font-size: 24px;
  opacity: .55;
}

.checkin-wheel-number.is-selected {
  min-width: 130px;

  color: var(--navy);

  font-size: 44px;
  font-weight: 700;

  opacity: 1;
}

.checkin-wheel-unit {
  position: absolute;

  left: calc(50% + 76px);
  top: 50%;

  transform: translateY(-50%);

  color: var(--muted);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.checkin-wheel-fade {
  position: absolute;
  z-index: 2;

  left: 0;

  width: 100%;
  height: 72px;

  pointer-events: none;
}

.checkin-wheel-fade-top {
  top: 0;

  background:
    linear-gradient(
      to bottom,
      #fff,
      rgba(255, 255, 255, 0)
    );
}

.checkin-wheel-fade-bottom {
  bottom: 0;

  background:
    linear-gradient(
      to top,
      #fff,
      rgba(255, 255, 255, 0)
    );
}


/* =========================================================
   DAILY CHECK-IN — ENERGY EMOJIS
   ========================================================= */

.checkin-energy-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 12px;

  margin: 32px auto 36px;
}

.checkin-energy-option {
  min-width: 0;
  padding: 8px 4px;

  border: 0;
  border-radius: 0;
  background: transparent;

  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;

  transition: transform .18s ease;
}

.checkin-energy-option:hover {
  transform: translateY(-3px);
  background: #f7f7f3;
}

.checkin-energy-option.is-selected {
  border-color: var(--sage-dark);
  background: var(--sage-soft);
}

.checkin-energy-option img {
  display: block;

  width: 62px;
  height: 62px;

  object-fit: contain;
}

.checkin-energy-option span {
  color: var(--navy);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}


/* =========================================================
   DAILY CHECK-IN — ACTIONS
   ========================================================= */

.checkin-wizard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-top: 26px;
}


/* =========================================================
   DAILY CHECK-IN — MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .checkin-wizard-progress {
    margin-bottom: 26px;
  }

  .checkin-wheel {
    height: 230px;
  }

  .checkin-energy-options {
    gap: 6px;
    margin-top: 26px;
  }

  .checkin-energy-option {
    padding: 10px 4px;
    border-radius: 14px;
  }

  .checkin-energy-option img {
    width: 46px;
    height: 46px;
  }

  .checkin-energy-option span {
    font-size: 8px;
  }

  .checkin-wizard-actions {
    gap: 8px;
  }

}


/* =========================================================
   DAILY CHECK-IN — MODAL WIDTH
   ========================================================= */

.modal:has(.checkin-wizard) {
  width: min(620px, calc(100vw - 32px));
  max-width: 620px;
}


/* =========================================================
   DAILY CHECK-IN — MOBILE MODAL WIDTH
   ========================================================= */

@media (max-width: 600px) {

  .modal:has(.checkin-wizard) {
    width: calc(100vw - 48px);
    max-width: 440px;

    margin-left: auto;
    margin-right: auto;

    border-radius: 24px;
  }

}

/* =========================================================
   DAILY CHECK-IN — ENERGY BACK LINK
   ========================================================= */

.checkin-wizard-actions.is-energy-step {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  margin-top: 14px;
  padding: 0;
}


/* Remove normal button appearance */

.checkin-wizard-actions.is-energy-step .button.secondary {
  width: auto;
  min-width: 0;
  height: auto;

  margin: 0;

  padding: 0;

  border: 0 !important;
  border-radius: 0;

  background: transparent !important;
  box-shadow: none !important;

  color: var(--navy);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}


/* Hover stays text-only */

.checkin-wizard-actions.is-energy-step .button.secondary:hover {
  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  transform: none;

  opacity: .65;
}



/* =========================================================
   PLANNER V2
   ========================================================= */

.planner-page {
  padding-bottom: 110px;
}

.planner-page-head {
  align-items: flex-end;
}

.planner-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr);
  gap: 20px;
  align-items: stretch;
}


/* =========================================================
   CALENDAR
   ========================================================= */

.planner-calendar-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}

.planner-calendar-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
}

.planner-calendar-head > div {
  text-align: center;
}

.planner-calendar-head h2 {
  margin: 4px 0 0;
  color: var(--navy);
}

.planner-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 8px;
}

.planner-calendar-weekdays span {
  padding: 7px;
  text-align: center;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.planner-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.planner-calendar-empty {
  min-height: 98px;
}

.planner-calendar-day {
  position: relative;
  min-width: 0;
  min-height: 98px;
  padding: 11px;

  border: 1px solid var(--line);
  border-radius: 14px;

  background: #fff;
  color: var(--navy);

  text-align: left;
  cursor: pointer;

  overflow: hidden;

transition:
  background .18s ease,
  border-color .18s ease;
}

.planner-calendar-day:hover {
  background: #f7f7f3;
}

.planner-calendar-day.is-today {
  border-color: var(--navy);
}

.planner-calendar-day.is-selected {
  background: var(--sage-soft);
  border-color: var(--sage-dark);
}

.planner-calendar-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border-radius: 50%;

  font-size: 12px;
  font-weight: 700;
}

.planner-calendar-day.is-today
.planner-calendar-number {
  background: var(--navy);
  color: #fff;
}

.planner-calendar-day.is-selected
.planner-calendar-number {
  background: var(--sage-dark);
  color: #fff;
}


/* =========================================================
   CALENDAR ACTIVITIES
   ========================================================= */

.planner-calendar-activities {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 7px;
}

.planner-calendar-activity {
  display: block;

  width: 100%;

  padding: 4px 6px;

  border-radius: 6px;

  background: #eef2ef;

  color: var(--navy);

  font-size: 8px;
  font-weight: 700;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-calendar-activity.is-training {
  background: var(--sage-soft);
}

.planner-calendar-more {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.planner-calendar-footer {
  display: flex;
  justify-content: flex-end;

  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid var(--line);
}


/* =========================================================
   PLANNER — WEEKLY / DAY PANEL HEADER
   WHITE VERSION
   ========================================================= */

.planner-day-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding: 0 0 18px;

  margin-bottom: 0;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  border-bottom: 1px solid rgba(12, 48, 70, 0.10);

  color: var(--navy);
}


/* WEEKLY SCHEDULE — LIGHT SAGE */

.planner-day-panel-head .eyebrow {
  display: block;

  margin: 0 0 6px;

  color: #8da99d !important;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* YOUR PLANNED WEEK — NAVY */

.planner-day-panel-head h2 {
  margin: 0;

  color: #102f46 !important;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}


/* DATE — USED IN DAY MODE */

.planner-day-panel-head p {
  margin: 6px 0 0;

  color: #8a979d;

  font-size: 10px;
}


/* ACTIVITY COUNT */

.planner-day-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 26px;

  padding: 0 10px;

  border-radius: 999px;

  background: #edf1ef !important;
  color: #526873 !important;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.05em;

  white-space: nowrap;
}

/* =========================================================
   ACTIVITY
   ========================================================= */

.planner-day-activity {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.planner-day-activity-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  margin-bottom: 11px;
}

.planner-activity-type,
.planner-activity-status {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.planner-activity-type {
  color: var(--sage-dark);
}

.planner-activity-status {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f3f1;
  color: var(--muted);
}

.planner-activity-status.is-completed {
  background: var(--sage-soft);
  color: var(--sage-dark);
}

.planner-activity-status.is-missed,
.planner-activity-status.is-cancelled {
  opacity: .65;
}

.planner-day-activity-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 15px;
}

.planner-activity-time {
  display: block;
  margin-bottom: 5px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 600;
}

.planner-day-activity h3 {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
}

.planner-activity-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.planner-remove-action {
  opacity: .55;
}

.planner-remove-action:hover {
  opacity: 1;
}


/* =========================================================
   EMPTY DAY
   ========================================================= */

.planner-day-empty {
  padding: 50px 15px;
  text-align: center;
}

.planner-day-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin: 0 auto 13px;

  border-radius: 50%;

  background: var(--sage-soft);
  color: var(--sage-dark);

  font-size: 22px;
}

.planner-day-empty h3 {
  margin: 0 0 6px;
  color: var(--navy);
}

.planner-day-empty p {
  max-width: 220px;
  margin: 0 auto;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.5;
}

.planner-add-day {
  margin-top: 18px;
}


/* =========================================================
   PLANNER — MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .planner-layout-v2 {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .planner-page-head {
    align-items: stretch;
  }

  .planner-page-head .button {
    width: 100%;
  }

  .planner-calendar-card,
  .planner-day-panel {
    padding: 17px;
    border-radius: 20px;
  }

  .planner-calendar-head {
    grid-template-columns: 38px 1fr 38px;
    margin-bottom: 18px;
  }

  .planner-calendar-weekdays span {
    padding: 5px 2px;
    font-size: 7px;
  }

  .planner-calendar-grid {
    gap: 3px;
  }

  .planner-calendar-empty {
    min-height: 55px;
  }

  .planner-calendar-day {
    min-height: 55px;
    padding: 5px;
    border-radius: 9px;
  }

  .planner-calendar-number {
    width: 23px;
    height: 23px;
    font-size: 10px;
  }

  .planner-calendar-activities {
    margin-top: 3px;
  }

  .planner-calendar-activity {
    height: 5px;
    padding: 0;
    border-radius: 999px;

    font-size: 0;
  }

  .planner-calendar-more {
    display: none;
  }

  .planner-day-activity-main {
    align-items: flex-start;
    flex-direction: column;
  }

}


/* =========================================================
   PLANNER MODAL — DAY SCHEDULE
   ========================================================= */

.planner-modal-day-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.planner-modal-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.planner-modal-day-count {
  flex-shrink: 0;

  padding: 6px 9px;

  border-radius: 999px;

  background: var(--sage-soft);
  color: var(--navy);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
}

.planner-modal-day-list {
  border-top: 1px solid var(--line);
}

.planner-modal-activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 16px 0;

  border-bottom: 1px solid var(--line);
}

.planner-modal-activity-info {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.planner-modal-activity-time {
  margin-bottom: 4px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 600;
}

.planner-modal-activity-info strong {
  color: var(--navy);

  font-size: 13px;
  line-height: 1.3;
}

.planner-modal-activity-meta {
  display: flex;
  align-items: center;
  gap: 5px;

  margin-top: 5px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 600;

  text-transform: capitalize;
}

.planner-modal-activity-actions {
  display: flex;
  align-items: center;
  gap: 14px;

  flex-shrink: 0;
}

/* =========================================================
   PLANNER MODAL — FORM BUTTONS
   ========================================================= */

#scheduleForm .actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

#scheduleForm .actions .button {
  width: auto;
  min-width: 140px;
  flex: 0 0 auto;
  padding-left: 26px;
  padding-right: 26px;
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .planner-modal-activity {
    align-items: flex-start;
  }

  .planner-modal-activity-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

}
/* =========================================================
   HOME — TRAINING SCHEDULE PLANNER ACTIVITY
   ========================================================= */

.compact-day {
  position: relative;
}


/* Date contains at least one Planner activity */

.compact-day-activity-dot {
  position: absolute;

  left: 50%;
  bottom: 6px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--navy);

  transform: translateX(-50%);
}


/* Today's card already has navy/sage styling,
   so keep the indicator visible */

.compact-day.active
.compact-day-activity-dot {
  background: #fff;
}
/* =========================================================
   PROGRESS — 2 X 2 DASHBOARD
   ========================================================= */

.progress-overview-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}


/* =========================================================
   SHARED CARD
   ========================================================= */

.progress-overview-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;

  padding: 24px;

  border: 1px solid var(--line);
  border-radius: 20px;

  background: #fff;
}


/* =========================================================
   PROGRESS PICTURES
   ========================================================= */

.progress-overview-grid .progress-picture-preview-card {
  margin: 0;
}


.progress-overview-grid .progress-picture-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 18px;
}


.progress-overview-grid .progress-picture-preview-head h2 {
  margin: 4px 0 0;
}


.progress-picture-three-grid {
  display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}


.progress-overview-grid .progress-picture-preview-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;

  border-radius: 12px;
}


.progress-overview-grid .progress-picture-preview-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   BODY WEIGHT
   ========================================================= */

.progress-overview-grid .weight-tracking-section {
  margin: 0;
}


.progress-overview-grid .weight-tracking-header {
  margin-bottom: 18px;
}


.progress-overview-grid .weight-tracking-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}


.progress-overview-grid .weight-tracking-card {
  min-width: 0;
}


/* =========================================================
   CALORIC BURN + RESTING HEART RATE
   ========================================================= */

.progress-health-card {
  min-height: 300px;

  display: flex;
  flex-direction: column;
}


.progress-health-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}


.progress-health-card-head h2 {
  margin: 4px 0 0;

  color: var(--navy);
}


.progress-health-value {
  display: flex;
  align-items: flex-end;
  gap: 6px;

  margin-top: 26px;
}


.progress-health-value strong {
  color: var(--navy);

  font-size: 48px;
  line-height: 1;
}


.progress-health-value span {
  margin-bottom: 5px;

  color: var(--muted);

  font-size: 11px;
  font-weight: 700;
}





/* =========================================================
   HEALTH FOOTER
   ========================================================= */

.progress-health-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: auto;
  padding-top: 14px;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 9px;
  font-weight: 600;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .progress-overview-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }


  .progress-overview-card {
    padding: 18px;

    border-radius: 18px;
  }


  .progress-picture-three-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }


  .progress-overview-grid .weight-tracking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }


  .progress-health-card {
    min-height: 260px;
  }


  .progress-health-value strong {
    font-size: 42px;
  }


  .progress-health-chart {
    height: 100px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .progress-overview-grid .weight-tracking-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   PROGRESS — MATCH ALL SECTION TITLES
   ========================================================= */

.progress-overview-grid .progress-picture-preview-head h2,
.progress-overview-grid .weight-tracking-header h2,
.progress-overview-grid .progress-health-card-head h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--navy);
}


/* =========================================================
   PROGRESS — METRIC MINI CHARTS
   ========================================================= */

.progress-metric-mini-chart {
  width: 100%;
  margin-top: 22px;
  margin-bottom: 16px;
}

.progress-metric-mini-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================
   PROGRESS DASHBOARD — ALIGNMENT + GRAPH FIX
   ========================================================= */


/* ---------------------------------------------------------
   ROW 1 — MATCH CARD STRUCTURE / HEIGHT
   --------------------------------------------------------- */

.progress-overview-grid > .progress-picture-preview-card,
.progress-overview-grid > .weight-tracking-section {
  height: 100%;
  min-height: 0;
}


/* Keep both headers the exact same height */

.progress-overview-grid .progress-picture-preview-head,
.progress-overview-grid .weight-tracking-header {
  min-height: 54px;
  margin-bottom: 0;
  padding-bottom: 18px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  border-bottom: 1px solid var(--line);
}


/* Exact same title styling */

.progress-overview-grid .progress-picture-preview-head h2,
.progress-overview-grid .weight-tracking-header h2,
.progress-overview-grid .progress-health-card-head h2 {
  margin: 4px 0 0;

  color: var(--navy);

  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}


/* ---------------------------------------------------------
   PROGRESS PICTURES
   --------------------------------------------------------- */

.progress-overview-grid .progress-picture-latest {
  min-height: 42px;

  margin: 0;
  padding: 14px 0 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.progress-overview-grid .progress-picture-three-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}


/* Slightly reduce photo height */

.progress-overview-grid .progress-picture-preview-image {
  width: 100%;
  aspect-ratio: 3 / 3.65;

  overflow: hidden;

  border-radius: 12px;
}


.progress-overview-grid .progress-picture-preview-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* ---------------------------------------------------------
   BODY WEIGHT
   Give it equivalent spacing to Latest Photos
   --------------------------------------------------------- */

.progress-overview-grid .weight-tracking-grid {
  margin-top: 42px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}


/* ---------------------------------------------------------
   ROW 2 — HEALTH CARDS
   --------------------------------------------------------- */

.progress-overview-grid > .progress-health-card {
  min-height: 0;
  height: auto;

  padding: 24px;
}


.progress-health-card-head {
  min-height: 54px;

  margin: 0;
  padding: 0 0 18px;

  border-bottom: 1px solid var(--line);
}


/* ---------------------------------------------------------
   CAL / BPM VALUE
   --------------------------------------------------------- */

.progress-health-value {
  min-height: 62px;

  margin: 18px 0 0;

  display: flex;
  align-items: flex-end;
  gap: 6px;
}


.progress-health-value strong {
  color: var(--navy);

  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}


.progress-health-value span {
  margin-bottom: 5px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   HEALTH GRAPH
   Prevent the weight graph from stretching
   --------------------------------------------------------- */

.progress-metric-mini-chart {
  width: 100%;
  max-width: 390px;

  height: 120px;

  margin: 8px auto 12px;
}


.progress-metric-mini-chart svg {
  display: block;

  width: 100%;
  height: 100%;
}

/* =========================================================
   PROGRESS — RESTING HEART RATE CARD FIX
   Keep mini graph inside card
   ========================================================= */

.progress-health-card {
  position: relative;
  overflow: hidden;
}


.progress-health-card .progress-metric-mini-chart {
  position: relative;
  width: 100%;
  height: 150px;
  min-height: 0;
  margin-top: 20px;
  overflow: hidden;
}


.progress-health-card .progress-metric-mini-chart svg {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


/* =========================================================
   RESTING HEART RATE — KEEP GRAPH INSIDE CARD
   ========================================================= */

.resting-heart-rate-card {
  position: relative;
  overflow: hidden;
}


.resting-heart-rate-card .progress-metric-mini-chart {
  position: relative;
  width: 100%;
  height: 150px;
  min-height: 0;
  margin-top: 20px;
  overflow: hidden;
}


.resting-heart-rate-card .progress-metric-mini-chart svg {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}
/* ---------------------------------------------------------
   HEALTH FOOTER
   --------------------------------------------------------- */

.progress-health-card-footer {
  width: 100%;

  margin-top: 0;
  padding-top: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 9px;
  font-weight: 600;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .progress-overview-grid .weight-tracking-grid {
    margin-top: 20px;
  }


  .progress-overview-grid .progress-picture-preview-head,
  .progress-overview-grid .weight-tracking-header {
    min-height: 0;
  }


  .progress-overview-grid .progress-picture-preview-image {
    aspect-ratio: 3 / 4;
  }


  .progress-metric-mini-chart {
    max-width: 100%;
    height: 105px;
  }


  .progress-overview-grid > .progress-health-card {
    padding: 18px;
  }

}


/* =========================================================
   PROGRESS — FINAL TOP ROW ALIGNMENT
   ========================================================= */


/* ---------------------------------------------------------
   VIEW MORE + VIEW ALL DATA
   EXACT SAME TYPOGRAPHY
   --------------------------------------------------------- */

.progress-overview-grid .progress-picture-view-more,
.progress-overview-grid .weight-view-all {
  padding: 0;
  border: 0;
  background: transparent;

  color: var(--navy);

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   MATCH PHOTO HEIGHT TO WEIGHT CARD HEIGHT
   --------------------------------------------------------- */

.progress-overview-grid {
  --progress-top-content-height: 250px;
}


/* All 3 photos */

.progress-overview-grid .progress-picture-preview-image {
  width: 100%;
  height: var(--progress-top-content-height);
  aspect-ratio: auto;

  overflow: hidden;

  border-radius: 12px;
}


.progress-overview-grid .progress-picture-preview-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* Starting + Current Weight cards */

.progress-overview-grid .weight-tracking-card {
  height: var(--progress-top-content-height);
  min-height: var(--progress-top-content-height);

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   KEEP THE WEIGHT CARD CONTENT FITTING CLEANLY
   --------------------------------------------------------- */

.progress-overview-grid .weight-card-top {
  margin-bottom: 0;
}


.progress-overview-grid .weight-mini-chart {
  height: 92px;
}


.progress-overview-grid .weight-card-footer {
  margin-top: 0;
}


/* ---------------------------------------------------------
   PHOTO LABELS
   --------------------------------------------------------- */

.progress-overview-grid .progress-picture-preview-item > span {
  display: block;

  margin-top: 7px;

  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .progress-overview-grid {
    --progress-top-content-height: 190px;
  }

}


@media (max-width: 430px) {

  .progress-overview-grid {
    --progress-top-content-height: 170px;
  }

}


/* =========================================================
   PROGRESS PICTURES — 3 POSITION SYSTEM
   ========================================================= */

.progress-picture-angle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}


.progress-picture-angle {
  min-width: 0;
}


.progress-picture-single-stage {
  width: 100%;
}


.progress-picture-single-stage .progress-picture-upload {
  width: 100%;
}


/* =========================================================
   PHOTO HISTORY — FRONT / SIDE / BACK
   ========================================================= */

.picture-history-column-headings {
  display: grid;
  grid-template-columns: 110px repeat(3, minmax(0, 1fr));
  gap: 14px;

  margin-top: 30px;
  padding: 0 0 12px;

  border-bottom: 1px solid var(--line);
}


.picture-history-column-headings strong {
  color: var(--navy);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;

  text-align: center;
}


.picture-history-session {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;

  align-items: center;

  padding: 18px 0;

  border-bottom: 1px solid var(--line);
}


.picture-history-date {
  min-width: 0;
}


.picture-history-date strong {
  display: block;

  color: var(--navy);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}


.picture-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}


.picture-history-angle {
  min-width: 0;
}


.picture-history-photo {
  display: block;

  width: 100%;
  aspect-ratio: 3 / 4;

  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 14px;

  background: #f3f4f1;

  cursor: pointer;
}


.picture-history-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.picture-history-photo.is-empty {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  color: var(--muted);

  cursor: default;
}


.picture-history-empty-icon {
  width: 28px;
  height: 28px;
}


.picture-history-empty-icon svg {
  display: block;

  width: 100%;
  height: 100%;
}


.picture-history-photo.is-empty span {
  font-size: 9px;
  font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .progress-picture-angle-list {
    grid-template-columns: 1fr;
  }


  .picture-history-column-headings {
    grid-template-columns: 68px repeat(3, minmax(0, 1fr));
    gap: 7px;
  }


  .picture-history-session {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 7px;
  }


  .picture-history-grid {
    gap: 7px;
  }


  .picture-history-date strong {
    font-size: 9px;
  }


  .picture-history-photo {
    border-radius: 10px;
  }

}


/* =========================================================
   PROGRESS PHOTO — FULL SCREEN VIEWER
   ========================================================= */

.progress-photo-viewer {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100dvh;

  background: rgba(7, 12, 16, .97);

  color: #fff;
}


/* =========================================================
   TOP TOOLBAR
   ========================================================= */

.progress-photo-viewer-toolbar {
  position: relative;

  flex: 0 0 auto;

  min-height: 68px;

  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;

  padding: 0 22px;

  border-bottom: 1px solid rgba(255,255,255,.10);
}


.progress-photo-viewer-close {
  justify-self: start;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: transparent;

  color: #fff;

  font-size: 30px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   FRONT / SIDE / BACK SELECTOR
   ========================================================= */

.progress-photo-viewer-position {
  justify-self: center;
}


.progress-photo-viewer-position select {
  min-width: 105px;

  padding: 9px 28px 9px 12px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;

  background: #11181d;

  color: #fff;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;

  text-align: center;

  cursor: pointer;
}


.progress-photo-viewer-count {
  justify-self: end;

  color: rgba(255,255,255,.65);

  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
}


/* =========================================================
   DATE
   ========================================================= */

.progress-photo-viewer-date {
  flex: 0 0 auto;

  padding: 16px 20px 4px;

  color: rgba(255,255,255,.70);

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;

  text-align: center;
}


/* =========================================================
   PHOTO STAGE
   ========================================================= */

.progress-photo-viewer-stage {
  position: relative;

  flex: 1 1 auto;

  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px 80px 24px;

  overflow: hidden;

  touch-action: pan-y;
}


.progress-photo-viewer-image {
  width: min(620px, 100%);
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


.progress-photo-viewer-image img {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 10px;

  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.progress-photo-viewer-arrow {
  position: absolute;
  top: 50%;

  z-index: 3;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  transform: translateY(-50%);

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;

  background: rgba(255,255,255,.08);

  color: #fff;

  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}


.progress-photo-viewer-arrow.is-left {
  left: 24px;
}


.progress-photo-viewer-arrow.is-right {
  right: 24px;
}


.progress-photo-viewer-arrow:disabled {
  opacity: .18;
  cursor: default;
}


/* =========================================================
   BOTTOM / COMPARE
   ========================================================= */

.progress-photo-viewer-bottom {
  flex: 0 0 auto;

  display: flex;
  justify-content: center;

  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));

  border-top: 1px solid rgba(255,255,255,.10);
}


.progress-photo-compare-button {
  min-width: 190px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 13px 20px;

  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;

  background: #fff;

  color: #102f46;

  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}


/* =========================================================
   MOBILE VIEWER
   ========================================================= */

@media (max-width: 767px) {

  .progress-photo-viewer-toolbar {
    min-height: 56px;

    grid-template-columns: 52px 1fr 52px;

    padding: 0 8px;
  }


  .progress-photo-viewer-close {
    width: 38px;
    height: 38px;

    font-size: 26px;
  }


  .progress-photo-viewer-position select {
    min-width: 90px;

    padding: 7px 24px 7px 10px;

    border: 0;

    background: transparent;

    font-size: 11px;
  }


  .progress-photo-viewer-count {
    font-size: 9px;
  }


  .progress-photo-viewer-date {
    padding-top: 11px;

    font-size: 10px;
  }


  .progress-photo-viewer-stage {
    padding: 12px 0 18px;
  }


  .progress-photo-viewer-image {
    width: 100%;
    height: 100%;
  }


  .progress-photo-viewer-image img {
    max-width: 100%;
    max-height: 100%;

    border-radius: 0;
  }


  .progress-photo-viewer-arrow {
    width: 38px;
    height: 38px;

    background: rgba(0,0,0,.30);

    font-size: 25px;
  }


  .progress-photo-viewer-arrow.is-left {
    left: 10px;
  }


  .progress-photo-viewer-arrow.is-right {
    right: 10px;
  }


  .progress-photo-viewer-bottom {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }


  .progress-photo-compare-button {
    width: 100%;
    max-width: 320px;
  }

}


@media (max-width: 700px) {

  .progress-gallery-headings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin: 0 0 8px;
    align-items: end;
  }

  .progress-gallery-headings strong {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;

    /* Match the date text */
    font-size: 8px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
  }

}


/* =========================================================
   PROGRESS PHOTO HISTORY — DESKTOP LABELS / DATES
   ========================================================= */

@media (min-width: 701px) {

  .progress-gallery-headings strong,
  .progress-gallery-date {
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
  }

  .progress-gallery-headings strong {
    text-align: center;
    white-space: nowrap;
  }

  .progress-gallery-date {
    display: block;
    margin-top: 7px;
    text-align: center;
  }

}


/* =========================================================
   PHOTO CHECK-IN — DESKTOP LAYOUT
   ========================================================= */

@media (min-width: 701px) {

  /* -----------------------------------------
     PROGRESS DATE — COMPACT / LEFT
     ----------------------------------------- */

  .history-progress-date {
    width: 100%;
    max-width: 260px;
    margin-right: auto;
  }

  .history-progress-date input,
  .history-progress-date .progress-picture-date-input {
    width: 100%;
  }


  /* -----------------------------------------
     FOUR PHOTO POSITIONS IN ONE ROW
     ----------------------------------------- */

  .history-upload-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .history-upload-position {
    min-width: 0;
  }

  .history-upload-box {
    width: 100%;
  }


  /* -----------------------------------------
     SAVE PROGRESS — COMPACT / BOTTOM RIGHT
     ----------------------------------------- */

  .history-save-progress {
    width: auto;
    min-width: 170px;
    max-width: none;
    margin-top: 18px;
    margin-left: auto;
    margin-right: 0;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
  }

}


/* =========================================================
   PROGRESS PICTURES PAGE — MOBILE
   COMPACT 4-POSITION LAYOUT
   ========================================================= */

@media (max-width: 700px) {

  /* -----------------------------------------
     DATE CARD — COMPACT
     ----------------------------------------- */

  .progress-picture-date-card {
    width: 100%;
    max-width: 235px;
    padding: 14px;
    margin-right: auto;
  }

  .progress-picture-date-card .progress-picture-date-input,
  .progress-picture-date-card input[type="date"] {
    width: 100%;
  }


  /* -----------------------------------------
     ALL FOUR POSITIONS IN ONE ROW
     ----------------------------------------- */

  .progress-picture-angle-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100%;
  }

  .progress-picture-angle {
    width: 100%;
    min-width: 0;
  }


  /* -----------------------------------------
     COMPACT POSITION CARDS
     Remove giant individual cards
     ----------------------------------------- */

  .progress-picture-position-card,
  .progress-picture-angle {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }


  /* -----------------------------------------
     POSITION HEADINGS
     ----------------------------------------- */

  .progress-picture-angle .eyebrow,
  .progress-picture-angle h2,
  .progress-picture-angle h3 {
    display: none;
  }

  .progress-picture-angle::before {
    display: block;
    margin-bottom: 6px;

    color: var(--navy);

    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
  }

  .progress-picture-angle:nth-child(1)::before {
    content: "Front";
  }

  .progress-picture-angle:nth-child(2)::before {
    content: "Left Side";
  }

  .progress-picture-angle:nth-child(3)::before {
    content: "Right Side";
  }

  .progress-picture-angle:nth-child(4)::before {
    content: "Back";
  }


  /* -----------------------------------------
     UPLOAD BOX
     ----------------------------------------- */

  .progress-picture-single-stage {
    width: 100%;
  }

  .progress-picture-single-stage .progress-picture-upload {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;

    padding: 5px !important;

    box-sizing: border-box;
  }


  /* -----------------------------------------
     SMALLER CONTENT INSIDE UPLOAD BOX
     ----------------------------------------- */

  .progress-picture-upload-empty {
    padding: 4px;
  }

  .progress-picture-upload-empty strong {
    font-size: 8px;
  }

  .progress-picture-upload-empty span {
    font-size: 6px;
    line-height: 1.2;
  }

}

/* =========================================================
   PROGRESS PICTURES — CHECK-IN VERSION
   ========================================================= */

.progress-pictures-checkin-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.progress-pictures-history-link {
  margin-top: 14px;
}


/* MOBILE — keep same compact four-column design */

@media (max-width: 700px) {

  .progress-pictures-page {
    padding-bottom: 90px;
  }

  .progress-pictures-checkin-card {
    padding: 18px 14px;
  }

  .progress-pictures-checkin-card
  .history-upload-list {
    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .progress-pictures-checkin-card
  .history-upload-position {
    min-width: 0;
  }

  .progress-pictures-checkin-card
  .history-upload-label {
    display: block;

    margin-bottom: 6px;

    font-size: 7px;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
  }

  .progress-pictures-checkin-card
  .history-upload-box {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
  }

  .progress-pictures-checkin-card
  .history-progress-date {
    max-width: 235px;
  }

  .progress-pictures-checkin-card
  .history-save-progress {
    width: auto !important;

    margin-top: 16px;
    margin-left: auto;
  }

}


/* =========================================================
   PROGRESS TAB — PHOTOS
   MOBILE ONLY — 4 PHOTOS IN ONE ROW
   ========================================================= */

@media (max-width: 760px) {

  /* Four photos in one horizontal row */
  .progress-overview-grid
  .progress-picture-four-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }


  /* Each photo column */
  .progress-overview-grid
  .progress-picture-four-grid
  .progress-picture-preview-item {
    width: 100% !important;
    min-width: 0 !important;
  }


  /* Photo container */
  .progress-overview-grid
  .progress-picture-four-grid
  .progress-picture-preview-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;

    overflow: hidden;

    border-radius: 8px;
  }


  /* Actual image */
  .progress-overview-grid
  .progress-picture-four-grid
  .progress-picture-preview-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
  }


  /* Front / Left Side / Right Side / Back */
  .progress-overview-grid
  .progress-picture-four-grid
  .progress-picture-preview-item > span {
    display: block;

    margin-top: 5px;

    font-size: 7px !important;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
    white-space: nowrap;
  }

}


/* =========================================================
   PROGRESS PHOTO VIEWER — COMPARE MODE
   ========================================================= */

.progress-photo-viewer.is-comparing {
  overflow-y: auto;
}


/* ---------- TOOLBAR ---------- */

.progress-photo-compare-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.progress-photo-compare-done {
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}


/* ---------- 50 / 50 LAYOUT ---------- */

.progress-photo-compare-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: calc(100vh - 72px);
}

.progress-photo-compare-column {
  min-width: 0;
  width: 100%;
  padding: 18px 24px 32px;

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* subtle divider */

.progress-photo-compare-column.is-primary {
  border-right: 1px solid rgba(255,255,255,.10);
}


/* ---------- LEFT HEADER ---------- */

.progress-photo-compare-column-header {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #fff;
  text-align: center;
}

.progress-photo-compare-column-header span {
  font-size: 12px;
  font-weight: 700;
}

.progress-photo-compare-column-header strong {
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 600;
}


/* ---------- RIGHT CONTROLS ---------- */

.progress-photo-compare-controls {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.progress-photo-compare-controls select {
  min-width: 140px;

  padding: 8px 34px 8px 12px;

  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;

  background: #151d21;
  color: #fff;

  font: inherit;
  font-size: 12px;
}

.progress-photo-compare-count {
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 700;
}


/* ---------- DATE ---------- */

.progress-photo-compare-date {
  margin: 0 0 12px;

  color: rgba(255,255,255,.70);

  font-size: 11px;
  font-weight: 600;
  text-align: center;
}


/* =========================================================
   COMPARE PHOTO — FIXED PHOTO FRAME
   ========================================================= */

.progress-photo-compare-image {
  position: relative;

  width: min(72%, 420px);
  aspect-ratio: 4 / 5;

  margin: 0 auto;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #11191d;

  border-radius: 10px;
}


/*
 * Every uploaded image fills the SAME frame.
 *
 * Square, landscape and portrait images will all
 * display inside the exact same 4:5 dimensions.
 */

.progress-photo-compare-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  border-radius: inherit;
}


/* ---------- RIGHT PHOTO STAGE ---------- */

.progress-photo-compare-stage {
  position: relative;

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* keep arrows inside their own 50% side */

.progress-photo-compare-stage
.progress-photo-viewer-arrow.is-left {
  left: 14px;
}

.progress-photo-compare-stage
.progress-photo-viewer-arrow.is-right {
  right: 14px;
}


/* ---------- EMPTY ---------- */

.progress-photo-compare-empty {
  width: 100%;
  padding: 80px 20px;

  color: rgba(255,255,255,.65);

  text-align: center;
  font-size: 13px;
}

/* =========================================================
   MOBILE BEFORE / AFTER COMPARISON
   ========================================================= */

.progress-photo-mobile-compare {
  display: none;
}


/* =========================================================
   MOBILE
   Still 50 / 50 — do NOT stack
   ========================================================= */

@media (max-width: 700px) {

.progress-photo-compare-layout {
  display: none;
}


  .progress-photo-compare-column {
    padding: 12px 6px 24px;
  }


  .progress-photo-compare-column-header {
    min-height: 42px;
    flex-direction: column;
    gap: 2px;
  }


  .progress-photo-compare-column-header span {
    font-size: 10px;
  }


  .progress-photo-compare-column-header strong {
    font-size: 9px;
  }


  .progress-photo-compare-controls {
    min-height: 42px;
    gap: 5px;
  }


  .progress-photo-compare-controls select {
    width: auto;
    min-width: 0;
    max-width: 105px;

    padding: 7px 22px 7px 7px;

    font-size: 10px;
  }


  .progress-photo-compare-count {
    font-size: 9px;
  }


  .progress-photo-compare-date {
    margin-bottom: 8px;
    font-size: 9px;
  }


  .progress-photo-compare-image img {
    width: auto;

    /*
     * Portrait image instead of
     * filling the 50% column.
     */
    height: min(62vh, 520px);

    max-width: 88%;
    max-height: 520px;

    object-fit: contain;

    border-radius: 8px;
  }


  .progress-photo-compare-stage
  .progress-photo-viewer-arrow.is-left {
    left: 2px;
  }


  .progress-photo-compare-stage
  .progress-photo-viewer-arrow.is-right {
    right: 2px;
  }
  
  
  /* =========================================================
   MOBILE COMPARE — BEFORE / AFTER SLIDER
   ========================================================= */

.progress-photo-mobile-compare {
  display: block;

  width: 100%;
  max-width: 430px;

  margin: 0 auto;
  padding: 18px 16px 30px;
}


/* ---------- POSITION CONTROLS ---------- */

.progress-photo-mobile-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-bottom: 16px;
}


.progress-photo-mobile-control {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;

  text-align: center;
}


.progress-photo-mobile-control select {
  width: 100%;

  padding: 8px 26px 8px 9px;

  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;

  background: #151d21;
  color: #fff;

  font: inherit;
  font-size: 10px;
}


.progress-photo-mobile-control span {
  color: rgba(255,255,255,.65);

  font-size: 9px;
  font-weight: 600;
}


/* ---------- FIXED 4:5 SLIDER FRAME ---------- */

.progress-photo-mobile-slider {
  --compare-position: 50%;

  position: relative;

  width: min(82vw, 330px);
  aspect-ratio: 4 / 5;

  margin: 0 auto;

  overflow: hidden;

  border-radius: 10px;

  background: #11191d;

  touch-action: pan-y;
}


/* Both images use the exact same frame */

.progress-photo-mobile-slider img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* ---------- ORIGINAL ---------- */

.progress-photo-mobile-base {
  z-index: 1;
}


/* ---------- COMPARISON ---------- */

.progress-photo-mobile-overlay {
  position: absolute;

  z-index: 2;

  inset: 0;

  width: var(--compare-position);

  overflow: hidden;
}


.progress-photo-mobile-overlay img {
  width: min(82vw, 330px);
  max-width: none;
}


/* ---------- DIVIDER ---------- */

.progress-photo-mobile-divider {
  position: absolute;

  z-index: 3;

  top: 0;
  bottom: 0;

  left: var(--compare-position);

  width: 2px;

  transform: translateX(-1px);

  background: rgba(255,255,255,.95);

  pointer-events: none;
}


.progress-photo-mobile-divider span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 34px;
  height: 34px;

  transform:
    translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #fff;
  border-radius: 50%;

  background: #0d171c;
  color: #fff;

  font-size: 15px;
}


/* ---------- INVISIBLE RANGE ---------- */

.progress-photo-mobile-range {
  position: absolute;

  z-index: 4;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  opacity: 0;

  cursor: ew-resize;
}


/* ---------- LABELS ---------- */

.progress-photo-mobile-labels {
  width: min(82vw, 330px);

  margin: 8px auto 0;

  display: flex;
  justify-content: space-between;

  color: rgba(255,255,255,.68);

  font-size: 9px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .05em;
}


/* ---------- PHOTO HISTORY NAVIGATION ---------- */

.progress-photo-mobile-navigation {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  margin-top: 14px;
}


.progress-photo-mobile-navigation button {
  width: 32px;
  height: 32px;

  padding: 0;

  border: 1px solid rgba(255,255,255,.20);
  border-radius: 50%;

  background: #151d21;
  color: #fff;

  font-size: 18px;

  cursor: pointer;
}


.progress-photo-mobile-navigation button:disabled {
  opacity: .3;
  cursor: default;
}


.progress-photo-mobile-navigation span {
  color: rgba(255,255,255,.72);

  font-size: 10px;
  font-weight: 700;
}

}


/* =========================================================
   PROGRESS PHOTO COMPARE — MOBILE PORTRAIT SIZE
   ========================================================= */

@media (max-width: 700px) {

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 8px;

    width: calc(100% - 16px);

    margin:
      16px auto
      28px;
  }


  /* Taller portrait photo area */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-stage {
    width: 100%;

    min-height: 58vh;

    display: flex;

    align-items: center;

    justify-content: center;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-compare-image {
    width: 100%;

    height: 58vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 10px;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-compare-image img {
    width: 100%;

    height: 100%;

    max-width: none;

    max-height: none;

    object-fit: cover;

    object-position: center;

    border-radius: 10px;
  }


  /* Keep both columns equal */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-column {
    min-width: 0;

    width: 100%;
  }


  /* Compact controls so photos get more room */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-controls {
    gap: 4px;

    margin-bottom: 8px;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-compare-controls select {
    width: 100%;

    min-width: 0;

    padding:
      7px
      20px
      7px
      6px;

    font-size: 10px;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-compare-date {
    margin-bottom: 8px;

    font-size: 9px;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-compare-label {
    margin-bottom: 5px;

    font-size: 9px;
  }

}


/* =========================================================
   PROGRESS PHOTO VIEWER — MOBILE ONE-SCREEN VIEW
   Normal viewer only — NOT compare mode
   ========================================================= */

@media (max-width: 700px) {

  /* Lock the viewer to the visible phone screen */
  .progress-photo-viewer:not(.is-comparing) {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    display: grid !important;

    grid-template-rows:
      52px
      38px
      minmax(0, 1fr)
      72px;

    z-index: 99999;

    box-sizing: border-box;
  }


  /* =====================================================
     TOP BAR
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-toolbar {
    grid-row: 1;

    width: 100%;
    height: 52px;
    min-height: 52px;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box;
  }


  /* =====================================================
     DATE
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-date {
    grid-row: 2;

    height: 38px;

    margin: 0 !important;
    padding: 8px 10px !important;

    box-sizing: border-box;
  }


  /* =====================================================
     PHOTO AREA
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-stage {
    grid-row: 3;

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 10px 48px !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box;
  }


  /* =====================================================
     IMAGE
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-image {
    width: 100% !important;
    height: 100% !important;

    max-width: 340px !important;
    max-height: 100% !important;

    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: transparent !important;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
  }


  /* =====================================================
     ARROWS
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-arrow {
    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 10;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-arrow.is-left {
    left: 10px !important;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-arrow.is-right {
    right: 10px !important;
  }


  /* =====================================================
     BOTTOM / COMPARE BUTTON
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-bottom {
    grid-row: 4;

    width: 100%;
    height: 72px;

    margin: 0 !important;

    padding: 10px 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box;

    overflow: hidden !important;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-compare-button {
    width: min(100%, 290px);

    margin: 0 auto !important;
  }

}


/* =========================================================
   PROGRESS PHOTO VIEWER — MOBILE ONE-SCREEN VIEW
   Normal viewer only — NOT compare mode
   ========================================================= */

@media (max-width: 700px) {

  /* =====================================================
     VIEWER — NO SCROLL
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing) {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    overscroll-behavior: none;

    display: flex !important;
    flex-direction: column !important;

    z-index: 99999;

    box-sizing: border-box;
  }


  /* =====================================================
     TOP BAR
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-toolbar {
    flex: 0 0 48px !important;

    width: 100%;
    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box;
  }


  /* =====================================================
     DATE
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-date {
    flex: 0 0 30px !important;

    width: 100%;
    height: 30px !important;

    margin: 0 !important;
    padding: 4px 10px !important;

    box-sizing: border-box;
  }


  /* =====================================================
     PHOTO AREA
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-stage {
    position: relative;

    flex: 0 0 auto !important;

    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 4px 46px 0 !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    box-sizing: border-box;
  }


  /* =====================================================
     IMAGE — SLIGHTLY TALLER
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-image {
    width: min(100%, 320px) !important;

    height: calc(100dvh - 160px) !important;

    max-width: 320px !important;
    max-height: 570px !important;

    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: transparent !important;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
  }


  /* =====================================================
     ARROWS
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-arrow {
    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 10;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-arrow.is-left {
    left: 10px !important;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-arrow.is-right {
    right: 10px !important;
  }


  /* =====================================================
     COMPARE BUTTON — DIRECTLY UNDER PHOTO
     ===================================================== */

  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-viewer-bottom {
    flex: 0 0 58px !important;

    width: 100%;
    height: 58px !important;

    margin: 0 !important;
    padding: 8px 16px 6px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    overflow: hidden !important;

    box-sizing: border-box;
  }


  .progress-photo-viewer:not(.is-comparing)
  .progress-photo-compare-button {
    width: min(100%, 290px);

    margin: 0 auto !important;
  }


  /* =====================================================
     PREVENT VIEWER CONTENT FROM CREATING PAGE SCROLL
     ===================================================== */

  body:has(.progress-photo-viewer:not(.is-comparing)) {
    overflow: hidden !important;
  }

}


/* =========================================================
   PAGE BACK BUTTONS — NEW DESIGN IN OLD POSITION
   ========================================================= */

.macro-history-back.program-overview-back,
.progress-pictures-back.program-overview-back,
.weight-history-back.program-overview-back,
.planner-back.program-overview-back,
.progress-page-back.program-overview-back {

  /* Cancel Program Overview positioning */
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  /* Same position */
  margin:
    12px
    0
    18px
    22px !important;

  /* Keep the new circular button appearance */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: none !important;
}




/* =========================================================
   MACRO WEIGHT WHEEL — MATCH HEIGHT WHEEL
   ========================================================= */

.macro-weight-wheel {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}


/* Same wheel width as Height */

.macro-weight-wheel .weight-wheel-column {
  width: 100% !important;
  max-width: 210px !important;
  margin: 0 auto !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* Remove any white panel behind numbers */

.macro-weight-wheel::before,
.macro-weight-wheel::after {
  background: transparent !important;
  box-shadow: none !important;
}


/* Keep selected number area clean */

.macro-weight-wheel .weight-wheel-number {
  background: transparent !important;
}


/* Selected number */

.macro-weight-wheel .weight-wheel-number.is-selected {
  background: transparent !important;
}


/* Unit beside selected number */

.macro-weight-wheel .weight-wheel-unit {
  margin-left: 16px !important;
}

/* =========================================================
   MACRO HEIGHT — UNIT TOGGLE
   Match Weight selector
   ========================================================= */

.macro-weight-unit-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;

  width: 100%;
  padding: 4px;

  background: #f1f3f2;
  border-radius: 999px;
}


/* BOTH OPTIONS */

.macro-weight-unit-toggle .weight-unit-option {
  width: 100%;
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 16px;

  border: 0;
  border-radius: 999px;

  background: transparent;

  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}


/* SELECTED OPTION */

.macro-weight-unit-toggle .weight-unit-option.is-active {
  background: var(--navy) !important;
  color: #fff !important;
}


/* REMOVE HOVER OVERRIDE ON SELECTED */

.macro-weight-unit-toggle .weight-unit-option.is-active:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

/* =========================================================
   MOBILE MACRO MODAL — CLOSE BUTTON RIGHT
   ========================================================= */

.modal-card.macro-mobile .close-button {
  left: auto !important;
  right: 22px !important;
}

/* =========================================================
   MOBILE MACRO WIZARD — CLOSE BUTTON RIGHT
   ========================================================= */

.macro-mobile-close-right {
  position: absolute !important;

  top: 22px !important;
  right: 22px !important;

  left: auto !important;
  bottom: auto !important;

  margin: 0 !important;
  transform: none !important;
}


/* =========================================================
   PLANNER — ADD ACTIVITY BUTTON
   ========================================================= */

.planner-day-add-button {
  width: auto !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

margin: 18px 0 20px auto !important;
  padding: 10px 18px !important;

  border-radius: 999px;

  white-space: nowrap;
}




/* =========================================================
   PLANNER — INLINE DATE CALENDAR
   ========================================================= */

.planner-date-field {
  position: relative;
}


.planner-inline-calendar[hidden] {
  display: none;
}


.planner-inline-calendar {
  position: absolute;

  top: calc(100% + 8px);
  left: 0;

  width: 280px;
  padding: 14px;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 14px;

  box-shadow:
    0 14px 35px
    rgba(7, 29, 43, .14);

  z-index: 100;

  font-family: inherit;
}


/* =========================================================
   MONTH HEADER
   ========================================================= */

.planner-inline-calendar-head {
  display: grid;

  grid-template-columns:
    32px 1fr 32px;

  align-items: center;

  gap: 8px;

  margin-bottom: 12px;
}


.planner-inline-calendar-head strong {
  text-align: center;

  color: var(--navy);

  font-size: 13px;
  font-weight: 700;
}


.planner-inline-calendar-nav {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 50%;

  color: var(--navy);

  font-family: inherit;
  font-size: 20px;
  line-height: 1;

  cursor: pointer;
}


.planner-inline-calendar-nav:hover {
  background: var(--sage-soft);
}


/* =========================================================
   WEEKDAYS
   ========================================================= */

.planner-inline-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  margin-bottom: 5px;
}


.planner-inline-calendar-weekdays span {
  text-align: center;

  color: var(--muted);

  font-size: 9px;
  font-weight: 700;

  text-transform: uppercase;
}


/* =========================================================
   DAYS
   ========================================================= */

.planner-inline-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  gap: 3px;
}


.planner-inline-calendar-day {
  width: 100%;
  aspect-ratio: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;

  border: 1px solid transparent;
  border-radius: 50%;

  color: var(--navy);

  font-family: inherit;
  font-size: 11px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}


.planner-inline-calendar-day:hover {
  background: var(--sage-soft);
}


/* TODAY */

.planner-inline-calendar-day.is-today {
  border-color: var(--sage-dark);
}


/* SELECTED */

.planner-inline-calendar-day.is-selected {
  background: var(--navy);
  border-color: var(--navy);

  color: #fff;
}


.planner-inline-calendar-day.is-selected:hover {
  background: var(--navy);
}


/* PREVIOUS / NEXT MONTH DAYS */

.planner-inline-calendar-day.is-outside {
  color: var(--muted);
  opacity: .45;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .planner-inline-calendar {
    width: min(
      280px,
      calc(100vw - 56px)
    );

    padding: 12px;
  }


  .planner-inline-calendar-days {
    gap: 2px;
  }


  .planner-inline-calendar-day {
    font-size: 10px;
  }

}

/* =========================================================
   PLANNER — ACTIVITY TYPE PICKER
   ========================================================= */

.planner-picker-modal {
  width: 100%;
}


.planner-picker-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 22px;
}


.planner-picker-option {
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 16px;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 12px;

  color: var(--navy);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}


.planner-picker-option:hover {
  background: var(--sage-soft);
  border-color: var(--sage);
}


.planner-picker-option.is-selected {
  background: var(--navy);
  border-color: var(--navy);

  color: #fff;
}


.planner-picker-option.is-selected:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}


@media (max-width: 640px) {

  .planner-picker-options {
    grid-template-columns: 1fr;
  }


  .planner-picker-option {
    min-height: 50px;
  }

}


/* =========================================================
   PLANNER — INLINE TYPE OPTIONS
   ========================================================= */

.planner-type-field {
  position: relative;
}


.planner-inline-type-options[hidden] {
  display: none;
}


.planner-inline-type-options {
  position: absolute;

  top: calc(100% + 8px);
  left: 0;

  width: 100%;

  padding: 8px;

  display: grid;
  gap: 5px;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 12px;

  box-shadow:
    0 14px 35px
    rgba(7, 29, 43, .12);

  z-index: 100;
}


.planner-inline-type-option {
  width: 100%;

  padding: 11px 12px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: var(--navy);

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;
}


.planner-inline-type-option:hover {
  background: var(--sage-soft);
}


.planner-inline-type-option.is-selected {
  background: var(--navy);
  color: #fff;
}


.planner-inline-type-option.is-selected:hover {
  background: var(--navy);
  color: #fff;
}


/* =========================================================
   PLANNER — ADD ACTIVITY MODAL POLISH
   ========================================================= */
   
   

/* Date / Time / Type trigger */

#scheduleForm .planner-picker-trigger {
  width: 100%;
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 15px;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 11px;

  color: var(--navy);

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


/* Hover */

#scheduleForm .planner-picker-trigger:hover {
  background: #fafbf9;
  border-color: var(--sage);
}


/* Focus */

#scheduleForm .planner-picker-trigger:focus-visible {
  outline: none;

  border-color: var(--sage-dark);

  box-shadow:
    0 0 0 3px
    rgba(127, 154, 137, .14);
}


/* Visible selected value */

#scheduleForm .planner-picker-trigger-value {
  display: block;

  color: var(--navy);

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  line-height: 1.2;
}


/* Arrow */

#scheduleForm .planner-picker-trigger-arrow {
  flex: 0 0 auto;

  margin-left: 12px;

  color: var(--sage-dark);

  font-size: 17px;
  font-weight: 400;
  line-height: 1;

  transition: transform .18s ease;
}


/* =========================================================
   FORM LABELS
   ========================================================= */

#scheduleForm .field > label {
  display: block;

  margin-bottom: 7px;

  color: var(--navy);

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;

  letter-spacing: .02em;
}


/* =========================================================
   ACTIVITY TEXT FIELD
   ========================================================= */

#scheduleForm input[type="text"] {
  width: 100%;
  min-height: 46px;

  padding: 0 14px;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 11px;

  color: var(--navy);

  font-family: inherit;
  font-size: 13px;

  outline: none;
}


#scheduleForm input[type="text"]:focus {
  border-color: var(--sage-dark);

  box-shadow:
    0 0 0 3px
    rgba(127, 154, 137, .12);
}


/* =========================================================
   SAVE ACTIVITY
   ========================================================= */

#scheduleForm .button {
  min-height: 43px;

  padding: 0 20px;

  border-radius: 999px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   SPACING
   ========================================================= */

#scheduleForm {
  gap: 15px 12px;
}


/* Date + Time */

#scheduleForm .planner-date-field,
#scheduleForm .planner-time-field {
  min-width: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  #scheduleForm {
    grid-template-columns: 1fr;
  }

  #scheduleForm .planner-picker-trigger {
    min-height: 48px;
  }

}

/* =========================================================
   PLANNER — ADD ACTIVITY MODAL SIZE
   ========================================================= */

.planner-schedule-modal {
  width: 700px;
  max-width: 100%;
  
    min-height: 500px;

}


/* =========================================================
   PLANNER — ADD / EDIT ACTIVITY MODAL SIZE
   ========================================================= */

.planner-schedule-modal {
  width: 700px;
  max-width: 100%;

  min-height: 550px;

  overflow: visible;
}


/* Main title */

.planner-schedule-modal .modal-head h2 {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
}


/* PLANNER eyebrow */

.planner-schedule-modal .modal-head .eyebrow {
  font-size: 9px;
  letter-spacing: .16em;
}


/* Labels */

#scheduleForm .field > label {
  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 700;
}


/* Activity input */

#scheduleForm input[name="name"] {
  min-height: 50px;

  padding: 0 15px;

  border-radius: 11px;

  font-family: inherit;
  font-size: 13px;
}


/* Date / Time / Type */

#scheduleForm .planner-picker-trigger {
  min-height: 48px;

  padding: 0 15px;

  border-radius: 11px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}


#scheduleForm .planner-picker-trigger-value {
  font-size: 12px;
  font-weight: 600;
}


/* Save Activity — restore compact original appearance */

#scheduleForm .button {
  width: auto;
  min-width: 125px;
  min-height: 44px;

  padding: 0 21px;

  border-radius: 999px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}


/* More breathing room */

#scheduleForm {
  gap: 18px 14px;
}



/* =========================================================
   PLANNER — TIME PICKER
   Smaller popup only
   ========================================================= */

/*
   Your openModal(..., "planner-picker") gives this modal
   the planner-picker variant. Keep this scoped so it does
   NOT shrink Add Activity.
*/

.modal.planner-picker,
.modal-content.planner-picker,
.modal-card.planner-picker {
  width: 480px;
  max-width: calc(100vw - 40px);
}


/* If planner-picker is the outer wrapper instead */

.planner-picker .planner-picker-modal {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}


/* Select Time heading */

.planner-picker-modal .modal-head h2 {
  font-size: 25px;
  line-height: 1.1;
  font-weight: 700;
}


.planner-picker-modal .modal-head .eyebrow {
  font-size: 9px;
  letter-spacing: .16em;
}


/* ---------------------------------------------------------
   TIME WHEEL TYPOGRAPHY
   --------------------------------------------------------- */

.planner-time-wheel {
  max-width: 230px;
  margin: 20px auto 24px;
}


.planner-time-wheel [data-planner-time-value] {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}


.planner-time-wheel [data-planner-time-value].is-selected {
  font-size: 23px;
  font-weight: 700;
}


/* =========================================================
   TIME PICKER BUTTONS — RESTORE COMPACT DESIGN
   ========================================================= */

.planner-picker-modal .weight-picker-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-top: 22px;
}


/* Back */

.planner-picker-modal .weight-picker-actions .button.secondary {
  width: auto;
  flex: 0 0 auto;

  min-width: 105px;
  min-height: 42px;

  padding: 0 20px;

  border-radius: 999px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}


/* Confirm Time */

.planner-picker-modal .weight-picker-actions .button:not(.secondary) {
  width: auto;
  flex: 0 0 auto;

  min-width: 165px;
  min-height: 42px;

  padding: 0 22px;

  border-radius: 999px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .planner-schedule-modal {
    min-height: auto;
  }


  .planner-picker .planner-picker-modal {
    max-width: 100%;
  }


  .planner-picker-modal .weight-picker-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }


  .planner-picker-modal .weight-picker-actions .button {
    width: 100%;
    min-width: 0;
  }

}


/* =========================================================
   PLANNER — INLINE PICKER VISIBILITY FIX
   ========================================================= */

/*
   Allow Date and Type dropdowns to extend outside
   their fields without being clipped.
*/

.planner-schedule-modal {
  overflow: visible;
}


/*
   The form itself must also allow the dropdowns
   to extend downward.
*/

#scheduleForm {
  overflow: visible;
}


/*
   Keep Date and Type above surrounding fields
   while their dropdown is displayed.
*/

#scheduleForm .planner-date-field,
#scheduleForm .planner-type-field {
  position: relative;
}


/* Calendar above other fields */

.planner-inline-calendar {
  z-index: 300;
}


/* Type choices above other fields */

.planner-inline-type-options {
  z-index: 300;
}


/*
   Make sure Type dropdown can show every option.
*/

.planner-inline-type-options {
  max-height: none;
  overflow: visible;
}


/* =========================================================
   PLANNER — TIME MODAL WIDTH
   ========================================================= */

.planner-picker .planner-picker-modal {
  width: 420px;
  max-width: calc(100vw - 40px);
  margin: 0 auto;
}


/* =========================================================
   PLANNER — TIME PICKER DIALOG SIZE
   ========================================================= */

#modal.planner-picker-dialog {
  width: 440px;
  max-width: calc(100vw - 40px);
}


/* =========================================================
   PLANNER — RIGHT COLUMN
   ========================================================= */

.planner-right-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* Add Activity above card */

.planner-right-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  margin-bottom: 14px;
}

.planner-right-actions .button {
  width: auto;
  min-height: 42px;

  padding: 0 20px;

  border-radius: 999px;
}


/* Right card */

.planner-right-column .planner-day-panel {
  width: 100%;
  flex: 1;
}


/* =========================================================
   PROGRESS — WEIGHT TYPOGRAPHY MATCH
   ========================================================= */

/* Starting Weight / Current Weight
   Match the size of "Latest Photos" */

.progress-page .weight-card-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}


/* 143 / 150
   Match main card title sizing */

.progress-page .weight-card-value strong {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}


/* LB */

.progress-page .weight-card-value span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}



/* =========================================================
   PROGRESS — ALIGN PHOTO + WEIGHT SUBHEADINGS
   ========================================================= */

.progress-picture-latest,
.weight-tracking-grid {
  padding-left: 0;
  padding-right: 0;
}


/* Weight column labels */

.weight-tracking-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* Align Starting / Current Weight vertically
   with Latest Photos */

.weight-card-label-outside {
  display: block;
  margin-bottom: 14px;
}


/* =========================================================
   CALORIC BURN — ADVANCED GRAPH
   ========================================================= */

.caloric-burn-card {
  overflow: hidden;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.caloric-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 18px;
  margin-bottom: 18px;
}


.caloric-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
}


.caloric-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}


.caloric-chart-legend-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;
}


.caloric-chart-legend-dot.is-burn {
  background: var(--navy);
}


.caloric-chart-legend-dot.is-average {
  background: var(--sage);
}


/* VALUE */

.caloric-chart-summary {
  display: flex;
  align-items: baseline;
  gap: 5px;
}


.caloric-chart-summary strong {
  color: var(--navy);

  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}


.caloric-chart-summary span {
  color: var(--muted);

  font-size: 9px;
  font-weight: 700;
}


/* =========================================================
   GRAPH LAYOUT
   ========================================================= */

.caloric-chart {
  display: grid;

  grid-template-columns:
    42px minmax(0, 1fr);

  gap: 10px;

  width: 100%;

  margin-top: 4px;
}


/* =========================================================
   Y AXIS
   ========================================================= */

.caloric-chart-y-axis {
  height: 220px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 0 0 1px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  text-align: right;
}


/* =========================================================
   GRAPH AREA
   ========================================================= */

.caloric-chart-main {
  position: relative;

  min-width: 0;
}


.caloric-chart-svg {
  display: block;

  width: 100%;
  height: 220px;

  overflow: visible;
}


/* =========================================================
   GRID
   ========================================================= */

.caloric-chart-grid {
  stroke: rgba(16, 47, 70, .08);
  stroke-width: 1;
}


/* =========================================================
   AREA
   ========================================================= */

.caloric-chart-area {
  fill:
    url(
      #caloricBurnHistoryAreaGradient
    );

  stroke: none;

  pointer-events: none;
}


/* =========================================================
   PRIMARY LINE
   ========================================================= */

.caloric-chart-burn-line {
  fill: none;

  stroke: var(--navy);
  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   SECONDARY LINE
   ========================================================= */

.caloric-chart-average-line {
  fill: none;

  stroke: var(--sage);
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   POINTS
   ========================================================= */

.caloric-chart-point {
  fill: #fff;

  stroke: var(--navy);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


.caloric-chart-active-point-ring {
  fill: #fff;

  stroke: rgba(16, 47, 70, .15);
  stroke-width: 5;

  vector-effect: non-scaling-stroke;
}


.caloric-chart-active-point {
  fill: var(--navy);

  stroke: #fff;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   ACTIVE MARKER
   ========================================================= */

.caloric-chart-active-marker {
  stroke: var(--sage);

  stroke-width: 1;

  stroke-dasharray: 4 5;

  opacity: .75;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   TOOLTIP
   ========================================================= */

.caloric-chart-tooltip {
  position: absolute;

  left: 71.5%;
  top: 20px;

  transform:
    translate(-50%, -100%);

  min-width: 92px;

  padding: 9px 12px;

  background: var(--navy);

  border-radius: 10px;

  box-shadow:
    0 8px 24px
    rgba(7, 29, 43, .14);

  color: #fff;

  text-align: center;

  pointer-events: none;
}


.caloric-chart-tooltip::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -5px;

  width: 10px;
  height: 10px;

  background: var(--navy);

  transform:
    translateX(-50%)
    rotate(45deg);
}


.caloric-chart-tooltip span {
  display: block;

  margin-bottom: 3px;

  color: rgba(255,255,255,.65);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: .08em;
}


.caloric-chart-tooltip strong {
  position: relative;
  z-index: 1;

  font-size: 15px;
  line-height: 1;
}


.caloric-chart-tooltip small {
  position: relative;
  z-index: 1;

  margin-left: 3px;

  color: rgba(255,255,255,.65);

  font-size: 7px;
  font-weight: 700;
}


/* =========================================================
   X AXIS
   ========================================================= */

.caloric-chart-x-axis {
  display: grid;

  grid-template-columns:
    repeat(
      var(--caloric-axis-count, 1),
      minmax(0, 1fr)
    );

  width: 100%;

  padding-top: 9px;

  color: var(--muted);

  font-size: 7px;
  font-weight: 500;
}


.caloric-chart-x-axis span {
  min-width: 0;

  text-align: center;

  white-space: nowrap;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .caloric-chart-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }


  .caloric-chart {
    grid-template-columns:
      34px minmax(0, 1fr);

    gap: 7px;
  }


  .caloric-chart-svg,
  .caloric-chart-y-axis {
    height: 180px;
  }


  .caloric-chart-tooltip {
    min-width: 76px;

    padding: 7px 9px;
  }


  .caloric-chart-x-axis {
    font-size: 7px;
  }

}

/* =========================================================
   CALORIC BURN HISTORY — TWO COLUMN PAGE
   ========================================================= */

.caloric-burn-history-page {
  width: 100%;
}


.caloric-burn-history-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 24px;

  align-items: start;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.caloric-burn-history-left {
  min-width: 0;
}


.caloric-burn-history-header {
  margin-bottom: 18px;
}


.caloric-burn-history-header h1 {
  margin: 4px 0 0;
}


/* =========================================================
   RANGE SELECTOR
   ========================================================= */

.caloric-burn-range-tabs {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 18px;
}


.caloric-burn-range-tab {
  appearance: none;

  min-width: 44px;

  padding: 8px 12px;

  border:
    1px solid
    rgba(16, 47, 70, .14);

  border-radius: 999px;

  background: #fff;

  color: var(--navy);

  font: inherit;
  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}


.caloric-burn-range-tab:hover {
  border-color: var(--navy);
}


.caloric-burn-range-tab.is-active {
  background: var(--navy);
  border-color: var(--navy);

  color: #fff;
}


/* =========================================================
   GRAPH
   ========================================================= */

.caloric-burn-history-chart-card {
  width: 100%;

  padding: 24px;

  box-sizing: border-box;
}


.caloric-burn-history-chart {
  width: 100%;

  min-width: 0;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.caloric-burn-history-right {
  min-width: 0;
}


.caloric-burn-history-right
.caloric-burn-records {
  width: 100%;

  min-height: 500px;

  padding: 24px;

  box-sizing: border-box;
}


.caloric-burn-records-head {
  padding-bottom: 16px;
  margin-bottom: 0;

  border-bottom:
    1px solid
    rgba(16, 47, 70, .12);
}


.caloric-burn-records-head h2 {
  margin: 4px 0 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .caloric-burn-history-layout {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .caloric-burn-history-right
  .caloric-burn-records {
    min-height: 0;
  }

}

/* =========================================================
   CALORIC BURN HISTORY — PAGE TOP
   ========================================================= */

.caloric-burn-history-top {
  width: 100%;
  margin-bottom: 18px;
}


.caloric-burn-history-top .back-button {
  margin-bottom: 18px;
}


.caloric-burn-history-top
.caloric-burn-history-header {
  margin-bottom: 18px;
}


.caloric-burn-history-top
.caloric-burn-range-tabs {
  margin-bottom: 0;
}

/* =========================================================
   CALORIC BURN HISTORY — RECORD CARDS
   ========================================================= */

.caloric-burn-record-list {
  display: flex;
  flex-direction: column;

  gap: 12px;

  margin-top: 18px;
}


/* RECORD */

.caloric-history-record-card {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;

  width: 100%;

  padding: 22px 18px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(16, 47, 70, .14);

  border-radius: 14px;

  background:
    rgba(16, 47, 70, .025);
}

/* =========================================
   COLUMN
   ========================================= */

.caloric-history-record-stat {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* LABEL */

.caloric-history-record-stat > span {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


/* VALUE */

.caloric-history-record-stat > strong {
  color: var(--navy);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}


/* CAL UNIT */

.caloric-history-record-stat small {
  margin-left: 3px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 600;
}


/* =========================================
   CURRENT BADGE
   ========================================= */


.caloric-history-current-badge {
  position: absolute;

  top: 12px;
  right: 12px;

  padding: 5px 9px;

  border-radius: 999px;

  background: var(--sage);

  color: #fff;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: .08em;
  
  
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .caloric-history-record-card {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 10px;

    padding: 18px 14px;
  }


  .caloric-history-record-stat > strong {
    font-size: 11px;
  }


  .caloric-history-current-badge {
    display: none;
  }

}



/* =========================================================
   CALORIC BURN HISTORY — EMPTY STATES
   ========================================================= */

.caloric-history-chart-empty {
  min-height: 260px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px;

  box-sizing: border-box;

  text-align: center;
}


.caloric-history-chart-empty strong {
  display: block;

  margin-top: 7px;

  color: var(--navy);

  font-size: 17px;
  font-weight: 700;
}


.caloric-history-chart-empty p {
  max-width: 300px;

  margin: 7px auto 0;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.6;
}


/* RECORDS EMPTY STATE */

.caloric-burn-record-empty {
  min-height: 220px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px;

  box-sizing: border-box;

  text-align: center;
}


.caloric-burn-record-empty strong {
  display: block;

  margin-top: 7px;

  color: var(--navy);

  font-size: 16px;
  font-weight: 700;
}


.caloric-burn-record-empty p {
  max-width: 280px;

  margin: 7px auto 0;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   CALORIC CHART — EMPTY STATE
   ========================================================= */

.caloric-chart-main {
  position: relative;
}


.caloric-chart-no-records {
  position: absolute;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-bottom: 25px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 600;

  pointer-events: none;
}

.caloric-chart-main {
  position: relative;
}


.caloric-chart-no-data {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(
    -50%,
    -50%
  );

  z-index: 5;

  color: var(--muted);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.12em;

  pointer-events: none;
}


/* =========================================================
   WEIGHT HISTORY GRAPH
   Matches Starting / Current Weight mini charts
   ========================================================= */

.weight-history-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* SOFT HORIZONTAL GRID */

.weight-chart-grid-line {
  stroke: #e6ebe8;
  stroke-width: 1;
}


/* Y AXIS NUMBERS */

.weight-chart-axis-label,
.weight-chart-date-label {
  fill: #71808a;
  font-size: 11px;
  font-weight: 500;
}


/* GRADIENT UNDER CURVE */

.weight-chart-area {
  fill: url(#weightHistoryAreaGradient);
  stroke: none;
}


/* MAIN SMOOTH NAVY LINE */

.weight-chart-line {
  fill: none;
  stroke: #102f46;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* NORMAL HISTORY POINTS */

.weight-chart-dot {
  fill: #ffffff;
  stroke: #102f46;
  stroke-width: 2;
}


/* CURRENT VERTICAL MARKER */

.weight-chart-current-marker {
  stroke: #c8d2cd;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}


/* CURRENT / LATEST POINT */

.weight-chart-current-point {
  fill: #102f46;
  stroke: #ffffff;
  stroke-width: 4;
}


/* =========================================================
   CURRENT WEIGHT REFERENCE — GREEN
   ========================================================= */

.weight-chart-current-reference {
  stroke: #8fa69a;
  stroke-width: 2;
  fill: none;
}


/* =========================================================
   CURRENT DATE — VERTICAL DASHED LINE
   ========================================================= */

.weight-chart-current-marker {
  stroke: #c8d2cd;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}


/* =========================================================
   CURRENT WEIGHT — OUTER RING
   ========================================================= */

.weight-chart-current-point-ring {
  fill: #ffffff;
  stroke: #dfe6e2;
  stroke-width: 5;
}


/* =========================================================
   CURRENT WEIGHT — NAVY CENTER
   ========================================================= */

.weight-chart-current-point {
  fill: #102f46;
  stroke: #ffffff;
  stroke-width: 2;
}


.weight-history-legend {
  display: flex;
  align-items: center;
  gap: 18px;
}

.weight-history-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #667680;
}

.weight-history-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.weight-history-legend-dot.body-weight {
  background: #102f46;
}

.weight-history-legend-dot.current-weight {
  background: #8fa69a;
}


/* =========================================================
   WEIGHT HISTORY — NEW 50 / 50 LAYOUT
   ========================================================= */

.weight-history-new-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}


/* RANGE */

.weight-history-range-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weight-history-range-tab {
  min-width: 48px;
  height: 38px;
  padding: 0 14px;

  border: 1px solid #d9e1de;
  border-radius: 999px;

  background: #ffffff;
  color: #6f7d78;

  font: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.weight-history-range-tab:hover {
  border-color: #102f46;
}

.weight-history-range-tab.is-active {
  background: #102f46;
  border-color: #102f46;
  color: #ffffff;
}


/* =========================================================
   EXACTLY TWO EQUAL COLUMNS
   ========================================================= */

.weight-history-new-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 24px;

  width: 100%;
  align-items: stretch;
}


/*
 * Critical:
 * neither card is allowed to force
 * its grid column wider than 50%.
 */

.weight-history-new-chart-card,
.weight-history-new-records {
  width: 100%;
  min-width: 0;
  margin: 0;
}


/* GRAPH */

.weight-history-new-chart-card {
  display: flex;
  flex-direction: column;
}

.weight-history-new-chart-card
.weight-history-chart {
  flex: 1;

  width: 100%;
  min-width: 0;
}


/* RECORDS */

.weight-history-new-records {
  display: flex;
  flex-direction: column;
}

.weight-history-new-records
.weight-history-list {
  flex: 1;
}


/* Prevent record contents from
   expanding the right 50% column */

.weight-history-new-records
.weight-history-row {
  min-width: 0;
}

.weight-history-new-records
.weight-history-date,
.weight-history-new-records
.weight-history-value,
.weight-history-new-records
.weight-history-change {
  min-width: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .weight-history-new-layout {
    grid-template-columns: 1fr;
  }

  .weight-history-new-top {
    align-items: flex-start;
  }

  .weight-history-range-tabs {
    overflow-x: auto;
    max-width: calc(100% - 60px);
    padding-bottom: 2px;
  }

  .weight-history-range-tab {
    flex: 0 0 auto;
  }

}


/* =========================================================
   WEIGHT HISTORY — FULL WIDTH
   Match Caloric Burn History page
   ========================================================= */

.weight-history-page {
  width: 100%;
  max-width: none;
}

.weight-history-content {
  width: 100%;
  max-width: none;
}

.weight-history-layout {
  width: 100%;
  max-width: none;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 24px;
}

.weight-history-chart-panel,
.weight-history-records-panel {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   WEIGHT HISTORY — RECORDS HEADER
   White background + navy text
   ========================================================= */

.weight-history-new-records .weight-history-records-head {
  background: #ffffff;
  color: #102f46;
}


/* MEASUREMENTS */

.weight-history-new-records
.weight-history-records-head
.eyebrow {
  color: #102f46;
}


/* Weight Records */

.weight-history-new-records
.weight-history-records-head
h2 {
  color: #102f46;
}


/* Record count */

.weight-history-new-records
.weight-record-count {
  color: #102f46;
  background: #eef2ef;
}

/* =========================================================
   WEIGHT HISTORY — TWO SERIES
   MATCH CALORIC BURN GRAPH
   ========================================================= */


/* =========================================================
   PREVIOUS WEIGHT — SAGE
   ========================================================= */

.weight-chart-previous-line {
  fill: none;

  stroke: var(--sage-dark);
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   NEW WEIGHT — NAVY
   ========================================================= */

.weight-chart-current-line {
  fill: none;

  stroke: var(--navy);
  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   AREA — NAVY ONLY
   ========================================================= */

.weight-chart-area {
  fill: url(#weightHistoryAreaGradient);
  stroke: none;

  pointer-events: none;
}


/* =========================================================
   PREVIOUS WEIGHT POINTS — SAGE
   ========================================================= */

.weight-chart-previous-dot {
  fill: #ffffff;

  stroke: var(--sage-dark);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   NEW WEIGHT POINTS — NAVY
   ========================================================= */

.weight-chart-current-dot {
  fill: #ffffff;

  stroke: var(--navy);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   HORIZONTAL GRID
   MATCH CALORIC BURN
   ========================================================= */

.weight-chart-grid-line {
  stroke: rgba(16, 47, 70, .08);
  stroke-width: 1;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   VERTICAL DATE GRID
   ========================================================= */

.weight-chart-day-grid-line {
  stroke: rgba(16, 47, 70, .06);
  stroke-width: 1;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   Y AXIS
   CALORIC BURN = 8PX
   ========================================================= */

.weight-chart-axis-label {
  fill: var(--muted);

  font-family: inherit;
  font-size: 8px;
  font-weight: 500;
}


/* =========================================================
   X AXIS
   CALORIC BURN = 7PX
   ========================================================= */

.weight-chart-date-label {
  fill: var(--muted);

  font-family: inherit;
  font-size: 7px;
  font-weight: 500;
}


/* =========================================================
   CURRENT DATE MARKER
   ========================================================= */

.weight-chart-current-marker {
  stroke: var(--sage-dark);

  stroke-width: 1;
  stroke-dasharray: 4 5;

  opacity: .75;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   LATEST NEW WEIGHT POINT
   ========================================================= */

.weight-chart-current-point-ring {
  fill: #ffffff;

  stroke: rgba(16, 47, 70, .15);
  stroke-width: 5;

  vector-effect: non-scaling-stroke;
}


.weight-chart-current-point {
  fill: var(--navy);

  stroke: #ffffff;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

.weight-chart-empty-text {
  fill: var(--muted);

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}


/* =========================================================
   LEGEND
   ========================================================= */

.weight-legend-dot.is-previous {
  background: var(--sage-dark);
}


.weight-legend-dot.is-current {
  background: var(--navy);
}



/* =========================================================
   WEIGHT HISTORY GRAPH
   VISUAL SYSTEM = CALORIC BURN
   ========================================================= */


/* ---------------------------------------------------------
   PREVIOUS WEIGHT — DARK SAGE
   --------------------------------------------------------- */

.weight-chart-previous-line {
  fill: none;
  stroke: var(--sage-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


/* ---------------------------------------------------------
   NEW WEIGHT — NAVY / PRIMARY
   --------------------------------------------------------- */

.weight-chart-current-line {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


/* ---------------------------------------------------------
   REMOVE AREA FILL
   Weight history should remain a clean two-line comparison.
   --------------------------------------------------------- */

.weight-chart-area {
  display: none;
}


/* ---------------------------------------------------------
   PREVIOUS WEIGHT POINT
   --------------------------------------------------------- */

.weight-chart-previous-dot {
  fill: #ffffff;
  stroke: var(--sage-dark);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;

  cursor: pointer;
}


/* ---------------------------------------------------------
   NEW WEIGHT POINT
   --------------------------------------------------------- */

.weight-chart-current-dot {
  fill: #ffffff;
  stroke: var(--navy);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;

  cursor: pointer;
}


/* Hover emphasis */

.weight-chart-previous-dot:hover {
  fill: var(--sage-dark);
}


.weight-chart-current-dot:hover {
  fill: var(--navy);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.weight-chart-grid-line {
  stroke: rgba(16, 47, 70, .08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


.weight-chart-day-grid-line {
  stroke: rgba(16, 47, 70, .06);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


/* ---------------------------------------------------------
   AXES — EXACTLY MATCH CALORIC BURN
   --------------------------------------------------------- */

.weight-chart-axis-label {
  fill: var(--muted);

  font-family: inherit;
  font-size: 8px;
  font-weight: 500;
}


.weight-chart-date-label {
  fill: var(--muted);

  font-family: inherit;
  font-size: 7px;
  font-weight: 500;
}


/* ---------------------------------------------------------
   CURRENT DATE MARKER
   --------------------------------------------------------- */

.weight-chart-current-marker {
  stroke: var(--sage-dark);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: .65;

  vector-effect: non-scaling-stroke;
}


/* ---------------------------------------------------------
   LATEST POINT
   --------------------------------------------------------- */

.weight-chart-current-point-ring {
  fill: #ffffff;

  stroke: rgba(16, 47, 70, .15);
  stroke-width: 5;

  vector-effect: non-scaling-stroke;
}


.weight-chart-current-point {
  fill: var(--navy);
  stroke: #ffffff;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* ---------------------------------------------------------
   LEGEND
   --------------------------------------------------------- */

.weight-legend-dot.is-previous {
  background: var(--sage-dark);
}


.weight-legend-dot.is-current {
  background: var(--navy);
}




/* =========================================================
   WEIGHT HISTORY
   MATCH CALORIC BURN VISUAL SYSTEM ONLY
   ========================================================= */


/* =========================================================
   CARD
   ========================================================= */

.weight-history-new-chart-card {
  background: #ffffff;

  border:
    1px solid
    rgba(16, 47, 70, .14);

  border-radius: 22px;

  box-shadow:
    0 12px 30px
    rgba(16, 47, 70, .04);

  overflow: hidden;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.weight-history-new-chart-card
.weight-history-chart-top {
  padding: 22px 24px 0;
}


.weight-history-new-chart-card
.eyebrow {
  color: var(--sage-dark);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .16em;
  line-height: 1.2;

  text-transform: uppercase;
}


.weight-history-new-chart-card
.weight-history-chart-top h2 {
  margin: 5px 0 0;

  color: var(--navy);

  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}


/* =========================================================
   LEGEND
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 500;
}


.weight-history-new-chart-card
.weight-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.weight-history-new-chart-card
.weight-legend-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  flex: 0 0 auto;
}


/* PREVIOUS WEIGHT = SAGE */

.weight-history-new-chart-card
.weight-legend-dot.is-previous {
  background: var(--sage-dark);
}


/* NEW WEIGHT = NAVY */

.weight-history-new-chart-card
.weight-legend-dot.is-current {
  background: var(--navy);
}


/* =========================================================
   CHART CONTAINER
   ========================================================= */

.weight-history-new-chart-card
.weight-history-chart {
  position: relative;

  margin: 18px 24px 22px;

  min-height: 290px;
}


/* =========================================================
   GRID
   Same subtle appearance as Caloric Burn
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-grid-line,
.weight-history-new-chart-card
.weight-chart-day-grid-line {
  stroke: rgba(16, 47, 70, .09);

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   PRIMARY LINE
   NEW WEIGHT = NAVY
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-current-line {
  fill: none;

  stroke: var(--navy);

  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   SECONDARY LINE
   PREVIOUS WEIGHT = DARK SAGE
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-previous-line {
  fill: none;

  stroke: var(--sage-dark);

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   REMOVE WEIGHT AREA FILL
   Keep the two series visually clean.
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-area {
  display: none;
}


/* =========================================================
   NEW WEIGHT POINTS
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-current-dot {
  fill: #ffffff;

  stroke: var(--navy);

  stroke-width: 2;

  vector-effect:
    non-scaling-stroke;

  cursor: pointer;
}


/* =========================================================
   PREVIOUS WEIGHT POINTS
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-previous-dot {
  fill: #ffffff;

  stroke: var(--sage-dark);

  stroke-width: 2;

  vector-effect:
    non-scaling-stroke;

  cursor: pointer;
}


/* =========================================================
   ACTIVE / CURRENT POINT
   Match Caloric Burn emphasis
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-current-point-ring {
  fill: #ffffff;

  stroke:
    rgba(16, 47, 70, .16);

  stroke-width: 5;

  vector-effect:
    non-scaling-stroke;
}


.weight-history-new-chart-card
.weight-chart-current-point {
  fill: var(--navy);

  stroke: #ffffff;

  stroke-width: 2;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   ACTIVE VERTICAL MARKER
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-current-marker {
  stroke: var(--sage-dark);

  stroke-width: 1;

  stroke-dasharray: 4 5;

  opacity: .65;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   Y AXIS TEXT
   MATCH CALORIC BURN
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-axis-label {
  fill: var(--muted);

  font-family: inherit;

  font-size: 8px;

  font-weight: 500;
}


/* =========================================================
   X AXIS TEXT
   MATCH CALORIC BURN
   ========================================================= */

.weight-history-new-chart-card
.weight-chart-date-label {
  fill: var(--muted);

  font-family: inherit;

  font-size: 7px;

  font-weight: 500;
}



/* =========================================================
   WEIGHT HISTORY GRAPH — FINAL OVERRIDES
   Matches Caloric Burn
   ========================================================= */


/* ---------------------------------------------------------
   NAVY — NEW WEIGHT
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-current-line {
  fill: none;

  stroke: var(--navy);
  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

  filter:
    drop-shadow(
      0 3px 5px
      rgba(16, 47, 70, .08)
    );
}


/* ---------------------------------------------------------
   DARK SAGE — PREVIOUS WEIGHT
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-previous-line {
  fill: none;

  stroke: var(--sage-dark);
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* ---------------------------------------------------------
   NAVY SOFT AREA / SHADOW
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-area {
  display: block;

  fill:
    url(#weightHistoryAreaGradient);

  stroke: none;

  pointer-events: none;
}


/* ---------------------------------------------------------
   NAVY DOT
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-current-dot {
  fill: #ffffff;

  stroke: var(--navy);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;

  cursor: pointer;

  transition:
    fill .15s ease,
    stroke-width .15s ease;
}


.weight-history-new-chart-card
.weight-chart-current-dot:hover,
.weight-history-new-chart-card
.weight-chart-current-dot:focus {
  fill: var(--navy);

  stroke-width: 3;

  outline: none;
}


/* ---------------------------------------------------------
   SAGE DOT
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-previous-dot {
  fill: #ffffff;

  stroke: var(--sage-dark);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-grid-line {
  stroke:
    rgba(16, 47, 70, .08);

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


.weight-history-new-chart-card
.weight-chart-day-grid-line {
  stroke:
    rgba(16, 47, 70, .05);

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


/* ---------------------------------------------------------
   Y AXIS
   EXACT MATCH TO CALORIC BURN
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-axis-label {
  fill: var(--muted);

  font-family: inherit;

  font-size: 8px;
  font-weight: 500;
}


/* ---------------------------------------------------------
   X AXIS
   EXACT MATCH TO CALORIC BURN
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-date-label {
  fill: var(--muted);

  font-family: inherit;

  font-size: 7px;
  font-weight: 500;
}


/* ---------------------------------------------------------
   CURRENT MARKER
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-current-marker {
  stroke: var(--sage-dark);

  stroke-width: 1;

  stroke-dasharray: 4 5;

  opacity: .65;

  vector-effect:
    non-scaling-stroke;
}


/* ---------------------------------------------------------
   LATEST POINT
   --------------------------------------------------------- */

.weight-history-new-chart-card
.weight-chart-current-point-ring {
  fill: #ffffff;

  stroke:
    rgba(16, 47, 70, .15);

  stroke-width: 5;

  vector-effect:
    non-scaling-stroke;
}


.weight-history-new-chart-card
.weight-chart-current-point {
  fill: var(--navy);

  stroke: #ffffff;
  stroke-width: 2;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   CLICK TOOLTIP
   ========================================================= */

.weight-chart-tooltip {
  position: fixed;

  z-index: 9999;

  min-width: 118px;

  padding: 10px 13px;

  background: var(--navy);

  border-radius: 10px;

  box-shadow:
    0 8px 24px
    rgba(7, 29, 43, .16);

  color: #ffffff;

  text-align: center;

  pointer-events: none;

  box-sizing: border-box;

  transform: none;
}


.weight-chart-tooltip[hidden] {
  display: none;
}


.weight-chart-tooltip::after {
  content: "";

  position: absolute;

  left:
    var(
      --weight-tooltip-arrow-x,
      50%
    );

  bottom: -5px;

  width: 10px;
  height: 10px;

  background: var(--navy);

  transform:
    translateX(-50%)
    rotate(45deg);
}

.weight-chart-tooltip.is-below::after {
  top: -5px;
  bottom: auto;
}


.weight-chart-tooltip-date {
  position: relative;
  z-index: 1;

  display: block;

  margin-bottom: 3px;

  color:
    rgba(255,255,255,.65);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.weight-chart-tooltip-value {
  position: relative;
  z-index: 1;

  display: block;

  color: #ffffff;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.1;
}


.weight-chart-tooltip-change {
  position: relative;
  z-index: 1;

  display: block;

  margin-top: 5px;

  color:
    rgba(255,255,255,.78);

  font-size: 8px;
  font-weight: 700;
}


.weight-chart-tooltip-change
.weight-tooltip-arrow {
  display: inline-block;

  margin-right: 3px;

  font-size: 11px;

  line-height: 1;
}


/* =========================================================
   PROGRESS — REAL WEIGHT MINI CHARTS
   ========================================================= */

.weight-mini-chart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 100px;

  overflow: hidden;
  pointer-events: none;
}


.weight-mini-svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}


/* =========================================================
   LINES
   ========================================================= */

.weight-mini-line {
  fill: none;

  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* STARTING = SAGE */

.weight-mini-svg.is-starting
.weight-mini-line {
  stroke: #8da99a;
}


/* CURRENT = NAVY */

.weight-mini-svg.is-current
.weight-mini-line {
  stroke: #102f46;
}


/* =========================================================
   AREA / SHADOW
   ========================================================= */

.weight-mini-area {
  stroke: none;
}


.weight-mini-svg.is-starting
.weight-mini-area {
  fill: rgba(141, 169, 154, 0.12);
}


.weight-mini-svg.is-current
.weight-mini-area {
  fill: rgba(16, 47, 70, 0.12);
}


/* =========================================================
   VERTICAL MARKER
   ========================================================= */

.weight-mini-marker {
  stroke: #b8c6c1;
  stroke-width: 1;

  stroke-dasharray: 4 4;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   POINTS
   ========================================================= */

.weight-mini-point {
  stroke: #ffffff;
  stroke-width: 3;

  vector-effect: non-scaling-stroke;
}


.weight-mini-point.is-starting {
  fill: #8da99a;
}


.weight-mini-point.is-current {
  fill: #102f46;
}

/* =========================================================
   WEEKLY COMPLETION — CALORIC BURN STYLE
   ========================================================= */

.weekly-completion-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  margin-bottom: 14px;
}


.weekly-completion-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}


.weekly-completion-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 11px;
  font-weight: 500;

  color: #53616a;
}


.weekly-completion-legend-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;
}


.weekly-completion-legend-dot.is-completed {
  background: #102f46;
}


.weekly-completion-legend-dot.is-average {
  background: #9aab94;
}


/* CHART */

.weekly-completion-chart {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);

  gap: 10px;

  width: 100%;
  min-width: 0;

  margin-top: 4px;
}


/* Y AXIS */

.weekly-completion-y-axis {
  height: 220px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 12px 0;

  box-sizing: border-box;
}


.weekly-completion-y-axis span {
  display: block;

  font-size: 9px;
  line-height: 1;

  color: #7f8985;

  text-align: right;
}


/* MAIN GRAPH */

.weekly-completion-chart-main {
  min-width: 0;
}


.weekly-completion-svg {
  display: block;

  width: 100%;
  height: 220px;

  overflow: visible;
}


/* GRID */

.weekly-completion-grid-line {
  stroke: rgba(16, 47, 70, 0.09);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


/* COMPLETION LINE */

.weekly-completion-main-line {
  fill: none;

  stroke: #102f46;
  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* AVERAGE */

.weekly-completion-average-line {
  fill: none;

  stroke: #9aab94;
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* POINTS */

.weekly-completion-point {
  fill: #f8f7e9;

  stroke: #102f46;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;

  transition:
    r 0.2s ease,
    stroke-width 0.2s ease;

  cursor: pointer;
}


.weekly-completion-point:hover,
.weekly-completion-point:focus {
  r: 7px;
  stroke-width: 3;
  outline: none;
}


/* X AXIS */

.weekly-completion-x-axis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));

  margin-top: 9px;
}


.weekly-completion-x-axis span {
  min-width: 0;

  font-size: 9px;
  line-height: 1.2;

  color: #7f8985;

  text-align: center;
}


/* EMPTY */

.weekly-completion-empty {
  min-height: 220px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;

  color: #7f8985;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .weekly-completion-chart {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
  }


  .weekly-completion-svg,
  .weekly-completion-y-axis {
    height: 190px;
  }


  .weekly-completion-legend {
    gap: 14px;
  }


  .weekly-completion-legend-item {
    font-size: 10px;
  }


  .weekly-completion-x-axis span {
    font-size: 8px;
  }

}


/* =========================================================
   RECOVERY TREND — 7 DAY BAR CHART
   ========================================================= */

.weekly-recovery-chart {
  width: 100%;

  margin-top: 22px;
  padding: 4px 2px 0;

  box-sizing: border-box;
}


/* SMALL TOP LABEL */

.weekly-recovery-chart-label {
  margin-bottom: 18px;

  font-size: 10px;
  line-height: 1;

  font-weight: 700;
  letter-spacing: 0.08em;

  color: #8c948f;
}


/* =========================================================
   BARS
   ========================================================= */

.weekly-recovery-bars {
  height: 170px;

  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));

  align-items: end;

  gap: 12px;
}


.weekly-recovery-bar-column {
  height: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;
  align-items: center;
}


/* BAR HEIGHT AREA */

.weekly-recovery-bar-track {
  width: 100%;
  height: 145px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
}


/* ACTUAL BAR */

.weekly-recovery-bar {
  width: min(34px, 72%);

  min-height: 8px;

  background: #9eafa0;

  border-radius: 5px 5px 3px 3px;

  transition:
    height 0.35s ease,
    opacity 0.2s ease,
    transform 0.2s ease;

  cursor: default;
}


.weekly-recovery-bar:hover {
  opacity: 0.82;

  transform: translateY(-2px);
}


/* DAY WITHOUT CHECK-IN */

.weekly-recovery-bar.is-empty {
  background: rgba(158, 175, 160, 0.18);
}


/* =========================================================
   DAY LABEL
   ========================================================= */

.weekly-recovery-day {
  display: block;

  margin-top: 9px;

  font-size: 9px;
  line-height: 1;

  font-weight: 600;

  color: #89918d;

  text-align: center;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.weekly-recovery-chart-summary {
  display: flex;
  align-items: baseline;

  gap: 5px;

  margin-top: 18px;
}


.weekly-recovery-chart-summary strong {
  font-size: 15px;
  line-height: 1;

  font-weight: 700;

  color: #102f46;
}


.weekly-recovery-chart-summary span {
  font-size: 11px;
  line-height: 1;

  font-weight: 500;

  color: #a0a6a2;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .weekly-recovery-bars {
    height: 145px;
    gap: 7px;
  }


  .weekly-recovery-bar-track {
    height: 120px;
  }


  .weekly-recovery-bar {
    width: min(28px, 72%);
  }


  .weekly-recovery-chart-label {
    margin-bottom: 14px;
  }

}

/* =========================================================
   BODY PROGRESS — SINGLE WEIGHT CARD
   ========================================================= */

.weight-overview-single-card {
  width: 100%;

  margin-top: 22px;
  padding: 22px 22px 18px;

  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.32);

  border:
    1px solid
    rgba(16, 47, 70, 0.09);

  border-radius: 18px;
}


/* =========================================================
   TOP VALUES
   ========================================================= */

.weight-overview-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 18px;
}


.weight-overview-stat {
  min-width: 0;
}


.weight-overview-stat.is-current {
  text-align: right;
}


.weight-overview-stat > span {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;
  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 0.04em;

  color: #8b9690;
}


.weight-overview-value {
  display: flex;
  align-items: baseline;

  gap: 5px;
}


.weight-overview-stat.is-current
.weight-overview-value {
  justify-content: flex-end;
}


.weight-overview-value strong {
  font-size: 22px;
  line-height: 1;

  font-weight: 700;

  color: #102f46;
}


.weight-overview-value small {
  font-size: 10px;
  line-height: 1;

  font-weight: 600;

  color: #8b9690;

  text-transform: uppercase;
}


/* =========================================================
   GRAPH
   ========================================================= */

.weight-overview-chart {
  position: relative;

  width: 100%;

  margin-top: 4px;

  overflow: hidden;
}


.weight-overview-chart .weight-mini-chart {
  width: 100%;
  height: 100%;
}


.weight-overview-chart svg {
  display: block;

  width: 100%;
  height: 100%;
}

/* =========================================================
   BOTTOM SUMMARY
   ========================================================= */

.weight-overview-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-top: 13px;
}


.weight-overview-now {
  display: flex;
  align-items: center;

  gap: 6px;

  min-width: 0;
}


.weight-overview-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #9eafa0;
}


.weight-overview-now span {
  font-size: 10px;

  color: #8b9690;
}


.weight-overview-now strong {
  font-size: 12px;

  font-weight: 700;

  color: #102f46;
}


/* CHANGE */

.weight-overview-change {
  font-size: 12px;
  line-height: 1;

  font-weight: 700;
}


/*
 * Positive body-weight change
 */

.weight-overview-change.is-up {
  color: #9a7c66;
}


/*
 * Weight decrease
 */

.weight-overview-change.is-down {
  color: #7f9e8d;
}


.weight-overview-change.is-same {
  color: #8b9690;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .weight-overview-single-card {
    padding: 18px 16px 16px;

    border-radius: 16px;
  }


  .weight-overview-summary {
    gap: 15px;
  }


  .weight-overview-value strong {
    font-size: 20px;
  }


  .weight-overview-chart,
  .weight-overview-chart
  .weight-mini-svg,
  .weight-overview-chart
  svg {
    height: 135px;
  }


  .weight-overview-bottom {
    gap: 12px;
  }

}

/* =========================================================
   WEIGHT OVERVIEW — CHART AXES
   ========================================================= */

.weight-overview-chart {
  height: 190px;
}


.weight-overview-chart .weight-mini-svg {
  width: 100%;
  height: 190px;

  display: block;

  overflow: visible;
}


/* GRID */

.weight-mini-grid-line {
  stroke: rgba(16, 47, 70, 0.09);
  stroke-width: 1;

  vector-effect: non-scaling-stroke;
}


/* Y AXIS VALUES */

.weight-mini-axis-label {
  fill: #89928d;

  font-family: inherit;

  font-size: 9px;
  font-weight: 500;
}


/* X AXIS DATES */

.weight-mini-date-label {
  fill: #89928d;

  font-family: inherit;

  font-size: 9px;
  font-weight: 500;
}


/* TREND LINE */

.weight-overview-chart .weight-mini-line {
  fill: none;

  stroke: #102f46;
  stroke-width: 2.25;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* AREA UNDER LINE */

.weight-overview-chart .weight-mini-area {
  color: #9eafa0;

  fill: rgba(158, 175, 160, 0.18);
}


/* CURRENT VERTICAL MARKER */

.weight-overview-chart .weight-mini-marker {
  stroke: rgba(16, 47, 70, 0.18);
  stroke-width: 1;

  stroke-dasharray: 3 3;

  vector-effect: non-scaling-stroke;
}


/* CURRENT DOT */

.weight-overview-chart .weight-mini-point {
  fill: #102f46;

  stroke: #f8f7e9;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


.weight-mini-empty {
  height: 190px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;

  color: #89928d;
}


@media (max-width: 700px) {

  .weight-overview-chart,
  .weight-overview-chart .weight-mini-svg {
    height: 165px;
  }

}


/* =========================================================
   PROGRESS — HEALTH METRICS 2 COLUMN GRID
   ========================================================= */

.progress-health-grid {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 20px;

  align-items: stretch;
}


/* Both cards fill their grid column */

.progress-health-grid
.progress-health-card {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;
}


/* Keep both cards visually balanced */

.progress-health-grid
.progress-overview-card {
  height: 100%;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .progress-health-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

}


/* =========================================================
   WEIGHT OVERVIEW — CLICKABLE CARD
   ========================================================= */

button.weight-overview-single-card {
  display: block;

  width: 100%;

  font: inherit;
  color: inherit;

  text-align: left;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  outline: none;
}


/* Keep existing card appearance */

button.weight-overview-single-card:hover {
  border-color: rgba(16, 47, 70, 0.18);
}


button.weight-overview-single-card:focus-visible {
  outline: 2px solid rgba(16, 47, 70, 0.35);
  outline-offset: 3px;
}


/* =========================================================
   WEIGHT HISTORY — CURRENT + CHANGE
   ========================================================= */


/* NAVY = CURRENT WEIGHT */

.weight-chart-current-line {
  fill: none;

  stroke: #102f46;
  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


.weight-chart-current-dot {
  fill: #102f46;

  stroke: #f8f7e9;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* SAGE = WEIGHT CHANGE */

.weight-chart-change-line {
  fill: none;

  stroke: #9eafa0;
  stroke-width: 2.5;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


.weight-chart-change-dot {
  fill: #9eafa0;

  stroke: #f8f7e9;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}


/* GAIN / LOSS BOTH USE XCULPTED SAGE */

.weight-chart-change-dot.is-gain,
.weight-chart-change-dot.is-loss {
  fill: #9eafa0;
}


.weight-chart-change-dot.is-same {
  fill: #b8c1b8;
}


/* LEGEND */

.weight-legend-dot.is-current {
  background: #102f46;
}


.weight-legend-dot.is-change {
  background: #9eafa0;
}


/* =========================================================
   CALORIC BURN HISTORY — TOP ALIGNMENT
   Match Weight History
   ========================================================= */

.caloric-burn-history-page {
  width: 100%;
}


/*
 * Uses Weight History's layout system.
 * Only add page breathing room here.
 */

.caloric-burn-history-new-top {
  margin-top: 24px;
  margin-bottom: 24px;
}


/* Do not let older caloric tab CSS change positioning */

.caloric-burn-history-new-top
.caloric-burn-range-tabs {
  margin: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .caloric-burn-history-new-top {
    margin-top: 18px;
    margin-bottom: 20px;
  }

}

/* =========================================================
   CALORIC BURN HISTORY
   MATCH LEFT + RIGHT CARD HEIGHT
   ========================================================= */

.caloric-burn-history-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 20px;

  /* IMPORTANT */
  align-items: stretch;
}


.caloric-burn-history-left,
.caloric-burn-history-right {
  min-width: 0;
  display: flex;
}


.caloric-burn-history-chart-card,
.caloric-burn-records {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}


/* Keep the chart card internally structured */

.caloric-burn-history-chart-card {
  display: flex;
  flex-direction: column;
}


.caloric-burn-history-chart {
  flex: 1;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .caloric-burn-history-layout {
    grid-template-columns: 1fr;
  }


  .caloric-burn-history-left,
  .caloric-burn-history-right {
    display: block;
  }


  .caloric-burn-history-chart-card,
  .caloric-burn-records {
    height: auto;
  }

}

/* =========================================================
   CALORIC BURN HISTORY
   MATCH WEIGHT TREND HISTORY VISUAL SYSTEM
   ========================================================= */


/* =========================================================
   GRAPH CARD
   ========================================================= */

.caloric-burn-history-chart-card {
  background: #ffffff;

  border:
    1px solid
    rgba(16, 47, 70, .14);

  border-radius: 22px;

  box-shadow:
    0 12px 30px
    rgba(16, 47, 70, .04);

  overflow: hidden;
}


/* =========================================================
   GRAPH HEADER
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-burn-history-chart-head {
  padding: 22px 24px 0;
}


.caloric-burn-history-chart-card
.caloric-burn-history-chart-head
.eyebrow {
  color: var(--sage-dark);

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;

  letter-spacing: .16em;
  line-height: 1.2;

  text-transform: uppercase;
}


.caloric-burn-history-chart-card
.caloric-burn-history-chart-head h2 {
  margin: 5px 0 0;

  color: var(--navy);

  font-family: inherit;
  font-size: 22px;
  font-weight: 700;

  line-height: 1.1;
}


/* =========================================================
   CHART CONTAINER
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-burn-history-chart {
  position: relative;

  margin: 18px 24px 22px;

  min-height: 290px;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-toolbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 14px;
}


/* =========================================================
   LEGEND
   SAME SIZE / TYPOGRAPHY AS WEIGHT HISTORY
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-legend {
  display: flex;

  align-items: center;

  gap: 14px;

  color: var(--muted);

  font-family: inherit;
  font-size: 9px;
  font-weight: 500;
}


.caloric-burn-history-chart-card
.caloric-chart-legend-item {
  display: inline-flex;

  align-items: center;

  gap: 6px;
}


.caloric-burn-history-chart-card
.caloric-chart-legend-dot {
  display: block;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  flex: 0 0 auto;
}


/* CALORIC BURN = NAVY */

.caloric-burn-history-chart-card
.caloric-chart-legend-dot.is-burn {
  background: var(--navy);
}


/* AVERAGE = DARK SAGE */

.caloric-burn-history-chart-card
.caloric-chart-legend-dot.is-average {
  background: var(--sage-dark);
}


/* =========================================================
   CURRENT CALORIE SUMMARY
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-summary {
  display: flex;

  align-items: baseline;

  gap: 4px;

  color: var(--navy);
}


.caloric-burn-history-chart-card
.caloric-chart-summary strong {
  color: var(--navy);

  font-family: inherit;
  font-size: 18px;
  font-weight: 700;

  line-height: 1;
}


.caloric-burn-history-chart-card
.caloric-chart-summary span {
  color: var(--muted);

  font-family: inherit;
  font-size: 8px;
  font-weight: 700;

  letter-spacing: .08em;
}


/* =========================================================
   PRIMARY LINE
   CALORIC BURN = NAVY
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-burn-line {
  fill: none;

  stroke: var(--navy);

  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

  filter:
    drop-shadow(
      0 3px 5px
      rgba(16, 47, 70, .08)
    );
}


/* =========================================================
   SECONDARY LINE
   AVERAGE = DARK SAGE
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-average-line {
  fill: none;

  stroke: var(--sage-dark);

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   AREA FILL
   SAME SOFT NAVY EFFECT AS WEIGHT HISTORY
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-area {
  display: block;

  fill:
    url(#caloricBurnHistoryAreaGradient);

  stroke: none;

  pointer-events: none;
}


/* =========================================================
   GRID
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-grid {
  stroke:
    rgba(16, 47, 70, .08);

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


/* YOUR NEW MAJOR 500 CAL GRID */

.caloric-burn-history-chart-card
.caloric-chart-grid.is-major {
  stroke:
    rgba(16, 47, 70, .10);

  stroke-width: 1;

  opacity: 1;
}


/* YOUR 100 CAL GRID */

.caloric-burn-history-chart-card
.caloric-chart-grid.is-minor {
  stroke:
    rgba(16, 47, 70, .045);

  stroke-width: 1;

  opacity: 1;
}


/* =========================================================
   Y AXIS
   SAME TYPOGRAPHY AS WEIGHT HISTORY
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-y-axis {
  color: var(--muted);

  font-family: inherit;
  font-size: 8px;
  font-weight: 500;
}


.caloric-burn-history-chart-card
.caloric-chart-y-axis > span {
  color: var(--muted);

  font-family: inherit;
  font-size: 8px;
  font-weight: 500;
}


/* =========================================================
   X AXIS
   SAME TYPOGRAPHY AS WEIGHT HISTORY
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-x-axis {
  color: var(--muted);

  font-family: inherit;
  font-size: 7px;
  font-weight: 500;
}


.caloric-burn-history-chart-card
.caloric-chart-x-axis > * {
  color: var(--muted);

  font-family: inherit;
  font-size: 7px;
  font-weight: 500;
}


/* =========================================================
   CALORIC DATA POINTS
   NAVY OUTLINE / WHITE CENTER
   ========================================================= */

.caloric-burn-history-chart-card
[data-caloric-points] circle {
  fill: #ffffff;

  stroke: var(--navy);

  stroke-width: 2;

  vector-effect:
    non-scaling-stroke;

  cursor: pointer;

  transition:
    fill .15s ease,
    stroke-width .15s ease;
}


.caloric-burn-history-chart-card
[data-caloric-points] circle:hover {
  fill: var(--navy);

  stroke-width: 3;
}


/* =========================================================
   TOOLTIP
   SAME DARK NAVY VISUAL LANGUAGE
   ========================================================= */

.caloric-burn-history-chart-card
.caloric-chart-tooltip {
  background: var(--navy);

  color: #ffffff;

  border-radius: 10px;

  box-shadow:
    0 8px 20px
    rgba(16, 47, 70, .18);

  font-family: inherit;
}


.caloric-burn-history-chart-card
.caloric-chart-tooltip
[data-caloric-tooltip-date] {
  color:
    rgba(255, 255, 255, .65);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.caloric-burn-history-chart-card
.caloric-chart-tooltip
[data-caloric-tooltip-value] {
  color: #ffffff;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.1;
}


.caloric-burn-history-chart-card
.caloric-chart-tooltip small {
  color:
    rgba(255, 255, 255, .65);

  font-size: 7px;
  font-weight: 600;
}


/* =========================================================
   RIGHT RECORDS CARD
   MATCH WEIGHT RECORDS CARD
   ========================================================= */

.caloric-burn-records {
  background: #ffffff;

  border:
    1px solid
    rgba(16, 47, 70, .14);

  border-radius: 22px;

  box-shadow:
    0 12px 30px
    rgba(16, 47, 70, .04);

  overflow: hidden;
}


/* =========================================================
   RECORDS HEADER
   ========================================================= */

.caloric-burn-records-head {
  padding: 22px 24px 18px;

  background: #ffffff;

  color: var(--navy);
}


.caloric-burn-records-head
.eyebrow {
  color: var(--sage-dark);

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;

  letter-spacing: .16em;
  line-height: 1.2;

  text-transform: uppercase;
}


.caloric-burn-records-head h2 {
  margin: 5px 0 0;

  color: var(--navy);

  font-family: inherit;
  font-size: 22px;
  font-weight: 700;

  line-height: 1.1;
}


/* =========================================================
   RECORD LIST TYPOGRAPHY
   ========================================================= */

.caloric-burn-record-list {
  color: var(--navy);

  font-family: inherit;
}


.caloric-burn-record-empty {
  padding: 24px;

  color: var(--muted);

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}
.caloric-burn-history-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* =========================================================
   CALORIC BURN — RECORD ROWS
   ========================================================= */

.caloric-history-record-card {
  position: relative;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;

  width: 100%;

  padding: 22px 18px;

  box-sizing: border-box;

  /* REMOVE CARD BORDER */
  border: none;

  /* SLIGHTLY SOFTER ROW SHAPE */
  border-radius: 12px;

  /* DEFAULT = WHITE / NO BACKGROUND */
  background: transparent;

  transition:
    background-color .2s ease,
    transform .2s ease;

  cursor: default;
}


/* =========================================================
   ALTERNATING ROW BACKGROUNDS
   1 = WHITE
   2 = LIGHT SAGE
   3 = WHITE
   4 = LIGHT SAGE
   ETC.
   ========================================================= */

.caloric-history-record-card:nth-child(odd) {
  background: transparent;
}

.caloric-history-record-card:nth-child(even) {
  background: rgba(142, 169, 154, .10);
}


/* =========================================================
   HOVER
   ALL ROWS BECOME LIGHT SAGE
   ========================================================= */

.caloric-history-record-card:hover {
  background: rgba(142, 169, 154, .16);
}


/* =========================================================
   CURRENT RECORD
   DO NOT OVERRIDE ALTERNATING BACKGROUND
   ========================================================= */

.caloric-history-record-card.is-current {
  border: none;
}


/* Current row also uses same hover */
.caloric-history-record-card.is-current:hover {
  background: rgba(142, 169, 154, .16);
}


/* =========================================================
   PLANNER RIGHT PANEL — FINAL HEADER OVERRIDE
   MUST STAY AT BOTTOM OF CSS
   ========================================================= */

.planner-right-column
.planner-day-panel
.planner-day-panel-head {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  color: #102f46 !important;

  border-radius: 0 !important;
}


/* WEEKLY SCHEDULE */

.planner-right-column
.planner-day-panel
.planner-day-panel-head
.eyebrow {
  color: #8da99d !important;
}


/* YOUR PLANNED WEEK */

.planner-right-column
.planner-day-panel
.planner-day-panel-head
h2 {
  color: #102f46 !important;
}


/* COUNT */

.planner-right-column
.planner-day-panel
.planner-day-panel-head
.planner-day-count {
  background: #edf1ef !important;
  color: #526873 !important;
}


/* MAKE SURE THE CARD ITSELF IS WHITE */

.planner-right-column
.planner-day-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
/* =========================================================
   MOBILE HOME — INTRO
   Keep Hi, Name.
   Hide welcome description.
   ========================================================= */

@media (max-width: 720px) {

  .home-heading p {
    display: none !important;
  }

}

/* =========================================================
   HOME — UNIFIED SECTION TYPOGRAPHY
   ========================================================= */


/* =========================================================
   EYEBROWS
   DAILY CHECK-IN
   YOUR WEEK
   XCULPTED PROGRAMS
   MORE FROM XCULPTED

   CHANGE EYEBROW FONT SIZE HERE
   CHANGE EYEBROW COLOR HERE
   ========================================================= */

.home-dashboard .daily-checkin-card .eyebrow,
.home-dashboard .calendar-card .eyebrow,
.home-dashboard .programs-discovery-heading .eyebrow,
.home-dashboard .experience-section .home-section-heading .eyebrow,
.planner-day-panel .planner-day-panel-head .eyebrow {
  font-size: 12px !important;       /* <-- CHANGE EYEBROW SIZE HERE */
  color: #A8B9A7 !important;        /* <-- CHANGE LIGHT SAGE COLOR HERE */
  line-height: 1.2 !important;
}


/* =========================================================
   SECTION HEADLINES
   How are you today?
   Training Schedule
   Choose Your Program
   Support beyond your workout.

   CHANGE HEADLINE FONT SIZE HERE
   ========================================================= */

.home-dashboard .daily-checkin-card .daily-checkin-top h3,
.home-dashboard .calendar-card .side-card-heading h3,
.home-dashboard .programs-discovery-heading h2,
 .home-heading p,
.home-dashboard .experience-section .home-section-heading h2,
.planner-day-panel .planner-day-panel-head h2 {
  font-size: 25px !important;       /* <-- CHANGE HEADLINE SIZE HERE */
  line-height: 1.3 !important;
}


/* =========================================================
   SMALL ACTION LINKS
   VIEW ALL
   Planner

   CHANGE ACTION FONT SIZE HERE
   ========================================================= */

.home-dashboard .daily-checkin-view-all,
.home-dashboard .calendar-card .text-action {
  font-size: 12px !important;       /* <-- CHANGE VIEW ALL / PLANNER SIZE HERE */
}


/* =========================================================
   DAILY CHECK-IN — VIEW ALL
   TEXT LINK STYLE — MATCH PROGRESS TAB
   ========================================================= */

.home-dashboard .daily-checkin-view-all {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: #102f46 !important;

  font-family: inherit !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;

  cursor: pointer !important;
}


/* VIEW ALL — HOVER */

.home-dashboard .daily-checkin-view-all:hover {
  background: transparent !important;
  color: #102f46 !important;

  border: 0 !important;
  box-shadow: none !important;

  opacity: 0.7;
}


/* VIEW ALL — FOCUS */

.home-dashboard .daily-checkin-view-all:focus,
.home-dashboard .daily-checkin-view-all:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   DAILY CHECK-IN — DESCRIPTION

   Examples:
   Stay consistent with hydration, movement, and recovery today
   Your recovery markers look strong today...
   Your recovery is moderate today...
   etc.

   CHANGE DESCRIPTION FONT SIZE HERE
   ========================================================= */

.home-dashboard .daily-checkin-card .daily-checkin-description {
  font-size: 15px !important;       /* <-- CHANGE CHECK-IN DESCRIPTION SIZE HERE */
  line-height: 1.45 !important;
}


/* =========================================================
   DAILY CHECK-IN — RESULT NUMBERS

   Examples:
   7.0h
   3/5
   3.0L
   7,500

   CHANGE RESULT NUMBER SIZE HERE
   ========================================================= */

.home-dashboard
.daily-checkin-card
.daily-checkin-results
.daily-progress-ring-inner
strong {
  font-size: 12px !important;       /* <-- CHANGE RESULT NUMBER SIZE HERE */
  line-height: 1.1 !important;
}


/* =========================================================
   DAILY CHECK-IN — RESULT LABELS

   Sleep
   Energy
   Water
   Steps

   CHANGE RESULT LABEL SIZE HERE
   ========================================================= */

.home-dashboard
.daily-checkin-card
.daily-checkin-results
.daily-progress-item > span {
  font-size: 12px !important;       /* <-- CHANGE SLEEP / ENERGY / WATER / STEPS SIZE HERE */
  line-height: 1.25 !important;
}


/* =========================================================
   TRAINING SCHEDULE — WEEK DAYS + DATES

   Examples:
   MON 28
   TUE 29
   WED 30
   THU 1
   FRI 2
   SAT 3
   SUN 4

   CHANGE CALENDAR DAY/DATE SIZE HERE
   ========================================================= */

.home-dashboard .calendar-card .compact-day small,
.home-dashboard .calendar-card .compact-day strong {
  font-size: 12px !important;       /* <-- CHANGE MON/TUE + DATE SIZE HERE */
  line-height: 1.2 !important;
}


/* =========================================================
   THIS WEEK — CIRCLE NUMBER

   Example:
   0 of 5

   CHANGE WEEKLY RING NUMBER SIZE HERE
   ========================================================= */

.home-dashboard
.weekly-consistency-card
.weekly-goal-ring-inner
strong {
  font-size: 12px !important;       /* <-- CHANGE "0 OF 5" SIZE HERE */
  line-height: 1.15 !important;
}


/* =========================================================
   THIS WEEK — TITLE

   Example:
   This week

   CHANGE "THIS WEEK" SIZE HERE
   ========================================================= */

.home-dashboard
.weekly-consistency-card
.weekly-consistency-title
strong {
  font-size: 15px !important;       /* <-- CHANGE "THIS WEEK" SIZE HERE */
  line-height: 1.2 !important;
}


/* =========================================================
   THIS WEEK — COMPLETED BADGE

   Example:
   0/5 done

   CHANGE BADGE SIZE HERE
   ========================================================= */

.home-dashboard
.weekly-consistency-card
.weekly-goal-badge {
  font-size: 12px !important;       /* <-- CHANGE "0/5 DONE" SIZE HERE */
  line-height: 1.2 !important;
}


/* =========================================================
   THIS WEEK — WORKOUT SUMMARY

   Example:
   0 of 5 workouts this week

   CHANGE SUMMARY SIZE HERE
   ========================================================= */

.home-dashboard
.weekly-consistency-card
.weekly-workout-summary {
  font-size: 12px !important;       /* <-- CHANGE WORKOUT SUMMARY SIZE HERE */
  line-height: 1.4 !important;
}


/* =========================================================
   THIS WEEK — DAY LETTERS

   M  T  W  T  F  S  S

   CHANGE DAY LETTER SIZE HERE
   ========================================================= */

.home-dashboard
.weekly-consistency-card
.weekly-day-name {
  font-size: 12px !important;       /* <-- CHANGE M/T/W/T/F/S/S SIZE HERE */
  line-height: 1.2 !important;
}


/* =========================================================
   THIS WEEK — BOTTOM MESSAGE

   Examples:
   Your week starts with your first workout.
   You're one workout away from your weekly goal.
   You reached your workout goal this week.
   etc.

   CHANGE WEEKLY MESSAGE SIZE HERE
   ========================================================= */

.home-dashboard
.weekly-consistency-card
.weekly-consistency-message {
  font-size: 15px !important;       /* <-- CHANGE WEEKLY MESSAGE SIZE HERE */
  line-height: 1.4 !important;
}


/* =========================================================
   PROGRESS — UNIFIED SECTION TYPOGRAPHY
   DESKTOP + MOBILE
   MATCH HOME TYPOGRAPHY
   ========================================================= */


/* =========================================================
   EYEBROWS

   PROGRESS PICTURES
   BODY PROGRESS
   ACTIVITY
   RECOVERY

   CHANGE EYEBROW FONT SIZE HERE
   CHANGE EYEBROW COLOR HERE
   ========================================================= */

.progress-page .progress-picture-preview-head .eyebrow,
.progress-page .weight-tracking-header .eyebrow,
.progress-page .progress-health-card-head .eyebrow {
  font-size: 12px !important;       /* <-- CHANGE EYEBROW SIZE HERE */
  color: #A8B9A7 !important;        /* <-- CHANGE LIGHT SAGE COLOR HERE */
  line-height: 1.2 !important;
}


/* =========================================================
   SECTION HEADLINES

   Photos
   Weight
   Caloric Burn
   Resting Heart Rate

   CHANGE HEADLINE FONT SIZE HERE
   ========================================================= */

.progress-page .progress-picture-preview-head h2,
.progress-page .weight-tracking-header h2,
.progress-page .progress-health-card-head h2 {
  font-size: 25px !important;       /* <-- CHANGE HEADLINE SIZE HERE */
  line-height: 1.3 !important;
}


/* =========================================================
   PROGRESS — SECONDARY LABEL TYPOGRAPHY
   DESKTOP + MOBILE

   MATCH HOME DAILY CHECK-IN RESULT LABELS
   ========================================================= */


/* =========================================================
   1. VIEW ALL — ALL 4 CARDS
   ========================================================= */

.progress-page .weight-view-all {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   2. PROGRESS PICTURE LABELS

   Front
   Left Side
   Right Side
   Back
   ========================================================= */

.progress-page
.progress-picture-preview-item > span {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   3. WEIGHT LABELS

   Starting Weight
   Current Weight
   ========================================================= */

.progress-page
.weight-overview-stat > span {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   4. LATEST PHOTOS
   ========================================================= */

.progress-page
.progress-picture-latest-label {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   5. LATEST PHOTO DATE

   Example:
   Sep 26, 2026
   ========================================================= */

.progress-page
.progress-picture-latest-date {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   6. WEIGHT — NOW
   ========================================================= */

.progress-page
.weight-overview-now > span:not(.weight-overview-dot) {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   7. CALORIC CHART LEGEND

   Caloric Burn
   Average
   ========================================================= */

.progress-page
.caloric-chart-legend-item {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   8. ACTUAL WEIGHT NUMBERS

   Starting Weight number
   Current Weight number

   Example:
   53.8
   71.8
   ========================================================= */

.progress-page
.weight-overview-value > strong {
  font-size: 25px !important;
  line-height: 1.3 !important;
}


/* =========================================================
   WEIGHT UNIT

   KG / LB

   Keep this secondary to the 25px number.
   ========================================================= */

.progress-page
.weight-overview-value > small {
  line-height: 1.25 !important;
}


/* =========================================================
   GRAPH AXES — 10PX

   CALORIC BURN GRAPH
   X AXIS + Y AXIS

   Same typography inheritance.
   ========================================================= */

.progress-page
.caloric-chart-y-axis,
.progress-page
.caloric-chart-y-axis *,

.progress-page
.caloric-chart-x-axis,
.progress-page
.caloric-chart-x-axis * {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: inherit !important;
  line-height: 1.2 !important;
}


/* =========================================================
   WEIGHT GRAPH AXIS / GRAPH LABELS

   Targets text rendered inside the weight graph.
   ========================================================= */

.progress-page
.weight-overview-chart text,
.progress-page
.weight-mini-chart text {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: inherit !important;
}

/* =========================================================
   PROGRESS PICTURE HISTORY — TYPOGRAPHY
   DESKTOP + MOBILE

   MATCH HOME / PROGRESS TYPOGRAPHY
   ========================================================= */


/* =========================================================
   EYEBROW

   PHOTO CHECK-IN
   ========================================================= */

.picture-history-page
.progress-picture-checkin-heading
.eyebrow {
  font-size: 12px !important;
  color: #A8B9A7 !important;
  line-height: 1.2 !important;
}


/* =========================================================
   MAIN HEADING

   Add Today's Photos
   ========================================================= */

.picture-history-page
.progress-picture-checkin-heading h2 {
  font-size: 25px !important;
  line-height: 1.3 !important;
}


/* =========================================================
   DESCRIPTION

   Capture the same four positions...
   ========================================================= */

.picture-history-page
.progress-picture-checkin-heading p {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   HISTORY COLUMN HEADINGS

   FRONT
   LEFT SIDE
   RIGHT SIDE
   BACK
   ========================================================= */

.picture-history-page
.progress-gallery-headings strong {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   PROGRESS DATE LABEL
   ========================================================= */

.picture-history-page
.history-progress-date label {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   DATE INPUT
   ========================================================= */

.picture-history-page
.progress-picture-date-input {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   UPLOAD SLOT POSITION LABELS

   Front
   Left Side
   Right Side
   Back
   ========================================================= */

.picture-history-page
.history-upload-list label,
.picture-history-page
.history-upload-list .progress-picture-upload-label {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   ADD PHOTO TEXT
   ========================================================= */

.picture-history-page
.history-upload-list strong {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   UPLOAD / TAKE A PICTURE DESCRIPTION
   ========================================================= */

.picture-history-page
.history-upload-list span {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   HISTORY PHOTO DATES

   Sep 26, 2026
   Sep 25, 2026
   etc.
   ========================================================= */

.picture-history-page
.progress-gallery-list time,
.picture-history-page
.progress-gallery-list .progress-gallery-date,
.picture-history-page
.progress-gallery-list .progress-picture-date {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   BUTTON TYPOGRAPHY

   Save Progress
   View History
   ========================================================= */

.picture-history-page
.history-save-progress,
.picture-history-page
[data-action="view-progress-picture-history"] {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* =========================================================
   PROGRESS PICTURES — MOBILE ADD PHOTOS VIEW
   TYPOGRAPHY NORMALIZATION
   ========================================================= */

@media (max-width: 760px) {

  /* PHOTO CHECK-IN */

  .picture-history-page
  .progress-picture-checkin-heading
  .eyebrow {
    font-size: 12px !important;
    color: #A8B9A7 !important;
    line-height: 1.2 !important;
  }


  /* ADD TODAY'S PHOTOS */

  .picture-history-page
  .progress-picture-checkin-heading h2 {
    font-size: 25px !important;
    line-height: 1.3 !important;
  }


  /* DESCRIPTION */

  .picture-history-page
  .progress-picture-checkin-heading p {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* PROGRESS DATE */

  .picture-history-page
  .history-progress-date label {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* DATE VALUE */

  .picture-history-page
  .progress-picture-date-input {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

}

/* =========================================================
   PROGRESS PICTURES — ADD PHOTOS
   MOBILE TYPOGRAPHY + UPLOAD CONTENT
   ========================================================= */

@media (max-width: 760px) {


  /* =======================================================
     PHOTO CHECK-IN — EYEBROW
     ======================================================= */

  .progress-pictures-page
  .history-upload-heading
  .eyebrow {
    font-size: 12px !important;
    color: #A8B9A7 !important;
    line-height: 1.2 !important;
  }


  /* =======================================================
     ADD TODAY'S PHOTOS — MAIN HEADLINE
     ======================================================= */

  .progress-pictures-page
  .history-upload-heading h1 {
    font-size: 25px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }


  /* =======================================================
     PROGRESS DATE LABEL
     ======================================================= */

  .progress-pictures-page
  .history-progress-date label {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     DATE INPUT
     ======================================================= */

  .progress-pictures-page
  .progress-picture-date-input {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     FOUR PHOTO POSITION LABELS

     Front
     Left Side
     Right Side
     Back
     ======================================================= */

  .progress-pictures-page
  .history-upload-list label {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     ADD PHOTO
     ======================================================= */

  .progress-pictures-page
  .history-upload-list strong {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     UPLOAD OR TAKE A PICTURE
     ======================================================= */

  .progress-pictures-page
  .history-upload-list span {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     SAVE PROGRESS + VIEW HISTORY
     ======================================================= */

  .progress-pictures-page
  .history-save-progress,

  .progress-pictures-page
  .progress-pictures-history-link {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

}

/* =========================================================
   PROGRESS PICTURES — MOBILE UPLOAD BOX SIZE
   KEEP 4 COLUMNS
   ========================================================= */

@media (max-width: 760px) {

  .progress-pictures-page
  .history-upload-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 6px !important;

    width: 100% !important;
  }


  /* EACH UPLOAD COLUMN */

  .progress-pictures-page
  .history-upload-list > * {
    min-width: 0 !important;
  }


  /* UPLOAD BOX / DROP AREA */

  .progress-pictures-page
  .history-upload-list
  .history-upload-slot,

  .progress-pictures-page
  .history-upload-list
  .progress-picture-upload-slot {
    min-height: 190px !important; /* <-- CHANGE BOX HEIGHT HERE */

    padding: 12px 5px !important;

    box-sizing: border-box !important;
  }

}


/* =========================================================
   WEIGHT HISTORY — TYPOGRAPHY SYSTEM
   DESKTOP + MOBILE

   MATCH:
   - HOME
   - PROGRESS
   - PROGRESS PICTURES
   ========================================================= */


/* =========================================================
   EYEBROWS

   WEIGHT TREND
   MEASUREMENTS
   ========================================================= */

.weight-history-page .eyebrow {
  font-size: 12px !important;
  color: #A8B9A7 !important;
  line-height: 1.2 !important;
}


/* =========================================================
   SECTION HEADLINES

   History
   Weight Records
   ========================================================= */

.weight-history-page
.weight-history-chart-top h2,

.weight-history-page
.weight-history-records-head h2 {
  font-size: 25px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}


/* =========================================================
   RANGE FILTERS

   2W
   1M
   3M
   6M
   1Y
   ========================================================= */

.weight-history-page
.weight-history-range-tab {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}


/* =========================================================
   CHART LEGEND

   Current Weight
   Weight Change
   ========================================================= */

.weight-history-page
.weight-chart-legend span {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}


/* =========================================================
   RECORD COUNT

   10 records
   1 record
   ========================================================= */

.weight-history-page
.weight-record-count {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}


/* =========================================================
   EMPTY STATE

   No weight measurements for this period.
   ========================================================= */

.weight-history-page
.weight-history-empty {
  font-size: 12px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   MINI WEIGHT OVERVIEW

   "Now"
   ========================================================= */

.weight-overview-now > span {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}


/* =========================================================
   CURRENT WEIGHT NUMBER

   Example:
   71.8 KG

   SAME LARGE VALUE SYSTEM USED ON PROGRESS
   ========================================================= */

.weight-overview-now > strong {
  font-size: 25px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}


/* =========================================================
   WEIGHT CHANGE

   Example:
   +18.0 KG
   −2.5 KG
   ========================================================= */

.weight-overview-change {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

/* =========================================================
   WEIGHT HISTORY — GRAPH TYPOGRAPHY

   X AXIS
   Y AXIS
   SVG LABELS
   ========================================================= */

.weight-history-page
#weightHistoryChart svg text {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}


/* =========================================================
   WEIGHT HISTORY — MOBILE TYPOGRAPHY LOCK
   ========================================================= */

@media (max-width: 760px) {


  /* EYEBROWS */

  .weight-history-page .eyebrow {
    font-size: 12px !important;
    color: #A8B9A7 !important;
    line-height: 1.2 !important;
  }


  /* HEADLINES */

  .weight-history-page
  .weight-history-chart-top h2,

  .weight-history-page
  .weight-history-records-head h2 {
    font-size: 25px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }


  /* RANGE TABS */

  .weight-history-page
  .weight-history-range-tab {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* LEGEND */

  .weight-history-page
  .weight-chart-legend span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* RECORD COUNT */

  .weight-history-page
  .weight-record-count {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }


  /* GRAPH AXIS */

  .weight-history-page
  #weightHistoryChart svg text {
    font-size: 10px !important;
    font-weight: 500 !important;
  }

}


/* =========================================================
   PLANNER — MOBILE LAYOUT + TYPOGRAPHY
   IMPORTANT:
   Keep this at the END of the CSS file.
   ========================================================= */

@media (max-width: 768px) {


  /* =========================================================
     MOBILE ORDER

     1. Calendar
     2. + Add Activity
     3. Your Planned Week
     ========================================================= */

  .planner-page .planner-layout.planner-layout-v2 {
    display: flex !important;
    flex-direction: column !important;
  }


  /* CALENDAR FIRST */

  .planner-page .planner-calendar-card {
    order: 1 !important;
    width: 100% !important;
  }


/* =========================================================
   PLANNER — MOBILE + ADD ACTIVITY
   CIRCLE + INSIDE TOP-RIGHT OF "YOUR PLANNED WEEK"
   ALIGNED WITH STATUS BADGES
   ========================================================= */


/* RIGHT COLUMN BECOMES POSITIONING CONTAINER */

.planner-page .planner-right-column {
  order: 2 !important;

  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
}


/* =========================================================
   + POSITION
   RIGHT EDGE ALIGNS WITH COMPLETED / MISSED BADGES

   CHANGE RIGHT ALIGNMENT HERE IF NEEDED
   ========================================================= */

.planner-page .planner-right-actions {
  position: absolute !important;

  top: 16px !important;

  /* Align with the status badges below */
  right: 28px !important; /* <-- CHANGE + HORIZONTAL POSITION HERE */

  width: 46px !important;
  height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 10 !important;
}


/* =========================================================
   + CIRCLE
   MATCH PROGRESS PICTURES
   ========================================================= */

.planner-page
.planner-right-actions
[data-action="add-planner-activity"] {
  position: relative !important;

  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #102f46 !important;
  color: #ffffff !important;

  box-sizing: border-box !important;

  /* Hide "+ Add Activity" text */
  font-size: 0 !important;
  line-height: 1 !important;

  box-shadow: none !important;

  overflow: hidden !important;

  z-index: 10 !important;
}


/* =========================================================
   EXACT CENTERED + SYMBOL
   ========================================================= */

.planner-page
.planner-right-actions
[data-action="add-planner-activity"]::before {
  content: "+" !important;

  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  display: block !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  transform: translate(-50%, -50%) !important;

  pointer-events: none !important;
}


/* REMOVE ANY OTHER GENERATED CONTENT */

.planner-page
.planner-right-actions
[data-action="add-planner-activity"]::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.planner-page
.planner-right-actions
[data-action="add-planner-activity"]:hover {
  background: #102f46 !important;
  color: #ffffff !important;
}


/* =========================================================
   YOUR PLANNED WEEK CARD
   ========================================================= */

.planner-page .planner-day-panel {
  order: 2 !important;

  position: relative !important;
}


/* Leave room for + in header */

.planner-page .planner-day-panel-head {
  padding-right: 74px !important;
}

  /* =========================================================
     CALENDAR MONTH HEADLINE

     October 2026

     CHANGE MONTH FONT SIZE HERE
     ========================================================= */

  .planner-page
  .planner-calendar-card
  .planner-calendar-head h2 {
    font-size: 25px !important; /* <-- CHANGE OCTOBER 2026 SIZE HERE */
    line-height: 1.3 !important;
  }



  /* =========================================================
     WEEKLY SCHEDULE — EYEBROW

     CHANGE EYEBROW SIZE / COLOR HERE
     ========================================================= */

  .planner-page
  .planner-day-panel
  .planner-day-panel-head
  .eyebrow {
    font-size: 12px !important; /* <-- CHANGE EYEBROW SIZE HERE */
    color: #A8B9A7 !important;  /* <-- CHANGE LIGHT SAGE HERE */
    line-height: 1.2 !important;
  }



  /* =========================================================
     YOUR PLANNED WEEK — HEADLINE

     CHANGE HEADLINE SIZE HERE
     ========================================================= */

  .planner-page
  .planner-day-panel
  .planner-day-panel-head h2 {
    font-size: 25px !important; /* <-- CHANGE YOUR PLANNED WEEK SIZE HERE */
    line-height: 1.3 !important;
  }



  /* =========================================================
     ACTIVITY COUNT
     9 ACTIVITIES

     REMOVE BADGE / PILL APPEARANCE
     ========================================================= */

  .planner-page
  .planner-day-panel
  .planner-day-count {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #102f46 !important;

    font-family: inherit !important;
    font-size: 12px !important; /* <-- CHANGE ACTIVITIES SIZE HERE */
    font-weight: 600 !important;
    line-height: 1.2 !important;

    letter-spacing: 0 !important;
  }

}

/* =========================================================
   WEEKLY PROGRESS PAGE
   FULL WIDTH + MOBILE TYPOGRAPHY
   Match HOME page content width
   ========================================================= */


/* =========================================================
   DESKTOP + ALL SCREEN SIZES
   Remove the Weekly Progress page's extra inset
   ========================================================= */

.weekly-progress-page {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  box-sizing: border-box !important;
}


/* Main Weekly Progress grids */

.weekly-progress-page .weekly-dashboard-grid,
.weekly-progress-page .weekly-insight-grid {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/* Main cards */

.weekly-progress-page .weekly-training-card,
.weekly-progress-page .weekly-planner-card,
.weekly-progress-page .weekly-progress-bar-card,
.weekly-progress-page .weekly-detail-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  /* -----------------------------------------------
     SINGLE COLUMN
     ----------------------------------------------- */

  .weekly-progress-page .weekly-dashboard-grid,
  .weekly-progress-page .weekly-insight-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }


  /* =======================================================
     EYEBROWS

     TRAINING
     PLANNER
     WEEKLY PROGRESS
     RECOVERY
     ======================================================= */

  .weekly-progress-page .weekly-training-card .eyebrow,
  .weekly-progress-page .weekly-planner-card .eyebrow,
  .weekly-progress-page .weekly-progress-bar-card .eyebrow,
  .weekly-progress-page .weekly-detail-card .eyebrow {
    font-size: 12px !important;       /* <-- CHANGE EYEBROW SIZE HERE */
    color: #A8B9A7 !important;        /* <-- CHANGE LIGHT SAGE COLOR HERE */
    line-height: 1.2 !important;
  }


  /* =======================================================
     HEADLINES

     Your Training
     This Week
     Weekly Completion
     Recovery Trend
     ======================================================= */

  .weekly-progress-page
  .weekly-training-card
  .weekly-card-heading h3,

  .weekly-progress-page
  .weekly-planner-card
  .weekly-card-heading h3,

  .weekly-progress-page
  .weekly-progress-bar-card
  .weekly-line-card-heading h3,

  .weekly-progress-page
  .weekly-detail-card
  .weekly-line-card-heading h3 {
    font-size: 25px !important;       /* <-- CHANGE HEADLINE SIZE HERE */
    line-height: 1.3 !important;
  }
  
  

}


/* =========================================================
   WEEKLY PROGRESS — MOBILE FOOTER STATS
   4 COLUMNS × 1 ROW

   APPLIES TO:
   - Weekly Completion
   - Recovery Trend
   ========================================================= */

@media (max-width: 760px) {

  .weekly-progress-page .weekly-chart-footer {
    display: grid !important;

    /* 4 EQUAL COLUMNS */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;

    width: 100% !important;

    gap: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     EACH STAT COLUMN
     ======================================================= */

  .weekly-progress-page .weekly-chart-footer > div {
    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 14px 4px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     REMOVE THE 2 × 2 ROW SEPARATION

     Keeps only vertical separation between columns.
     ======================================================= */

  .weekly-progress-page .weekly-chart-footer > div {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }


  .weekly-progress-page .weekly-chart-footer > div:not(:last-child) {
    border-right: 1px solid #dfe3e1 !important;
  }


  .weekly-progress-page .weekly-chart-footer > div:last-child {
    border-right: 0 !important;
  }


  /* =======================================================
     STAT NUMBER
     
     Examples:
     7
     2
     5
     0

     5.9h
     2.5/5
     3.8L
     8,500
     ======================================================= */

  .weekly-progress-page .weekly-chart-footer > div > strong {
    display: block !important;

    width: 100% !important;

    margin: 0 0 4px !important;

    white-space: nowrap !important;

    text-align: center !important;
  }


  /* =======================================================
     STAT LABEL

     Planned
     Completed
     Missed
     Remaining

     Avg Sleep
     Avg Energy
     Avg Water
     Avg Steps
     ======================================================= */

  .weekly-progress-page .weekly-chart-footer > div > span {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    white-space: nowrap !important;

    text-align: center !important;
  }

}


/* =========================================================
   WEEKLY PROGRESS — PLANNER
   SEE MORE / SEE LESS
   DESKTOP + MOBILE
   ========================================================= */

.weekly-progress-page .weekly-planner-expand-wrap,
.planner-page .weekly-planner-expand-wrap {
    display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 16px 0 4px !important;

  border-top: 1px solid #dfe3e1 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   SEE MORE / SEE LESS — TEXT LINK
   ========================================================= */

.weekly-progress-page .weekly-planner-expand,
.planner-page .weekly-planner-expand {
    appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: #102f46 !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;

  cursor: pointer !important;
}


/* HOVER */

.weekly-progress-page .weekly-planner-expand:hover,
.planner-page .weekly-planner-expand:hover {
    background: transparent !important;
  color: #102f46 !important;

  border: 0 !important;
  box-shadow: none !important;

  opacity: 0.7;
}


/* FOCUS */

.weekly-progress-page .weekly-planner-expand:focus,
.weekly-progress-page .weekly-planner-expand:focus-visible,
.planner-page .weekly-planner-expand:focus,
.planner-page .weekly-planner-expand:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   BOTTOM NAVIGATION — TYPOGRAPHY
   ========================================================= */

.bottom-nav a {
  color: #7f8d96 !important;       /* INACTIVE COLOR */

  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
}


/* ACTIVE PAGE */
.bottom-nav a.active,
.bottom-nav a.is-active,
.bottom-nav a[aria-current="page"] {
  color: #ffffff !important;       /* ACTIVE COLOR */
}
/* =========================================================
   PROGRESS — WEIGHT CARD BOTTOM SUMMARY

   Make current weight:
   "71.8 KG"

   match change:
   "+18.0 KG"
   ========================================================= */

.weight-overview-now > strong {
  font-family: inherit !important;

  /* MATCH +18.0 KG */
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  color: #9a744d !important;

  margin: 0 !important;
}

/* =========================================================
   PROGRESS PHOTO COMPARE — MOBILE
   FORCE LANDSCAPE-STYLE VIEWER

   The phone/browser can remain portrait.
   The comparison interface itself rotates 90 degrees.
   ========================================================= */

@media (max-width: 760px) {

  /* =======================================================
     FULL SCREEN ROTATED VIEWER
     ======================================================= */

  .progress-photo-viewer.is-comparing {
    position: fixed !important;

    /*
     * After rotating 90deg:
     *
     * width  = portrait screen HEIGHT
     * height = portrait screen WIDTH
     *
     * This creates a landscape canvas.
     */
    width: 100dvh !important;
    height: 100vw !important;

    top: 50% !important;
    left: 50% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translate(-50%, -50%)
      rotate(90deg) !important;

    transform-origin: center center !important;

    background: #0d1418 !important;

    z-index: 99999 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     TOOLBAR
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-viewer-toolbar {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      48px
      minmax(0, 1fr)
      70px !important;

    align-items: center !important;

    width: 100% !important;
    height: 58px !important;

    margin: 0 !important;

    padding:
      0
      16px !important;

    box-sizing: border-box !important;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.12) !important;

    background: #0d1418 !important;
  }


  /* CLOSE X */

  .progress-photo-viewer.is-comparing
  .progress-photo-viewer-close {
    position: static !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 24px !important;
    line-height: 1 !important;

    transform: none !important;
  }


  /* TITLE */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-title {
    display: block !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: left !important;
  }


  /* DONE */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-done {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-align: right !important;

    transform: none !important;
  }


  /* =======================================================
     TWO-COLUMN LANDSCAPE LAYOUT
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-layout {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    width: 100% !important;

    height:
      calc(100% - 58px) !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     ORIGINAL + COMPARE COLUMNS
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-column {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding:
      12px
      12px
      10px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  /* DIVIDER BETWEEN PHOTOS */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-column.is-primary {
    border-right:
      1px solid
      rgba(255, 255, 255, 0.12) !important;
  }


  /* =======================================================
     SELECT + COUNTER
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-controls {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    flex: 0 0 auto !important;

    margin:
      0
      0
      4px !important;

    padding: 0 !important;

    box-sizing: border-box !important;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-compare-controls select {
    display: block !important;

    width: 130px !important;
    max-width: 70% !important;

    height: 32px !important;

    margin: 0 !important;

    padding:
      0
      10px !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.25) !important;

    border-radius: 6px !important;

    background: #151e23 !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    box-sizing: border-box !important;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-compare-count {
    display: block !important;

    color:
      rgba(255, 255, 255, 0.85) !important;

    font-family: inherit !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* =======================================================
     DATE
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-date {
    display: block !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    margin:
      0
      0
      7px !important;

    padding: 0 !important;

    color:
      rgba(255, 255, 255, 0.72) !important;

    font-family: inherit !important;

    font-size: 10px !important;
    font-weight: 500 !important;

    line-height: 1.2 !important;

    text-align: center !important;
  }


  /* =======================================================
     IMAGE STAGE
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-stage {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex:
      1
      1
      0 !important;

    width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
  }


  /* =======================================================
     IMAGE WRAPPER
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-image {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
  }


  /* =======================================================
     ACTUAL PHOTO
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-image img {
    display: block !important;

    width: auto !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    border-radius: 6px !important;
  }


  /* =======================================================
     PREVIOUS / NEXT BUTTONS

     Applies to BOTH:
     - Original photo
     - Compare photo
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-viewer-arrow {
    position: absolute !important;

    top: 50% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.28) !important;

    border-radius: 50% !important;

    background:
      rgba(13, 20, 24, 0.78) !important;

    color: #ffffff !important;

    font-size: 24px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    transform:
      translateY(-50%) !important;

    z-index: 10 !important;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-viewer-arrow.is-left {
    left: 8px !important;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-viewer-arrow.is-right {
    right: 8px !important;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-viewer-arrow:disabled {
    opacity: 0.18 !important;

    pointer-events: none !important;
  }


  /* =======================================================
     EMPTY STATE
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-compare-empty {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 1 !important;

    width: 100% !important;

    color:
      rgba(255, 255, 255, 0.7) !important;

    font-family: inherit !important;

    font-size: 12px !important;

    text-align: center !important;
  }


  /* =======================================================
     REMOVE OLD MOBILE COMPARISON UI
     ======================================================= */

  .progress-photo-viewer.is-comparing
  .progress-photo-mobile-compare {
    display: none !important;
  }

}

/* =========================================================
   PROGRESS PHOTO COMPARE
   CUSTOM ANGLE DROPDOWNS
   ========================================================= */

.progress-photo-angle-dropdown {
  position: relative;
  display: inline-block;
}


/* =========================================================
   DROPDOWN TRIGGER
   ========================================================= */

.progress-photo-angle-trigger {
  min-width: 132px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 0 14px;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.progress-photo-angle-trigger-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 15px;
  line-height: 1;
}


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.progress-photo-angle-menu {
  position: absolute;

  top: calc(100% + 6px);
  left: 0;

  z-index: 100;

  width: 100%;
  min-width: 132px;

  padding: 5px;

  background: #172127;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35);
}


/* VERY IMPORTANT:
   Prevent hidden menus from appearing.
*/

.progress-photo-angle-menu[hidden] {
  display: none !important;
}


/* =========================================================
   DROPDOWN OPTIONS
   ========================================================= */

.progress-photo-angle-option {
  width: 100%;
  min-height: 36px;

  display: flex;
  align-items: center;

  padding: 8px 10px;

  border: 0;
  border-radius: 5px;

  background: transparent;
  color: #ffffff;

  text-align: left;

  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;

  cursor: pointer;
}


.progress-photo-angle-option:hover,
.progress-photo-angle-option:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}


.progress-photo-angle-option.is-active {
  background: rgba(255, 255, 255, 0.14);
}


/* =========================================================
   MOBILE — ROTATED COMPARE MODE
   Keep custom dropdowns landscape with comparison interface
   ========================================================= */

@media (max-width: 767px) {

  .progress-photo-viewer.is-comparing
  .progress-photo-angle-dropdown {
    position: relative;
    display: inline-block;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-angle-trigger {
    width: 118px;
    min-width: 118px;
    height: 36px;

    padding: 0 10px;

    font-size: 12px;
    font-weight: 500;

    border-radius: 6px;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-angle-menu {
    width: 118px;
    min-width: 118px;

    top: calc(100% + 4px);
    left: 0;

    z-index: 9999;
  }


  .progress-photo-viewer.is-comparing
  .progress-photo-angle-option {
    min-height: 32px;

    padding: 7px 9px;

    font-size: 12px;
    font-weight: 500;
  }


  /*
   * CRITICAL:
   *
   * Do NOT rotate the dropdown separately.
   *
   * The entire .progress-photo-viewer.is-comparing
   * is already being rotated by your mobile compare CSS.
   * Therefore the dropdown inherits that rotation and
   * appears correctly in landscape.
   */

}


/* =========================================================
   XCULPTED PROFILE PAGE
   DESKTOP + MOBILE
   ========================================================= */

.profile-page {
    position: relative;
  width: 100%;
  max-width: none;

  margin: 0;
  padding:
    0
    0
    60px;

  box-sizing: border-box;

  font-family: "Manrope", sans-serif;
  color: #102f46;
}

/* =========================================================
   PROFILE — NOTIFICATION BELL
   ========================================================= */

.profile-notification-bell {
  position: absolute;
  top: 24px;
  right: 20px;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 1px solid #dfe3e1;
  border-radius: 50%;

  background: var(--sage-dark);
  color: #fff;

  box-shadow:
    0 8px 22px rgba(16, 47, 70, 0.08);

  cursor: pointer;

  box-sizing: border-box;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.profile-notification-bell svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-notification-bell:hover {
  background: var(--sage);
}

.profile-notification-bell:active {
  transform: scale(0.96);
}

.profile-notification-bell:focus-visible {
  outline: 2px solid #102f46;
  outline-offset: 3px;
}

/* =========================================================
   PROFILE — BACK BUTTON
   SAME POSITION AS PROGRESS / PLANNER
   ========================================================= */

.profile-page-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  box-sizing: border-box;

  margin: 0;

  padding:
    24px
    20px
    28px;
}

.profile-page .profile-page-back {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  margin: 0 !important;
  transform: none;
}

/* =========================================================
   DESKTOP — THREE COLUMNS
   ========================================================= */

.profile-page-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  border-bottom: 1px solid #dfe3e1;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.profile-page-column {
  min-width: 0;
  box-sizing: border-box;
}


/* Vertical desktop separators */

.profile-page-column:not(:last-child) {
  border-right: 1px solid #dfe3e1;
}


/* =========================================================
   COLUMN 1 — PROFILE
   ========================================================= */

.profile-page-personal {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 48px 34px 34px;

  text-align: center;
}


/* =========================================================
   PROFILE AVATAR
   ========================================================= */

.profile-page-avatar-wrap {
  position: relative;

  width: 224px;
  height: 224px;

  margin: 0 auto 24px;
}

.profile-page-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 224px;
  height: 224px;

  border-radius: 50%;

  object-fit: cover;

  box-sizing: border-box;
}

.profile-page-avatar-initials {
  background: #102f46;
  color: #ffffff;

  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}


/* + PHOTO BUTTON */

.profile-page-avatar-edit {
  position: absolute;
  right: 4px;
bottom: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

width: 42px;
height: 42px;

  padding: 0;

  border: 2px solid #fbfbf9;
  border-radius: 50%;

  background: #102f46;
  color: #ffffff;

  font-family: "Manrope", sans-serif;
font-size: 25px;
font-weight: 400;
  line-height: 1;

  cursor: pointer;

  box-sizing: border-box;
}


/* =========================================================
   PROFILE IDENTITY
   ========================================================= */

.profile-page-identity {
  width: 100%;
  min-width: 0;
}


.profile-page-identity h1 {
  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;

  color: #102f46;
}


.profile-page-identity p {
  margin: 5px 0 0;

  overflow-wrap: anywhere;

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;

  color: #6f7f83;
}


.profile-page-photo-link {
  appearance: none;
  -webkit-appearance: none;

  margin: 8px 0 0;
  padding: 0;

  border: 0;
  background: transparent;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  color: #102f46;

  cursor: pointer;
}


.profile-page-photo-link:hover {
  opacity: 0.65;
}


/* =========================================================
   AGE / HEIGHT / WEIGHT
   ========================================================= */

.profile-page-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  width: 100%;

  margin-top: 34px;
  padding-top: 22px;

  border-top: 1px solid #dfe3e1;
}


.profile-page-stat {
  min-width: 0;

  padding: 0 8px;

  text-align: center;
}


.profile-page-stat:not(:last-child) {
  border-right: 1px solid #dfe3e1;
}


.profile-page-stat span {
  display: block;

  margin: 0 0 6px;

  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;

  color: #6f7f83;
}


.profile-page-stat strong {
  display: block;

  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;

  color: #102f46;

  white-space: nowrap;
}


/* =========================================================
   COLUMNS 2 + 3 — MENU
   ========================================================= */

.profile-page-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 18px 24px;
}


/* =========================================================
   MENU ROW
   ========================================================= */

.profile-page-menu-row {
  appearance: none;
  -webkit-appearance: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 64px;

  margin: 0;
  padding: 0 18px;

  border: 0;
  border-bottom: 1px solid #dfe3e1;

  border-radius: 0;

  background: #ffffff;
  box-shadow: none;

  text-align: left;

  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;

  color: #102f46;

  cursor: pointer;
  box-sizing: border-box;

  transition:
    background-color 0.2s ease,
    padding 0.2s ease;
}

/* =========================================================
   ALTERNATING PROFILE MENU ROWS
   WHITE → SAGE → WHITE → SAGE
   ========================================================= */

.profile-page-menu-row:nth-child(odd) {
  background: #ffffff;
}

.profile-page-menu-row:nth-child(even) {
  background: #F3F6F5;
}

.profile-page-menu-row:hover {
  padding-left: 22px;
  padding-right: 14px;

  background: #F3F6F5;

  opacity: 1;
}


.profile-page-menu-row:focus-visible {
  outline: 2px solid #102f46;
  outline-offset: -2px;
}


/* Remove final divider */

.profile-page-menu-row:last-child {
  border-bottom: 0;
}


/* =========================================================
   ROW ARROW
   ========================================================= */

.profile-page-menu-arrow {
  flex: 0 0 auto;

  margin-left: 18px;

  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;

  color: #102f46;
}


/* =========================================================
   LOGOUT
   ========================================================= */

.profile-page-logout {
  margin-top: 0;
  color: #102f46;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .profile-page-personal {
    padding-left: 22px;
    padding-right: 22px;
  }


  .profile-page-menu {
    padding-left: 20px;
    padding-right: 20px;
  }

}


/* =========================================================
   MOBILE
   ONE COLUMN
   ========================================================= */

@media (max-width: 767px) {

.profile-page {
  width: 100%;

  padding:
    0
    0
    calc(100px + env(safe-area-inset-bottom));

  box-sizing: border-box;
}

.profile-notification-bell {
  top: 20px;
  right: 20px;

  width: 40px;
  height: 40px;
}

.profile-notification-bell svg {
  width: 18px;
  height: 18px;
}

/* =======================================================
   MOBILE — BACK
   ======================================================= */

.profile-page-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;

  margin: 0;

  padding:
    20px
    20px
    28px;

  box-sizing: border-box;
}

.profile-page .profile-page-back {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  margin: 0 !important;
  transform: none;
}

  /* GRID → STACK */

  .profile-page-grid {
    display: block;

    border-top: 0;
    border-bottom: 0;
  }


  .profile-page-column {
    width: 100%;

    border-right: 0 !important;
  }


  /* =======================================================
     MOBILE PROFILE
     ======================================================= */

  .profile-page-personal {
    padding: 4px 0 28px;

    border-bottom: 1px solid #dfe3e1;
  }


.profile-page-avatar-wrap {
  width: 192px;
  height: 192px;

  margin-bottom: 20px;
}

.profile-page-avatar {
  width: 192px;
  height: 192px;
}


  .profile-page-avatar-initials {
    font-size: 30px;
  }


  .profile-page-avatar-edit {
    width: 29px;
    height: 29px;

    font-size: 18px;
  }


  /* NAME */

  .profile-page-identity h1 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
  }


  .profile-page-identity p {
    margin-top: 4px;

    font-size: 15px;
  }


  .profile-page-photo-link {
    margin-top: 7px;

    font-size: 12px;
  }


  /* =======================================================
     AGE / HEIGHT / WEIGHT
     ======================================================= */

  .profile-page-stats {
    margin-top: 26px;
    padding-top: 20px;
  }


  .profile-page-stat {
    padding: 0 5px;
  }


  .profile-page-stat span {
    margin-bottom: 5px;

    font-size: 15px;
  }


  .profile-page-stat strong {
    font-size: 25px;
    font-weight: 600;
  }


  /* =======================================================
     MOBILE MENUS
     ======================================================= */

  .profile-page-menu {
    padding: 0;
  }


  .profile-page-menu-primary {
    padding-top: 12px;
    padding-bottom: 12px;

    border-bottom: 1px solid #dfe3e1;
  }


  .profile-page-menu-secondary {
    padding-top: 12px;
  }


.profile-page-menu-row {
  min-height: 56px;

  padding-left: 16px;
  padding-right: 16px;

  font-size: 15px;
  font-weight: 650;
}


.profile-page-menu-row:hover {
  padding-left: 16px;
  padding-right: 16px;

  background: #f1f5f0;

  opacity: 1;
}


  .profile-page-menu-arrow {
    font-size: 16px;
  }


  /* Keep dividers between every mobile row */

  .profile-page-menu-row:last-child {
    border-bottom: 0;
  }


  /* LOGOUT */

  .profile-page-logout {
    color: #102f46;
  }

}


/* =========================================================
   1. SMALL LABELS
   DAILY CHECK-IN
   1 OF 4 / 2 OF 4 / 3 OF 4 / 4 OF 4

   CHANGE FONT SIZE / COLOR / FONT HERE
   ========================================================= */

.checkin-wizard .checkin-wizard-header .eyebrow,
.checkin-wizard .checkin-wizard-step {
  font-family: inherit !important;     /* <-- CHANGE FONT TYPE HERE */
  font-size: 12px !important;         /* <-- CHANGE SMALL LABEL SIZE HERE */
  font-weight: 600 !important;         /* <-- CHANGE FONT WEIGHT HERE */
  color: #A8B9A7 !important;          /* <-- CHANGE LIGHT SAGE COLOR HERE */
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;   /* <-- CHANGE LETTER SPACING HERE */
}


/* =========================================================
   2. QUESTION HEADLINES

   Examples:
   How many hours did you sleep?
   How’s your energy today?
   How much water have you had?
   How many steps have you taken?

   CHANGE FONT SIZE / COLOR / FONT HERE
   ========================================================= */

.checkin-wizard .checkin-wizard-question h2 {
  font-family: inherit !important;     /* <-- CHANGE FONT TYPE HERE */
  font-size: 25px !important;         /* <-- CHANGE HEADLINE SIZE HERE */
  font-weight: 700 !important;         /* <-- CHANGE HEADLINE WEIGHT HERE */
  color: #102F46 !important;          /* <-- CHANGE HEADLINE COLOR HERE */
  line-height: 1.3 !important;
  letter-spacing: 0 !important;        /* <-- CHANGE LETTER SPACING HERE */
}


/* =========================================================
   3. QUESTION DESCRIPTION

   Examples:
   Scroll or drag to select your sleep.
   Choose the face that best matches how you feel.
   Scroll or drag to select your amount.
   Scroll or drag to select your steps.

   CHANGE FONT SIZE / COLOR / FONT HERE
   ========================================================= */

.checkin-wizard .checkin-wizard-question > p {
  font-family: inherit !important;     /* <-- CHANGE FONT TYPE HERE */
  font-size: 15px !important;         /* <-- CHANGE DESCRIPTION SIZE HERE */
  font-weight: 400 !important;         /* <-- CHANGE DESCRIPTION WEIGHT HERE */
  color: #6F7F89 !important;          /* <-- CHANGE DESCRIPTION COLOR HERE */
  line-height: 1.45 !important;
  letter-spacing: 0 !important;        /* <-- CHANGE LETTER SPACING HERE */
}


/* =========================================================
   4. CONTINUE / SAVE CHECK-IN BUTTON
   CENTER BUTTON HORIZONTALLY

   CHANGE WIDTH HERE IF NEEDED
   ========================================================= */

.checkin-wizard .checkin-wizard-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}


/* CONTINUE / SAVE CHECK-IN BUTTON */

.checkin-wizard .checkin-wizard-actions > .button:not(.secondary) {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   CHECK-IN ACTIONS — WHEN THERE ARE 2 BUTTONS

   DESIGN:
   Cancel   = white outlined pill
   Continue = dark filled pill

   Both buttons stay grouped near the center.
   ========================================================= */

.checkin-wizard .checkin-wizard-actions:has(> .button.secondary) {
  justify-content: center !important;

  gap: 10px !important;
  /* <-- CHANGE SPACE BETWEEN BUTTONS HERE */
}


/* =========================================================
   BOTH BUTTONS — SHARED SIZE / ALIGNMENT
   ========================================================= */

.checkin-wizard .checkin-wizard-actions:has(> .button.secondary)
  > .button {
  margin: 0 !important;

  min-height: 48px !important;
  padding: 0 28px !important;

  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 14px !important;       /* <-- CHANGE BUTTON FONT SIZE */
  font-weight: 600 !important;      /* <-- CHANGE BUTTON FONT WEIGHT */
  line-height: 1 !important;
}


/* =========================================================
   CANCEL BUTTON — INACTIVE / SECONDARY

   White background + light outline
   ========================================================= */

.checkin-wizard .checkin-wizard-actions:has(> .button.secondary)
  > .button.secondary {

  background: #FFFFFF !important;
  /* <-- CHANGE INACTIVE BUTTON BACKGROUND HERE */

  color: #102F46 !important;
  /* <-- CHANGE INACTIVE BUTTON TEXT COLOR HERE */

  border: 1px solid #D8DEDA !important;
  /* <-- CHANGE INACTIVE BUTTON BORDER HERE */

  min-width: 125px !important;
  /* <-- CHANGE CANCEL BUTTON WIDTH HERE */
}


/* =========================================================
   CONTINUE BUTTON — PRIMARY / ACTIVE
   ========================================================= */

.checkin-wizard .checkin-wizard-actions:has(> .button.secondary)
  > .button:not(.secondary) {

  background: #102F46 !important;
  /* <-- CHANGE ACTIVE BUTTON BACKGROUND HERE */

  color: #FFFFFF !important;
  /* <-- CHANGE ACTIVE BUTTON TEXT COLOR HERE */

  border: 1px solid #102F46 !important;

  min-width: 165px !important;
  /* <-- CHANGE CONTINUE BUTTON WIDTH HERE */

  margin: 0 !important;
}


/* =========================================================
   OPTIONAL — CANCEL HOVER
   ========================================================= */

.checkin-wizard .checkin-wizard-actions:has(> .button.secondary)
  > .button.secondary:hover {

  background: #F7F9F7 !important;
  /* <-- CHANGE CANCEL HOVER BACKGROUND HERE */
}


/* =========================================================
   OPTIONAL — BUTTON TEXT TYPOGRAPHY

   CHANGE BUTTON FONT HERE
   ========================================================= */

.checkin-wizard .checkin-wizard-actions > .button {
  font-family: inherit !important;     /* <-- CHANGE BUTTON FONT TYPE HERE */
  font-size: 15px !important;         /* <-- CHANGE BUTTON TEXT SIZE HERE */
  font-weight: 600 !important;         /* <-- CHANGE BUTTON TEXT WEIGHT HERE */
  line-height: 1.2 !important;
}


/* =========================================================
   WEIGHT PICKER MODAL — FINAL OVERRIDES

   Applies ONLY to:
   Update Current Weight
   Update Starting Weight
   ========================================================= */


/* =========================================================
   1. CENTER THE ENTIRE WEIGHT MODAL
   ========================================================= */

#modal.weight-picker-dialog {
  margin: auto !important;

  position: fixed !important;
  inset: 0 !important;

  padding: 0 !important;
}


/* Center modal content horizontally + vertically */

#modal.weight-picker-dialog #modalContent {
  width: 100% !important;
  min-height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 20px !important;
  box-sizing: border-box !important;
}


/* Prevent generic modal panel positioning */

#modal.weight-picker-dialog .modal-panel {
  margin: 0 !important;

  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  transform: none !important;
}


/* =========================================================
   2. "UPDATE CURRENT WEIGHT" / "UPDATE STARTING WEIGHT"

   CHANGE TYPOGRAPHY HERE
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-header h2 {

  font-family: inherit !important;
  /* <-- CHANGE FONT TYPE HERE */

  font-size: 25px !important;
  /* <-- CHANGE HEADLINE SIZE HERE */

  font-weight: 700 !important;
  /* <-- CHANGE HEADLINE WEIGHT HERE */

  color: #102F46 !important;
  /* <-- CHANGE HEADLINE COLOR HERE */

  line-height: 1.3 !important;

  letter-spacing: 0 !important;
  /* <-- CHANGE LETTER SPACING HERE */

  margin: 0 !important;
}


/* =========================================================
   CENTER HEADER TEXT
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-header {

  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}


/* =========================================================
   WEIGHT PICKER HEADER

   X BUTTON:
   - Own top row
   - Positioned top-right

   TITLE:
   - Separate row underneath
   - Centered horizontally
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-header {

  position: relative !important;

  display: block !important;

  width: 100% !important;

  padding-top: 42px !important;
  /* <-- CHANGE SPACE ABOVE TITLE HERE */

  text-align: center !important;
}


/* =========================================================
   TITLE ROW
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-header > div {

  width: 100% !important;

  display: block !important;

  text-align: center !important;
}


/* =========================================================
   X BUTTON — TOP RIGHT

   CHANGE TOP / RIGHT POSITION HERE
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-header .close-button {

  position: absolute !important;

  top: 0 !important;
  /* <-- CHANGE X VERTICAL POSITION HERE */

  right: 0 !important;
  /* <-- CHANGE X HORIZONTAL POSITION HERE */

  margin: 0 !important;

  transform: none !important;
}


/* =========================================================
   3. BUTTON CONTAINER

   Keep Cancel + Confirm grouped near center.
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-actions {

  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;
  /* <-- CHANGE SPACE BETWEEN BUTTONS HERE */

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   BOTH BUTTONS — SHARED DESIGN
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-actions > .button {

  margin: 0 !important;

  min-height: 48px !important;

  padding: 0 28px !important;

  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-family: inherit !important;
  /* <-- CHANGE BUTTON FONT TYPE HERE */

  font-size: 12px !important;
  /* <-- CHANGE BUTTON FONT SIZE HERE */

  font-weight: 600 !important;
  /* <-- CHANGE BUTTON FONT WEIGHT HERE */

  line-height: 1.2 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   CANCEL — WHITE INACTIVE BUTTON
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-cancel {

  min-width: 125px !important;
  /* <-- CHANGE CANCEL WIDTH HERE */

  background: #FFFFFF !important;
  /* <-- CHANGE CANCEL BACKGROUND HERE */

  color: #102F46 !important;
  /* <-- CHANGE CANCEL TEXT COLOR HERE */

  border: 1px solid #D8DEDA !important;
  /* <-- CHANGE CANCEL BORDER HERE */
}


/* CANCEL HOVER */

#modal.weight-picker-dialog
.weight-picker-cancel:hover {

  background: #F7F9F7 !important;
  /* <-- CHANGE CANCEL HOVER HERE */
}


/* =========================================================
   CONFIRM / UPDATE — DARK ACTIVE BUTTON
   ========================================================= */

#modal.weight-picker-dialog
.weight-picker-confirm {

  min-width: 165px !important;
  /* <-- CHANGE CONFIRM WIDTH HERE */

  background: #102F46 !important;
  /* <-- CHANGE ACTIVE BACKGROUND HERE */

  color: #FFFFFF !important;
  /* <-- CHANGE ACTIVE TEXT HERE */

  border: 1px solid #102F46 !important;
}


/* Keep text + arrow properly aligned */

#modal.weight-picker-dialog
.weight-picker-confirm {

  gap: 10px !important;
}

/* =========================================================
   WEIGHT UNIT SELECTOR
   KILOGRAMS / POUNDS
   ========================================================= */


/* ENTIRE TOGGLE CONTAINER */

#modal.weight-picker-dialog
.weight-unit-toggle {

  background: #FFFFFF !important;
  /* <-- CHANGE TOGGLE BACKGROUND HERE */
}


/* =========================================================
   UNSELECTED OPTION

   Example:
   Kilograms selected → Pounds is WHITE
   Pounds selected → Kilograms is WHITE
   ========================================================= */

#modal.weight-picker-dialog
.weight-unit-option:not(.is-active) {

  background: #FFFFFF !important;
  /* <-- CHANGE UNSELECTED BACKGROUND HERE */

  color: #8A918E !important;
  /* <-- CHANGE UNSELECTED TEXT COLOR HERE */
}


/* =========================================================
   SELECTED OPTION
   ========================================================= */

#modal.weight-picker-dialog
.weight-unit-option.is-active {

  background: #102F46 !important;
  /* <-- CHANGE SELECTED BACKGROUND HERE */

  color: #FFFFFF !important;
  /* <-- CHANGE SELECTED TEXT COLOR HERE */
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #modal.weight-picker-dialog #modalContent {

    padding: 16px !important;

  }


  #modal.weight-picker-dialog
  .weight-picker-actions {

    gap: 8px !important;

  }


  #modal.weight-picker-dialog
  .weight-picker-actions > .button {

    min-height: 48px !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

  }


  #modal.weight-picker-dialog
  .weight-picker-cancel {

    min-width: 110px !important;

  }


  #modal.weight-picker-dialog
  .weight-picker-confirm {

    min-width: 155px !important;

  }

}

/* =========================================================
   MACRO CALCULATOR — 6 STEP MODAL
   FINAL OVERRIDES
   ========================================================= */


/* =========================================================
   1. TOP HEADER — X BUTTON ROW

   X stays at TOP RIGHT.
   Change the height below to increase/decrease
   the space reserved for the X.
   ========================================================= */

.macro-mobile-wizard .macro-mobile-wizard-header {
  position: relative !important;

  width: 100% !important;
  min-height: 60px !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   X BUTTON

   CHANGE POSITION HERE
   ========================================================= */

.macro-mobile-wizard
.macro-mobile-wizard-header
.close-button {

  position: absolute !important;

  top: 0 !important;
  /* <-- CHANGE X VERTICAL POSITION HERE */

  right: 0 !important;
  /* <-- CHANGE X HORIZONTAL POSITION HERE */

  left: auto !important;
  bottom: auto !important;

  margin: 0 !important;

  transform: none !important;
}


/* =========================================================
   2. PROGRESS BAR

   6 segments:
   Sex
   Age
   Current Weight
   Height
   Activity
   Goal
   ========================================================= */

.macro-mobile-wizard
.macro-mobile-progress-bars {

  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;

  gap: 6px !important;
  /* <-- CHANGE SPACE BETWEEN PROGRESS BARS HERE */

  margin: 4px 0 24px !important;
  /*              ↑
     CHANGE SPACE BELOW PROGRESS BAR HERE
  */
}


/* EACH PROGRESS SEGMENT */

.macro-mobile-wizard
.macro-mobile-progress-bar {

  display: block !important;

  width: 100% !important;
  height: 3px !important;
  /* <-- CHANGE PROGRESS BAR THICKNESS HERE */

  border-radius: 999px !important;

  background: #E1E6E2 !important;
  /* <-- CHANGE INACTIVE BAR COLOR HERE */
}


/* COMPLETED / CURRENT PROGRESS SEGMENT */

.macro-mobile-wizard
.macro-mobile-progress-bar.is-active {

  background: #789486 !important;
  /* <-- CHANGE ACTIVE BAR COLOR HERE */
}


/* =========================================================
   3. "1 OF 6" THROUGH "6 OF 6"

   CHANGE SMALL STEP LABEL HERE
   ========================================================= */

.macro-mobile-wizard
.macro-mobile-progress {

  font-family: inherit !important;
  /* <-- CHANGE FONT TYPE HERE */

  font-size: 12px !important;
  /* <-- CHANGE SMALL LABEL SIZE HERE */

  font-weight: 600 !important;
  /* <-- CHANGE FONT WEIGHT HERE */

  color: #A8B9A7 !important;
  /* <-- CHANGE LIGHT SAGE COLOR HERE */

  line-height: 1.2 !important;

  letter-spacing: 0.08em !important;
  /* <-- CHANGE LETTER SPACING HERE */

  text-align: center !important;

  margin: 0 0 12px !important;
  /* <-- CHANGE SPACE BELOW "1 OF 6" HERE */
}


/* =========================================================
   4. QUESTION HEADLINE

   Applies to ALL:
   Sex
   Age
   Current Weight
   Height
   Activity
   Goal
   ========================================================= */

.macro-mobile-wizard
.macro-mobile-question
.macro-mobile-question-label {

  display: block !important;

  font-family: inherit !important;
  /* <-- CHANGE HEADLINE FONT TYPE HERE */

  font-size: 25px !important;
  /* <-- CHANGE HEADLINE SIZE HERE */

  font-weight: 700 !important;
  /* <-- CHANGE HEADLINE WEIGHT HERE */

  color: #102F46 !important;
  /* <-- CHANGE HEADLINE COLOR HERE */

  line-height: 1.3 !important;

  letter-spacing: 0 !important;

  text-align: center !important;

  margin: 0 0 8px !important;
  /* <-- CHANGE SPACE BELOW HEADLINE HERE */
}

/* =========================================================
   5. SPACE BETWEEN OPTIONS AND BOTTOM BUTTONS

   This creates more breathing room between:
   - Male and the buttons
   - Activity choices and the buttons
   - Goal choices and the buttons
   - Other step content and the buttons

   Increase 30px = more space
   Decrease 30px = less space
   ========================================================= */

.macro-mobile-wizard
.macro-mobile-question {

  margin-bottom: 30px !important;
  /* <-- CHANGE SPACE BETWEEN LAST CHOICE AND BUTTONS HERE */
}

/* =========================================================
   7. KEEP CONTENT INSIDE MODAL WIDTH

   Prevents choices, progress bars and other content
   from becoming wider than the modal.
   ========================================================= */

.macro-mobile-wizard * {
  box-sizing: border-box !important;
}

.macro-mobile-wizard
.macro-mobile-question {

  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   8. MACRO MODAL — FINAL WIDTH + OVERFLOW FIX

   IMPORTANT:
   Change 400px below to adjust modal width.

   360px = narrower
   380px = medium
   400px = current/recommended
   420px = wider
   ========================================================= */

#modal.macro-mobile-dialog .modal-panel {
  width: 400px !important;
  /* <-- CHANGE MODAL WIDTH HERE */

  max-width: calc(100vw - 40px) !important;

  box-sizing: border-box !important;

  overflow-x: hidden !important;
}


/* =========================================================
   WIZARD MUST FIT INSIDE MODAL PANEL

   DO NOT give this another fixed pixel width.
   The modal-panel above controls the actual modal width.
   ========================================================= */

#modal.macro-mobile-dialog
.macro-mobile-wizard {

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;

  overflow-x: hidden !important;
}


/* =========================================================
   KEEP ALL MAIN WIZARD SECTIONS INSIDE MODAL
   ========================================================= */

#modal.macro-mobile-dialog
.macro-mobile-wizard-header,

#modal.macro-mobile-dialog
.macro-mobile-progress-bars,

#modal.macro-mobile-dialog
.macro-mobile-progress,

#modal.macro-mobile-dialog
.macro-mobile-question,

#modal.macro-mobile-dialog
.macro-mobile-actions,

#modal.macro-mobile-dialog
.macro-mobile-unit-toggle,

#modal.macro-mobile-dialog
.macro-mobile-wheel {

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   UNIT TOGGLE

   Fixes:
   Centimeters | Feet / Inches

   Prevents Feet / Inches from going outside the modal.
   ========================================================= */

#modal.macro-mobile-dialog
.macro-mobile-unit-toggle {

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;

  overflow: hidden !important;
}


#modal.macro-mobile-dialog
.macro-mobile-unit-option {

  width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;

  white-space: nowrap !important;
}


/* =========================================================
   BOTTOM ACTION BUTTONS

   Fixes:
   Back | Continue
   Cancel | Continue

   Prevents Continue from extending outside modal.
   ========================================================= */

#modal.macro-mobile-dialog
.macro-mobile-actions {

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.25fr) !important;

  gap: 10px !important;

  overflow: hidden !important;
}


#modal.macro-mobile-dialog
.macro-mobile-actions > .button {

  width: 100% !important;

  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding-left: 18px !important;
  padding-right: 18px !important;

  box-sizing: border-box !important;

  white-space: nowrap !important;
}


/* =========================================================
   MOBILE SAFETY

   Modal always stays inside small phone screens.
   ========================================================= */

@media (max-width: 600px) {

  #modal.macro-mobile-dialog .modal-panel {

    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;

  }

}

/* =========================================================
   PLANNER — WEEKLY SCHEDULE EXPAND CONTROL
   ========================================================= */

.planner-calendar-week-toggle-wrap {
  width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 16px 0 4px !important;
}


/* =========================================================
   SEE MORE / SEE LESS

   CHANGE FONT SIZE HERE
   ========================================================= */

.planner-calendar-week-toggle {
  appearance: none !important;

  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;

  padding: 4px 8px !important;
  margin: 0 !important;

  font-family: inherit !important;

  font-size: 15px !important;
  /* <-- CHANGE SEE MORE / SEE LESS FONT SIZE HERE */

  font-weight: 600 !important;

  line-height: 1.2 !important;

  color: #102F46 !important;
  /* <-- CHANGE TEXT COLOR HERE */

  cursor: pointer !important;
}


.planner-calendar-week-toggle:hover {
  text-decoration: underline !important;
}


/* =========================================================
   EXPANDED WEEK CONTENT
   ========================================================= */

.planner-calendar-week-expanded {
  width: 100% !important;

  padding: 8px 0 0 !important;
}


.planner-calendar-week-schedule-head {
  margin-bottom: 12px !important;
}


.planner-calendar-week-schedule-head h3 {
  margin: 3px 0 0 !important;
}

/* =========================================================
   PLANNER — FINAL DESKTOP LAYOUT
   ========================================================= */

.planner-layout-v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}


/* LEFT — CALENDAR */

.planner-calendar-card {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}


/* RIGHT — ADD ACTIVITY + SELECTED DAY */

.planner-right-column {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}


/* ADD ACTIVITY STAYS ABOVE RIGHT CARD */

.planner-right-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}


/* TODAY / SELECTED DATE CARD */

.planner-day-panel {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}


/* SEE MORE REMAINS UNDER CALENDAR */

.planner-calendar-week-schedule {
  width: 100% !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .planner-layout-v2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }


  .planner-calendar-card,
  .planner-right-column {
    width: 100% !important;
  }

}



/* =========================================================
   PLANNER ADD / EDIT ACTIVITY MODAL
   REMOVE UNUSED RIGHT SPACE
   ========================================================= */

.planner-schedule-modal {
  width: 100%;
}

.planner-schedule-modal .form-grid {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planner-schedule-modal .field {
  min-width: 0;
  width: 100%;
}

.planner-schedule-modal .field.full {
  grid-column: 1 / -1;
}

.planner-schedule-modal input,
.planner-schedule-modal select,
.planner-schedule-modal .planner-picker-trigger {
  width: 100%;
  box-sizing: border-box;
}


/* =========================================================
   CHECK-IN WHEEL — MANUAL INPUT MODE
   ========================================================= */

.checkin-manual-input-wrap {
  width: 100%;
  max-width: 220px;
  margin: 28px auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}


.checkin-manual-input {
  width: 150px;
  height: 58px;

  padding: 0 14px;

  border: 1px solid #d8e0dc;
  border-radius: 0;

  background: #ffffff;

  font: inherit;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  text-align: center;

  color: #0b3048;

  outline: none;

  appearance: textfield;
  -moz-appearance: textfield;
}


.checkin-manual-input:focus {
  border-color: #78988a;
}


.checkin-manual-input::-webkit-outer-spin-button,
.checkin-manual-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


.checkin-manual-unit {
  flex: 0 0 auto;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: #78988a;
}


/* =========================================================
   CHECK-IN — EDIT / WHEEL MODE CONTROL
   ========================================================= */

.checkin-value-mode-button {
  width: 30px;
  height: 30px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #d8e0dc;
  border-radius: 50%;

  background: #ffffff;
  color: #0b3048;

  cursor: pointer;

  font-size: 14px;
  line-height: 1;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}


.checkin-value-mode-button:hover {
  background: #f2f6f4;
  border-color: #78988a;
}


.checkin-value-mode-button:focus-visible {
  outline: 2px solid #78988a;
  outline-offset: 2px;
}

/* =========================================================
   XCULPTED — MANUAL NUMBER INPUT / PENCIL MODE
   Used by:
   - Daily Check-In Sleep
   - Daily Check-In Water
   - Daily Check-In Steps
   - Weight Picker
   ========================================================= */


/* ---------------------------------------------------------
   QUESTION TITLE + EDIT ICON
   --------------------------------------------------------- */

.checkin-question-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}

.checkin-question-title-row h2 {
  margin: 0;
}


/* ---------------------------------------------------------
   PENCIL / WHEEL TOGGLE BUTTON
   --------------------------------------------------------- */

.checkin-input-mode-button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border: 1px solid rgba(10, 48, 68, 0.14);
  border-radius: 50%;

  background: #ffffff;
  color: #0a3044;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.checkin-input-mode-button:hover {
  background: #f6f8f7;
  border-color: rgba(10, 48, 68, 0.28);

  transform: translateY(-1px);

  box-shadow:
    0 5px 14px rgba(10, 48, 68, 0.08);
}

.checkin-input-mode-button:active {
  transform: translateY(0);
}

.checkin-input-mode-button:focus-visible {
  outline: 2px solid #0a3044;
  outline-offset: 3px;
}

.checkin-input-mode-button svg {
  width: 17px;
  height: 17px;
  display: block;
}


/* =========================================================
   MANUAL INPUT AREA
   ========================================================= */

.checkin-manual-input-wrap {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 12px;

  margin-top: 28px;
  margin-bottom: 22px;
}


/* ---------------------------------------------------------
   NUMBER FIELD CONTAINER
   --------------------------------------------------------- */

.checkin-manual-input-box {
  min-width: 220px;
  max-width: 320px;

  min-height: 88px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 14px 22px;

  border: 1px solid rgba(10, 48, 68, 0.14);
  border-radius: 20px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(10, 48, 68, 0.06);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.checkin-manual-input-box:focus-within {
  border-color: rgba(10, 48, 68, 0.42);

  box-shadow:
    0 12px 34px rgba(10, 48, 68, 0.09);
}


/* ---------------------------------------------------------
   ACTUAL NUMBER INPUT
   --------------------------------------------------------- */

.checkin-manual-input {
  width: 130px;

  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: #0a3044;

  font: inherit;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;

  text-align: right;

  appearance: textfield;
  -moz-appearance: textfield;
}

.checkin-manual-input::placeholder {
  color: rgba(10, 48, 68, 0.3);
}


/* REMOVE DEFAULT NUMBER ARROWS */

.checkin-manual-input::-webkit-inner-spin-button,
.checkin-manual-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ---------------------------------------------------------
   UNIT — HRS / L / STEPS / KG / LB
   --------------------------------------------------------- */

.checkin-manual-input-unit {
  flex: 0 0 auto;

  color: rgba(10, 48, 68, 0.58);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   HELPER TEXT
   --------------------------------------------------------- */

.checkin-manual-input-hint {
  display: block;

  color: rgba(10, 48, 68, 0.54);

  font-size: 12px;
  line-height: 1.5;

  text-align: center;
}


/* =========================================================
   WEIGHT PICKER — MODE TOOLBAR
   ========================================================= */

.weight-picker-value-toolbar {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-top: 18px;
  margin-bottom: 6px;
}

.weight-picker-value-toolbar > span {
  color: rgba(10, 48, 68, 0.62);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   WEIGHT MANUAL INPUT
   ========================================================= */

.weight-manual-input-wrap {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 32px 0 38px;
}


/*
   IMPORTANT:
   Browser [hidden] must always hide this element.
*/

.weight-manual-input-wrap[hidden] {
  display: none !important;
}


/* Slightly larger box for weight */

.weight-manual-input-wrap .checkin-manual-input-box {
  min-width: 230px;
}


/* =========================================================
   HIDDEN PICKER
   ========================================================= */

.weight-wheel[hidden] {
  display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .checkin-question-title-row {
    gap: 9px;
  }

  .checkin-question-title-row h2 {
    max-width: calc(100% - 48px);
  }


  .checkin-input-mode-button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .checkin-input-mode-button svg {
    width: 16px;
    height: 16px;
  }


  .checkin-manual-input-wrap {
    margin-top: 24px;
    margin-bottom: 18px;
  }


  .checkin-manual-input-box {
    width: min(100%, 250px);
    min-width: 0;

    min-height: 82px;

    padding: 12px 18px;

    border-radius: 18px;
  }


  .checkin-manual-input {
    width: 120px;

    font-size: 32px;
  }


  .weight-picker-value-toolbar {
    margin-top: 14px;
  }


  .weight-manual-input-wrap {
    padding: 26px 0 32px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  .checkin-question-title-row h2 {
    font-size: 24px;
  }

  .checkin-manual-input-box {
    width: min(100%, 220px);
  }

  .checkin-manual-input {
    width: 105px;
    font-size: 29px;
  }

}


/* =========================================================
   MACRO WIZARD — QUESTION + PENCIL
   ========================================================= */

.macro-mobile-question-title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.macro-mobile-question-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* =========================================================
   MOBILE MACRO — POLISHED MANUAL NUMBER INPUT
   Age / Weight / Height
   ========================================================= */

.macro-mobile-manual-number {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}


.macro-mobile-manual-input-wrap {
  width: 100%;
  max-width: 210px;
  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 18px;

  background: #ffffff;

  border: 1px solid rgba(12, 48, 70, 0.18);
  border-radius: 16px;

  box-shadow:
    0 10px 24px rgba(12, 48, 70, 0.06);

  box-sizing: border-box;
}


.macro-mobile-manual-input-wrap input {
  width: auto;
  min-width: 0;
  max-width: 120px;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;
  background: transparent;

  color: #0c3046;

  font: inherit;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;

  text-align: right;

  appearance: textfield;
  -moz-appearance: textfield;
}


.macro-mobile-manual-input-wrap input::-webkit-inner-spin-button,
.macro-mobile-manual-input-wrap input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


.macro-mobile-manual-input-wrap input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}


.macro-mobile-manual-input-wrap span {
  flex: 0 0 auto;

  color: #78909d;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.04em;
}


.macro-mobile-manual-help {
  margin-top: 9px;

  color: #8ba0aa;

  font-size: 10px;
  line-height: 1.4;

  text-align: center;
}


/* =========================================================
   HEIGHT — FEET / INCHES MANUAL MODE
   ========================================================= */

.macro-mobile-height-manual-row {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;
}


.macro-mobile-height-manual-row
.macro-mobile-manual-input-wrap {
  width: calc(50% - 5px);
  max-width: 105px;

  padding-left: 10px;
  padding-right: 10px;
}


.macro-mobile-height-manual-row
.macro-mobile-manual-input-wrap input {
  max-width: 55px;
  font-size: 28px;
}

/* =========================================================
   MOBILE MACRO — UNIT TOGGLE ACTIVE STATE
   ========================================================= */

.macro-mobile-unit-toggle {
  display: flex;
  width: 100%;
  padding: 3px;

  background: #f1f3f3;
  border-radius: 999px;

  box-sizing: border-box;
}


.macro-mobile-unit-option {
  flex: 1;

  min-height: 38px;

  border: 0;
  border-radius: 999px;

  background: transparent;

  color: #75858d;

  font: inherit;
  font-size: 11px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}


.macro-mobile-unit-option.is-active {
  background: #0c3046;
  color: #ffffff;

  box-shadow:
    0 3px 8px rgba(12, 48, 70, 0.16);
}


/* =========================================================
   PROGRAM OVERVIEW — TYPOGRAPHY + TIGHTER SPACING
   ========================================================= */


/* PROGRAM NAME */

.program-overview-heading h2 {
  font-size: 35px !important;
  line-height: 1.2 !important;
  margin: 0 0 3px !important;
}


/* PROGRAM HEADLINE UNDER NAME */

.program-overview-heading p {
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}


/* HEADING → STAT CARDS */

.program-overview-heading {
  margin-bottom: 12px !important;
}


/* =========================================================
   DETAILS / STAT CARDS
   ========================================================= */

.program-overview-stats {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}


/* =========================================================
   PROGRAM OVERVIEW SECTION
   ========================================================= */

.program-overview-description {
  margin: 0 !important;
}


/* PROGRAM OVERVIEW EYEBROW */

.program-overview-description > .eyebrow {
  display: block;

  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #A8B9A7 !important;

  margin: 0 0 4px !important;
}


/* YOUR NEXT 12 WEEKS */

.program-overview-description h3 {
  font-size: 25px !important;
  line-height: 1.3 !important;

  margin: 0 0 5px !important;
}


/* =========================================================
   OVERVIEW TEXT
   ========================================================= */

.program-overview-text-wrap {
  position: relative;
  margin: 0 !important;
}


.program-overview-text {
  font-size: 15px !important;
  line-height: 1.45 !important;

  margin: 0 !important;
}


/* COLLAPSED — MAXIMUM 3 LINES */

.program-overview-text:not(.is-expanded) {
  display: -webkit-box !important;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
}


/* EXPANDED */

.program-overview-text.is-expanded {
  display: block !important;
  overflow: visible !important;
}


/* =========================================================
   SEE MORE / SEE LESS
   ========================================================= */

.program-overview-see-more {
  appearance: none;

  border: 0;
  background: transparent;

  padding: 0;
  margin: 3px 0 0 !important;

  font: inherit;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3;

  color: #0b3048;

  cursor: pointer;
}


.program-overview-see-more:not([hidden]) {
  display: inline-block !important;
}


.program-overview-see-more:hover {
  text-decoration: underline;
}


/* =========================================================
   START BUTTON
   ========================================================= */

.program-overview-start {
  margin-top: 12px !important;
}


/* =========================================================
   PROGRAM DASHBOARD — NEW LAYOUT
   ========================================================= */

.program-dashboard-page {
  width: 100%;
  min-height: 100vh;
  padding: 20px 32px 100px;
}


.program-dashboard-main {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(340px, 430px)
    minmax(0, 1fr);

  gap: 28px;
  align-items: start;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.program-dashboard-left {
  min-width: 0;
}


.program-dashboard-back {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 22px;

  border: 1px solid
    rgba(12, 38, 63, 0.14);

  border-radius: 50%;

  background: transparent;
  color: #0c263f;

  font-size: 18px;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   PROGRAM HEADER
   ========================================================= */

.program-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 34px;
}


.program-dashboard-title {
  min-width: 0;
}


.program-dashboard-location {
  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #7b7b75;
}


.program-dashboard-title h1 {
  margin: 0 !important;

  font-size: 30px !important;
  /* <-- CHANGE HEADLINE SIZE HERE */

  line-height: 1.3 !important;

  font-weight: 700;
  color: #0c263f;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.program-dashboard-actions {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}


.program-dashboard-action {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(12, 38, 63, 0.055);

  color: #0c263f;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.program-dashboard-action:hover {
  transform: translateY(-1px);

  background:
    rgba(12, 38, 63, 0.10);
}


.program-dashboard-action svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.program-dashboard-favorite svg {
  fill: transparent;
}


.program-dashboard-favorite.is-favorite {
  color: #ff5b62;
}


.program-dashboard-favorite.is-favorite svg {
  fill: currentColor;
}


/* =========================================================
   WEEK GROUPS
   ========================================================= */

.program-dashboard-week-groups {
  display: flex;
  flex-direction: column;

  gap: 42px;
}


.program-dashboard-week-group {
  min-width: 0;
}


.program-dashboard-week-group-title {
  margin:
    0
    0
    18px !important;

  font-size: 25px !important;
  /* <-- CHANGE HEADLINE SIZE HERE */

  line-height: 1.3 !important;

  font-weight: 700;
  color: #0c263f;
}


.program-dashboard-week-group-list {
  display: flex;
  flex-direction: column;

  gap: 26px;
}


/* =========================================================
   INDIVIDUAL WEEK
   ========================================================= */

.program-dashboard-week {
  min-width: 0;
}


.program-dashboard-week-label {
  margin-bottom: 9px;

  font-size: 12px;
  font-weight: 700;

  color: #171717;
}


.program-dashboard-week-workouts {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* =========================================================
   WORKOUT ROW
   ========================================================= */

.program-dashboard-workout-row {
  width: 100%;
  min-height: 64px;

  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr)
    28px;

  align-items: center;

  gap: 11px;

  padding: 7px 10px 7px 7px;

  border: 1px solid transparent;
  border-radius: 4px;

  background: #f2f3f3;

  color: #101010;
  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.program-dashboard-workout-row:hover {
  background: #e9ebeb;
}


.program-dashboard-workout-row.active {
  border-color:
    rgba(12, 38, 63, 0.22);
}


.program-dashboard-workout-thumb {
  width: 52px;
  height: 50px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 3px;

  background: #e3e6e6;
}


.program-dashboard-workout-thumb img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.program-dashboard-workout-thumb-placeholder {
  font-size: 11px;
  font-weight: 700;

  color: #0c263f;
}


.program-dashboard-workout-row-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.program-dashboard-workout-row-copy small {
  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.03em;

  text-transform: uppercase;

  color: #ff5b62;
}


.program-dashboard-workout-row-copy strong {
  overflow: hidden;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.25;

  white-space: nowrap;
  text-overflow: ellipsis;

  color: #111;
}


.program-dashboard-workout-arrow {
  justify-self: center;

  font-size: 24px;
  font-weight: 300;

  color: #111;
}


/* =========================================================
   RIGHT COLUMN — PROGRAM INTRO VIDEO
   HORIZONTAL / NATURAL PLAYER SIZE
   ========================================================= */

.program-dashboard-right {
  min-width: 0;

  position: sticky;
  top: 24px;

  align-self: start;

  /*
   * The right column can remain 60% of the
   * dashboard, but the video does NOT have
   * to fill the entire column.
   */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  height: auto !important;
  min-height: 0 !important;
}


/* =========================================================
   PLAYER
   ========================================================= */

.program-intro-player {
  /*
   * Player is independent from the full
   * width of the right grid column.
   */
  width: min(100%, 900px);

  height: auto !important;

  flex: 0 0 auto;
}


/* =========================================================
   VIDEO CONTAINER
   ========================================================= */

.program-intro-media {
  position: relative;

  width: 100%;
  height: auto !important;

  /*
   * Horizontal video player.
   *
   * Change ONLY this ratio later if the
   * source video has a different ratio.
   */
aspect-ratio: 1.9 / 1;
  overflow: hidden;

  border-radius: 14px;

  background: #192f48;
}


/* =========================================================
   VIMEO IFRAME
   ========================================================= */

.program-intro-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  border: 0;

  margin: 0;
  padding: 0;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.program-intro-placeholder {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

}


.program-intro-play {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 4px;

  border:
    1px solid
    rgba(255, 255, 255, 0.45);

  border-radius: 50%;

  font-size: 17px;
}


.program-intro-placeholder span {
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;
}


.program-intro-placeholder strong {
  font-size: 22px;
  font-weight: 600;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .program-dashboard-main {
    grid-template-columns:
      minmax(300px, 380px)
      minmax(0, 1fr);

    gap: 20px;
  }


  .program-dashboard-page {
    padding-left: 20px;
    padding-right: 20px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .program-dashboard-page {
    padding:
      16px
      14px
      90px;
  }


  .program-dashboard-main {
    display: flex;
    flex-direction: column;

    gap: 28px;
  }


  .program-dashboard-left,
  .program-dashboard-right {
    width: 100%;
  }


  .program-dashboard-right {
    position: static;
    order: -1;
  }


  .program-dashboard-back {
    margin-bottom: 16px;
  }


  .program-dashboard-header {
    align-items: flex-start;

    margin-bottom: 28px;
  }


  .program-dashboard-title h1 {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }


  .program-dashboard-actions {
    gap: 5px;
  }


  .program-dashboard-action {
    width: 38px;
    height: 38px;
  }


  .program-dashboard-action svg {
    width: 18px;
    height: 18px;
  }


  .program-dashboard-week-group-title {
    font-size: 25px !important;
    line-height: 1.3 !important;
  }


  .program-dashboard-week-groups {
    gap: 36px;
  }


  .program-dashboard-week-group-list {
    gap: 24px;
  }


  .program-intro-media {
    border-radius: 8px;
  }

}


/* =========================================================
   PROGRAM DASHBOARD — NEW LAYOUT
   ========================================================= */

.program-dashboard-main {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  display: grid;

  /*
   * LEFT = 40%
   * RIGHT = 60%
   */
  grid-template-columns:
    minmax(0, 40fr)
    minmax(0, 60fr);

  gap: 28px;

  align-items: start;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.program-dashboard-left {
  min-width: 0;
  width: 100%;
}


.program-dashboard-back {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 18px;

  border: 1px solid
    rgba(12, 38, 63, 0.14);

  border-radius: 50%;

  background: transparent;
  color: #0c263f;

  font-size: 18px;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   PROGRAM HEADER
   ========================================================= */

.program-dashboard-header {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 30px;
}


.program-dashboard-title {
  min-width: 0;
}


/* LOCATION EYEBROW */

.program-dashboard-location {
  display: block;

  margin: 0 0 6px !important;

  font-size: 12px !important;
  /* <-- CHANGE EYEBROW SIZE HERE */

  color: #A8B9A7 !important;
  /* <-- CHANGE LIGHT SAGE COLOR HERE */

  line-height: 1.2 !important;

  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* PROGRAM NAME */

.program-dashboard-title h1 {
  margin: 0 !important;

  font-size: 30px !important;
  /* <-- CHANGE HEADLINE SIZE HERE */

  line-height: 1.3 !important;

  font-weight: 700;
  color: #0c263f;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.program-dashboard-actions {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}


.program-dashboard-action {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(168, 185, 167, 0.16);

  color: #0c263f;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.program-dashboard-action:hover {
  transform: translateY(-1px);

  background:
    rgba(168, 185, 167, 0.28);
}


.program-dashboard-action svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* FAVORITE */

.program-dashboard-favorite svg {
  fill: transparent;
}


/*
 * FAVORITE ACTIVE STATE
 * Sage instead of pink/red.
 */

.program-dashboard-favorite.is-favorite {
  color: #A8B9A7 !important;
}


.program-dashboard-favorite.is-favorite svg {
  fill: currentColor;
}


/* =========================================================
   WEEK GROUPS
   ========================================================= */

.program-dashboard-week-groups {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 42px;
}


.program-dashboard-week-group {
  width: 100%;
  min-width: 0;
}


/* WEEK 1–4 / WEEK 5–8 / ETC. */

.program-dashboard-week-group-title {
  margin:
    0
    0
    18px !important;

  font-size: 25px !important;
  /* <-- CHANGE HEADLINE SIZE HERE */

  line-height: 1.3 !important;

  font-weight: 700;

  color: #0c263f;
}


.program-dashboard-week-group-list {
  display: flex;
  flex-direction: column;

  gap: 26px;
}


/* =========================================================
   INDIVIDUAL WEEK
   ========================================================= */

.program-dashboard-week {
  width: 100%;
  min-width: 0;
}


/* WEEK 1 / WEEK 2 / ETC. */

.program-dashboard-week-label {
  margin: 0 0 9px !important;

  font-size: 12px !important;

  line-height: 1.2 !important;

  font-weight: 700;

  color: #0c263f;
}


.program-dashboard-week-workouts {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* =========================================================
   WORKOUT ROW
   ========================================================= */

.program-dashboard-workout-row {
  width: 100%;
  min-height: 64px;

  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr)
    28px;

  align-items: center;

  gap: 11px;

  padding:
    7px
    10px
    7px
    7px;

  border:
    1px solid
    transparent;

  border-radius: 4px;

  /*
   * REMOVE PINK/CREAM APPEARANCE
   * Use very light sage.
   */
  background:
    rgba(168, 185, 167, 0.12) !important;

  color: #101010;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.program-dashboard-workout-row:hover {
  background:
    rgba(168, 185, 167, 0.22) !important;
}


.program-dashboard-workout-row.active {
  background:
    rgba(168, 185, 167, 0.20) !important;

  border-color:
    #A8B9A7 !important;
}


/* =========================================================
   WORKOUT THUMBNAIL
   ========================================================= */

.program-dashboard-workout-thumb {
  width: 52px;
  height: 50px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 3px;

  background:
    rgba(168, 185, 167, 0.18) !important;
}


.program-dashboard-workout-thumb img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.program-dashboard-workout-thumb-placeholder {
  font-size: 11px;
  font-weight: 700;

  color: #0c263f;
}


/* =========================================================
   WORKOUT COPY
   ========================================================= */

.program-dashboard-workout-row-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


/* DAY 01 / DAY 02 / DAY 03 */

.program-dashboard-workout-row-copy small {
  font-size: 12px !important;
  /* <-- CHANGE EYEBROW SIZE HERE */

  color: #A8B9A7 !important;
  /* <-- CHANGE LIGHT SAGE COLOR HERE */

  line-height: 1.2 !important;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


/* WORKOUT NAME */

.program-dashboard-workout-row-copy strong {
  overflow: hidden;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.3;

  white-space: nowrap;
  text-overflow: ellipsis;

  color: #111;
}


.program-dashboard-workout-arrow {
  justify-self: center;

  font-size: 24px;
  font-weight: 300;

  color: #0c263f;
}


/* =========================================================
   RIGHT COLUMN — PROGRAM INTRO VIDEO
   FULL HEIGHT + STICKY
   ========================================================= */

.program-dashboard-right {
  width: 100%;
  min-width: 0;

  position: sticky;
  top: 20px;

  height: calc(100vh - 120px);
  min-height: 600px;

  align-self: start;
}


.program-intro-player {
  width: 100%;
  height: 100%;
}


.program-intro-media {
  position: relative;

  width: 100%;
  height: 100%;

  aspect-ratio: auto !important;

  overflow: hidden;

  border-radius: 14px;

  background: #192f48;
}


.program-intro-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}


/* Make placeholder fill the same full area */

.program-intro-placeholder {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

  color: #fff;
}


/* =========================================================
   INTRO PLACEHOLDER
   ========================================================= */

.program-intro-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

  color: #fff;
}


.program-intro-play {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 4px;

  border:
    1px solid
    rgba(255, 255, 255, 0.45);

  border-radius: 50%;

  font-size: 17px;
}


.program-intro-placeholder span {
  font-size: 12px !important;
  line-height: 1.2 !important;

  color: #A8B9A7 !important;

  font-weight: 700;

  letter-spacing: 0.08em;
}


.program-intro-placeholder strong {
  font-size: 22px;
  font-weight: 600;
}


/* =========================================================
   DESKTOP — PROGRAM DASHBOARD
   40% LEFT / 60% RIGHT
   ========================================================= */

@media (min-width: 1051px) {

  .program-dashboard-page {
    width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  .program-dashboard-main {
    display: grid !important;

    grid-template-columns:
      minmax(0, 40fr)
      minmax(0, 60fr) !important;

    gap: 28px;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    align-items: start;
  }


  /* IMPORTANT:
     Mobile uses display: contents.
     Desktop must restore the left column
     as a real grid child.
  */
  .program-dashboard-left {
    display: block !important;

    width: 100%;
    min-width: 0;

    grid-column: 1;
  }


  .program-dashboard-right {
    display: block !important;

    width: 100%;
    min-width: 0;

    grid-column: 2;

    position: sticky !important;
    top: 24px;

    align-self: start;
  }


  .program-intro-player {
    display: block !important;

    width: 100%;
    height: auto;
  }


  .program-intro-media {
    display: block !important;

    position: relative;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9 !important;

    overflow: hidden;

    border-radius: 14px;

    background: #192f48;
  }


  .program-intro-video {
    display: block !important;

    position: absolute;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    border: 0;
  }

}

/* =========================================================
   TABLET
   KEEP 40% LEFT / 60% RIGHT
   ========================================================= */

@media (max-width: 1050px) {

  .program-dashboard-page {
    padding:
      20px
      20px
      100px !important;
  }


  .program-dashboard-main {
    width: 100% !important;

    grid-template-columns:
      minmax(0, 40fr)
      minmax(0, 60fr);

    gap: 20px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .program-dashboard-page {
    padding:
      16px
      14px
      90px !important;
  }


  .program-dashboard-main {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 28px;
  }


/* =========================================================
   MOBILE PROGRAM DASHBOARD ORDER

   1. Back button
   2. Video
   3. Program header
   4. Weeks / workouts
   ========================================================= */

.program-dashboard-left {
  display: contents;
}


.program-dashboard-back {
  order: 1;

  margin: 0 0 14px;
}


.program-dashboard-right {
  order: 2;

  position: static;

  width: 100%;
  height: auto;
  min-height: 0;

  margin: 0 0 20px;
}


.program-dashboard-header {
  order: 3;

  width: 100%;
}


.program-dashboard-week-groups {
  order: 4;

  width: 100%;
}


.program-intro-player {
  width: 100%;
  height: auto;
}


.program-intro-media {
  position: relative;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9 !important;

  border-radius: 8px;
}


.program-intro-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


  .program-dashboard-back {
    margin-bottom: 16px;
  }


  .program-dashboard-header {
    align-items: flex-start;

    margin-bottom: 28px;
  }


  .program-dashboard-title h1 {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }


  .program-dashboard-location {
    font-size: 12px !important;
    line-height: 1.2 !important;

    color: #A8B9A7 !important;
  }


  .program-dashboard-actions {
    gap: 5px;
  }


  .program-dashboard-action {
    width: 38px;
    height: 38px;
  }


  .program-dashboard-action svg {
    width: 18px;
    height: 18px;
  }


  .program-dashboard-week-group-title {
    font-size: 25px !important;
    line-height: 1.3 !important;
  }


  .program-dashboard-week-groups {
    gap: 36px;
  }


  .program-dashboard-week-group-list {
    gap: 24px;
  }


  .program-dashboard-workout-row-copy small {
    font-size: 12px !important;
    line-height: 1.2 !important;

    color: #A8B9A7 !important;
  }


  .program-intro-media {
    border-radius: 8px;
  }

}

/* =========================================================
   PROGRAM INFORMATION MODAL
   ========================================================= */

body.program-info-open {
  overflow: hidden;
}


.program-info-modal {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 28px;
}


.program-info-modal[hidden] {
  display: none !important;
}


.program-info-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(8, 25, 41, 0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


.program-info-dialog {
  position: relative;
  z-index: 1;

  width: min(680px, 100%);
  max-height: calc(100vh - 56px);

  overflow: hidden;

  border-radius: 18px;

  background: #fffdf5;

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.22);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.program-info-close {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 5;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(12, 38, 63, 0.07);

  color: #0c263f;

  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}


.program-info-close:hover {
  background: rgba(12, 38, 63, 0.12);
}


/* =========================================================
   INTERNAL SCROLLER
   ========================================================= */

.program-info-scroll {
  width: 100%;
  max-height: calc(100vh - 56px);

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 38px 42px 42px;

  scrollbar-width: thin;
  scrollbar-color:
    #A8B9A7
    rgba(168, 185, 167, 0.16);
}


.program-info-scroll::-webkit-scrollbar {
  width: 7px;
}


.program-info-scroll::-webkit-scrollbar-track {
  background:
    rgba(168, 185, 167, 0.16);
}


.program-info-scroll::-webkit-scrollbar-thumb {
  background: #A8B9A7;
  border-radius: 20px;
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.program-info-header {
  width: 100%;

  padding: 0 48px;

  margin-bottom: 30px;

  text-align: center;
}


/* PROGRAM INTRODUCTION */

.program-info-eyebrow {
  display: block;

  margin: 0 0 14px !important;

  font-size: 20px !important;
  /* <-- CHANGE HEADLINE SIZE HERE */

  line-height: 1.3 !important;

  font-weight: 700;

  color: #0c263f !important;

  text-align: center;

  text-transform: none;
  letter-spacing: 0;
}


/* =========================================================
   BOOTY BLAST + BUILD YOUR GLUTES FROM HOME
   ========================================================= */

.program-info-program {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 5px;

  width: fit-content;
  max-width: 100%;

  margin: 0 auto;

  padding: 8px 14px;

  border-radius: 100px;

  background: var(--navy);

  text-align: center;
}


.program-info-program strong,
.program-info-program span {
  margin: 0;

  font-size: 15px !important;
  /* <-- CHANGE CHECK-IN DESCRIPTION SIZE HERE */

  line-height: 1.45 !important;
}


.program-info-program strong {
  font-weight: 700;

  color: #fff !important;
}


.program-info-program span {
  font-weight: 400;

  color: #A8B9A7 !important;
}


/* =========================================================
   INFORMATION CONTENT
   ========================================================= */

.program-info-content {
  color: #0c263f;
}


.program-info-section {
  margin-bottom: 24px;
}


/* =========================================================
   SECTION HEADLINES
   Transform Your Body...
   Your Transformation in 12 Weeks
   Proven Techniques...
   etc.
   ========================================================= */

.program-info-section h3 {
  margin:
    0
    0
    9px !important;

  font-size: 15px !important;
  /* <-- CHANGE CHECK-IN DESCRIPTION SIZE HERE */

  line-height: 1.45 !important;

  font-weight: 700;

  color: #0c263f !important;
}


/* =========================================================
   EXPLANATION / BODY TEXT
   ========================================================= */

.program-info-section p,
.program-info-closing {
  margin: 0;

  font-size: 13px !important;
  /* <-- CHANGE EYEBROW SIZE HERE */

  color: #0c263f !important;


  line-height: 1.5 !important;

  font-weight: 400;
}


/* FINAL PARAGRAPH */

.program-info-closing {
  margin-top: 4px;

  padding-top: 22px;

  border-top:
    1px solid
    rgba(12, 38, 63, 0.10);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.program-info-empty {
  padding: 60px 30px;

  text-align: center;

  font-size: 12px !important;
  line-height: 1.2 !important;

  color: #A8B9A7 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .program-info-modal {
    align-items: flex-end;

    padding: 12px;
  }


  .program-info-dialog {
    width: 100%;

    max-height: calc(100dvh - 24px);

    border-radius: 18px 18px 10px 10px;
  }


  .program-info-scroll {
    max-height: calc(100dvh - 24px);

    padding:
      32px
      20px
      34px;
  }


  .program-info-close {
    top: 14px;
    right: 14px;

    width: 36px;
    height: 36px;

    font-size: 23px;
  }


  /* HEADER */

  .program-info-header {
    padding: 0 38px;

    margin-bottom: 26px;

    text-align: center;
  }


  .program-info-eyebrow {
    font-size: 20px !important;
    line-height: 1.3 !important;

    text-align: center;
  }


  /* PROGRAM NAME + TAGLINE */

  .program-info-program {
    justify-content: center;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }


  .program-info-program strong,
  .program-info-program span {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }


  /* SECTIONS */

  .program-info-section {
    margin-bottom: 22px;
  }


  .program-info-section h3 {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }


  .program-info-section p,
  .program-info-closing {
    font-size: 13px !important;
    line-height: 1.4 !important;

    color: #000 !important;
  }

}


/* =========================================================
   PROGRAM WORKOUT DETAIL
   EXTENDS EXISTING PROGRAM DASHBOARD CSS
   ========================================================= */

.program-workout-detail {
  width: 100%;
  padding-bottom: 20px;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.program-workout-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 28px;

  font-size: 25px;
  line-height: 1.3;
}

.program-workout-breadcrumb-link {
  padding: 0;

  border: 0;
  background: transparent;

  color: #0c263f;

  font-size: 25px;
  font-weight: 700;

  cursor: pointer;
}

.program-workout-breadcrumb-arrow {
  color: #0c263f;
}

.program-workout-breadcrumbs strong {
  color: #0c263f;

  font-size: 25px;
  font-weight: 700;
}


/* =========================================================
   DETAIL SECTIONS
   ========================================================= */

.program-workout-detail-section {
  width: 100%;

  margin: 0 0 30px;
}

.program-workout-detail-section h2 {
  margin: 0 0 12px !important;

  color: #0c263f !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 700;
}

.program-workout-description {
  margin: 0;

  color: #0c263f;

  font-size: 15px;
  line-height: 1.5;
}


/* =========================================================
   EQUIPMENT
   ========================================================= */

.program-workout-equipment {
  width: 100%;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.program-workout-equipment-item {
  min-width: 0;
}

.program-workout-equipment-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  margin-bottom: 7px;

  border-radius: 4px;

}

.program-workout-equipment-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.program-workout-equipment-item > span {
  display: block;

  overflow: hidden;

  color: #0c263f;

  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =========================================================
   WARM UP + WORKOUT LIST
   ========================================================= */

.program-workout-exercise-section {
  margin-bottom: 32px;
}

.program-workout-exercise-section h2 {
  margin-bottom: 10px !important;
}

.program-workout-exercise-list {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   EXERCISE ROW
   ========================================================= */

.program-workout-exercise {
  width: 100%;
  min-height: 64px;

  display: grid;

  grid-template-columns:
    58px
    minmax(0, 1fr)
    24px;

  align-items: center;

  gap: 10px;

  padding:
    6px
    9px
    6px
    6px;

  border: 0;
  border-radius: 5px;

  background:
    rgba(168, 185, 167, 0.12);

  color: #0c263f;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.program-workout-exercise:hover {
  background:
    rgba(168, 185, 167, 0.22);
}


/* =========================================================
   EXERCISE IMAGE
   ========================================================= */

.program-workout-exercise-thumb {
  width: 58px;
  height: 52px;

  overflow: hidden;

  display: block;

  border-radius: 4px;

  background:
    rgba(168, 185, 167, 0.18);
}

.program-workout-exercise-thumb img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* =========================================================
   EXERCISE CONTENT
   ========================================================= */

.program-workout-exercise-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 6px;
}

.program-workout-exercise-content strong {
  width: 100%;

  overflow: hidden;

  color: #111;

  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =========================================================
   SET / REP BADGES
   ========================================================= */

.program-workout-exercise-meta {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 5px;
}

.program-workout-exercise-meta > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 20px;

  padding: 3px 8px;

  border-radius: 100px;

  background:
    rgba(168, 185, 167, 0.18);

  color: #A8B9A7;

  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}


/* =========================================================
   EXERCISE ARROW
   ========================================================= */

.program-workout-exercise-arrow {
  justify-self: center;

  color: #0c263f;

  font-size: 22px;
  line-height: 1;
  font-weight: 300;
}


/* =========================================================
   START WORKOUT
   ========================================================= */

.program-workout-start-wrap {
  width: 100%;

  margin-top: 8px;
}

.program-workout-start {
  width: 100%;
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 20px;

  border: 0;
  border-radius: 7px;

  background: #0c263f;
  color: #fff;

  font-size: 12px;
  line-height: 1;
  font-weight: 700;

  cursor: pointer;
}

.program-workout-start:hover {
  opacity: 0.92;
}


/* =========================================================
   MOBILE WORKOUT DETAIL
   ========================================================= */

@media (max-width: 760px) {

  /*
   * Because your existing mobile dashboard uses
   * display: contents on .program-dashboard-left,
   * explicitly position workout detail after header.
   */

.program-workout-detail {
  order: 4;

  width: 100%;

  padding-bottom: 140px;
}


  .program-workout-breadcrumbs {
    margin-bottom: 24px;
  }


  .program-workout-detail-section {
    margin-bottom: 28px;
  }


  /*
   * Keep all four equipment items in ONE row
   * like the reference.
   */

  .program-workout-equipment {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 7px;
  }


  .program-workout-equipment-item > span {
    font-size: 8px;

    text-align: center;
  }


  .program-workout-exercise {
    min-height: 62px;

    grid-template-columns:
      54px
      minmax(0, 1fr)
      20px;

    gap: 9px;

    padding:
      5px
      8px
      5px
      5px;
  }


  .program-workout-exercise-thumb {
    width: 54px;
    height: 52px;
  }


  .program-workout-exercise-content strong {
    font-size: 13px;
  }


  .program-workout-exercise-meta > span {
    min-height: 18px;

    padding: 3px 7px;

    font-size: 8px;
  }



/* =========================================================
   MOBILE — FLOATING START WORKOUT
   DAY DETAIL ONLY
   ========================================================= */

/* Allow the warm-up title to retain its position */

.program-dashboard-workout-open
.program-workout-warmup-header {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

/* Float the existing Start Workout button */

.program-dashboard-workout-open
.program-workout-warmup-header
.program-workout-start {
  position: fixed !important;

  left: 16px !important;
  right: 16px !important;

  bottom: calc(
    64px + env(safe-area-inset-bottom)
  ) !important;

  top: auto !important;

  z-index: 9999 !important;

  width: calc(100% - 32px) !important;
  min-width: 0 !important;
  min-height: 52px !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  margin: 0 !important;
  padding: 14px 20px !important;

  border: 0;
  border-radius: 100px;

  background: #0c263f !important;
  color: #ffffff !important;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
  pointer-events: auto !important;

  transform: none !important;

  box-shadow:
    0 8px 24px rgba(12, 38, 63, 0.18);
}

/* Support the older button wrapper if present */

.program-dashboard-workout-open
.program-workout-start-wrap {
  position: fixed !important;

  left: 16px !important;
  right: 16px !important;

  bottom: calc(
    64px + env(safe-area-inset-bottom)
  ) !important;

  z-index: 9999 !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  pointer-events: auto;
}

.program-dashboard-workout-open
.program-workout-start-wrap
.program-workout-start {
  position: static !important;
  width: 100% !important;
  min-height: 52px;
  border-radius: 100px;
}

/* Prevent the button from covering the final exercise */

.program-dashboard-workout-open
.program-workout-detail {
  padding-bottom: 160px !important;
}

}

/* =========================================================
   DESKTOP WORKOUT EXERCISE PLAYER
   ========================================================= */

.program-exercise-player {
  width: 100%;
  height: auto;
}

.program-exercise-player-media {
  position: relative;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 14px;

  background: #192f48;
}

.program-exercise-player-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  border: 0;
}


/* EMPTY PLAYER */

.program-exercise-player-empty {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 40px;

  text-align: center;

  color: #ffffff;
}

.program-exercise-player-icon {
  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.45);

  border-radius: 50%;

  font-size: 17px;
}

.program-exercise-player-empty span {
  color: #A8B9A7;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.program-exercise-player-empty strong {
  max-width: 320px;

  color: #ffffff;

  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}


/* =========================================================
   ACTIVE EXERCISE
   ========================================================= */

.program-workout-exercise.active {
  background:
    rgba(168, 185, 167, 0.24);

  box-shadow:
    inset 3px 0 0
    #A8B9A7;
}


/* =========================================================
   MOBILE — REMOVE RIGHT PLAYER FROM WORKOUT DETAIL
   ========================================================= */

@media (max-width: 760px) {

  .program-dashboard-workout-open
  .program-dashboard-right {
    display: none !important;
  }

}

/* =========================================================
   FINAL FIX — KEEP DASHBOARD VIDEO CENTERED WHILE SCROLLING
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 1051px) {

  .program-dashboard-right {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    grid-column: 2 !important;

    /*
     * Sticky reference point = vertical center
     * of the browser viewport.
     */
    position: sticky !important;
    top: 50vh !important;

    /*
     * IMPORTANT:
     * Remove the old full viewport height.
     */
    height: 0 !important;
    min-height: 0 !important;

    align-self: start !important;

    overflow: visible !important;
  }


  .program-intro-player {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    /*
     * Move the VIDEO up by half of its own
     * height so its CENTER sits at 50vh.
     */
    transform: translateY(-50%) !important;
  }


  .program-intro-media {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    /*
     * Preserve your horizontal player.
     */
    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    border-radius: 14px;

    background: #192f48;
  }


  .program-intro-video {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    border: 0 !important;
  }

}

/* =========================================================
   DAY DETAIL — INITIAL WORKOUT COVER
   ========================================================= */

.program-exercise-player-cover {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: inherit;

  background: #192f48;
}


.program-exercise-player-cover img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* =========================================================
   DAY DETAIL — WARM UP HEADER
   ========================================================= */

.program-workout-warmup-header {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 14px;
}


.program-workout-warmup-header h2 {
  margin: 0 !important;
}


/* =========================================================
   DESKTOP — LARGE PILL START WORKOUT BUTTON
   ========================================================= */

@media (min-width: 761px) {

  .program-workout-warmup-header
  .program-workout-start {
    position: static !important;

    width: auto !important;
    min-width: 190px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 15px 32px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 100px !important;

    background: #0c263f;
    color: #ffffff;

    font-size: 15px !important;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
      0 6px 18px rgba(12, 38, 63, 0.14);

    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      background 0.2s ease;
  }

  .program-workout-warmup-header
  .program-workout-start:hover {
    transform: translateY(-2px);

    background: #173b5c;

    box-shadow:
      0 10px 24px rgba(12, 38, 63, 0.22);

    opacity: 1;
  }

  .program-workout-warmup-header
  .program-workout-start:active {
    transform: translateY(0);
  }

}


/* =========================================================
   DAY DETAIL — CENTER PLAYER WHILE SCROLLING
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 761px) {

  .program-dashboard-workout-open
  .program-dashboard-right.program-exercise-player-column {
    position: sticky !important;

    top: 50vh !important;

    height: 0 !important;
    min-height: 0 !important;

    align-self: start !important;

    overflow: visible !important;

    transform: none !important;
  }


  .program-dashboard-workout-open
  .program-exercise-player {
    width: 100% !important;
    height: auto !important;

    transform: translateY(-50%) !important;
  }


  .program-dashboard-workout-open
  .program-exercise-player-media {
    position: relative;

    width: 100%;
    height: auto !important;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 14px;
  }

}