/* UI v3 styles */

:root{
  --bg: #0b0c10;
  --panel: #111319;
  --text: #bfbfbf;
  --muted: #9aa7b4;
  --brand: #4dd0b5;
  --accent: #ffd166;
  --danger: #ff6b6b;
  --tab-h: 50px;
  --header-h: 56px;
  --submenu-h: 44px;
  --subheader-h: 48px;
  --sidebar-w: 300px;
  --radius: 12px;
  --pwa-bottom-nav-clearance: 0px;
}

@media (hover: none) and (pointer: coarse) {
  :root.program-pwa-standalone {
    --pwa-bottom-nav-clearance: 14px;
  }
}

@media (hover: none) and (pointer: coarse) and (display-mode: standalone),
  (hover: none) and (pointer: coarse) and (display-mode: fullscreen),
  (hover: none) and (pointer: coarse) and (display-mode: minimal-ui) {
  :root {
    --pwa-bottom-nav-clearance: 14px;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:#000}
body{
  min-height:100%;
  margin:0;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  color:var(--text);
  background:linear-gradient(90deg, #141414 0%, #000000 50%, #141414 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Prevent iOS Safari auto-zoom on form controls. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea{
  font-size:16px !important;
}

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:calc(var(--tab-h) + var(--pwa-bottom-nav-clearance));
  display:flex;
  flex-direction:column;
}
header.app-header{
  top:0;z-index:20;
  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: 168px;
    height: 40px;
    display: inline-block;
    margin-top: 8px;
  background:url(/homepage/interior-images/logo-reploader.svg);
  background-size:contain;
  background-repeat: no-repeat;
  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);
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  min-width:200px;
  padding:6px;
  display:none;z-index:25;
}
nav.utility.open{display:block}
nav.utility a,
nav.utility .utility-action{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;color:var(--text);
  width:100%;
  border:0;
  background:transparent;
  font:inherit;
  text-align:left;
}
nav.utility a:hover,
nav.utility .utility-action:hover{background:rgba(255,255,255,0.06)}
.utility-desktop{
  display:none;
}
.utility-action-disabled{
  opacity:.35;
  cursor:not-allowed;
}
.utility-overlay{
  position:fixed;
  inset:0 0 var(--tab-h) 0;
  z-index:60;
  background:
    radial-gradient(circle at 82% 0%, rgba(16,79,63,.4) 0%, rgba(0,0,0,0) 26%),
    radial-gradient(circle at 25% 35%, rgba(8,64,52,.32) 0%, rgba(0,0,0,0) 34%),
    linear-gradient(180deg, rgba(0,0,0,.96) 0%, rgba(2,10,9,.98) 100%);
}
.app:not(:has(nav.bottom-tabs)) .utility-overlay{
  inset: 0;
}
.utility-overlay-close{
  position:absolute;
  top:6px;
  right:10px;
  z-index:2;
  background:transparent;
  color:#35f0be;
}
.utility-overlay-close-glyph{
  display:block;
  width:17px;
  height:17px;
  object-fit:contain;
}
.utility-overlay-content{
  min-height:100%;
  padding:0px 0 20px;
  display:flex;
  flex-direction:column;
  justify-content: center;
}
#utility-overlay-main .utility-overlay-content{
  padding-top: 52px;
}
#utility-overlay-main .utility-main-menu{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 30px 12px;
  box-sizing: border-box;
}
#utility-overlay-main .utility-main-profile{
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: start;
  border-bottom: 1px solid rgba(56, 168, 133, 0.42);
  padding: 0 0 20px;
}
#utility-overlay-main .utility-main-profile-row{
  display: contents;
}
#utility-overlay-main .utility-main-profile-avatar{
  grid-row: 1 / span 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-right: 19px;
  overflow: hidden;
  border: 1px solid rgba(83, 242, 192, 0.62);
  border-radius: 50%;
  background: rgba(83, 242, 192, 0.1);
  color: #53f2c0;
}
#utility-overlay-main .utility-main-profile-avatar img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#utility-overlay-main .utility-main-profile-avatar-fallback{
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
#utility-overlay-main .utility-main-profile-name{
  color: #53f2c0;
  font-family: "neue-haas-grotesk-display", sans-serif;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
#utility-overlay-main .utility-main-profile-email{
  grid-column: 2;
  margin: 0;
  color: #d2d2d2;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 14px;
  line-height: 1.1;
  min-height: calc(14px * 1.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#utility-overlay-main .utility-main-profile-links{
  grid-column: 2;
  display: grid;
  gap: 2px;
  margin-top: 10px;
}
#utility-overlay-main .utility-main-groups{
  margin-top: 4px;
}
#utility-overlay-main .utility-main-group{
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: start;
  border-bottom: 1px solid rgba(56, 168, 133, 0.42);
  padding: 14px 0 10px;
}
#utility-overlay-main .utility-main-group-label{
  font-family: "transducer", sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.2;
  text-align: right;
  margin-right: 19px;
  color: #b0b0b0;
  padding-top: 7px;
}
#utility-overlay-main .utility-main-group-links{
  display: grid;
  gap: 2px;
}
#utility-overlay-main .utility-main-link{
  appearance: none;
  border: 0;
  background: transparent;
  color: #53f2c0;
  text-decoration: none;
  text-transform: none;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  text-align: left;
  width: fit-content;
  cursor: pointer;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: 18px;
}
#utility-overlay-main .utility-main-link:focus-visible{
  outline: 1px solid rgba(83, 242, 192, 0.62);
  outline-offset: 3px;
  border-radius: 2px;
}

#utility-overlay-main .utility-main-link-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.7em;
  min-height:1.7em;
  margin-left:auto;
  padding:0 .45em;
  border-radius:999px;
  color:#00170f;
  background:var(--accent);
  font-size:.72em;
  font-weight:800;
}
#utility-overlay-main .utility-main-link-disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
#utility-overlay-main .utility-main-logout-row{
  padding: 11px 0 12px 148px;
}
#utility-overlay-main .utility-main-logout{
  font-size: 18px;
  line-height: 1.6;
  text-transform: none;
}
.utility-session-card{
  margin:0;
  border-radius:0;
  min-height:0;
  border-bottom:1px solid rgba(41,196,157,.15);
  background:
    radial-gradient(circle at 28% 88%, rgba(9,76,59,.55) 0%, rgba(0,0,0,0) 28%),
    radial-gradient(circle at 100% 0%, rgba(18,65,54,.28) 0%, rgba(0,0,0,0) 32%),
    linear-gradient(180deg, rgba(0,8,7,.96) 0%, rgba(0,0,0,.94) 100%);
}
.utility-session-cardcontent{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:28px 20px 22px;
}
.utility-session-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.utility-session-action{
  border: 1px solid #29c49d3b;
  border-radius:6px;
  background: radial-gradient(circle at bottom, rgba(3, 143, 92, 0.25) 0%, rgba(3, 143, 92, 0));
  color:#56e9b2;
  font-family:"transducer", sans-serif;
  text-transform:uppercase;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.6px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:26px 10px 20px;
  box-shadow: 0px 4px 12px #00000078;
}
.utility-session-action:not(:disabled):active{
  background:rgba(41,196,157,.14);
}
.utility-session-quit{
  margin-top:10px;
  width:100%;
  background:none;
  border:.5px solid rgba(41,196,157,.4);
  border-radius:4px;
  color:#03ff9d;
  font-family:"transducer", sans-serif;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.75px;
  padding:14px;
  cursor:pointer;
  text-align:center;
}
.utility-session-quit:disabled{
  opacity:.28;
  cursor:not-allowed;
}
.utility-session-quit:not(:disabled):active{
  background:rgba(41,196,157,.1);
}

.utility-session-action-label{
  display:block;
}

.utility-session-action-icon{
  display:block;
  width:28px;
  height:28px;
  flex:0 0 auto;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.utility-session-action-icon--swap{
  background-image:url(/images/button-setlogger-swap.svg);
      background-size: 40px;
}

.utility-session-action-icon--edit{
  background-image:url(/images/edit-pencil.svg);
  background-size: 23px;
}

.utility-session-action-icon--skip{
  background-image:url(/images/button-setlogger-skip.svg);
  background-size: 31px;
}

.utility-session-action-icon--reorder{
  background-image:url(/images/button-setlogger-reorder.svg);
      background-size: 27px;
}

.utility-session-action-icon--view{
  background-image:url(/images/button-setlogger-preview.svg);
      background-size: 24px;
}

.utility-session-action-icon--quit{
  background-image:url(/images/icon-quit.svg);
  background-size: 29px;
  background-position: 84% 50%;
}

.cardcontent.utility-session-cardcontent {max-width: 493px;}

.utility-session-action:disabled{
  opacity:.28;
  cursor:not-allowed;
}
.utility-overlay-links{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:16px;
  padding:33px 49px;
}
.utility-overlay-link{
  border:0;
  background:transparent;
  color:#d3d3d3;
  text-decoration:none;
  font-family:neue-haas-unica, sans-serif;
  font-size:16px;
  line-height:1;
  font-weight:300;
  cursor:pointer;
  text-align:right;
  padding-inline: 0;
}
.utility-overlay-link-disabled{
  opacity:.45;
  cursor:not-allowed;
}

.ws-unsaved-banner.card.nomargin{
  background: #05ac7c;
  padding: 0;
}

.ws-unsaved-banner .ws-unsaved-banner-content{
  padding-top: 0;
  padding-bottom: 0;
}

.ws-unsaved-banner .ws-unsaved-banner-copy{
  color: #000;
  font-weight: 500;
  margin: 6px 0 7px;
  text-align: center;
}

.ws-unsaved-banner .ws-unsaved-banner-link-row{
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}

.ws-unsaved-banner .ws-unsaved-banner-link{
  background: #000;
  color: #00be89;
  padding: 6px 19px 6px;
  font-family: "transducer-extended", sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  border-radius: 22px;
}

.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:calc(var(--tab-h) + var(--pwa-bottom-nav-clearance));
  padding-bottom:var(--pwa-bottom-nav-clearance);
  box-sizing:border-box;
  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 auto;
  gap:0;
}
.bottom-tabs a{
  display:grid;place-items:center;text-align:center;
  gap:4px;font-size:10px;color:var(--muted);font-family: "transducer", sans-serif; font-weight: 600; font-style: normal; color: #2c916f; padding-top: 23px;
}




/* 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:calc(56px + var(--pwa-bottom-nav-clearance));
    padding-bottom:var(--pwa-bottom-nav-clearance);
    box-sizing:border-box;
    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); }
body:not(.chat-page) #chatmessageboxcontainer{display:none;}

@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: calc(56px + var(--pwa-bottom-nav-clearance)); /* compact variant for larger screens */
    padding-bottom: var(--pwa-bottom-nav-clearance);
    box-sizing: border-box;
    grid-template-columns: repeat(4, 1fr);
    margin: auto;
  }

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

  /* 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(/homepage/interior-images/gear.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

.bottom-tabs a[aria-label="Settings"]:hover {background:url(/homepage/interior-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(/homepage/interior-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: none;
}

/* 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(--pwa-bottom-nav-clearance) + var(--composer-h, 14px) + 16px);
}

.chat-composer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tab-h) + var(--pwa-bottom-nav-clearance));
  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", 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(/homepage/interior-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 {line-height: 20px;
    font-family: neue-haas-unica, sans-serif;
    color: #ffffffba;
    font-weight: 100;}
  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(/homepage/interior-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: 21px;  margin: 6px 0 17px; color: #ffffffbf}
.biggreen {font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    width: 100%;
    background: #2fbc89;
    outline: none;
    border: none;
    padding: 17px;
    letter-spacing: 0.75px;     border-radius: 2.5px; color: black;
    display: block;
    text-align: center;
    cursor: pointer;
  margin-top: 0;}
.biggreen:hover {background: #49ffbd; transition: 0.3s}
.biggreen.nomargin {margin:0;}
main.content {padding:0;}

.card {padding: 32px 40px; 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-image: linear-gradient(to right, black, #224237, black) 1;
  }

  .card.invisible {padding: 40px 0px 36px; background: none;}
  .card.invisible.cardpadding {padding: 0px 32px 40px;}
.cardcontent {max-width: 450px; margin: auto;}
.cardcontent.standalone {margin: 40px auto 0;}

.card.utility-session-card {
  padding: 32px 40px;
  height: calc(100dvh - var(--tab-h, 72px) - env(safe-area-inset-bottom) - var(--pwa-bottom-nav-clearance));
}

    .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(/homepage/interior-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:100%;}

.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 {}
.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;}
.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.smaller {height: 23px;
    width: 29px;}
.toggleswitch.on {background-color: #00d89a;}
.toggleswitch.off {background-color: #123029;}
.is-dragging{

}

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

.routinecarouselnav {    display: flex;
    height: 41px;
    align-items: center;
    justify-content: space-between;
    width: 100%;}
.routinecarouselnavleft {background: url(/homepage/interior-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(/homepage/interior-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: #1dd88f;
    text-transform: uppercase; font-size: 11px; margin: 0 0 -1px 0;}
    .exercisemgcount {color: #00b269;}
    .exercisename {font-size: 14px; margin: 4px 0; font-family: "transducer", sans-serif; font-weight: 400; font-style: normal; color: #ffffffc9; text-transform: uppercase;}
    .setsnreps {font-size: 13px; font-family: "transducer", sans-serif; font-weight: 600; font-style: normal; color: #00ff9d; text-transform: uppercase;}
    .card.exercisedescriptor {    padding: 18px 40px 20px; margin: auto;}
    .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: 17px 25px 16px;
    max-width: 500px;}
    .totalvalue {font-weight: 600;}

    .exercisecontainer {display: flex;     justify-content: space-between;}
    .exercisedisclosure {background: url(/homepage/interior-images/disclosure-arrow-right.svg);     background-size: 8px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: 50% 50%;}
    .card.exercisedescriptor.draggable {position:relative;}
    .dragger {    background: url(/images/dragger8.svg);
    height: 70px;
    background-repeat: no-repeat;
    background-size: 28px;
    background-position: right;
    position: absolute;
    left: calc(50% - 16px);
    transform: translate(-50%);
    max-width: 500px;
    width: 100%;
    margin: auto;}


    .card.chatinstructions {padding: 19px 16px 25px; background: none;}
    .chatmessage {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    max-width: 463px;
    width: 100%;
    margin: auto;
    padding: 0 16px;
    }

.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: #57ffc1cc;
    text-transform: uppercase;
    margin: 0 0 -3px 11px;
    font-size: 0.85rem;}

.chatmessage-baloon {
    grid-area: 2 / 2 / 3 / 3;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0px;
    padding: 9px 13px 15px;
    font-family: neue-haas-unica, sans-serif;
    color:#ffffffe0;
    font-size: 1rem; line-height: 1.45rem;
}
/* Quote attribution pointer overlay, pointing toward the coach face */
.chatmessage-baloon::before{
    content: "";
    position: absolute;
    /* Tweak offsets if needed to align exactly with balloon’s corner */
    top: -1px;
    left: -11.5px;
    width: 11.5px;
    height: 9px;
    background: url(/homepage/interior-images/chat-triangle.svg) center/contain no-repeat;
    z-index: 1;
    pointer-events: none;
}
img.coachface {width: 50px;}

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

.exercisecontainer.exerciseswapper {justify-content: space-between;}
.card.exerciseswapper {padding: 10px 20px 10px 40px;}
.card.exerciseswapper .cardcontent {max-width: 430px;}
.coachcontainer {padding: 27px 26px 18px 16px; background: none;}
.usercontainer {padding: 19px 26px 29px 16px; background: none;}
.usermessage {display: flex; justify-content: flex-end; max-width: 463px;
    margin: auto;}
.usermessage-baloon {
    font-weight: 600;
    font-style: normal;
    padding: 10px 16px;
    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: 0.93rem;
    line-height: 1.15rem;
    letter-spacing: 0px;
    text-wrap: balance;
}
/* 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(/homepage/interior-images/chat-triangle-user.svg) center/contain no-repeat;
    z-index: 1;
    pointer-events: none;
}
.chatcontainer {padding: 0;
    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;}
.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;
      background: black;
      position: sticky;
      top: 0;
      z-index: 15;
    }

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

.card.exercisedisplay.draggable {position:relative;}
.card.exercisedisplay {padding: 18px 25px 20px 25px;}

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

.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;}
.gridlabel.delta {text-align: right; 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.delta {text-align: right;     padding: 0 0 0 12px;}
.setrepload.delta.negative {color: #ff5e5e;}
.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(/homepage/interior-images/dragger6.svg); width: 30px;
height: 51px;
background-repeat: no-repeat;
background-size: 28px;
 position: absolute;
right: 17px;
top: 10px;}

.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;
    line-height: 15px;
    padding: 16px;
    letter-spacing: 0.75px;
    border-radius: 2.5px; color: black;
    display: block;
    text-align: center;
    margin-top: 24px;
    border: .5px solid #30bd89;
    color: #03ff9d;
    cursor: pointer;
}
.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(/homepage/interior-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;
width: 100%;
    text-align: center;}

  .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: 19px;}
  .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 */
}

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;}

h2.swapexercise {
    font-weight: 600;
    text-transform: uppercase;
    color: #6cffc3c7;
    font-size: 16px;
    margin: 10px 0 0 0;}

p.chat {margin: 0px 0 12px; font-size: 1rem; line-height: 1.45rem;
}
p.chat-content {    margin: 0px 0 12px;
    font-size: 15px;
    line-height: 20px;}

.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;
  grid-column-gap: 9px; 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: 11.5px;
    line-height: 11.5px;}

.setlogger-header-sets-discs {
  border-left: 2px solid #19c586;
  --setdisc-green: #14c16e;
  --setdisc-size: 10px;
  --setdisc-gap: 6px;
  padding-left: 9px;

  display: inline-flex;
  align-items: center;
  gap: var(--setdisc-gap);
}

.setlogger-header-set-marker {
  color: var(--setdisc-green);
  font-family: "transducer", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
}

.setlogger-header-sets-w {
  margin: 0 0 0 7px;
}

.setlogger-header-set-number {
  min-width: var(--setdisc-size);
  text-align: center;
}

.setlogger-header-set-marker.is-active,
.setlogger-header-set-marker.is-upcoming {
  color: #5affb0;
}

.setlogger-header-set-marker.is-complete {
  color: #58ffb19e;
}
.exercisename {display: inline-block;
  transform-origin: left bottom; /* baseline-ish for Latin fonts */
  transform: scaleY(1.1); font-size: 14px;
    letter-spacing: 0;}
 #sl-set {padding-left: 0;}
 
 #chatmessageboxcontainer {  
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%); 
  width: 100%;
  max-width: 473px;
  margin: 0; 
  background: linear-gradient(0deg, #000000ad, #00000000);
  padding: 8px 0;
  height: 65px;
  padding: 0 13px;
    z-index: 100;}

@media (min-width: 900px){
  #chatmessageboxcontainer {
    width: calc(100% - var(--sidebar-w) - 24px);}
}

#chatmessagebox {position:relative;}
#chatmessageinput {
    background-color: #ffffff;
    background-image: radial-gradient(ellipse at center bottom, #cccccc 0%, #a1a1a1 100%);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    border: none;
    padding: 14px 24px 12px;
    width: 100%;
    border-radius: 30px;
    height: 43px;
    position: absolute;
    top: 4px;
    transition: background-color 0.3s ease, background-image 0.3s ease;
}
#chatmessageinput::placeholder {color:#565656;}
#chatmessagesend {
    background:url(/homepage/interior-images/sendmessagebutton-active.svg);
    background-size: 44px;
    height: 51px;
    width: 51px;
    background-repeat: no-repeat;
    border: 4px solid #a8a8a8;
    border-radius: 43px;
    position: absolute;
    top: 0;
    right: 0;
}

/* Hover states: soften input glow and brighten send button border */
#chatmessageinput:hover {
    background-image: radial-gradient(at bottom, #cccccc00 0%, #a1a1a138 100%);
}

#chatmessageinput:hover + #chatmessagesend,
#chatmessagesend:hover {
    border: 4px solid #ffffff;
}

#nav-chat {background: url(/homepage/interior-images/icon-nav-chat.svg); 
  background-repeat: no-repeat;
  background-size: 19px;
  background-position: 50% 10px;}

#nav-chat:hover {background: url(/homepage/interior-images/icon-nav-chat-hover.svg); 
  background-repeat: no-repeat;
  background-size: 19px;
  background-position: 50% 10px;}

#nav-chat[aria-current="page"] {
  background: url(/homepage/interior-images/icon-nav-chat-active.svg); 
  background-repeat: no-repeat;
  background-size: 19px;
  background-position: 50% 10px;
}

#nav-train {background: url(/homepage/interior-images/icon-nav-train.svg); 
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: 50% 9px;}

  #nav-train:hover {background: url(/homepage/interior-images/icon-nav-train-hover.svg); 
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: 50% 9px;}

  #nav-train[aria-current="page"] {background: url(/homepage/interior-images/icon-nav-train-active.svg); 
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: 50% 9px;}



  #nav-design {background: url(/homepage/interior-images/icon-nav-design.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #nav-design:hover {background: url(/homepage/interior-images/icon-nav-design-hover.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #nav-design[aria-current="page"] {background: url(/homepage/interior-images/icon-nav-design-active.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #nav-track {background: url(/homepage/interior-images/icon-nav-track.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #nav-track:hover {background: url(/homepage/interior-images/icon-nav-track-hover.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #nav-track[aria-current="page"] {background: url(/homepage/interior-images/icon-nav-track-active.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}


  #design-back {background: url(/homepage/interior-images/icon-design-back.svg); 
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 50% 13px;}

  #design-back:hover {background: url(/homepage/interior-images/icon-design-back-hover.svg); 
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 50% 13px;}

  #design-back[aria-current="page"] {background: url(/homepage/interior-images/icon-design-back-active.svg); 
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 50% 13px;}

  #design-schedule {background: url(/homepage/interior-images/icon-design-schedule.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #design-schedule:hover {background: url(/homepage/interior-images/icon-design-schedule-hover.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #design-schedule[aria-current="page"] {background: url(/homepage/interior-images/icon-design-schedule-active.svg); 
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50% 11px;}

  #design-exercises {background: url(/homepage/interior-images/icon-design-exercises.svg); 
  background-repeat: no-repeat;
  background-size: 21px;
  background-position: 50% 15px;}

  #design-exercises:hover {background: url(/homepage/interior-images/icon-design-exercises-hover.svg); 
  background-repeat: no-repeat;
  background-size: 21px;
  background-position: 50% 15px;}

  #design-exercises[aria-current="page"] {background: url(/homepage/interior-images/icon-design-exercises-active.svg); 
  background-repeat: no-repeat;
  background-size: 21px;
  background-position: 50% 15px;}

  #design-plan {background: url(/homepage/interior-images/icon-design-plan.svg); 
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 50% 10px;}

  #design-plan:hover {background: url(/homepage/interior-images/icon-design-plan-hover.svg); 
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 50% 10px;}

  #design-plan[aria-current="page"] {background: url(/homepage/interior-images/icon-design-plan-active.svg); 
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 50% 10px;}



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

.bottom-tabs a[aria-current="page"], .bottom-tabs a.active{
  color:#ffffff;
}
.card.noback {background-image:none;max-width: 504px;
    margin: auto;
    padding: 17px 15px 21px;
    border-width: 1px;
    border-top-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;     border-bottom: none;}
  #onboarding-progress-meter{
    position: relative;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 1px;
    height: 6px;
    margin-bottom: 14px;
  }
  #onboarding-progress-meter::before{
    content: "";
    position: absolute;
    inset: 0;
    background: #1e2a26;
    border-radius: 2px;
  }
  #onboarding-progress-meter .progress-step{
    position: relative;
    z-index: 1;
    background: transparent;
    border-radius: 1px;
  }
  #onboarding-progress-meter .progress-step.is-filled{
    background: #7bffd0;
  }
  .onboarding-collector-shell{
    transition: opacity 240ms ease-out;
  }
  .onboarding-collector-shell.is-fading{
    opacity: 0;
    pointer-events: none;
  }
  h1.interstitial {    font-size: 30px;
    line-height: 1;     margin: 13px 0 13px;}
    h1.sessionpreview {    font-size: 19px;
    font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #ffffffdb;
    text-transform: uppercase;
      margin: 21px auto 11px;}
    h2.interstitial {    font-family: "neue-haas-grotesk-display", sans-serif;
    text-transform: none;
    font-weight: 600;
    font-size: 24px;
    color: #ffffffb5;
    margin: 0 0 10px 0;}
    h3.interstitial {font-size: 12px;
    color: #2effb3;
    font-family: transducer;
    margin: 0 0 10px 0;}
    h4.interstitial {font-family: "transducer-extended", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    color: #7affced6;
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #ffffffc7;}
    a.biggreen.interstitial, a.bigalt.interstitial {width:100%; 
    margin-top: 28px;}
    p.interstitial {margin: 6px 0 29px;     line-height: 20px;
    font-family: neue-haas-unica, sans-serif;
    color: #ffffffba;
    font-weight: 100;font-size: 1rem;
    line-height: 1.45rem;}
    p.interstitial.standalone {margin:6px 0 11px}
    .interstitial-followup {padding: 38px 0px 17px;}
    .form-panel {border-width: 1px;
    border-top-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    padding-top: 20px;}
    .form-panel.stacked {    margin-top: 36px;}

    .priority-container {    padding: 0;
    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;}
    .priority-row {max-width: 500px;
    margin: auto;
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 34px 26px 26px;
    grid-template-columns: repeat(2, 1fr);     border-width: 1px;
    border-top-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;}
    .priority-name {    text-transform: uppercase;
    font-family: "transducer-extended", sans-serif;
    font-size: 14px;}
    .priority-slider{flex: 1;}
    .ts-root.ts-small .ts-track{height: 28px;}
    .ts-root.ts-small .ts-value{font-size: 18px;}
    .ts-root.ts-small .ts-thumb{width: max(6px, var(--ts-tw, 8px));}
    .ts-root.ts-small .ts-handle{width: max(8px, calc(var(--ts-tw, 10px) + 2px));}

    .tick-slider-container {margin: 34px 0 15px;}
    .form-panel.standalone {max-width: 500px;
    margin: auto;
    padding: 25px;}
    .card.standalone {margin: auto;
    max-width: 500px;
    padding: 0 25px 25px;
    background: none;  width: 100%;}
    #session-settings {max-width:500px; margin: 0px auto; max-width: 500px;
    padding: 10px 0;     
    border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, #000, #224237, #000) 1;}
    .session-settings-button {font-family: "transducer-extended", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    color: #97ffd9;
    margin: 0 24px 25px;
    display: block;
    width: auto;
    position: relative;
    padding: 14px 22px;
    border: solid .5px #4cffbcc7;
    font-size: 13px;
    display: block;
    border-radius: 5px;
    letter-spacing: 0.5px;}
    .session-settings-button::after{
    content:"";
    position:absolute;
    top:50%;
    right: 16px;
    width:17px;
    height:17px;
    background: url(/images/caret.svg) no-repeat center;
    background-size: 17px;
    transform: translateY(-50%);
    transition: transform 200ms ease;
    }
    #session-settings:not(.is-open) .session-settings-button::after{
    transform: translateY(-50%) rotate(180deg);
    }
    #session-settings.is-open .session-settings-button{
    border: none;
    border-top: solid 0.5px #4cffbcc7;
    border-radius: 0px;
    }
    #start-session-button {padding: 0 25px;}
    #session-settings-options {margin-bottom: -25px;
    max-height: 2000px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 260ms ease, opacity 200ms ease, transform 260ms ease;}
    #session-settings:not(.is-open) #session-settings-options{
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;}

    .schedule-table-dock{
      position: fixed;
      bottom: calc(var(--tab-h) + var(--pwa-bottom-nav-clearance));
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100vw;
      box-sizing: border-box;
      z-index: 30;
      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;
      color: #e5e7eb;
      padding: 0;
      transition: transform 240ms ease;
    }
    .schedule-table-dock.is-collapsed{
      transform: translateY(calc(100% - 38px));
    }
    .schedule-table-header{
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
          background: none;
    }
    .schedule-table-title{
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      padding-right: 20px;
      color:black;
    }
    .schedule-table-title::after{
      content: "";
      position: absolute;
      right: -3px;
      top: 53%;
      width: 17px;
      height: 17px;
      background: url(/homepage/interior-images/caret-black.svg) no-repeat center;
      background-size: 12px;
      transform: translateY(-50%);
      transition: transform 200ms ease;
    }
    .schedule-table-dock.is-collapsed .schedule-table-title::after{
      transform: translateY(-50%) rotate(180deg);
    }
    .schedule-table-wrap{
      overflow-x: auto;
      border-radius: 0;
      background: none;
    }
    .schedule-table{
      border-collapse: collapse;
      min-width: 720px;
      font-size: 13px;
      background: none;
    }
    .schedule-head-cell{
      border-bottom: 1px solid #233d34;
      padding: 6px 8px;
      text-align: center;
      background: #000;
      white-space: nowrap;
      text-transform: uppercase;
      font-family: "transducer", sans-serif;
      font-size: 12px;
    }
    .schedule-head-left{
      text-align: left;
    }
    .schedule-sticky{
      position: sticky;
      left: 0;
      z-index: 1;
      background: #020617;
      display: none;
    }
    .schedule-row-head{
      padding: 4px 8px;
      text-align: left;
      white-space: nowrap;
      border-bottom: 1px solid #16231d;
       border-right: 1px solid #233d34;
       background: #162c25;
    }
    .schedule-cell{
      border-bottom: none;
      border-right: 1px solid #233d34;
      padding: 13px 13px 0;
      text-align: left;
      white-space: nowrap;
    }
    .schedule-cell-empty{
      text-align: center;
      color: #4b5563;
      font-style: italic;
    }
    .schedule-title{
        font-family: "tRansducer";
   color: #aeffe8d9;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: .25px;
    }
    .schedule-total-cell{
        border-bottom: 1px solid #1f2933;
        padding: 13px 13px 8px;
        text-align: left;
        white-space: nowrap;
        font-family: "tRansducer";
    color: #aeffe8d9;
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: .25px;
        border-right: 1px solid #233d34;
    }

    .simple-debug-overlay{
      position: fixed;
      left: 12px;
      bottom: 63px;
      z-index: 300;
      background: rgba(0, 0, 0, 0.75);
      border: 1px solid rgba(108, 224, 174, 0.45);
      border-radius: 8px;
      padding: 6px 10px;
      font-family: "transducer", sans-serif;
      font-size: 12px;
      color: #97ffd9;
          display: none;
    }
    .simple-debug-toggle{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
    }
    .simple-debug-toggle input{
      accent-color: #36ffb6;
    }
    .simple-debug-label{
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .onboarding-overlay{
      position: fixed;
      inset: 0;
      z-index: 350;
      background: #0b0c10;
      overflow: auto;
      display: none;
      padding: 0;
    }
    .onboarding-overlay.is-visible{
      display: block;
    }
    body.onboarding-overlay-open main.content{
      display: none;
    }
    .sessionheader {display: flex;}
    .session-icon {width: 37px; margin-right: 12px;}
    .card.card.noback.sessionheader {padding: 10px 25px 10px;}
    .card.noback.dockbottom {padding: 25px 25px 0;     width: 100%;}

    .content-wrap.design-nav {
      margin-left: 0;
      grid-template-columns: minmax(0, 1fr);
    }
    .content-wrap.design-nav .chat-sidebar{
      display: none;}
    .content-wrap.design-nav main.content {
      grid-column: 1 / -1;
      width: 100%;}
    nav.bottom-tabs.design-nav {width: 100%; left: 0;}
    .priority-set-toggle {display:grid; grid-template-columns: 1fr auto;     align-items: center;}
    .select.priority-toggle{}
    .toggle.priority-toggle {margin:0;}
    @media (max-width: 500px){
      .priority-set-toggle {display:grid; grid-template-columns: 1fr;}
      .toggle.priority-toggle {margin: 28px 0 3px;}
    }
    .design-schedule-bottom-padding {
      height: calc(var(--tab-h) + var(--schedule-dock-h-open, 0px));
      transition: height 240ms ease;
    }
    body.schedule-dock-collapsed .design-schedule-bottom-padding{
      height: calc(var(--tab-h) + var(--schedule-dock-h-collapsed, 0px));
    }
    .simple-commentary {
      font-family: code-saver, sans-serif;
      font-weight: 400;
      font-style: normal;
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: 36px 42px 29px;
    color: #67ffb9e0;
    font-size: 18px;
    line-height: 1.25;}

    .codesaverbold {font-family: "code-saver", sans-serif;
font-weight: 700;
font-style: normal; color:#8fffcb;}
.togglelabel.off.guided {margin-right: 6vw;}

.wrapup-chart {
        padding: 28px 28px 36px;
      }

      .wrapup-chart-inner {
        display: grid;
        gap: 0;
        max-width: 500px;
        margin: auto;
      }

      .wrapup-chart-header {
        text-align: center;
        color: #f2f5f8;
      }

      .wrapup-chart-title {
        font-size: 28px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .wrapup-chart-subtitle {
        margin-top: 8px;
        font-size: 18px;
        color: rgba(242, 245, 248, 0.82);
      }

      .wrapup-chart-svg {
        width: 100%;
        height: 280px;
        display: block;
      }

.wrapup-chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.wrapup-chart-dot {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2;
}

.wrapup-chart-axis-label,
.wrapup-chart-axis-title {
  fill: rgba(242, 245, 248, 0.7);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.wrapup-chart-axis-title {
  font-size: 11px;
  text-transform: uppercase;
}

.wrapup-chart-tick {
  stroke: rgba(242, 245, 248, 0.35);
  stroke-width: 0;
}

.wrapup-chart-zero {
  stroke: rgba(242, 245, 248, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

.wrapup-chart-legend {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
        font-size: 16px;
      }

.wrapup-chart-legend span {
  letter-spacing: 0.04em;
}

.setlogger-session-utilities {display:flex;
    position: absolute;
    right: 0px;
    top: -1px;}

.setlogger-session-utilities-swap {background:url(/homepage/interior-images/button-setlogger-swap.svg); background-repeat: no-repeat; background-size: 16px; height: 20px; width: 20px;}
.setlogger-session-utilities-delay {background:url(/homepage/interior-images/button-setlogger-delay.svg); background-repeat: no-repeat; background-size: 16px; height: 20px; width: 20px; margin-left: 12px;}
.setlogger-session-utilities-skip {background:url(/homepage/interior-images/button-setlogger-skip.svg); background-repeat: no-repeat; background-size: 15px; background-position: center; height: 20px; width: 20px; margin-left: 12px;}
.setlogger-session-utilities-preview {background:url(/homepage/interior-images/button-setlogger-preview.svg); background-repeat: no-repeat; background-size: 14px; background-position: center; height: 20px; width: 20px; margin-left: 12px;}

.exercisedelay {background: url(/homepage/interior-images/skip-down.svg); background-repeat: no-repeat;     width: 23px;
    background-size: 15px;
    background-position: 50%;}