/* UI v3 styles */

:root{
  --bg: #0b0c10;
  --panel: #111319;
  --text: #bfbfbf;
  --muted: #9aa7b4;
  --brand: #4dd0b5;
  --accent: #ffd166;
  --danger: #ff6b6b;
  --tab-h: 42px;
  --header-h: 56px;
  --submenu-h: 44px;
  --subheader-h: 48px;
  --sidebar-w: 300px;
  --radius: 12px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.5px;
  color:var(--text);
  background:linear-gradient(90deg, #141414 0%, #000000 50%, #141414 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}
.app{
  min-height:100svh;
  padding-bottom:var(--tab-h);
  display:flex;
  flex-direction:column;
}
header.app-header{
  top:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;
  justify-content:space-between;
  padding:0 9px 0 19px;
  background: radial-gradient(ellipse farthest-corner at 0 0, #2e2e2e 0%, #000 100%);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;letter-spacing:.4px;
}
.brand .logo{
  width:178px;height:28px;
  background:url(../images/nav-logo.svg); 
  background-repeat: no-repeat;
  display:inline-block;
  background-position: center;
}
.hamburger{
  appearance:none;border:0;
  width:45px;height:45px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  color:#35c79c;
  background: radial-gradient(circle,rgba(10, 38, 30, 1) 0%, rgba(10, 38, 30, 0) 87%);
}
.hamburger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kebab{
  display:grid;gap:3px;
}
.kebab span{
  display:block;width:23px;height:3px;background:rgb(37 184 140);border-radius:.5px;
}
nav.utility{
  position:absolute;right:8px;top:calc(var(--header-h) + 8px);
  border-radius:6px;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  min-width:200px;
  padding:14px 12px;
  display:none;z-index:25;
  font-family: 'transducer';
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    width: calc(100% - 16px);
    height: 100%;
    background: radial-gradient(circle at 100% 0%, #212121 0%, rgba(0, 0, 0, 0) 44%), radial-gradient(circle at 50% 100%, #202b29 0%, #171717 60%, #181818 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
    background-position: 100% 0%, 50% 100%;
}

nav.utility.open{display:block}
nav.utility a{
  display:flex;align-items:center;gap:10px;
  padding: 13px 20px;
    border-radius: 6px;
    color: #3ec59e;
}
nav.utility a:hover{background: #0000006e; color: #75ffd7;}
.subnav{
  top:var(--header-h);z-index:15;
  height:var(--submenu-h);
  display:flex;align-items:center;
  gap:8px;padding:0 8px;
  background:linear-gradient(180deg, rgba(17,19,25,0.96), rgba(17,19,25,0.92));
  border-bottom:1px solid rgba(255,255,255,0.06);
  overflow-x:auto;
}
.subnav [data-submenu]{display:none}
body[data-page="routine"] .subnav [data-submenu="routine"]{display:flex}
body[data-page="plan"] .subnav [data-submenu="plan"]{display:flex}
.tabs{
  display:flex;gap:6px;align-items:center;
}
.tabs a{
  padding:8px 12px;border-radius:999px;
  color:var(--muted);border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  white-space:nowrap;
}
.tabs a[aria-current="page"], .tabs a.active{
  color:var(--text);border-color:rgba(255,255,255,0.16);
  background:rgba(77,208,181,0.12);
}
.subheader{
  position:sticky;
  top:calc(var(--header-h) + var(--submenu-h));
  z-index:10;
  display:flex;align-items:center;gap:10px;
  padding:3px 12px;
  min-height:var(--subheader-h);
  border-bottom:1px solid rgba(255,255,255,0.06);
  justify-content: center;
}
.content-wrap{
  display:grid;grid-template-columns:1fr;gap:0;
}
aside.chat-sidebar{
  display:none;
  padding:12px;
  border-right:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
main.content{
  padding:16px 12px 24px;
  width: 100vw; /* ensure carousel slides span full viewport width */
}

nav.bottom-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:var(--tab-h);
  background: black;
  border-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
  display:grid;grid-template-columns:auto auto auto auto 42px;
  gap:0;
}
.bottom-tabs a{
  display:grid;place-items:center;text-align:center;
  gap:4px;font-size:11px;color:var(--muted);font-family: "transducer-extended", sans-serif; font-weight: 600; font-style: normal; color: #2c916f;
}

.bottom-tabs a:hover {color: #36ffb6; transition: 0.3s;}

.bottom-tabs a[aria-current="page"], .bottom-tabs a.active{
  color:#36ffb6;background:linear-gradient(0deg, rgba(20,56,46,1), transparent);
}


/* Responsive: tablet+ places Chat into a sidebar and hides Chat in tabs */
@media (min-width: 900px){
  .app{padding-bottom:0}
  .content-wrap{
    grid-template-columns:var(--sidebar-w) 1fr;
  }
  aside.chat-sidebar{display:block;position:sticky;top:calc(var(--header-h) + var(--submenu-h) + var(--subheader-h));height:calc(100svh - var(--header-h) - var(--submenu-h) - var(--subheader-h));overflow:auto}
  nav.bottom-tabs{
    position:sticky;bottom:auto;top:auto;
    height:56px;grid-template-columns:repeat(4, 1fr);
  }
  .bottom-tabs a.tab--chat{display:none}
}
/* Utilities */
.muted{ color: var(--muted); }
/* Layout variants when no subnav is present */
body.no-subnav .subheader{ top: var(--header-h); }

@media (min-width: 900px){
  body.no-subnav aside.chat-sidebar{
    top: calc(var(--header-h) + var(--subheader-h));
    height: calc(100svh - var(--header-h) - var(--subheader-h));
  }
}
/* Desktop/tablet: fixed left chat column, right-side UI shifted */
@media (min-width: 900px){
  /* Chat: fixed column from below header to above bottom nav */
  aside.chat-sidebar{
    display:block;
    position:fixed;
    top: var(--header-h);
    bottom: var(--tab-h);
    left: 0;
    width: var(--sidebar-w);
    height: auto;
    overflow:auto;
    z-index: 12; /* under header (20), above background */
    border-right:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.02);
  }

  /* Shift right-side regions to clear chat column */
  .subnav,
  .subheader,
  .content-wrap,
  nav.bottom-tabs{
    margin-left: var(--sidebar-w);
  }

  /* Content area is single column on the right when chat is fixed left */
  .content-wrap{
    grid-template-columns: 1fr;
  }

  /* Keep bottom tabs always visible and constrained to right column */
  nav.bottom-tabs{
    position:fixed;
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    height: 56px; /* compact variant for larger screens */
    grid-template-columns: 1fr 1fr 1fr 5vw;
    margin: auto;
  }

  /* Ensure space for bottom tabs so content isn't obscured */
  .app{
    padding-bottom: var(--tab-h);
  }

  /* Hide CHAT tab on larger screens (chat lives in the sidebar) */
  .bottom-tabs a.tab--chat{ display:none }
}
/* Override: ensure chat extends to the bottom at ≥900px and aligns under header on all pages */
@media (min-width: 900px){
  aside.chat-sidebar{ bottom: 0; }
  body.no-subnav aside.chat-sidebar{
    top: var(--header-h);
    height: auto;
  }
}
/* Bottom tabs: Settings gear icon; ensure visibility and override active gradient */
.bottom-tabs a[aria-label="Settings"]{
  background-image: url(../images/gear.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

.bottom-tabs a[aria-label="Settings"]:hover {background:url(../images/gear-active.svg) center/16px no-repeat; transition: 0.3s}

/* Hide the visible glyph; keep the SR-only label */
.bottom-tabs a[aria-label="Settings"] > span:not(.visually-hidden){
  display: none;
}

/* Active state: layer the icon over the active gradient */
.bottom-tabs a[aria-label="Settings"][aria-current="page"],
.bottom-tabs a[aria-label="Settings"].active{
  background: url(../images/gear-active.svg) center/16px no-repeat,
              linear-gradient(180deg, rgba(77,208,181,0.16), transparent);
  color: var(--text);
}
/* Bottom tabs: right-edge divider with no layout shift (reserve space using transparent border) */
.bottom-tabs a > span:not(.visually-hidden){
  width: 100%;
  border-right: 2.5px solid transparent;
}

/* Show divider only when not active, not last, and not immediately before an active tab */
.bottom-tabs a:not([aria-current="page"]):not(.active):not(:last-child):not(:has(+ a[aria-current="page"])):not(:has(+ a.active)) > span:not(.visually-hidden){
  border-right-color: #2d8c6b;
}
/* Chat page layout: fixed composer above bottom tabs, content padded to avoid overlap */
.chat-page .content{
  position: relative;
  /* Reserve space for composer + bottom tabs so thread is scrollable behind it */
  padding-bottom: calc(var(--tab-h) + var(--composer-h, 64px) + 16px);
}

.chat-composer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--tab-h);
  z-index: 29; /* under bottom tabs (30) but above content */
  height: var(--composer-h, 64px);
  display: flex;
  align-items: center;
  margin: 0 8px;
}

/* Thread can be any height; card padding already applied */
.chat-thread{
  /* Optional min-height if you want to ensure presence on short pages:
     min-height: calc(100svh - var(--header-h) - var(--tab-h) - var(--composer-h, 64px) - 16px); */
}

/* Input styling for composer (remove inline styles in HTML) */
.chat-composer input{
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
  padding: 10px 12px;
}

/* Tablet/desktop: align composer to right column (exclude left chat sidebar), clear right-column bottom tabs (56px) */
@media (min-width: 900px){
  .chat-page .content{
    padding-bottom: calc(56px + var(--composer-h, 64px) + 16px);
  }
  .chat-composer{
    left: var(--sidebar-w);
    right: 0;
    bottom: 56px; /* matches right-column bottom tabs height at ≥900px */
    margin-left: 8px;
    margin-right: 8px;
  }
  @media (min-width: 900px){
    /* When the fixed chat sidebar is visible, shrink the right-column content
       so each carousel slide still matches the visible viewport width. */
    main.content{
      width: calc(100vw - var(--sidebar-w));
    }
  }
}
/* Submenu (duplicated from bottom-tabs): grid layout, dividers, hover, active with 180deg gradient */
/* Intentionally duplicated so it can diverge independently from bottom tabs */

.subnav{
  /* Match bottom-tabs bar styling */
  background: black;
  border-width: 1px;
  border-bottom-style: solid;
   border-top-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
  padding: 0; /* remove side padding so grid aligns flush like bottom tabs */
}

.subnav .tabs{
  /* Default hidden; page-level data attribute chooses which to show */
  display: none;
  height: var(--submenu-h);
  width: 100%;
}

/* Show the appropriate submenu as a 3-col grid (Priorities/Settings/Exercises or Phases/Meals/Recipes) */
body[data-page="routine"] .subnav [data-submenu="routine"],
body[data-page="plan"] .subnav [data-submenu="plan"]{
  display: grid;
  grid-template-columns: auto auto auto;  /* revert to auto widths */
  gap: 0;
}

/* Submenu item styles (copied from nav.bottom-tabs, not shared) */
.subnav .tabs a{
  display: grid;
  place-items: center;
  text-align: center;
  gap: 4px;
  font-size: 11px;
  font-family: "transducer-extended", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  color: #2c916f;
  height: var(--submenu-h);
  border: none;           /* override prior pill styles */
  border-radius: 0;       /* square like bottom tabs */
  background: transparent;

  /* Divider space reserved to avoid layout shift (colored conditionally below) */
  border-right: 2.5px solid transparent;

  /* Improve hit area on narrow labels */
  padding: 0 4px;

  /* ensure ::after width:100% spans the entire tab */
  justify-self: stretch;
  width: 100%;
}

.subnav .tabs a:hover{
  color: #36ffb6;
  transition: 0.3s;
}

/* Active state: same as bottom-tabs but rotated 180deg per request */
.subnav .tabs a[aria-current="page"],
.subnav .tabs a.active{
  color: #36ffb6;
 background: linear-gradient(
  180deg,
  rgba(20, 56, 46, 1) 0%,
  rgba(20, 56, 46, 0) 63%,
  rgba(20, 56, 46, 0) 100%
);
}

/* Dividers: draw right-edge divider on inactive items only, excluding last and left-neighbor of the active */
.subnav .tabs a:not([aria-current="page"]):not(.active):not(:last-child):not(:has(+ a[aria-current="page"])):not(:has(+ a.active)){
  border-right-color: #2d8c6b;
}

/* Keep behavior consistent at ≥900px; .subnav already shifts right via existing margin-left rule */
@media (min-width: 900px){
  body[data-page="routine"] .subnav [data-submenu="routine"],
  body[data-page="plan"] .subnav [data-submenu="plan"]{
    grid-template-columns: auto auto auto; /* keep auto at desktop too */
  }
}
/* Submenu dividers: limit to label height using a pseudo-element (no HTML changes).
   This overrides the earlier full-height anchor border on submenu items. */
.subnav .tabs a{
  position: relative; /* anchor a short divider to the right edge */
  border-right: none; /* cancel any prior anchor border */
}

/* Base short divider (hidden by default) */
.subnav .tabs a::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5px;
  height: 1.1em; /* approx label height */
  background: transparent; /* shown conditionally below */
  border-radius: 2px;
}

/* Show divider only for inactive items, not last, and not immediately before the active
   NOTE: This rule previously used `background: #2d8c6b;` which overwrote the ::after background-image
   used for tab overlays. Intentionally neutralized to avoid overriding the SVG overlay. */
.subnav .tabs a:not([aria-current="page"]):not(.active):not(:last-child):not(:has(+ a[aria-current="page"])):not(:has(+ a.active))::after{
  /* no background here; overlay images are defined below */
}
/* Submenu divider — legacy override removed so ::after can be used for 1px border-image */

.subnav .tabs a > span:not(.visually-hidden){
  display: inline-block;
  border-right: 2.5px solid transparent; /* reserve space; prevents shift */
  width: 100%;
}

/* Color the divider only for inactive items, not last, and not immediately before an active item */
.subnav .tabs a:not([aria-current="page"]):not(.active):not(:last-child):not(:has(+ a[aria-current="page"])):not(:has(+ a.active)) > span:not(.visually-hidden){
  border-right-color: #2d8c6b;
}
/* Subnav mobile fix: remove stray right-edge line seen in DevTools on small viewports */
@media (max-width: 899.98px){
  .subnav{
    overflow-x: hidden;              /* avoid horizontal scrollbar track rendering */
    border-right: 0 !important;      /* guard against any UA/right-edge artifact */
  }
  /* Ensure no divider can appear on the far-right item label */
  .subnav .tabs a:last-child > span:not(.visually-hidden){
    border-right-color: transparent !important;
  }
}
/* Mobile subnav: hide overlay scrollbar while keeping horizontal scrolling available */
@media (max-width: 899.98px){
  .subnav{
    overflow-x: auto !important;           /* allow scroll if content ever overflows */
    -webkit-overflow-scrolling: touch;      /* smooth scrolling on iOS */
    scrollbar-width: none;                  /* Firefox: hide scrollbar */
    scrollbar-color: transparent transparent;
  }
  .subnav::-webkit-scrollbar{               /* WebKit/Blink: hide scrollbar */
    width: 0;
    height: 0;
  }
  .subnav::-webkit-scrollbar-thumb{ background: transparent; }
  .subnav::-webkit-scrollbar-track{ background: transparent; }
}

/* getting that subnav effect */
.subnav {height: 88px; align-items: flex-start; border-bottom-style: none; background:none;}
.subnav .tabs {height:88px;}
body[data-page="routine"] .subnav [data-submenu="routine"], body[data-page="plan"] .subnav [data-submenu="plan"] {    align-items: start;}
/* Use taller submenu height for sticky offset on pages that show it */
body[data-page="routine"], body[data-page="plan"] { --submenu-h: 88px; }
.subnav .tabs a {height:88px; align-items: start;
    padding-top: 14px; background:url(../images/black.svg);    background-size: 44px;
    background-repeat: repeat-x;}
/* Keep sticky behavior; just restyle the border (no relative/top offset that creates a gap) */
.subheader {
    z-index: 16;
    border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    position: relative;
    top: -44px;
    margin-bottom: -44px;
}
  p.instructions {font-size:15px; margin: 0;  padding: 18px 18px 16px;
    text-align: center;}
  p.instructions.left {text-align:left; padding: 6px 0px 16px;}
  p.instructions.aboveslider {padding: 6px 0px 3px;}
/* Subnav tab border images overlay using ::after
   - Left tab: border-left.svg
   - Middle tab: border-mid.svg
   - Right tab: border-right.svg
   - Hide (opacity:0) when tab is active
   - Position images 44px below the top of the tab
*/
:root{
  --subnav-border-offset: 44px; /* distance from top of tab to image */
}

.subnav .tabs a{ position: relative; overflow: hidden; }

/* Base ::after overlay covers the full tab area; shifted down by 44px */
.subnav .tabs a::after{
  content: "";
  position: absolute;
  inset: var(--subnav-border-offset, 44px) 0 auto 0; /* top, right, bottom, left */
  width: 100% !important;                            /* ensure full tab width */
  height: 1px;                                       /* lock vertical size to 1px */
  background-repeat: no-repeat;                      /* stretch single image */
  background-position: 0 0;                          /* align to left edge */
  background-size: 100% 1px;                         /* fill tab width, lock height to 1px */
  opacity: 1;
  pointer-events: none;
  z-index: 2; /* above tab background, below any future effects */
}

/* Use 1px gradient border-image per slot (no vertical scaling, fills width) */
.subnav [data-submenu="routine"] a:nth-child(1)::after,
.subnav [data-submenu="plan"]    a:nth-child(1)::after{
  border-image: linear-gradient(to right, #000000, #162C24) 1 stretch;
}

.subnav [data-submenu="routine"] a:nth-child(2)::after,
.subnav [data-submenu="plan"]    a:nth-child(2)::after{
  border-image: linear-gradient(to right, #162C24, #224237, #162C24) 1 stretch;
}

.subnav [data-submenu="routine"] a:nth-child(3)::after,
.subnav [data-submenu="plan"]    a:nth-child(3)::after{
  border-image: linear-gradient(to right, #162C24, #000000) 1 stretch;
}

/* Hide overlay on active tab */
.subnav .tabs a[aria-current="page"]::after,
.subnav .tabs a.active::after{
  opacity: 0;
}
/* Ensure subnav ::after exists on INACTIVE tabs (overrides earlier `content: none !important`) */
.subnav .tabs a:not([aria-current="page"]):not(.active)::after{
  content: "" !important;
}
/* Removed equal-width override per request; tabs use auto auto auto sizing */
/* Force the 1px gradient line to use border-image (no background scaling) */
.subnav .tabs a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--subnav-border-offset, 44px) !important;
  height: 0 !important;                     /* 0-height element; line is the border */
  border-bottom: 1px solid transparent !important;
  background: none !important;               /* do not use background for the line */
  border-radius: 0 !important;
  pointer-events: none;
  z-index: 2;
}
.subheader.nomenu {background: url(../images/header-tilt.svg); background-repeat: repeat-x; background-size: auto 50px; top: 0px; font-family: "transducer-extended", sans-serif;
font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 14px; height: 50px; margin-bottom: 0;}

h2 {font-family: "transducer-extended", sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; color:#ffffffab; font-size:14px; margin:0; }
h2.exercise {margin-bottom: 5px;}
p {font-size: 15px; line-height: 19px;  margin: 6px 0 17px; color: #ffffffbf}
.biggreen {font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
    background: #2fbc89;
    outline: none;
    border: none;
    padding: 13px;
    letter-spacing: 0.75px;     border-radius: 2.5px; color: black;
    display: block;
    text-align: center;
  margin-top: 24px;}
.biggreen:hover {background: #49ffbd; transition: 0.3s}
.biggreen.nomargin {margin:0;}
main.content {padding:0;}

.card {padding: 21px 0px; background-image: radial-gradient(circle at top right, #1c1c1c 0%, #1c1c1c00 100%), /* Bottom layer: deep green → black from bottom-center */ radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
    background-position: 0 0, 0 0;
    border-width: 1px;
    border-bottom-style: solid;
    border-top-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    margin:11px 0px;
        border-radius: 4px;
    box-shadow: 0px 8px 15px -8px black;
  }

  .card.invisible {padding: 19px 40px 19px; background: none; border:none;}
.cardcontent {max-width: 360px; margin: auto; padding: 0 29px;}

    .select-bg {
  appearance: none;
  -webkit-appearance: none;
    background: none;
    /* Layer 1: top gradient, Layer 2: bottom radial, Layer 3: caret icon */
    background-image:
      linear-gradient(180deg, rgba(42, 59, 54, 0.65) 0%, rgba(42, 59, 54, 0) 80%),
      radial-gradient(ellipse farthest-side at 50% 100%, #14382d 0%, #14382d00 100%),
      url(../images/caret.svg);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 55%, 12px auto;     /* caret width 15px */
    background-position: 0 0, 50% 100%, right 13px center;
    padding: 13px 28px 13px 18px;
    color: #97ffd9;
    font-family: "transducer", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border: .5px solid #6ce0ae;
    border-radius: 3px;
    width: 100%;
    margin: 7px 0 0;
    text-transform:uppercase;
    outline: 0;
}
.select-bg.auto {width:auto;}

.chooseroutinegrid {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.chooseroutinegrid1 { grid-area: 1 / 1 / 2 / 2; }
.chooseroutinegrid2 { grid-area: 2 / 1 / 3 / 2; }

@media (min-width: 900px){
  .chooseroutinegrid {grid-template-columns: repeat(2, 1fr);}
  .chooseroutinegrid1 { grid-area: 1 / 1 / 2 / 2; }
  .chooseroutinegrid2 { grid-area: 1 / 2 / 2 / 3; }
}

.card.musclegroup {padding: 27px 15px;}
.slider-counter {font-family: "transducer-extended", sans-serif;
font-weight: 600;
font-style: normal; font-size:20px; font-size: 24px;
    color: white;}

.slider {margin-top:32px;}
.sliderlegend {display:flex; justify-content: space-between; margin-top: 5px;}
.sliderlegendlabel {text-transform: uppercase; font-family: "transducer", sans-serif; font-weight: 400; font-style: normal; font-size:12px;}
.sliderlegendlabel.inactive {color: #33725d;}
.sliderlegendlabel.active {color: #19cc90;}

.toggle {display:flex; align-items: center; justify-content: center; margin-top: 16px;}
.togglelabel {font-family: "transducer-extended", sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 14px; padding: 0 14px;}
.togglelabel.on {color: #ffffffcc;}
.togglelabel.off {color: #ffffff6e;}
.toggleswitch {height:29px; width:38px; border-radius: 3px;}
.toggleswitch.on {background-color: #00d89a;}
.toggleswitch.off {background-color: #123029;}

.cs-root.stacked {margin: 6px 0;}

.routinecarouselnav {    display: flex;
    height: 41px;
    align-items: center;
    justify-content: space-between;
    width: 100%;}
.routinecarouselnavleft {background: url(../images/arrow-left-inactive.svg);
    width: 35px;
    background-size: 21px;
    height: 41px;
    background-repeat: no-repeat;
    background-position: center;}
.routinecarouselnavtitle {font-family: "transducer-extended", sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; font-size: 20px;}
.routinecarouselnavright {
    background: url(../images/arrow-right-active.svg);
    width: 35px;
    background-size: 21px;
    height: 41px;
    background-repeat: no-repeat;
    background-position: center;}

    .mgname {font-family: "transducer-extended", sans-serif; font-weight: 400; font-style: normal;     color: #ffffffe0;
    text-transform: uppercase; font-size: 12px;}
    .exercisemgcount {color: #00b269;}
    .exercisename {font-size: 14px; margin: 4px 0; font-family: "transducer", sans-serif; font-weight: 400; font-style: normal; color: #80ffcb; text-transform: uppercase;}
    .setsnreps {font-size: 12px; font-family: "transducer", sans-serif; font-weight: 600; font-style: normal; color: #00ff9d; text-transform: uppercase;}
    .card.exercisedescriptor {}
    .sessiontotals {display: flex;
    font-family: "transducer-extended", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    color: #ffffffc7;
    justify-content: space-between;
    padding: 11px 29px 0}
    .totalvalue {font-weight: 600;}

    .exercisecontainer {display: flex;}
    .exercisedisclosure {background: url(../images/disclosure-arrow-right.svg);     background-size: 7px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: 50% 57%;}
    .exercisedescriptor.draggable {position:relative;}
    .dragger {background: url(../images/dragger8.svg); width: 30px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 28px;
    position: absolute;
    right: 11px;
    top: 18px;}


    .card.chatinstructions {padding: 11px 16px 16px; background: none; border-bottom: none; border-top: none;}
    .chatmessage {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    max-width: 463px;
    margin: auto;
    }

    .card.croptop {padding: 9px 29px 18px;}

.chatmessage-avatar { grid-area: 1 / 1 / 3 / 2; }
.chatmessage-name {    grid-area: 1 / 2 / 2 / 3;
    font-family: "transducer-extended", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #ffffffbd;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 0 6px 11px;}
.chatmessage-baloon {
    grid-area: 2 / 2 / 3 / 3;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0px;
    padding: 0px 13px 3px;
    font-family: neue-haas-unica, sans-serif;
    color: #ffffffe8;
    font-size: 14px;
    line-height: 20px;
}
/* chatmessage-baloon pointer overlay placeholder (intentionally removed) */
img.coachface {width: 35px;}

.disclosuremenu {margin-top: 44px; display: flex; align-items: center; justify-content: space-between; width: 100%;}
.disclosureback {background: url(../images/disclosure-back.svg); background-size: 11px; background-repeat: no-repeat; background-position: center; width: 20px; height:40px;}
.disclosureforward { width: 20px; height:40px;}

.exercisecontainer.exerciseswapper {justify-content: space-between;}
.card.exerciseswapper {padding: 10px 20px 10px 40px;}
.coachcontainer {padding: 0px 26px 18px 16px; background: none;}
.usercontainer {padding: 0px 26px 3px 16px; background: none;}
.usermessage {display: flex; justify-content: flex-end; max-width: 463px;
    margin: auto;}
.usermessage-baloon {color: black;
    font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 13px;
   line-height: 20px;
    letter-spacing: 0px;
    padding: 14px 18px;
    border: 1px solid #23553e;
    border-radius: 6px;
    margin-left: 44px;
    background: #8dffcd;
    border-top-right-radius: 0px;
    position: relative;
    text-align: right;
    width: fit-content;
}
/* Quote attribution pointer overlay, pointing toward the coach face */
.usermessage-baloon::after{
    content: "";
    position: absolute;
    /* Tweak offsets if needed to align exactly with balloon’s corner */
    top: 0px;
    right: -11.5px;
    width: 11.5px;
    height: 9px;
    background: url(../images/chat-triangle-user.svg) center/contain no-repeat;
    z-index: 1;
    pointer-events: none;
}
.chatcontainer {padding: 14px 0px 0px;}
.setcount {    color: #00ff91;
    border-left: 2.5px solid #00673b;
    padding-left: 9px;
    margin-left: 4px;}

.setlogger {
display: grid;
    grid-template-columns: auto auto auto 1fr;
    grid-template-rows: auto;
    grid-column-gap: 15px;
    grid-row-gap: 0px;
    font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 12vw;
    line-height: 1;
    clip-path: polygon(0% 24%, 100% 24%, 100% 79%, 0% 79%);
    margin-top: -31px;
}

.setlogger-set { grid-area: 2 / 1 / 3 / 2; color: #2effaa; }
.setlogger-repover { grid-area: 1 / 2 / 2 / 3; color: #003821;}
.setlogger-rep { grid-area: 2 / 2 / 3 / 3; color: white;}
.setlogger-repunder { grid-area: 3 / 2 / 4 / 3; color: #003821;}
.setlogger-loadover { grid-area: 1 / 3 / 2 / 4; color: #003821;}
.setlogger-load { grid-area: 2 / 3 / 3 / 4; color: white;}
.setlogger-loadunder { grid-area: 3 / 3 / 4 / 4; color: #003821;}
.setlogger-blank { grid-area: 1 / 4 / 4 / 5; }

.setlogger-legend {display: grid;
    grid-template-columns: auto auto auto 55px;
    grid-template-rows: auto;
    grid-column-gap: 10px;
    font-family: "transducer", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #7b8a82;
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 4px;
  border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    padding-bottom: 10px;
}
.border {    border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;}
  .border.setlogger {margin-top: -27px;}


  .logtimer {position: absolute;
    top: 68px;
    right: -20px;
    font-size: 28px;
    line-height: 84px;
    font-family: "transducer", sans-serif;
    font-weight: 600;
    background: #45ffaa;
    color: black;
    /* padding: 24px 11px; */
    border-radius: 100px;
    height: 87px;
    width: 87px;
    text-align: center;}

    .card.logger {padding: 32px 17px 0px 29px;}

.cardcontent.logger {position:relative; max-width: none;}

.exercisedisplay.draggable {position:relative;}
.exercisedisplay {padding:28px 0 20px; border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;}

.setreploadgrid {
display: grid;
grid-template-columns: 1fr auto auto;
font-family: "transducer", sans-serif;
font-style: normal;
color: #00ff9d;     padding-top: 7px;}

.gridlabel {font-weight: 600; color: #bababa96; padding: 8px 0px 6px;; font-size: 13px;}
.gridlabel.set {text-align: left;}
.gridlabel.reps {text-align: right;  padding-right: 17px;}
.gridlabel.load {text-align: left; padding-left: 12px;}
.setrepload {font-weight: 500; padding: 2px 12px;}
.setrepload.set { text-align: left;}
.setrepload.reps {padding-right: 17px; text-align:right; margin: 0 0 0 -1px;}
.setrepload.load {text-align: left; margin: 0 1px 0 -1px;}
.setrepload.active {color:black; background: #2fd390;     padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 3px;
    margin-bottom: 2px;}
.setrepload.logged {color: rgb(19 134 87);}
.dragger.short {background: url(../images/dragger6.svg); width: 30px;
height: 51px;
background-repeat: no-repeat;
background-size: 28px;
 position: absolute;
    right: 14px;
    top: 19px;}

.bigalt{font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
    background: none;
    outline: none;
    border: none;
    padding: 13px;
    letter-spacing: 0.75px;
    border-radius: 2.5px; color: black;
    display: block;
    text-align: center;
    margin-top: 24px;
    border: .5px solid #30bd89;
    color: #03ff9d;
}
.bigalt:hover {background: #49ffbd;
    transition: 0.3s;
    color: black;}
.bigalt.nomargin {margin:0;}

.input-bg {
appearance: none;
-webkit-appearance: none;
background: none;
    background-image:
      linear-gradient(180deg, rgba(42, 59, 54, 0.65) 0%, rgba(42, 59, 54, 0) 80%),
      radial-gradient(ellipse farthest-side at 50% 100%, #14382d 0%, #14382d00 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 55%;  
    background-position: 0 0, 50% 100%;
    padding: 13px 13px 13px 18px;
    color: #97ffd9;
    font-family: "transducer", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border: .5px solid #6ce0ae;
    border-radius: 3px;
    width: 100%;
    margin: 7px 0 0;
    text-transform:uppercase;
    outline: 0;
}
.input-bg.threedigits {width:60px;}
.flex {display: flex; align-items: center;}
.unit {text-transform: uppercase;
    font-family: "transducer", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 1px;
    color: #52ffb5;
    padding: 7px 0 0 14px;}

.select-bg.nobg {
    background: none;
    background-image: url(../images/caret.svg);
    background-repeat: no-repeat;
    background-size: 12px auto;
    background-position: right 13px center;
    padding: 13px 32px 13px 18px;
    border: none;
    width: auto;
}
.topbot26-8 {margin: 26px 0 8px;}
.topbot8 {margin: 8px 0 8px;}
.smallalt {    text-transform: uppercase;
    font-family: "transducer", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 1px;
    color: #52ffb5;
    border: .5px solid #59d4a0;
    padding: 9px 36px;
    display: inline-block;
    border-radius: 3px;
  background-image:
      linear-gradient(180deg, rgba(42, 59, 54, 0.65) 0%, rgba(42, 59, 54, 0) 80%),
      radial-gradient(ellipse farthest-side at 50% 100%, #14382d 0%, #14382d00 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 55%;  
    background-position: 0 0, 50% 100%;
  margin: 7px 0;}

  .smallalt:hover {background: #51ffb5; color: black;}

  .subnav.short {height: 46px;}

  h3 {font-family: "transducer-extended", sans-serif;
font-weight: 400;
font-style: normal; text-transform: uppercase; color:#80ffcb; margin: 0 0 5px 0;
    font-size: 17px;}
  .plandetails {font-family: "transducer", sans-serif;
    font-weight: 500;
    font-style: normal; text-transform: uppercase; color:#80ffcb; font-size: 14px;
    line-height: 2;}
.plandetails.label {font-weight: 400;     color: #35a97a;
    padding-right: 6px;}
    .plandetails.label.diet {    padding-left: 9px;}

    .activephase {border-left: 7px solid #80ffcc; margin-left: -7px;}
/* Active phase accent: border-image on .card overrides border colors on all sides,
   so the left border appears black/invisible. Add an internal left bar that
   isn't affected by border-image. */
.card.activephase{
  position: relative;
}
.card.activephase::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;                 /* matches intended border thickness */
  background: #80ffcc;        /* accent color */
  pointer-events: none;
  z-index: 1;                 /* ensures it renders above background layers */
}

.exercisedescriptor {border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;}

.card, .card.musclegroup, .card.template, .card.nomargin, .card.exercisedisplay, .card.exercisedescriptor {
    margin: -1px 0px 0px;  border-radius: 0;}

.card.activephase.nomargin {    margin: 11px 0 0 -7px;}

.sysmessagecontainer {display: flex;    flex-direction: column;
    align-items: center;    background-color: #30bd8924;
    padding: 15px 15px 13px;}

.systemmessage {text-transform: uppercase;
    font-family: "transducer-extended", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 13px;
    color: #30bd89;}
  img.generator {width:30px;     margin-bottom: 10px;}

  .chatmessage-name {
    grid-area: 1 / 2 / 2 / 3;
    font-family: "transducer-extended", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #57ffc1cc;
    text-transform: uppercase;
    font-size: 13px;
    margin: 0 0 4px 11px;
}


h2.chat-content {font-family: "neue-haas-grotesk-display", sans-serif; font-size: 26px;
    text-transform: none;
    font-weight: 600;
    color: white;
      margin-bottom: 10px;}

p.chat {margin: 0px 0 12px;}
p.chat-content {    margin: 0px 0 12px;
    font-size: 15px;
    line-height: 19px;}

.chat-content-container {
  border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    padding: 28px 23px 9px}
  
li.chat-content {margin: 0px 0 12px;
  font-size: 15px;
    line-height: 19px; padding-left: 4px;}

ul.chat-content {padding-left: 21px; margin: 12px 0 16px;}
ol.chat-content {padding-left: 21px; margin: 12px 0 16px;}

.setlogger-header {display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 0px; text-transform: uppercase;
    justify-content: start; font-size: 11px; align-items: center;  margin-bottom: 3px;}

.setlogger-header-next {font-family: "transducer", sans-serif; font-weight: 600;
  display: inline-block;
  transform-origin: left bottom; /* baseline-ish for Latin fonts */
  transform: scaleY(0.88); font-size: 11.7px;}
.setlogger-header-set {background: #14c16e; color: black; font-family: "transducer", sans-serif; font-weight: 600;
  display: inline-block;
  transform-origin: left bottom; /* baseline-ish for Latin fonts */
  transform: scaleY(0.92); padding: 1px 5px 1px 10px;
      margin: 0 7px 0 3px;
  clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); font-size: 10px;
}
.setlogger-header-muscle {color: #0dd379; font-family: "transducer-extended", sans-serif; font-weight: 600; 
  display: inline-block;
  transform-origin: left bottom; /* baseline-ish for Latin fonts */
  transform: scaleY(0.88);    font-size: 10.6px;}
.exercisename {display: inline-block;
  transform-origin: left bottom; /* baseline-ish for Latin fonts */
  transform: scaleY(1.1); font-size: 16px;
    letter-spacing: 0;}
 #sl-set {padding-left: 0;}
 img.coachface {width: 50px;}
  .coachcontainer {
    padding: 27px 26px 18px 16px;
    background: none;}
    .usermessage-baloon {
    font-weight: 600;
    font-style: normal;
    padding: 7px 12px;
    border: 1px solid #23553e;
    border-radius: 6px;
    margin-left: 11px;
    background: #8affd3ed;
    border-top-right-radius: 0px;
    position: relative;
    text-align: right;
    width: fit-content;
    font-family: neue-haas-unica, sans-serif;
    color: #000000c4;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;}
    main.content {background: linear-gradient(90deg, hsl(0 0% 6% / 1) 0%, #000000 50%, hsl(0 0% 8% / 1) 100%);}
    .chatcontainer {background-image: radial-gradient(circle at top right, #1c1c1c 0%, #1c1c1c00 100%), radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
    background-position: 0 0, 0 0; border-width: 1px;
    border-bottom-style: solid;
    border-top-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;}
    .card {background-image:none;}
    h2 {    color: #4fffb5;
    font-size: 16px;    font-weight: 600;line-height: 1.2;
    margin-bottom: 17px;}
    .card {
    padding: 34px 0px;}
    .usercontainer {
    padding: 24px 26px 3px 16px;}
    .coachcontainer {
    padding: 27px 26px 0px 16px;}
    .chatcontainer {
    padding: 14px 0px 15px;}
    .card.invisible {
    padding: 31px 40px 31px;}
     .cardcontent.booleanbuttons {padding: 0;}
     .booleanbutton-container {display:flex; gap:10px;}
     .biggreen.secondary {background: none; color: #30bd89; border: .5px solid #30bd89;}
     .biggreen.secondary:hover {color: #41ffb9;
    border: .5px solid #43ffba;}

    .routinecarouselnav {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 10px;
    border-width: 1px;
    border-bottom-style: solid;
    border-top-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    border-top: none;
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 10px;
    padding: 0px 15px;
    height: 56px;}

    .card.nopadding {padding: 0;}

    .card.exercisedescriptor {
    padding: 15px 20px 16px;}

    .sessiontotals {padding: 11px 29px 10px;}
/* Header nav: mobile vs desktop sync across pages */

/* Mobile defaults */
header.app-header .nav-auth{ display:none; }
header.app-header .hamburger{ margin-left:auto; } /* push hamburger to right edge on mobile */

/* Desktop: show 4 nav items across top, show Log In button, hide hamburger */
@media (min-width: 768px){
  header.app-header .hamburger{ display:none; }
  header.app-header .nav-auth{ display:block; }

  /* Render the utility menu inline as top nav */
  nav.utility{
    position: static !important;
    right: auto !important;
    top: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    gap: 22px;
    padding: 0;
  }
  nav.utility a{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #3bc49d;
  }
  nav.utility a:hover{color: #84ffcd; transition: 0.2s ease-in;}
  /* Hide "Home" in the desktop top nav; keep the 4 section links visible */
  nav.utility a:first-child{ display:none; }
}

/* Log In button styling (match not-index pages) */
.aux-btn{
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: "transducer", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: .75rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #11d9bb;
  cursor: pointer;
  background:
    linear-gradient(180deg, #0f2f2c 0%, #101516 100%) padding-box,
    linear-gradient(12deg, rgba(255,255,255,.06), rgba(0,0,0,0)) padding-box,
    linear-gradient(90deg, #008565 0%, #05ffc9 50%, #008565 100%) border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.5);
}
/* Desktop: hide the "Log In" link inside nav.utility so only 4 nav items show; keep Log In as button */
@media (min-width: 768px){
  nav.utility a:last-child{ display:none; }
}