/* members.css
   The one stylesheet for the members area. Every token and rule here comes
   from docs/landing-page/DESIGN.md. Each page links this file and theme.js
   so a fix is one edit, not one per page. */

:root{
  /* palette, DESIGN.md section 2 */
  --cream:#F4EFE4; --cream-2:#FBF8F1; --white:#FFFDF8; --sand:#E9E2D1; --sand-2:#DED5C0;
  --ink:#16150F; --ink-2:#3B382F; --ink-3:#6E6A5D; --ink-4:#9A9587;
  --rule-cream:#D9D1BF; --rule-cream-2:#C7BEA8;
  --char:#1A1A1A; --char-2:#242424; --char-3:#2C2C2C; --char-rule:#333333;
  --char-text:#F0EDE4; --char-muted:#9C988D; --char-faint:#6E6A63;
  --lime:#C8F135; --lime-soft:#E4F79A; --lime-tint:#F0F9C9; --lime-deep:#7E9E12;
  --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r-room:44px; --r-card:22px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* The dark room is the default, DESIGN.md section 11. */
  --bg:var(--char); --bg-2:var(--char-2); --bg-3:var(--char-3);
  --rule:var(--char-rule);
  --text:var(--char-text); --text-2:var(--char-text); --muted:var(--char-muted); --faint:var(--char-faint);
  --eyebrow:var(--lime); --accent-i:var(--lime);
  --bar-bg:rgba(36,36,36,.72); --bar-border:var(--char-rule);
  --ghost-border:var(--char-rule); --ghost-text:var(--char-text);
  --lime-border:var(--lime); --lime-floor:var(--lime-deep);
  --danger:#E8402E;
  --input-bg:var(--char-3); --input-border:#3E3E3E;
  --accent:var(--lime); --surface:var(--char-3);
  --shadow:0 14px 28px -18px rgba(0,0,0,.7);
  --overlay:rgba(0,0,0,.72);  /* the dimmed page behind a modal */
  --room:var(--char);  /* the builders' room: charcoal in the dark theme, the lighter cream in light */
  /* Data colours: the four macro and metric hues the tools share. The plain
     token is for text and lines and darkens on cream; the -fill token keeps
     the bright value in both themes for bars and swatches. */
  --lime-text:var(--lime);
  --data-lime:var(--lime);--data-blue:#4D96FF;--data-orange:#FF9F43;--data-yellow:#FFD93D;--data-green:#6BCB77;--data-purple:#C77DFF;--data-red:#FF6B6B;
  --data-lime-fill:var(--lime);--data-blue-fill:#4D96FF;--data-orange-fill:#FF9F43;--data-yellow-fill:#FFD93D;--data-green-fill:#6BCB77;--data-purple-fill:#C77DFF;--data-red-fill:#FF6B6B;
  --video-shadow:0 30px 60px -34px rgba(0,0,0,.85);
  color-scheme:dark;
}
/* Light is the cream page from the landing page, DESIGN.md section 3. */
:root[data-theme="light"]{
  --bg:var(--cream); --bg-2:var(--cream-2); --bg-3:var(--sand);
  --rule:var(--rule-cream);
  --text:var(--ink); --text-2:var(--ink-2); --muted:var(--ink-3); --faint:var(--ink-4);
  --eyebrow:var(--ink-3); --accent-i:var(--ink);
  --bar-bg:rgba(244,239,228,.62); --bar-border:rgba(22,21,15,.14);
  --ghost-border:var(--ink); --ghost-text:var(--ink);
  --lime-border:var(--ink); --lime-floor:var(--ink);
  --danger:#B3261E;
  --input-bg:var(--white); --input-border:var(--rule-cream-2);
  --accent:var(--lime-deep); --surface:var(--sand);
  --shadow:0 14px 28px -18px rgba(22,21,15,.35);
  --overlay:rgba(22,21,15,.45);
  --room:var(--cream-2);
  --lime-text:#5F7A05;  /* lime as small text on cream: 4.6:1, where --lime-deep is 2.9:1 */
  --data-lime:var(--lime-text);--data-blue:#1D5FB8;--data-orange:#B85E00;--data-yellow:#8A6D00;--data-green:#2E7D3A;--data-purple:#7A3FBF;--data-red:#B3261E;
  --video-shadow:0 30px 60px -30px rgba(22,21,15,.45);
  color-scheme:light;
}

/* --- Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text-2);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  min-height:100svh;padding-bottom:64px;
  -webkit-font-smoothing:antialiased;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.wrap{max-width:920px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
a{color:inherit}

/* --- Top bar, the landing page pill in a room --------------------------- */
.topbar{position:sticky;top:0;z-index:10;padding:12px 0 14px;
  background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 64%,transparent 100%)}
.topbar-in{
  max-width:920px;margin:0 auto;height:60px;
  width:calc(100% - 2*clamp(18px,4vw,32px));
  background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--bar-border);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 8px 0 20px;
}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:-.01em;color:var(--text);text-decoration:none;white-space:nowrap}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.topbar-right{display:flex;align-items:center;gap:8px}
.theme-pill{display:inline-flex;background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-pill);padding:3px;gap:2px}
.theme-pill button{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:7px 12px;border-radius:var(--r-pill);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.theme-pill button:hover{color:var(--text)}
.theme-pill button[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.theme-pill button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
@media (max-width:560px){
  .topbar-in{height:52px;padding:0 6px 0 16px;gap:6px}
  /* The wordmark runs long on a phone, so it gives ground first: it sets a
     little smaller, and on the narrowest handsets it ellipses rather than
     shoving the nav button out of the pill. */
  .brand{font-size:.86rem;gap:7px;min-width:0}
  .brand .name{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .topbar-right{gap:6px;flex:none}
  .topbar-right .btn{white-space:nowrap}
  /* On a phone the pill becomes one switch that names the mode you get. */
  .theme-pill{background:transparent;border:0;padding:0}
  .theme-pill button{padding:8px 10px;font-size:.66rem;border:1px solid var(--rule);color:var(--text)}
  .theme-pill button[aria-pressed="true"]{display:none}
  .theme-pill button[aria-pressed="false"]{background:transparent}
}

/* --- Type, DESIGN.md section 4 ---------------------------------------- */
.eyebrow{
  display:block;font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:12px;
}
h1{
  font-family:var(--serif);font-weight:400;color:var(--text);
  font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.02;letter-spacing:-.022em;text-wrap:balance;
}
h1 .i,h3 .i{font-style:italic}
h3{font-family:var(--serif);font-weight:400;color:var(--text);font-size:1.55rem;line-height:1.2;letter-spacing:-.012em}
.lede{font-size:1.2rem;line-height:1.55;color:var(--muted);max-width:64ch;margin-top:14px}
.head{padding:clamp(26px,5vw,46px) 0 clamp(22px,4vw,30px)}

/* --- The lime stroke, copied from the landing page's about section ---- */
.ul-lime{
  white-space:nowrap;padding-bottom:.05em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 60 2, 140 3, 297 8' fill='none' stroke='%23C8F135' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 100%/100% .13em;
}
.ul-lime.ul-wrap{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-reveal] .ul-lime{background-size:0% .13em;transition:background-size .9s var(--ease) .45s}
[data-reveal].is-in .ul-lime,.no-js .ul-lime{background-size:100% .13em}
@media (prefers-reduced-motion:reduce){.ul-lime{background-size:100% .13em !important;transition:none}}

/* --- Buttons, DESIGN.md section 6 ------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:54px;padding:0 1.6rem;border-radius:var(--r-pill);
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--ghost-border);background:transparent;color:var(--ghost-text);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);
}
.btn-sm{min-height:40px;padding:0 1.15rem;font-size:.86rem}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
:root[data-theme="light"] .btn-ghost:hover{background:var(--ink);color:var(--cream-2);border-color:var(--ink)}
/* The top bar keeps the site pill on every page. The meal planner and workout builder carry their own .btn rules
   for the buttons inside the tool, and those reach the bar too, so the bar restates what the pill is. */
.topbar-right .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:40px;padding:0 1.15rem;border-radius:var(--r-pill);
  font-family:var(--sans);font-weight:600;font-size:.86rem;line-height:1;letter-spacing:-.005em;text-transform:none;
  border:1px solid var(--ghost-border);background:transparent;color:var(--ghost-text);opacity:1;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);
}
.topbar-right .btn-ghost:hover{border-color:var(--lime);color:var(--lime);background:transparent;opacity:1}
:root[data-theme="light"] .topbar-right .btn-ghost:hover{background:var(--ink);color:var(--cream-2);border-color:var(--ink)}
.btn-lime,.btn-primary{
  background:var(--lime);color:var(--ink);border-color:var(--lime-border);
  box-shadow:0 1px 0 var(--lime-floor);
}
.btn-lime:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--lime-floor);color:var(--ink)}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* --- Video ------------------------------------------------------------ */
.video-wrap{
  position:relative;width:100%;background:#000;
  border:1px solid var(--rule);border-radius:26px;overflow:hidden;
  box-shadow:var(--video-shadow);
}
.video-wrap video{width:100%;display:block;background:#000}
.video-loader{
  padding:110px 20px;text-align:center;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--char-faint);
}
.quality-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.quality-label{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.quality-btn{
  appearance:none;background:transparent;border:1px solid var(--rule);cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--muted);
  padding:7px 15px;border-radius:var(--r-pill);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.quality-btn:hover{border-color:var(--lime);color:var(--lime)}
:root[data-theme="light"] .quality-btn:hover{border-color:var(--ink);color:var(--ink)}
.quality-btn.active{background:var(--lime);border-color:var(--lime-border);color:var(--ink)}
.quality-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.quality-hint{font-size:.86rem;color:var(--faint);margin-left:2px}

/* --- Cards ------------------------------------------------------------ */
.card{
  background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(22px,4vw,28px);
}
.companion{margin-top:clamp(26px,5vw,38px)}
.companion-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* --- Unit list on the course index ------------------------------------ */
.unit-list{display:flex;flex-direction:column;gap:14px;margin-top:clamp(26px,5vw,36px)}
.unit{
  display:block;text-decoration:none;color:inherit;position:relative;
  background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(22px,4vw,28px);padding-right:64px;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.unit:hover{border-color:var(--lime);transform:translateY(-2px);box-shadow:var(--shadow)}
:root[data-theme="light"] .unit:hover{border-color:var(--ink)}
.unit:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.unit .eyebrow{margin-bottom:9px}
.unit h3{margin-bottom:7px}
.unit p{font-size:.96rem;line-height:1.55;color:var(--muted);max-width:60ch}
.unit .arrow{position:absolute;right:26px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:1.4rem;transition:color .22s var(--ease)}
.unit:hover .arrow{color:var(--lime)}
:root[data-theme="light"] .unit:hover .arrow{color:var(--ink)}

/* --- Previous / next -------------------------------------------------- */
.nav-strip{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,5vw,42px)}
.nav-strip .btn{min-width:150px}

/* --- The closing room on unit 6 --------------------------------------- */
.closing-note{
  background:linear-gradient(180deg,rgba(200,241,53,.045) 0%,transparent 62%),var(--bg);
  border:1px solid var(--rule);border-radius:var(--r-room);
  padding:clamp(30px,6vw,52px);margin-top:clamp(30px,5vw,42px);
}
.closing-heading{
  font-family:var(--serif);font-weight:400;color:var(--text);
  font-size:clamp(2.1rem,5.4vw,3.2rem);line-height:1.02;letter-spacing:-.022em;margin-bottom:22px;
}
.closing-note p{font-size:1.02rem;line-height:1.7;color:var(--text-2);margin-bottom:16px;max-width:62ch}
.closing-note p.closing-sig{font-family:var(--serif);font-size:1.3rem;color:var(--muted);margin-top:22px;margin-bottom:0}
.whatsapp-cta{
  background:var(--bg-2);border:1px solid rgba(200,241,53,.3);border-radius:var(--r-card);
  padding:clamp(22px,4vw,30px);margin-top:clamp(20px,4vw,28px);
}
:root[data-theme="light"] .whatsapp-cta{border-color:var(--lime-deep)}
.whatsapp-cta h4{font-family:var(--serif);font-weight:400;color:var(--text);font-size:1.55rem;line-height:1.2;letter-spacing:-.012em;margin-bottom:9px;max-width:26ch}
.whatsapp-cta p{font-size:.96rem;line-height:1.6;color:var(--muted);margin-bottom:20px;max-width:58ch}

/* --- Small print ------------------------------------------------------ */
.footer{text-align:center;padding:clamp(38px,6vw,58px) 20px 10px;color:var(--faint);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.auth-loader{padding:120px 20px;text-align:center;color:var(--faint);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* --- Motion, DESIGN.md section 8: everything reveals, nothing bounces --- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in,.no-js [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important}
}

/* --- Portal home: sign in, link sent, dashboard ----------------------- */
.hidden{display:none !important}
.portal-narrow{max-width:540px;margin:0 auto}
.google-btn-wrap{display:flex;justify-content:center;min-height:44px}
.divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--faint);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.field{margin-bottom:14px}
.field-label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:10px}
.field-input{
  width:100%;min-height:54px;padding:0 20px;border-radius:var(--r-pill);
  border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);
  font-family:var(--sans);font-size:1rem;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field-input::placeholder{color:var(--faint)}
.field-input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,241,53,.28)}
.btn-block{width:100%}
.banner{border-radius:16px;padding:12px 16px;font-size:.92rem;line-height:1.5;margin-bottom:16px}
.banner-error{background:rgba(232,64,46,.08);border:1px solid rgba(232,64,46,.35);color:var(--danger)}
.banner-info{background:var(--bg-3);border:1px solid var(--rule);color:var(--text-2)}
.banner-success{background:var(--lime-tint);border:1px solid var(--lime-deep);color:var(--ink)}
.btn-link{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:inherit;font-weight:600;color:var(--text);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule);
}
.btn-link:hover{text-decoration-color:var(--lime)}
.card-text{color:var(--muted);font-size:.98rem;line-height:1.6}
.card-text strong{color:var(--text);font-weight:600}
.card-text + .card-text{margin-top:14px;font-size:.92rem}
.small-print{text-align:center;color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:22px}
.small-print a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.small-print a:hover{text-decoration-color:var(--lime)}
.loading{padding:120px 20px;text-align:center;color:var(--faint);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(22,21,15,.25);border-top-color:var(--ink);animation:spin .8s linear infinite;vertical-align:-3px;margin-right:8px}
.spinner-light{width:22px;height:22px;border-color:var(--rule);border-top-color:var(--lime);margin:0 auto 16px;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dash-head .head{padding-bottom:0}
.dash-head .btn{margin-bottom:6px}
.section-eyebrow{margin-top:clamp(30px,5vw,44px)}
.badge{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--lime);color:var(--ink);border-radius:var(--r-pill);padding:5px 11px;margin-bottom:12px}
.unit-primary{border-color:rgba(200,241,53,.55)}
:root[data-theme="light"] .unit-primary{border-color:var(--lime-deep)}
.note{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-card);padding:18px 22px;color:var(--muted);font-size:.96rem;line-height:1.55;margin-bottom:14px}
.note strong{color:var(--text);font-weight:600}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.tool-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .dash-head{align-items:flex-start;flex-direction:column}
  .dash-head .btn{margin-bottom:0}
}

/* --- Forms: feedback, tracker, calculator ------------------------------ */
select.field-input{
  appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%239C988D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:18px;
}
textarea.field-input{min-height:120px;padding:16px 20px;border-radius:18px;line-height:1.55;resize:vertical}
input[type=number].field-input{-moz-appearance:textfield}
input[type=number].field-input::-webkit-inner-spin-button,input[type=number].field-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.pair{grid-template-columns:1fr}}
.q{margin-top:16px}
.q .q-label{margin-bottom:6px}
.q .q-hint{color:var(--muted);font-size:.96rem;line-height:1.55;margin-bottom:18px;max-width:60ch}
.q .field:last-child{margin-bottom:0}
.q textarea.field-input{margin-top:14px}
.q select.field-input + div textarea.field-input{margin-top:0}
.rating,.nps,.choice{display:grid;gap:8px}
.rating{grid-template-columns:repeat(5,1fr)}
.nps{grid-template-columns:repeat(11,1fr)}
.choice{grid-template-columns:1fr 1fr}
@media (max-width:560px){
  .nps{grid-template-columns:repeat(6,1fr)}
  .choice{grid-template-columns:1fr}
}
.rating button,.nps button,.choice button{
  appearance:none;min-height:46px;padding:0 8px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--rule);background:var(--input-bg);color:var(--text);
  font-family:var(--sans);font-size:.98rem;font-weight:600;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.choice button{min-height:54px;padding:0 18px}
.rating button:hover,.nps button:hover,.choice button:hover{border-color:var(--lime)}
:root[data-theme="light"] .rating button:hover,:root[data-theme="light"] .nps button:hover,:root[data-theme="light"] .choice button:hover{border-color:var(--ink)}
.rating button.sel,.nps button.sel,.choice button.sel{background:var(--lime);border-color:var(--lime-border);color:var(--ink)}
.rating button:focus-visible,.nps button:focus-visible,.choice button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.scale-ends{display:flex;justify-content:space-between;margin-top:10px;font-size:.8rem;color:var(--faint)}
.submit-wrap{margin-top:clamp(26px,5vw,36px)}
.footer-note{text-align:center;color:var(--muted);font-size:.9rem;line-height:1.55;margin-top:16px}
.state{display:none;text-align:center;padding:clamp(40px,8vw,72px) 0}
.state.show{display:block}
.state-icon{width:64px;height:64px;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:600}
.state-icon.ok{background:var(--lime);color:var(--ink)}
.state-icon.err{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.state h2{font-family:var(--serif);font-weight:400;color:var(--text);font-size:clamp(2.1rem,5.4vw,3.2rem);line-height:1.02;letter-spacing:-.022em;margin-bottom:14px}
.state p{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:48ch;margin:0 auto 24px}

/* --- Tracker ------------------------------------------------------------ */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head .head{padding-bottom:0}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.stack{display:flex;flex-direction:column;gap:16px;margin-top:clamp(22px,4vw,30px)}
.banner-warn{background:transparent;border:1px solid rgba(232,64,46,.4);color:var(--text-2)}
.banner strong{color:var(--text);font-weight:600}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.card-title{font-family:var(--serif);font-weight:400;color:var(--text);font-size:1.55rem;line-height:1.2;letter-spacing:-.012em}
.card .muted{color:var(--muted);font-size:.96rem;line-height:1.55}
.card .muted + *{margin-top:12px}
.btn-danger{border-color:rgba(232,64,46,.45);color:var(--danger)}
.btn-danger:hover{border-color:var(--danger);background:rgba(232,64,46,.08);color:var(--danger)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.goal-row{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule);align-items:baseline}
.goal-row:first-child{border-top:0;padding-top:0}
.goal-num{font-size:.74rem;font-weight:600;letter-spacing:.14em;color:var(--eyebrow);font-variant-numeric:tabular-nums}
.goal-text{font-size:1.02rem;line-height:1.55;color:var(--text)}
.goal-empty,.why-empty{color:var(--faint);font-style:italic;font-family:var(--serif);font-size:1.1rem}
.why-display{font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--text);white-space:pre-wrap}
.goal-edit-row{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.goal-edit-row input{flex:1;min-width:0}
.goal-remove{appearance:none;background:none;border:1px solid var(--rule);color:var(--danger);cursor:pointer;width:44px;height:44px;border-radius:50%;font-size:1.3rem;line-height:1;flex:none}
.goal-remove:hover{border-color:var(--danger)}
.add-goal-btn{margin:4px 0 14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:10px}
.form-row-full{grid-column:1 / -1}
.form-required{color:var(--lime)}
:root[data-theme="light"] .form-required{color:var(--lime-deep)}
.form-hint{color:var(--faint);font-size:.86rem;line-height:1.5;margin-top:10px}
input[type=date].field-input{-webkit-appearance:none;appearance:none;min-height:54px;line-height:54px}
input[type=date].field-input::-webkit-date-and-time-value{text-align:left}
.entry-msg{font-size:.92rem}
.range-bar{display:inline-flex;background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-pill);padding:3px;gap:2px}
.range-btn{appearance:none;background:transparent;border:0;cursor:pointer;font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:var(--r-pill);transition:background .2s var(--ease),color .2s var(--ease)}
.range-btn:hover{color:var(--text)}
.range-btn.active{background:var(--lime);color:var(--ink)}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.charts-grid{grid-template-columns:1fr}}
/* The chart cards follow the theme like every other card. The charts read
   their colours off the tokens when they draw and redraw on a theme switch. */
.chart-card{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-card);padding:20px 20px 16px;color:var(--text)}
.chart-card h3{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);font-family:var(--sans);margin-bottom:8px}
.chart-stats{font-size:.86rem;color:var(--char-muted);margin-bottom:12px;font-variant-numeric:tabular-nums}
.chart-stats .accent{color:var(--lime);font-weight:600}
.chart-stats .danger{color:#FF6B6B;font-weight:600}
.chart-canvas-wrap{position:relative;height:200px}
.chart-empty{color:var(--char-faint);font-size:.92rem;padding:30px 0;text-align:center}
.log-summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:12px}
.log-summary::after{content:"+";font-size:1.4rem;color:var(--muted);line-height:1}
.log-card.open .log-summary::after{content:"\2212"}
.log-table-wrap{display:none;overflow-x:auto;margin-top:16px;-webkit-overflow-scrolling:touch}
.log-card.open .log-table-wrap{display:block}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--rule);color:var(--text-2);white-space:nowrap}
td.num{font-variant-numeric:tabular-nums}
td.empty-row{color:var(--faint);text-align:center;padding:24px}
tr:last-child td{border-bottom:0}
#tek-sync-indicator{font-size:.8rem}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .page-actions .btn{flex:1 1 auto}
  .range-bar{width:100%;justify-content:stretch}
  .range-btn{flex:1;text-align:center;padding:8px 6px}
}

/* --- Calculator --------------------------------------------------------- */
.field-row{margin-bottom:22px}
.field-row:last-of-type{margin-bottom:26px}
.field-row > label,.field-grid-3 label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:10px}
.field-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:560px){.field-grid-3{grid-template-columns:1fr}}
.err-msg{color:var(--danger);font-size:.86rem;margin-top:8px}
.field-input.err{border-color:var(--danger)}
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.segmented button{
  appearance:none;flex:1 1 0;min-height:54px;padding:10px 14px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--rule);background:var(--input-bg);color:var(--text);
  font-family:var(--sans);font-size:.98rem;font-weight:600;line-height:1.1;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.segmented button .sub{display:block;font-size:.74rem;font-weight:500;opacity:.7;margin-top:4px}
.segmented button:hover{border-color:var(--lime)}
:root[data-theme="light"] .segmented button:hover{border-color:var(--ink)}
.segmented button.active{background:var(--lime);border-color:var(--lime-border);color:var(--ink)}
.segmented button.active .sub{opacity:.8}
.segmented button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.guide-toggle{appearance:none;background:none;border:0;padding:0;margin-top:12px;cursor:pointer;font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.guide-toggle:hover{text-decoration-color:var(--lime)}
.guide-panel{display:none;margin-top:14px}
.guide-panel.open{display:block}
.guide-panel img{width:100%;height:auto;border-radius:18px;border:1px solid var(--rule);display:block}
.guide-caption{color:var(--muted);font-size:.9rem;margin-top:10px}
.activity-table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:.92rem}
.activity-table thead th{text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:0 14px 2px;border:0}
.activity-table tbody tr{cursor:pointer}
.activity-table tbody td{padding:14px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--input-bg);color:var(--muted);white-space:normal;line-height:1.45;transition:border-color .18s var(--ease)}
.activity-table tbody td:first-child{border-left:1px solid var(--rule);border-radius:18px 0 0 18px;color:var(--text);font-weight:600}
.activity-table tbody td:last-child{border-right:1px solid var(--rule);border-radius:0 18px 18px 0;white-space:nowrap;font-variant-numeric:tabular-nums}
.activity-table tbody tr:hover td{border-color:var(--lime)}
:root[data-theme="light"] .activity-table tbody tr:hover td{border-color:var(--ink)}
.activity-table tbody tr.selected td{border-color:var(--lime);background:rgba(200,241,53,.07)}
:root[data-theme="light"] .activity-table tbody tr.selected td{border-color:var(--ink);background:var(--lime-tint)}
.activity-table tbody tr.selected td:last-child{color:var(--accent);font-weight:600}
.activity-hint{color:var(--muted);font-size:.9rem;margin-top:6px}
.activity-hint span{color:var(--text);font-weight:600}
.activity-slider-row{margin-top:18px}
.slider-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.slider-label{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.slider-value{font-family:var(--serif);font-size:1.4rem;color:var(--text);font-variant-numeric:tabular-nums}
input[type="range"]#activitySlider{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0;cursor:pointer}
input[type="range"]#activitySlider::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--rule)}
input[type="range"]#activitySlider::-moz-range-track{height:6px;border-radius:999px;background:var(--rule)}
input[type="range"]#activitySlider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--lime);border:2px solid var(--bg);box-shadow:0 1px 0 var(--lime-floor);margin-top:-10px}
input[type="range"]#activitySlider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--lime);border:2px solid var(--bg)}
input[type="range"]#activitySlider:focus{outline:none}
input[type="range"]#activitySlider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--lime);outline-offset:3px}
.slider-scale{display:flex;justify-content:space-between;font-size:.74rem;color:var(--faint);margin-top:2px;font-variant-numeric:tabular-nums}
.placeholder{text-align:center;padding:clamp(34px,6vw,56px) 20px;border:1px dashed var(--rule);border-radius:var(--r-card);color:var(--muted);font-size:1.02rem}
.placeholder .eyebrow{margin-bottom:10px}
.placeholder .accent{color:var(--text);font-weight:600}
.kcal-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--bg-2);border:1px solid rgba(200,241,53,.5);border-radius:var(--r-card);padding:clamp(22px,4vw,30px);margin-bottom:14px}
:root[data-theme="light"] .kcal-hero{border-color:var(--lime-deep)}
.kcal-hero-label{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:8px}
.kcal-hero-value{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,9vw,4.6rem);line-height:.95;letter-spacing:-.025em;color:var(--text);font-variant-numeric:tabular-nums}
.kcal-hero-sub{font-size:.96rem;color:var(--muted);margin-top:8px}
.kcal-hero-emoji{display:none}
.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
@media (max-width:560px){.macro-grid{grid-template-columns:1fr}}
.macro-card{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-card);padding:20px 22px}
.macro-label{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.macro-value{font-family:var(--serif);font-weight:400;font-size:2.4rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.macro-sub{font-size:.9rem;color:var(--muted);margin-top:8px}
:root[data-theme="light"] .macro-label[style*="c8f135"],:root[data-theme="light"] .macro-value[style*="c8f135"]{color:var(--lime-text) !important}
:root[data-theme="light"] .macro-label[style*="fbbf24"],:root[data-theme="light"] .macro-value[style*="fbbf24"]{color:#9A6B00 !important}
:root[data-theme="light"] .macro-label[style*="60a5fa"],:root[data-theme="light"] .macro-value[style*="60a5fa"]{color:#1D5FB8 !important}
:root[data-theme="light"] .swatch[style*="c8f135"],:root[data-theme="light"] .split-bar > div[style*="c8f135"]{background:var(--lime-text) !important}
:root[data-theme="light"] .swatch[style*="fbbf24"],:root[data-theme="light"] .split-bar > div[style*="fbbf24"]{background:#9A6B00 !important}
:root[data-theme="light"] .swatch[style*="60a5fa"],:root[data-theme="light"] .split-bar > div[style*="60a5fa"]{background:#1D5FB8 !important}
#resultsHost > .card{margin-bottom:14px}
#resultsHost .card h2,#resultsHost .card h3{font-family:var(--serif);font-weight:400;color:var(--text);font-size:1.55rem;line-height:1.2;letter-spacing:-.012em;margin-bottom:14px}
.split-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin-bottom:12px}
.split-legend > div{display:flex;align-items:center;gap:8px}
.swatch{width:12px;height:12px;border-radius:50%;display:inline-block}
.split-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--rule)}
.split-bar > div{height:100%}
.details-list .row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule);font-size:.96rem}
.details-list .row:first-child{border-top:0;padding-top:0}
.details-list .k{color:var(--muted)}
.details-list .v{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.next-steps{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-card);padding:clamp(20px,4vw,26px);margin-bottom:14px;color:var(--text-2);font-size:.98rem;line-height:1.6}
.next-steps p + p{margin-top:12px}
.next-steps strong{color:var(--text);font-weight:600}
.next-steps a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.next-steps a:hover{text-decoration-color:var(--lime)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.actions{flex-direction:column}.actions .btn{width:100%}}
.export-card-host{position:absolute;left:-10000px;top:0;width:760px;pointer-events:none}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.86);display:none;flex-direction:column;align-items:center;padding:16px;overflow:auto;-webkit-overflow-scrolling:touch}
.modal-topbar{width:100%;max-width:720px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--char-text);margin-bottom:12px}
.modal-title{font-family:var(--serif);font-size:1.3rem}
.modal-sub{font-size:.86rem;color:var(--char-muted);margin-top:3px}
.modal-sub strong{color:var(--lime);font-weight:600}
.modal-hint{width:100%;max-width:720px;background:var(--char-2);border:1px solid var(--char-rule);border-radius:16px;padding:12px 16px;color:var(--char-muted);font-size:.9rem;line-height:1.5;margin-bottom:14px}
.modal-hint strong{color:var(--char-text);font-weight:600}
.modal-img{width:100%;max-width:720px;height:auto;border-radius:18px;border:1px solid var(--char-rule);display:block}
@media (max-width:560px){
  .activity-table{border-spacing:0 10px}
  .activity-table thead{display:none}
  .activity-table tbody tr{display:block;border:1px solid var(--rule);border-radius:18px;background:var(--input-bg);padding:14px;margin-bottom:10px}
  .activity-table tbody tr.selected{border-color:var(--lime);background:rgba(200,241,53,.07)}
  :root[data-theme="light"] .activity-table tbody tr.selected{border-color:var(--ink);background:var(--lime-tint)}
  .activity-table tbody td,.activity-table tbody td:first-child,.activity-table tbody td:last-child{display:block;border:0;border-radius:0;background:transparent;padding:0}
  .activity-table tbody td:nth-child(2){margin-top:4px;font-size:.88rem}
  .activity-table tbody td:last-child{margin-top:8px;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .activity-table tbody tr:hover td{border-color:transparent}
}

/* --- Phones first, DESIGN.md section 7 --------------------------------- */
@media (max-width:720px){.closing-note{border-radius:28px}}
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.3;padding:12px 1.3rem}
  .btn-sm{padding:8px 1rem}
.topbar-right .btn{padding:8px 1rem;line-height:1.3}
  .nav-strip{flex-direction:column}
  .nav-strip .btn{width:100%;min-width:0}
  .nav-strip .btn[style*="hidden"]{display:none}
  .companion-btns{flex-direction:column;align-items:stretch}
  .companion-btns .btn{width:100%}
  .whatsapp-cta .btn{width:100%}
  .unit{padding-right:52px}
  .unit .arrow{right:20px}
  .video-loader{padding:70px 16px}
}

/* Narrow handsets. The bar carries the wordmark plus two controls, and below
   about 400px they stop fitting at full size, so the controls tighten first
   and the wordmark stays whole. */
@media (max-width:400px){
  .brand{gap:6px}
  .topbar-right .btn{padding:8px .55rem;font-size:.74rem}
  .theme-pill button{padding:8px 8px;font-size:.62rem}
}