/* GRD visual finish. Presentation only: retain brand fonts, palette, routes,
   permissions, content and event targets. Inspired by compact dashboard layouts. */
.layout {
  --grd-space-section: 24px;
  --grd-radius-surface: 16px;
}
.layout .main-wrap { min-width: 0; }
.layout main { min-width: 0; }
.layout main > .page-head { gap: 20px; margin-bottom: 28px; align-items: flex-start; }
.layout .page-head h1 { line-height: 1.16; text-wrap: balance; }
.layout .page-head p { max-width: 64ch; line-height: 1.65; }
.layout main > .card,
.layout .profile-section,
.layout .grd-alert-card {
  border-radius: var(--grd-radius-surface);
  box-shadow: none;
}
.layout main > .card + .card { margin-top: var(--grd-space-section); }
.layout main .panel-pad { padding: 24px; }
.layout main :is(.btn, input, select, textarea) { border-radius: 10px; }
.layout main .btn { line-height: 1.4; }
.layout .field { gap: 8px; }
.layout .field > :is(input, select, textarea) { min-width: 0; max-width: 100%; }
.layout main .btn:focus-visible,
.layout aside .nav-btn:focus-visible {
  outline: 2px solid var(--lime, #d9f568);
  outline-offset: 3px;
}
.layout > aside .nav-btn { border-radius: 8px; line-height: 1.4; }
.layout .topbar { gap: 16px; }
.layout .topbar .crumb { line-height: 1.45; }
.layout .topbar > .user-menu { flex-shrink: 0; }
.layout .gym-today { padding: 28px; border-radius: var(--grd-radius-surface); }
.layout .gym-today h1 { margin-block: 20px 12px; text-wrap: balance; }
.layout .gym-today p { margin-block: 16px 24px; }
.layout .gym-calendar > summary { padding: 22px 24px; }
.layout .grd-marks-grid { gap: 32px; }
.layout .grd-mark-row > button { border-radius: 10px; padding: 14px 16px; }
.layout .grd-marks-description { margin-bottom: 20px; }
.layout [data-mark-request] { margin-top: 8px; margin-bottom: 0; }
.layout [data-mark-request] + p.sub {
  margin-top: 16px;
  margin-bottom: 0;
  line-height: 1.65;
}
/* Keep the two account actions separate without changing their handlers. */
.layout main .card:has(> [data-email-preference]) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 12px;
}
.layout main .card:has(> [data-email-preference]) > :is(h2, p) {
  flex-basis: 100%;
  margin: 0;
}
.layout main .card:has(> [data-email-preference]) > button { margin: 0; max-width: 100%; }
.layout details.grd-quick-guide { border-radius: var(--grd-radius-surface); }
.layout .grd-marks-note { line-height: 1.7; }
/* Match the online client: Montserrat text and GRD Display numerals. */
.layout .grd-attendance,
.layout .grd-attendance * {
  font-family: Montserrat, Arial, sans-serif;
}
.layout .grd-attendance .grd-attendance-day strong,
.layout .grd-attendance .grd-attendance-total strong {
  font-family: var(--display, "GRD Display", Impact, sans-serif);
  font-weight: 400;
}
/* Same title typography as .client-month-card h2; retain surface and spacing. */
.layout .grd-attendance .grd-attendance-hero h2 {
  font: 600 22px/1.3 Montserrat, Arial, sans-serif;
  letter-spacing: -.035em;
}
@media (max-width: 700px) {
  .layout .grd-attendance .grd-attendance-hero h2 { font-size: 20px; }
}
/* Keep the online monthly count in the same numeral family as its calendar. */
.layout.gym-client .client-month-total strong {
  font-family: var(--display, "GRD Display", Impact, sans-serif);
  font-weight: 400;
}
/* Online keeps its session calendar and monthly summary layout; surfaces only. */
.layout.gym-client .gym-calendar {
  background: linear-gradient(160deg, #1b2018, #12160f);
  border-color: #d9f56830;
}
.layout.gym-client .client-month-card {
  background: linear-gradient(130deg, #d9f56816, #ffffff03),
    linear-gradient(160deg, #1b2018, #12160f);
  border-color: #d9f56830;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "heading" "total" "reminder" "footnote";
  gap: 12px;
}
.layout.gym-client .client-month-heading { grid-area: heading; }
.layout.gym-client .client-month-icon { display: none; }
.layout.gym-client .client-month-total { grid-area: total; margin: 4px 0; }
.layout.gym-client .client-month-reminder { grid-area: reminder; }
.layout.gym-client .client-month-footnote {
  grid-area: footnote;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 900px) {
  .layout.gym-client .client-month-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "heading total" "reminder total" "footnote total";
    column-gap: 40px;
    align-items: center;
  }
  .layout.gym-client .client-month-total { margin: 0; gap: 24px; }
  .layout.gym-client .client-month-total strong { font-size: 88px; }
}
.layout.gym-client .gym-calendar .calendar-day.is-today {
  background: #d9f56808;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #d9f56830;
}
/* One online training surface: monthly hero first, session calendar below. */
.layout.gym-client .client-training-overview {
  padding: 24px;
  min-width: 0;
  background: linear-gradient(160deg, #1b2018, #12160f);
  border-color: #d9f56830;
}
.layout.gym-client .client-training-overview > .client-month-card {
  margin: 0 0 24px;
}
.layout.gym-client .client-training-overview > .gym-calendar {
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.layout.gym-client .client-training-overview > .gym-calendar > summary {
  padding: 0 0 20px;
}
.layout.gym-client .client-training-overview .client-calendar .card-head {
  padding-inline: 0;
}
.layout.gym-client .client-training-overview .client-calendar .card-foot {
  padding-inline: 0;
}
@media (max-width: 700px) {
  .layout.gym-client .client-training-overview { padding: 16px; }
}

@media (min-width: 901px) {
  .layout .main-wrap > main { width: 100%; max-width: 1400px; margin-inline: auto; padding: 32px; }
  .layout > aside { padding-inline: 20px; }
  .layout > aside nav { gap: 6px; }
  .layout .topbar { padding: 16px 32px; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .layout .main-wrap > main { padding-inline: 24px; }
  .layout .topbar { padding-inline: 24px; }
}
@media (max-width: 700px) {
  .layout { --grd-space-section: 20px; --grd-radius-surface: 16px; }
  .layout .main-wrap > main { padding-inline: 16px; padding-top: 24px; }
  .layout main .panel-pad { padding: 20px; }
  .layout main > .page-head { margin-bottom: 24px; gap: 16px; }
  .layout .page-head h1 { font-size: clamp(26px, 7vw, 32px); }
  .layout .gym-today { padding: 24px 20px; }
  .layout .gym-today h1 { font-size: clamp(25px, 7vw, 30px); }
  .layout .gym-calendar > summary { padding: 20px; }
  .layout .grd-marks-grid { gap: 24px; }
  .layout main .card:has(> [data-email-preference]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .layout [data-email-preference],
  .layout [data-account-security="password"] {
    width: 100%;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }
  .layout .topbar { padding: 12px 16px; gap: 12px; min-height: 64px; }
  .layout.gym-client .topbar .crumb { min-width: 0; font-size: 11px; }
  .layout.gym-client .topbar .user-menu > summary { max-width: min(230px, 54vw); }
  .layout.gym-client .topbar .user-menu > summary > span:last-of-type { font-size: 12px; }
  /* Three balanced destinations, rather than a left-aligned oversized tab. */
  .layout.gym-client > aside nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    margin: 0;
  }
  .layout.gym-client > aside nav > .nav-btn {
    position: relative;
    display: grid;
    grid-template-rows: 20px minmax(28px, auto);
    justify-items: center;
    align-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: 6px 4px 8px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
  }
  .layout.gym-client > aside nav > .nav-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--grd-nav-icon) center / contain no-repeat;
    mask: var(--grd-nav-icon) center / contain no-repeat;
    opacity: .8;
  }
  .layout.gym-client > aside nav > .nav-btn:first-child {
    --grd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='3'/%3E%3Cpath d='M8 3v4m8-4v4M4 10h16m-12 5 2.5 2.5L16 12'/%3E%3C/g%3E%3C/svg%3E");
  }
  .layout.gym-client > aside nav > .nav-btn:nth-child(2) {
    --grd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16M8 15l4-5 4 3 4-7'/%3E%3C/g%3E%3C/svg%3E");
  }
  .layout.gym-client > aside nav > .nav-btn:nth-child(3) {
    --grd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 21v-2a7 7 0 0 1 14 0v2'/%3E%3C/g%3E%3C/svg%3E");
  }
  .layout.gym-client > aside nav > .nav-btn.active {
    color: var(--lime, #d9f568);
    background: #d9f5680d;
    border: 0;
  }
  .layout.gym-client > aside nav > .nav-btn.active::before { opacity: 1; }
  .layout.gym-client > aside nav > .nav-btn.active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  /* Safari already positions fixed elements in the dynamic viewport. Do not
     add the visual-viewport offset again or paint a tall opaque tail below it.
     Older engines retain the existing measured fallback in gym.635e8857f94c.css. */
  @supports (height: 100dvh) {
    .layout.gym-client > aside nav { bottom: 0; }
    .layout.gym-client > aside nav::after { content: none; height: 0; }
    .layout.gym-client .main-wrap > main {
      padding-bottom: calc(var(--grd-client-nav-height, calc(80px + env(safe-area-inset-bottom, 0px))) + 24px);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .layout :is(.nav-btn, .btn, summary) { transition: none; }
}