:root {

  --red:        #e63946;
  --red-soft:   #ff5a67;
  --red-deep:   #c2303c;
  --red-tint:   #ffe9eb;
  --bg:         #e4e7ef;
  --surface:    #ffffff;
  --surface-2:  #ffffff;
  --text:       #1d2230;
  --text-soft:  #5b6273;
  --border:     #e7e9f0;
  --shadow-sm:  0 2px 6px rgba(20,25,40,.06);
  --shadow-md:  0 10px 30px rgba(20,25,40,.10);
  --shadow-lg:  0 24px 60px rgba(20,25,40,.16);
  --radius:     16px;
  --radius-sm:  10px;
  --font-display: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
   STOP ANDROID INFLATING THE TEXT.

   Chrome on Android "boosts" font sizes inside blocks it judges to be wide
   columns of prose — a help meant for desktop sites viewed on a phone. It
   applies the boost to the TEXT but not to the box that was sized for the
   original text, so a paragraph grows, its container does not, and the page
   ends up wider than the screen. That is why a page can scroll sideways on
   a real phone and look perfect in a desktop window narrowed to the same
   width: desktop browsers never do this.

   100% means "use the size I wrote", which is what a responsive layout wants.
   --------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  max-width: 1100px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: nowrap; min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 44px; width: auto; max-width: 200px; border-radius: 10px;
  object-fit: contain; display: block;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .2s ease;
}
.brand:hover .brand-logo { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.brand-logo-placeholder {
  width: 48px; height: 48px;
  display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  letter-spacing: .5px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 1.05rem; }
.brand-tag { font-size: .76rem; color: var(--text-soft); letter-spacing: .3px; }
/* Kept for the public booking header, which still uses simple buttons. */
.header-nav { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }

/* ---- Main navigation (desktop) ---- */
/* THE NAV IS THE PART THAT GIVES WAY. It may shrink to nothing inside its
   own box, while the bell and avatar (.header-right, flex: 0 0 auto) can
   never be covered — a flex row with no shrink rule inside a nowrap header
   would run under the bell with six client links. The links move into the
   drawer at 900px, which is where six of them stop fitting. */
.main-nav {
  display: flex; align-items: center; gap: 4px; row-gap: 2px;
  flex: 1 1 0; min-width: 0;
  /* Links WRAP onto a second row rather than scrolling sideways with the
     scrollbar hidden — on the branch panel, which has the most tabs, hidden
     scrolling would leave the last ones invisibly "behind" the bell with no
     hint they existed. Every tab is always on screen, and the header simply
     grows a little when it has to. Below 900px the drawer takes over. */
  flex-wrap: wrap;
}
.nav-link {
  padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: .92rem;
  color: var(--text-soft); text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--red-tint); color: var(--red-deep); text-decoration: none; }
.nav-link.active { background: var(--red-tint); color: var(--red-deep); }

/* ---- Right cluster: bell + account ---- */
.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
  transition: background .15s ease;
}
.icon-btn:hover { background: var(--red-tint); color: var(--red-deep); }

/* ---- Account (avatar) menu ---- */
.user-wrap { position: relative; }
.user-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer; font-family: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
  max-width: 220px;
}
.user-btn:hover { border-color: var(--red); box-shadow: var(--shadow-sm); }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: inline-grid; place-items: center;
}
.user-avatar-ph {
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: #fff; font-weight: 700; font-size: .95rem;
}
.user-name {
  font-size: .88rem; font-weight: 600; color: var(--text);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-caret { font-size: .7rem; color: var(--text-soft); }

/* ---- Shared dropdown panel ---- */
.drop-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 6px; z-index: 80;
  display: none;
}
.drop-menu.open { display: block; }
.user-menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu-head strong { display: block; font-size: .92rem; overflow-wrap: break-word; }
.user-menu-head small { color: var(--text-soft); font-size: .78rem; }
.drop-item {
  display: block; padding: 10px 12px; border-radius: 9px;
  font-size: .9rem; font-weight: 500; color: var(--text); text-decoration: none;
}
.drop-item:hover { background: var(--red-tint); color: var(--red-deep); text-decoration: none; }
.drop-item-danger { color: var(--red-deep); }
.drop-divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* ---- Mobile hamburger + slide-out drawer ---- */
.nav-burger {
  display: none; width: 42px; height: 42px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); cursor: pointer; place-items: center;
}
.nav-burger:hover { background: var(--red-tint); color: var(--red-deep); }

.drawer-overlay {
  display: none; position: fixed; inset: 0; background: rgba(20,25,40,.42); z-index: 90;
}
.drawer-overlay.show { display: block; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); z-index: 95;
  background: var(--surface); box-shadow: var(--shadow-lg);
  transform: translateX(-102%); transition: transform .22s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
body.drawer-locked { overflow: hidden; }
.drawer-head {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-head .user-avatar { width: 42px; height: 42px; }
.drawer-head-text { min-width: 0; flex: 1; }
.drawer-head-text strong { display: block; font-size: .95rem; overflow-wrap: break-word; }
.drawer-head-text small { color: var(--text-soft); font-size: .78rem; }
.drawer-close { border: none; font-size: 1rem; }
.drawer-nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.drawer-link {
  display: block; padding: 13px 14px; border-radius: 10px;
  font-size: .95rem; font-weight: 600; color: var(--text); text-decoration: none;
}
.drawer-link:hover, .drawer-link.active { background: var(--red-tint); color: var(--red-deep); text-decoration: none; }

.site-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: auto;
  color: var(--text-soft);
  font-size: .85rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--text); font-size: 1rem;
}
.footer-logo { height: 38px; width: auto; max-width: 150px; object-fit: contain; border-radius: 8px; }

.footer-cols {
  display: flex; gap: 48px; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end;
}
.footer-col { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.footer-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); margin-bottom: 4px;
}
.footer-col address { font-style: normal; line-height: 1.65; }
.footer-col a { color: var(--text-soft); text-decoration: none; width: fit-content; }
.footer-col a:hover { color: var(--red); text-decoration: none; }

.footer-bottom {
  text-align: center; padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-soft);
}

@media (max-width: 700px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 26px; padding: 26px 20px 22px; }
  .footer-cols { justify-content: flex-start; gap: 26px; width: 100%; }
  .footer-col { min-width: 0; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform .12s ease, box-shadow .2s ease, background .2s; text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff;
  box-shadow: 0 6px 18px rgba(230,57,70,.32);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(230,57,70,.42); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--red-tint); border-color: var(--red); color: var(--red-deep); }
.btn-danger { background: #fff; border-color: var(--red); color: var(--red-deep); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-block { width: 100%; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px;
}
/* ---------------------------------------------------------------------------
   A CARD CARRIES ITS OWN SPACE BENEATH IT.

   An ADJACENT sibling rule (`.card + .card`) separates two cards only when
   nothing at all sits between them. Put a heading, a flash message, a <form>,
   an <hr> or any wrapper <div> between them and the margin vanishes: the two
   sections touch, edge to edge.

   So a card reserves the space itself, whatever follows it. Inside a grid or
   flex container the parent's `gap` already does the job, so the margin is
   removed there to avoid a double gap, and the last card in a container does
   not push a pointless gap against the bottom of the page.
   --------------------------------------------------------------------------- */
/* The grid wrappers the markup uses. `.grid grid-2` appeared in pages without
   ever being defined in the stylesheet, so its cards stacked flush against
   each other with no gap — one of the "sections touching" cases. */
.grid   { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* Not used yet; here so the set is complete */
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
/* A narrow list beside its open item (chat: the clients, then the conversation).
   Written on the page as fixed columns, it kept two columns on a phone and the
   conversation ran off the right edge; as a class, it stacks on narrow screens. */
.grid-side { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .grid-side { grid-template-columns: minmax(0, 1fr); } }

.card { margin-bottom: 20px; }
.card:last-child { margin-bottom: 0; }
.grid > .card, .grid-2 > .card, .grid-3 > .card, .grid-side > .card,
[class*="-grid"] > .card, .table-wrap > .card { margin-bottom: 0; }
.section-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 14px; }

/* =====================================================================
   three classes the markup uses. Without these rules each falls back to a
   browser default, and its screens look less finished than the rest.
   ===================================================================== */

/* THE PAGE HEADING. Used as the <h1> on nine screens — the kitchen panel,
   all three organization pages, the branch overview and its marketing page,
   the trainer's and the client's Order food, and the admin upgrade screen.
   With no rule it renders at the browser's default h1: around 2em with
   large default margins, noticeably bigger and further from its content
   than .section-title, which every other screen uses. */
.page-title {
  font-size: 1.5rem; font-weight: 800; line-height: 1.25;
  margin: 0 0 16px; color: var(--text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-width: 0; overflow-wrap: break-word;   /* Never split a title mid-word */
}
.page-title .pill, .page-title .muted { font-weight: 600; }

/* MONEY AND QUANTITY COLUMNS. .num marks the figures in admin accounting,
   branch accounting and the printable invoice: right-aligned, in tabular
   digits, because a column of money that does not line up cannot be scanned
   or added. */
table.data th.num,
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* THE PUBLIC BOOKING FOOTER. booking/_public_footer.php is the only footer
   that does not use .footer-cols; these rules give its two blocks the same
   shape as .footer-col, so the public pages and the panel end the same way. */
.footer-contact { line-height: 1.65; min-width: 0; }
.footer-contact strong { display: block; color: var(--text); font-size: 1rem; margin-bottom: 4px; }
.footer-links { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.footer-links a { color: var(--text-soft); text-decoration: none; width: fit-content; }
.footer-links a:hover { color: var(--red); text-decoration: none; }
@media (max-width: 700px) {
  .footer-links { min-width: 0; }
}
.muted { color: var(--text-soft); }
.empty-state { color: var(--text-soft); padding: 18px; text-align: center; font-style: italic; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.tab {
  padding: 10px 16px; border: none; background: none; cursor: pointer; font-family: inherit;
  font-weight: 600; color: var(--text-soft); border-bottom: 3px solid transparent; font-size: .92rem;
}
.tab:hover { color: var(--red); text-decoration: none; }
.tab.active { color: var(--red-deep); border-bottom-color: var(--red); }

/* Two-level admin nav: group row on top, that group's tabs beneath it. */
.tabs.tab-groups { margin-bottom: 0; border-bottom: none; gap: 4px; }
.tabs.tab-groups .tab {
  padding: 8px 14px; border-bottom: none; border-radius: 999px 999px 0 0;
  font-size: .88rem; text-transform: uppercase; letter-spacing: .04em;
}
.tabs.tab-groups .tab.active { background: var(--surface); color: var(--red-deep); box-shadow: 0 -1px 0 var(--border) inset; }
.tabs.tab-sub { margin-top: 0; padding: 2px 6px 0; background: var(--surface); border-radius: 0 12px 12px 12px; border: 1px solid var(--border); border-bottom-width: 1px; }
.tabs.tab-sub .tab { font-size: .9rem; }

/* Per-client tab bar on the trainer side: Overview | Plan | Adherence. */
.client-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }
.client-tabs a {
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px;
  font-weight: 600; font-size: .9rem; color: var(--text-soft); background: var(--surface);
}
.client-tabs a:hover { text-decoration: none; color: var(--red-deep); border-color: var(--red); }
.client-tabs a.active { background: var(--red); border-color: var(--red); color: #fff; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.field input, .field select, .field textarea {
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-family: inherit; font-size: .95rem;
  transition: border .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(230,57,70,.15);
}
.field textarea { resize: vertical; min-height: 90px; }
/* Every text box, select and textarea starts from the same look as a .field's.
   Only boxes inside a .field were styled, so one in a toolbar (the trainer's
   "Search clients by name"), a fold or the chat fell back to the browser's
   own thin grey box with 1px of padding, beside styled ones on the same row.
   :where() weighs nothing, so any page's own class still wins over this. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
              [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
       select, textarea) {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-size: .95rem;
}
:where(input, select, textarea):focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(230,57,70,.15); }
.hint { font-size: .76rem; color: var(--text-soft); overflow-wrap: break-word; }
/* An endpoint or a reference is one long word with nowhere to break. Let it. */
.hint code, .muted code, td code, .alert code { overflow-wrap: anywhere; word-break: break-all; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9rem; }
.alert-success { background: #e7f7ed; color: #1c7a43; border: 1px solid #b6e6c8; }
.alert-error { background: var(--red-tint); color: var(--red-deep); border: 1px solid #ffc9ce; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.data th { font-weight: 700; color: var(--text-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
/* A column is never allowed to crush its own text into a sliver. Cells
   keep at least a readable width and the .table-wrap scrolls instead. */
table.data td { min-width: 72px; }
table.data td:first-child { min-width: 110px; }
table.data tr:hover td { background: var(--red-tint); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* =====================================================================
   MODULAR LAYOUT COMPONENTS
   Reusable building blocks — new pages and features should use these
   instead of ad-hoc inline styles, so layouts stay consistent and
   nothing breaks when content grows.
   ===================================================================== */

/* A horizontal control bar (filters, search rows, button groups).
   Wraps neatly on small screens; every control keeps a sane minimum. */
.toolbar, .cal-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar > *, .cal-filters > * { min-width: 0; }
.toolbar select, .cal-filters select { min-width: 170px; }
.toolbar input[type="text"], .toolbar input[type="search"], .toolbar input[type="date"] { min-width: 170px; }
.toolbar .grow { flex: 1 1 220px; }
.cal-filters select {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); font-family: inherit; font-size: .86rem;
}

/* A row of buttons that wraps without misaligning. */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Vertical rhythm: consistent spacing between stacked blocks. */
.stack > * + * { margin-top: 14px; }

/* Per-row "Actions ▾" menu for tables — replaces piles of buttons.
   Reuses the global .drop-menu system from the header. */
.rowmenu { position: relative; display: inline-block; }
.rowmenu-panel { min-width: 185px; }
.rowmenu-panel form { display: block; margin: 0; }
.drop-item-btn {
  display: block; width: 100%; padding: 10px 12px; border: none; border-radius: 9px;
  background: none; text-align: left; font-family: inherit; font-size: .9rem;
  font-weight: 500; color: var(--text); cursor: pointer;
}
.drop-item-btn:hover { background: var(--red-tint); color: var(--red-deep); }
.drop-item-btn.drop-item-danger { color: var(--red-deep); }

/* Self-protecting defaults: content can never escape its container,
   whatever gets added later. */
.card { min-width: 0; }
.card img { max-width: 100%; }

/* The branch panel wraps its pages in .container inside .site-main, which
   already supplies the width and padding. These two properties mean it can
   never cause an overflow if it is ever nested in a flex or grid context. */
.container { width: 100%; min-width: 0; }
.form-grid > *, .kv > * { min-width: 0; }
.kv strong, .kv span, td, th { overflow-wrap: break-word; }
table.data td { vertical-align: middle; }

/* Dense tables (many columns): give them room and let .table-wrap scroll
   sideways rather than crushing every column. Add .table-wide to the
   .table-wrap around any table with 7+ columns. */
.table-wide table { min-width: 980px; }

.pagination { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; color: var(--text);
}
.pagination .current { background: var(--red); color: #fff; border-color: var(--red); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar input { flex: 1; min-width: 180px; }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); }
.avatar-lg { width: 110px; height: 110px; border-radius: 22px; }

.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(230,57,70,.18), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(230,57,70,.12), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 22px; padding: 34px 30px;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.login-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--red), var(--red-deep));
}
.login-logo { text-align: center; margin-bottom: 18px; }
.login-logo img { height: auto; max-height: 72px; width: auto; max-width: min(240px, 100%);   /* never wider than the card on a small phone */ border-radius: 14px; object-fit: contain; }
.login-logo .ph {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
}
.login-card h1 { text-align: center; font-size: 1.35rem; margin: 6px 0 2px; }
.login-card .sub { text-align: center; color: var(--text-soft); font-size: .86rem; margin-bottom: 22px; }
.login-card .field { margin-bottom: 14px; }

.fitness-page {
  --ac-bg:        #dde9e6;
  --ac-ink:       #0f2926;
  --ac-ink-2:     #1a2b29;
  --ac-muted:     #6b7c79;
  --ac-teal:      #0d9488;
  --ac-teal-deep: #0b7d72;
  --ac-cyan:      #0ea5b7;
  --ac-mint:      #7fe9dc;
  --ac-surface:   #ffffff;
  --ac-border:    #dce5e3;
  --ac-border-2:  #cfe6e1;
  --ac-hover:     #f7faf9;
  --ac-shadow:    0 10px 30px -20px rgba(15,41,38,.45);
  --ac-shadow-2:  0 12px 34px -22px rgba(13,148,136,.40);
  --ac-display:   'Barlow Condensed', 'Segoe UI', sans-serif;
  --ac-body:      'Inter', 'Segoe UI', system-ui, sans-serif;

  max-width: 1000px; margin: 0 auto;
  font-family: var(--ac-body);
  color: var(--ac-ink);
}
.fitness-page,
.fitness-page * { font-family: var(--ac-body); }

.fitness-page::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 460px at 0% 0%, rgba(13,148,136,.10), transparent 60%),
    radial-gradient(700px 460px at 100% 0%, rgba(14,165,183,.08), transparent 60%),
    var(--ac-bg);
}

.fitness-page .hero {
  position: relative; border-radius: 24px; padding: 32px 36px; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(130% 160% at 100% 0%, rgba(127,233,220,.30) 0%, transparent 45%),
    linear-gradient(135deg, #0f2926 0%, #0b5750 50%, #0d9488 100%);
  box-shadow: 0 18px 40px -22px rgba(13,41,38,.7);
  display: flex; align-items: center; gap: 26px; flex-wrap: nowrap;
  animation: rise .6s ease both;
}
.fitness-page .hero::after,
.fitness-page .hero::before { content: none; }
.fitness-page .hero-photo {
  flex: 0 0 auto;
  width: 96px; height: 96px; border-radius: 22px; object-fit: cover;
  border: 3px solid rgba(255,255,255,.85); box-shadow: 0 10px 26px -8px rgba(0,0,0,.5);
  position: relative; z-index: 1;
}
.fitness-page .hero-info { position: relative; z-index: 1; min-width: 0; flex: 1; }
.fitness-page .hero-photo-ph {
  display: grid; place-items: center; font-size: 2rem; font-weight: 800;
  background: rgba(255,255,255,.2); color: #fff;
}
.fitness-page .hero-info h1 {
  font-family: var(--ac-display); font-weight: 800; font-size: 44px;
  line-height: .96; margin: 0 0 12px; color: #fff; text-shadow: none;
  letter-spacing: .01em;
}
.fitness-page .hero-meta { display: flex; gap: 26px; flex-wrap: wrap; font-size: .9rem; }
.fitness-page .hero-meta div span {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ac-mint); font-weight: 700; opacity: 1;
}
.fitness-page .hero-meta div strong {
  font-family: var(--ac-display); font-weight: 600; font-size: 1.4rem; color: #fff;
}

.fitness-page .fitness-section { margin-top: 34px; }
.fitness-page .fitness-section h2 {
  font-family: var(--ac-display); font-weight: 700; font-size: 26px;
  margin: 0 0 16px; color: var(--ac-ink); display: flex; align-items: center; gap: 11px;
}
.fitness-page .fitness-section h2::before {
  content: ''; width: 5px; height: 24px; border-radius: 999px;
  background: linear-gradient(180deg, var(--ac-mint), var(--ac-teal));
  box-shadow: none; display: inline-block;
}

.fitness-page .metrics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 18px; margin-top: 8px;
}
/* The three groups (see fitness.php): rich cards two abreast, the four
   goal cards in one row where they fit, the plain ones packed tight. */
.fitness-page .metrics-grid-rich  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fitness-page .metrics-grid-goals { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fitness-page .metrics-grid-plain { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.fitness-page .metrics-group-title {
  margin: 22px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft, #6a7c79);
}
.fitness-page .metrics-group-title:first-of-type { margin-top: 4px; }
.fitness-page .trend.first { color: var(--text-soft, #6a7c79); font-weight: 600; }
.fitness-page .metric-card {
  --mc: var(--ac-teal);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mc) 6%, #fff) 0%, var(--ac-surface) 38%);
  border: 1px solid var(--ac-border); border-radius: 18px;
  padding: 20px 22px 18px 26px; box-shadow: var(--ac-shadow); position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease; animation: rise .5s ease both;
}
.fitness-page .metric-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 55%, #000));
  border-radius: 6px 0 0 6px;
}
.fitness-page .metric-card::after { content: none; }
.fitness-page .metric-card:hover { transform: translateY(-3px); box-shadow: var(--ac-shadow-2); }
.fitness-page .metric-card .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ac-muted); font-weight: 700;
}
.fitness-page .metric-card .value {
  font-family: var(--ac-display); font-size: 2.7rem; font-weight: 800;
  margin-top: 6px; color: var(--ac-ink); line-height: 1;
}
.fitness-page .metric-card .value small {
  font-size: .7rem; font-weight: 700; color: var(--mc); margin-left: 3px;
  text-transform: lowercase; letter-spacing: .02em;
}

.fitness-page .metric-card .trend-row {
  display: flex; align-items: baseline; gap: 6px; margin-top: 8px;
}
.fitness-page .metric-card .trend {
  font-weight: 800; font-size: .9rem; font-family: var(--ac-display); letter-spacing: .01em;
}
.fitness-page .metric-card .trend.good { color: #16a34a; }
.fitness-page .metric-card .trend.bad  { color: #dc2626; }
.fitness-page .metric-card .trend.neutral { color: var(--ac-muted); }
.fitness-page .metric-card .trend.same { color: var(--ac-muted); }
.fitness-page .metric-card .trend-cap { font-size: .68rem; color: var(--ac-muted); }

.fitness-page .metric-card.clickable { cursor: pointer; }
.fitness-page .metric-card.clickable:focus-visible { outline: 2px solid var(--ac-teal); outline-offset: 2px; }
.fitness-page .metric-card .info-dot {
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: var(--ac-muted); background: var(--ac-hover);
  border: 1px solid var(--ac-border); transition: all .15s;
}
.fitness-page .metric-card.clickable:hover .info-dot {
  color: #fff; background: var(--mc); border-color: var(--mc);
}
.fitness-page .metric-card .asof { font-size: .72rem; color: var(--ac-teal-deep); margin-top: 6px; }
.fitness-page .metric-card .stale { color: #d97706; font-weight: 800; }

.fitness-page .metric-card.metric-empty {
  border-style: dashed; background: #fafafa; opacity: .96;
}
.fitness-page .metric-card .value-empty { color: var(--ac-muted); }
.fitness-page .metric-card .empty-hint {
  margin-top: 8px; font-size: .72rem; line-height: 1.35;
  color: var(--ac-teal-deep); font-weight: 600;
}

.fitness-page .metric-card:nth-child(7n+1){ --mc:#0d9488; }
.fitness-page .metric-card:nth-child(7n+2){ --mc:#0ea5b7; }
.fitness-page .metric-card:nth-child(7n+3){ --mc:#0891b2; }
.fitness-page .metric-card:nth-child(7n+4){ --mc:#9333ea; }
.fitness-page .metric-card:nth-child(7n+5){ --mc:#ca8a04; }
.fitness-page .metric-card:nth-child(7n+6){ --mc:#16a34a; }
.fitness-page .metric-card:nth-child(7n+7){ --mc:#0d9488; }
.fitness-page .metric-card:nth-child(1){animation-delay:.02s}
.fitness-page .metric-card:nth-child(2){animation-delay:.06s}
.fitness-page .metric-card:nth-child(3){animation-delay:.10s}
.fitness-page .metric-card:nth-child(4){animation-delay:.14s}
.fitness-page .metric-card:nth-child(5){animation-delay:.18s}
.fitness-page .metric-card:nth-child(6){animation-delay:.22s}
.fitness-page .metric-card:nth-child(7){animation-delay:.26s}
.fitness-page .metric-card:nth-child(8){animation-delay:.30s}

.fitness-page .card {
  background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 20px;
  box-shadow: var(--ac-shadow); padding: 24px;
}
.fitness-page .empty-state { color: var(--ac-muted); font-style: italic; }

.fitness-page .chart-card {
  background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 20px;
  padding: 22px; box-shadow: var(--ac-shadow);
}
.fitness-page .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.fitness-page .chip {
  --chip-color: var(--ac-teal);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px 7px 12px; border-radius: 999px; border: 1.5px solid var(--ac-border);
  background: var(--ac-surface); cursor: pointer; font-size: .82rem; font-weight: 700;
  color: var(--ac-muted); user-select: none; transition: all .15s;
}
.fitness-page .chip::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--chip-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color) 22%, transparent);
}
.fitness-page .chip.on { background: var(--chip-color); border-color: var(--chip-color); color: #fff; }
.fitness-page .chip.on::before { background: #fff; box-shadow: none; }
.fitness-page .chart-holder { position: relative; height: 360px; }

.fitness-page .anthro-carousel { padding: 20px 22px 22px; }
.fitness-page .anthro-carousel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px;
}
.fitness-page .anthro-carousel-title { text-align: center; flex: 1; }
.fitness-page .anthro-eyebrow {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ac-teal-deep); font-weight: 700;
}
.fitness-page .anthro-when {
  display: block; font-family: var(--ac-display); font-weight: 700; font-size: 1.5rem; color: var(--ac-ink);
}
.fitness-page .carousel-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: none; background: var(--ac-ink); color: #fff; font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; transition: background .15s, transform .12s, opacity .15s;
}
.fitness-page .carousel-arrow:hover { background: var(--ac-teal); color: var(--ac-mint); }
.fitness-page .carousel-arrow:active { transform: scale(.94); }
.fitness-page .carousel-arrow:disabled { opacity: .3; cursor: default; background: var(--ac-ink); color: #fff; }

.fitness-page .anthro-slide[hidden] { display: none; }
.fitness-page .anthro-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fitness-page .anthro-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ac-muted); font-weight: 700; padding: 0 14px 10px;
  border-bottom: 2px solid var(--ac-border-2);
}
.fitness-page .anthro-table th.num,
.fitness-page .anthro-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fitness-page .anthro-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--ac-border); color: var(--ac-ink-2);
}
.fitness-page .anthro-table tbody tr:last-child td { border-bottom: none; }
.fitness-page .anthro-table tbody tr:hover td { background: var(--ac-hover); }
.fitness-page .anthro-table td.num {
  font-family: var(--ac-display); font-weight: 700; font-size: 1.15rem; color: var(--ac-ink);
}
.fitness-page .anthro-table td.num .u {
  font-family: var(--ac-body); font-size: .72rem; font-weight: 500; color: #9bb0ac; margin-left: 2px;
}

.fitness-page .viewer-3d {
  position: relative; width: 100%; max-width: 420px;
  /* A body is tall; so is the box. The instructions are OUTSIDE it, in
     .viewer-3d-bar below, so the buttons in the corners never sit on words. */
  aspect-ratio: 3 / 4; min-height: 420px;
  margin: 0 auto 0;
  border: 1px solid var(--ac-border); border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, #eefffd 0%, transparent 60%),
    linear-gradient(180deg, #f4faf9 0%, #e7f2f0 100%);
  touch-action: none;
  cursor: grab;
}

@supports not (aspect-ratio: 1) {
  .fitness-page .viewer-3d { height: 480px; }
}
.fitness-page .viewer-3d:active { cursor: grabbing; }
.fitness-page .viewer-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.fitness-page .viewer-3d-bar {
  max-width: 420px; margin: 0 auto 18px; padding: 6px 10px; text-align: center;
  font-size: .78rem; color: var(--text-soft, #6a7c79); border: 1px solid var(--ac-border, #dfe8e6);
  border-top: 0; border-radius: 0 0 12px 12px; background: #fff;
}
.fitness-page .viewer-3d-bar b { color: var(--ac-teal, #0d9488); }
/* The largest view: the box takes the window; Esc or the button returns. */
.fitness-page .viewer-3d.is-big {
  position: fixed; inset: 0; z-index: 1000; max-width: none; width: auto; height: auto;
  aspect-ratio: auto; margin: 0; border-radius: 0; background: #f6f8f8;
}
.fitness-page .viewer-3d-big {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  border: 1px solid var(--ac-border, #dfe8e6); background: #fff; color: var(--ac-teal, #0d9488);
  border-radius: 999px; padding: 5px 12px; font: 700 12px system-ui, sans-serif; cursor: pointer;
}
.fitness-page .anthro-row { cursor: pointer; }
.fitness-page .anthro-row:hover td { background: #f1f5f4; }
.fitness-page .anthro-row.is-on td { background: var(--ac-teal-tint, #e6f5f3); color: var(--ac-teal-deep, #0f766e); font-weight: 700; }
.fitness-page .viewer-3d-marks {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  border: 1px solid var(--ac-border, #dfe8e6); background: #fff; color: var(--ac-teal, #0d9488);
  border-radius: 999px; padding: 5px 12px; font: 700 12px system-ui, sans-serif; cursor: pointer;
}
.fitness-page .viewer-3d-marks.is-off { color: #6a7c79; background: #eef2f1; }
.fitness-page .viewer-3d-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 8px 12px; font-size: .72rem; color: var(--ac-muted);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.85));
  text-align: center; pointer-events: none;
}
.fitness-page .viewer-3d-loading {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font-size: .85rem; color: var(--ac-muted); font-style: italic;
}
.fitness-page .viewer-3d.is-ready .viewer-3d-loading { display: none; }
.fitness-page .viewer-3d.is-error .viewer-3d-loading { font-style: normal; color: #dc2626; }

.fitness-page .model-cta {
  margin: 6px auto 0; max-width: 360px; text-align: center;
  font-family: var(--ac-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ac-teal-deep); line-height: 1.25;
}

.fitness-page .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.fitness-page .carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ac-border-2); cursor: pointer;
  transition: transform .15s, background .15s;
}
.fitness-page .carousel-dot.active { background: var(--ac-mint); transform: scale(1.5); }

.fitness-page .bioage-empty { text-align: center; padding: 34px 26px; }
.fitness-page .bioage-empty-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.fitness-page .bioage-empty h3 {
  font-family: var(--ac-display); font-weight: 800; font-size: 1.6rem;
  color: var(--ac-ink); margin: 0 0 12px;
}
.fitness-page .bioage-empty p { color: var(--ac-ink-2); line-height: 1.6; max-width: 560px; margin: 0 auto 10px; }
.fitness-page .bioage-empty-cta {
  font-family: var(--ac-display); font-weight: 700; font-size: 1.1rem; color: var(--ac-teal-deep);
}

.fitness-page .bioage-empty.bioage-empty-compact { padding: 18px 22px; }
.fitness-page .bioage-empty-compact p { font-size: .98rem; margin: 0 auto 6px; max-width: 640px; }
.fitness-page .bioage-empty-compact .bioage-empty-cta { font-size: 1rem; margin-bottom: 0; }

.fitness-page .bioage-carousel { padding: 20px 22px 22px; }
.fitness-page .bioage-carousel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px;
}
.fitness-page .bioage-carousel-title { text-align: center; flex: 1; }
.fitness-page .bioage-slide[hidden] { display: none; }

.fitness-page .bioage-overall {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px;
  background: linear-gradient(135deg, var(--ac-teal) 0%, var(--ac-teal-deep) 60%, #0a6e64 100%);
  border-radius: 20px; padding: 26px 28px; color: #fff;
  box-shadow: var(--ac-shadow-2); margin-bottom: 18px; animation: rise .5s ease both;
}
.fitness-page .bioage-overall-main { flex: 1 1 260px; min-width: 220px; display: flex; flex-direction: column; }
.fitness-page .bioage-overall-eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  color: var(--ac-mint);
}
.fitness-page .bioage-overall-value {
  font-family: var(--ac-display); font-weight: 800; font-size: 2.8rem; line-height: 1; margin-top: 4px;
}
.fitness-page .bioage-overall-value small { font-size: 1rem; font-weight: 700; opacity: .85; }
.fitness-page .bioage-diff {
  align-self: flex-start; margin-top: 12px; padding: 6px 14px; border-radius: 999px;
  font-weight: 800; font-size: .95rem; font-family: var(--ac-display); letter-spacing: .01em;
  background: rgba(255,255,255,.16);
}
.fitness-page .bioage-diff.younger { background: #16a34a; color: #fff; }
.fitness-page .bioage-diff.older   { background: #e11d48; color: #fff; }
.fitness-page .bioage-diff.same    { background: rgba(255,255,255,.22); color: #fff; }
.fitness-page .bioage-overall-side {
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  text-align: right; min-width: 150px;
}
.fitness-page .bioage-chrono span {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ac-mint); font-weight: 700;
}
.fitness-page .bioage-chrono strong { font-family: var(--ac-display); font-weight: 700; font-size: 1.8rem; }
.fitness-page .bioage-asof { font-size: .78rem; opacity: .8; }
.fitness-page .bioage-overall-empty {
  flex: 1; text-align: center; font-style: italic; padding: 8px 0; color: rgba(255,255,255,.9);
}

.fitness-page .bioage-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
}
.fitness-page .bioage-card {
  --bc: var(--ac-muted);
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border); border-radius: 18px; padding: 16px 18px 14px;
  box-shadow: var(--ac-shadow); transition: transform .25s ease, box-shadow .25s ease;
  animation: rise .5s ease both;
}
.fitness-page .bioage-card:hover { transform: translateY(-3px); box-shadow: var(--ac-shadow-2); }
.fitness-page .bioage-card.younger { --bc: #16a34a; }
.fitness-page .bioage-card.older   { --bc: #e11d48; }
.fitness-page .bioage-card.same    { --bc: var(--ac-teal); }

.fitness-page .bioage-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 12px; padding-right: 22px;   /* Clear of the info dot */
}
.fitness-page .bioage-card-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ac-muted); font-weight: 700;
}
/* How much this system counts towards the overall figure. On the card rather
   than in the tooltip: eight equal-looking tiles imply eight equal things,
   and these range from 5% to 20%. */
.fitness-page .bioage-card-weight {
  font-size: 9.5px; font-weight: 700; color: var(--ac-muted);
  background: var(--ac-hover); border: 1px solid var(--ac-border);
  border-radius: 20px; padding: 2px 7px; white-space: nowrap;
}

/* The gap leads. It is the only figure on this card that means anything
   without the reader doing arithmetic first. */
.fitness-page .bioage-card-delta {
  font-family: var(--ac-display); font-size: 2.5rem; font-weight: 800;
  line-height: 1; color: var(--bc);
}
.fitness-page .bioage-card-delta.plain { color: var(--ac-ink); }
.fitness-page .bioage-card-delta small { font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.fitness-page .bioage-card-abs {
  font-size: .78rem; color: var(--ac-muted); margin-top: 3px; font-weight: 600; line-height: 1.4;
}

/* Where this system sits: left younger, right older, tick at their real age.
   The point of it is the COLUMN — eight dots read as a pattern in one glance,
   which eight numbers never do. */
.fitness-page .bioage-axis { position: relative; height: 26px; margin-top: 14px; }
.fitness-page .bioage-axis-line {
  position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, #16a34a 28%, #fff),
    var(--ac-hover) 50%,
    color-mix(in srgb, #e11d48 28%, #fff));
}
.fitness-page .bioage-axis-zero {
  position: absolute; top: 5px; left: 50%; width: 2px; height: 16px;
  background: var(--ac-muted); opacity: .5; transform: translateX(-1px);
}
.fitness-page .bioage-axis-dot {
  position: absolute; top: 5.5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bc); border: 3px solid #fff;
  box-shadow: 0 2px 7px rgba(15,41,38,.28); transform: translateX(-7.5px);
}
.fitness-page .bioage-axis-lbl {
  position: absolute; top: 22px; font-size: 9px; color: var(--ac-muted);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.fitness-page .bioage-axis-lbl.l { left: 0; }
.fitness-page .bioage-axis-lbl.r { right: 0; }

.fitness-page .bioage-card .info-dot {
  position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1;
  color: var(--ac-muted); background: var(--ac-hover); border: 1px solid var(--ac-border); transition: all .15s;
}
.fitness-page .bioage-card:hover .info-dot { color: #fff; background: var(--bc); border-color: var(--bc); }
.fitness-page .bioage-card.clickable:focus-visible { outline: 2px solid var(--ac-teal); outline-offset: 2px; }

/* The measurements themselves, printed under the age cards as one plain run
   of label/value pairs — no grouping, no hierarchy, just the numbers. */
.fitness-page .bioage-results { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ac-border); }
.fitness-page .bioage-results-title {
  margin: 0 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ac-muted); font-weight: 700;
}
.fitness-page .bioage-results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px;
}
.fitness-page .bioage-result {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border: 1px solid var(--ac-border); border-radius: 12px;
  background: var(--ac-surface);
}
.fitness-page .bioage-result-label { font-size: .74rem; color: var(--ac-muted); font-weight: 600; }
.fitness-page .bioage-result-value {
  font-family: var(--ac-display); font-size: 1.15rem; font-weight: 700; color: var(--ac-ink); line-height: 1.2;
}
.fitness-page .bioage-result-value small { font-size: .62rem; font-weight: 600; color: var(--ac-muted); margin-left: 2px; }

.fitness-page table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fitness-page table.data th {
  font-family: var(--ac-body); font-weight: 700; color: var(--ac-muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  padding: 0 12px 10px; border-bottom: 2px solid var(--ac-border-2); text-align: left;
}
.fitness-page table.data td { padding: 12px; border-bottom: 1px solid var(--ac-border); }
.fitness-page table.data tr:hover td { background: var(--ac-hover); }
.fitness-page .pagination .current { background: var(--ac-teal); border-color: var(--ac-teal); color: #fff; }
.fitness-page .btn-ghost:hover { background: #e8f6f3; border-color: var(--ac-teal); color: var(--ac-teal-deep); }

.fitness-page ~ .modal-backdrop .modal h3 { font-family: var(--ac-display); font-weight: 700; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .fitness-page *, .fitness-page *::before, .fitness-page *::after { animation: none !important; transition: none !important; }
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,12,20,.55); display: none;
  align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--surface); border-radius: 20px; max-width: 560px; width: 100%;
  max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lg); padding: 26px;
}
.modal h3 { margin-top: 0; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: .9rem; }
.kv div span { color: var(--text-soft); display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; }

/* The same class on a <ul> is a label/value list: opening hours, contact
   details, closures. One tidy row per line, label left, value right. */
ul.kv { display: block; list-style: none; margin: 0; padding: 0; }
ul.kv li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border);
}
ul.kv li:last-child { border-bottom: 0; }
ul.kv li span {
  color: var(--text-soft); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .4px; flex: none;
}
ul.kv li strong { font-weight: 600; text-align: right; overflow-wrap: break-word; }

.rte {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2);
}
.rte-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.rte-btn {
  min-width: 32px; height: 30px; padding: 0 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; font-size: .85rem; font-family: inherit; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: all .12s;
}
.rte-btn:hover { background: var(--red-tint); border-color: var(--red); color: var(--red-deep); }
.rte-btn:active { transform: scale(.95); }
.rte-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.rte-editor {
  min-height: 140px; padding: 14px 16px; font-size: .95rem; line-height: 1.6;
  color: var(--text); outline: none; overflow-y: auto; max-height: 420px;
}
.rte-editor:empty::before {
  content: attr(data-placeholder); color: var(--text-soft); pointer-events: none;
}
.rte-editor:focus { box-shadow: inset 0 0 0 2px var(--red-tint); }
.rte-editor p { margin: 0 0 10px; }
.rte-editor h3 { font-size: 1.1rem; margin: 4px 0 8px; }
.rte-editor ul, .rte-editor ol { margin: 0 0 10px; padding-left: 22px; }
.rte-editor a { color: var(--red-deep); }

.fitness-page .rec-content { line-height: 1.65; color: var(--ac-ink-2); }
.fitness-page .rec-content p { margin: 0 0 12px; }
.fitness-page .rec-content p:last-child { margin-bottom: 0; }
.fitness-page .rec-content h3, .fitness-page .rec-content h4 {
  font-family: var(--ac-display); color: var(--ac-ink); margin: 6px 0 10px;
}
.fitness-page .rec-content ul, .fitness-page .rec-content ol { margin: 0 0 12px; padding-left: 22px; }
.fitness-page .rec-content li { margin-bottom: 4px; }
.fitness-page .rec-content a { color: var(--ac-teal-deep); font-weight: 600; }
.fitness-page .rec-content blockquote {
  margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid var(--ac-mint); color: var(--ac-muted);
}

/* Links go into the drawer earlier than the phone breakpoint: six links
   plus a logo plus the bell do not fit at 800px either. */
@media (max-width: 900px) {
  .nav-burger { display: grid; }
  .main-nav { display: none; }
}

@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .site-main { padding: 20px 14px 48px; }

  .header-inner {
    padding: 8px 12px; gap: 10px; flex-wrap: nowrap; align-items: center; min-height: 58px;
  }
  /* Logo may shrink so it can never push over the buttons. */
  .brand { gap: 9px; flex: 0 1 auto; min-width: 0; }
  .brand-logo, .brand-logo-placeholder {
    height: 36px; width: auto; max-width: 120px; flex: 0 1 auto;
    object-fit: contain;
  }
  /* …and it really shrinks: with its height fixed its width could not give
     way, and the buttons beside it covered half of it ("lphaca"). Scaled as a
     whole, never cropped — the logo is the site's own file and may be any
     shape. */
  img.brand-logo { height: auto; max-height: 36px; min-width: 0; max-width: min(120px, 100%); }
  /* On phones: hamburger + logo on the left, bell + avatar on the right.
     The page links move into the slide-out drawer. */
  .header-right { gap: 6px; }
  .user-name, .user-caret { display: none; }
  .user-btn { padding: 3px; border-radius: 50%; }
  .bell-wrap { flex: 0 0 auto; }
  /* Dropdowns never run off the edge of a small screen. */
  .drop-menu { max-width: calc(100vw - 24px); }
  /* The bell sits left of the avatar; nudge its panel right so the panel
     hugs the screen edge instead of clipping on the left. */
  /* A negative offset hangs the panel past the right edge of the page,
     which is exactly the kind of thing that makes a phone scroll sideways.
     On a narrow screen it is pinned inside both margins instead. */
  .bell-menu { right: 0; left: auto; width: min(320px, calc(100vw - 24px)); }

  /* Public booking header: the buttons stay on ONE row, right-aligned, and
     shrink to fit — wrapping put "Sign in" under "Book" at an odd indent. */
  .bk-public .header-inner { flex-wrap: nowrap; gap: 8px; }
  .bk-public .brand { flex: 0 1 auto; min-width: 0; }
  .header-nav { gap: 6px; flex: 0 0 auto; margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
  .header-nav .btn { padding: 7px 10px; font-size: .78rem; }

  /* Tab rows (admin & trainer dashboards) scroll sideways instead of
     stacking into several messy lines. */
  /* The strip stays inside the content box. Pulling it past its parent
     (a bleed to the edge) lines up only when the page padding is exactly
     14px — at the 420px breakpoint the padding is 12px, so it would hang
     past the right edge and make the whole document wider than the screen.
     A tab row that simply scrolls inside the content box looks the same and
     can never widen the page. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; max-width: 100%;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }
  /* More tabs past an edge: that edge fades (the header's script sets the class). */
  .tabs.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
  .tabs.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
  .tabs.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
}

@media (max-width: 760px) {
  .fitness-page .hero {
    padding: 24px 22px; gap: 18px;
    flex-direction: row; align-items: center; text-align: left;
  }
  .fitness-page .hero-photo { width: 76px; height: 76px; border-radius: 18px; }
  .fitness-page .hero-info { width: auto; }
  .fitness-page .hero-info h1 { font-size: 30px; }
  .fitness-page .hero-meta { gap: 16px 22px; }

  /*
     THE HERO ON A NARROW SCREEN.

     Four things fight for one row here — portrait, name, the meta figures
     and the trainer — and on a phone they would wrap into a jumble with
     the trainer stranded mid-line. Below 760px the block becomes a column:
     the person at the top, their figures beneath, and the trainer on their
     own line with a rule above them, which is also the reading order
     somebody actually wants.
  */
  .fitness-page .hero { flex-wrap: wrap; }
  .fitness-page .hero-meta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
  .fitness-page .hero-trainer {
    width: 100%;
    margin-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .fitness-page .hero-trainer img,
  .fitness-page .hero-trainer .hero-photo-ph { order: -1; }
  /*
     A FIXED NUMBER OF COLUMNS ON A PHONE.

     Not repeat(auto-fill, minmax(140px, 1fr)): that gives two columns on a
     narrow handset and THREE on a wide one — while the rich cards
     (.comp-card, .has-goal) are declared "grid-column: span 2". Two out of
     three columns is not a row: it leaves a third of the line empty, the
     next card drops into the hole, and the result is a ragged layout where
     some cards fill the width and some do not.

     Two columns exactly, so "span 2" means the whole row and nothing has to
     guess. The three group classes are named explicitly rather than relying
     on this rule sitting later in the file than .metrics-grid-rich and
     friends — they have identical specificity, so that would be a source-order
     tie-break, which is the kind of thing that breaks silently the next time
     the stylesheet is reordered.

     minmax(0, 1fr) rather than 1fr: a grid track's default minimum is its
     content, so one long unbroken figure would otherwise push the column
     wider than the screen and put the whole page into sideways scroll.
  */
  .fitness-page .metrics-grid,
  .fitness-page .metrics-grid-rich,
  .fitness-page .metrics-grid-goals,
  .fitness-page .metrics-grid-plain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }
  /* 1 / -1 is "the whole row, whatever the column count", which stays right
     if the count above ever changes again. */
  .fitness-page .metrics-grid .metric-card.comp-card,
  .fitness-page .metrics-grid .metric-card.has-goal {
    grid-column: 1 / -1;
  }
  /* Less padding: 26px left and 22px right out of a half-screen column
     leave the label and the number fighting over what is left. */
  .fitness-page .metric-card { padding: 16px 15px 14px 19px; }
  .fitness-page .anthro-carousel { padding: 16px; }
  .fitness-page .bioage-carousel { padding: 16px; }
  .fitness-page .bioage-overall { padding: 20px; gap: 14px; }
  .fitness-page .bioage-overall-value { font-size: 3.4rem; }
  .fitness-page .bioage-overall-side { text-align: left; min-width: 0; }
  .fitness-page .bioage-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Two columns leaves the axis too narrow for its end labels to sit apart,
     so they go and the tick mark carries the meaning on its own. */
  .fitness-page .bioage-axis-lbl { display: none; }
  .fitness-page .bioage-axis { height: 18px; }
  .fitness-page .bioage-card-delta { font-size: 2.1rem; }
  .fitness-page .bioage-results-grid { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
}
@media (max-width: 420px) {
  /* ONE COLUMN. Below this a two-column card is about 150px wide before its
     own padding, which is not enough for a label, a value and a unit without
     something wrapping awkwardly. Every card fills the width instead, which
     is also what makes the rich cards and the plain ones agree. */
  .fitness-page .metrics-grid,
  .fitness-page .metrics-grid-rich,
  .fitness-page .metrics-grid-goals,
  .fitness-page .metrics-grid-plain {
    grid-template-columns: minmax(0, 1fr);
  }
  .fitness-page .hero-info h1 { font-size: 28px; }
  .fitness-page .bioage-grid { grid-template-columns: 1fr; }
  .fitness-page .bioage-axis-lbl { display: block; }
  .fitness-page .bioage-axis { height: 26px; }
  .fitness-page .bioage-results-grid { grid-template-columns: 1fr; }
  .fitness-page .bioage-overall-value { font-size: 3rem; }
}

.fitness-page .report-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px;
  justify-content: flex-end;
}

.fitness-page .actions-menu { position: relative; display: inline-block; }
.fitness-page .actions-toggle .caret { font-size: .8em; margin-left: 2px; }
.fitness-page .actions-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px; background: var(--ac-surface);
  border: 1px solid var(--ac-border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,41,38,.18);
  padding: 8px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.fitness-page .actions-menu.open .actions-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.fitness-page .actions-form { margin: 0; }
.fitness-page .actions-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--ac-ink);
  padding: 10px 12px; border-radius: 9px;
  text-decoration: none; line-height: 1.3;
}
.fitness-page .actions-item:hover { background: var(--ac-hover, #eef4f3); }
.fitness-page .actions-disabled {
  color: var(--ac-muted); cursor: not-allowed; opacity: .6;
}
.fitness-page .actions-disabled:hover { background: none; }
.fitness-page .actions-divider {
  height: 1px; background: var(--ac-border); margin: 6px 4px;
}

/* The ESTIMATED composition card. Deliberately quieter than the measured one
   beside it: a dashed edge and a muted wash, so the eye reads "derived" before
   it reads the number. Sharing the .comp-card shape keeps the two comparable
   at a glance while never letting them look interchangeable. */
.fitness-page .metric-card.comp-estimate {
  --mc: #7c8b98;
  border-style: dashed;
  background: linear-gradient(180deg, #f7f9fa 0%, var(--ac-surface) 45%);
}
.fitness-page .comp-est-tag {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #64748b; background: #eef2f5; border: 1px solid #dde5ea;
  border-radius: 20px; padding: 2px 7px;
}
.fitness-page .comp-est-foot {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--ac-border);
  font-size: .76rem; line-height: 1.45; color: var(--ac-muted);
}
.fitness-page .comp-est-why {
  margin-top: 10px; font-size: .82rem; line-height: 1.5; color: var(--ac-muted);
  padding-right: 22px;   /* Clear of the info dot */
}
.fitness-page .comp-estimate .comp-part-value { color: #47606d; }
.fitness-page .comp-estimate .comp-lean .comp-part-value,
.fitness-page .comp-estimate .comp-fat .comp-part-value { color: #47606d; }
.fitness-page .comp-estimate .comp-bar-lean { background: linear-gradient(90deg, #7aa8a2, #9cc4bf); }
.fitness-page .comp-estimate .comp-bar-fat  { background: linear-gradient(90deg, #d6bd7a, #e2cf9c); }

/* =====================================================================
   the client's own weigh-in box on the fitness page.

   A form inside a chart card, so it has to sit as one tidy row on a desktop
   and stack cleanly on a phone rather than leaving a stranded button.
   ===================================================================== */
.fitness-page .wt-form { margin: 0 0 4px; }
.fitness-page .wt-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.fitness-page .wt-field { flex: 1 1 150px; min-width: 0; }
.fitness-page .wt-field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ac-muted); font-weight: 700; margin-bottom: 6px; display: block;
}
.fitness-page .wt-field input {
  width: 100%; padding: 11px 13px; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--ac-border); border-radius: var(--radius-sm);
  background: var(--ac-surface); color: var(--ac-ink);
}
.fitness-page .wt-field input:focus {
  outline: none; border-color: var(--ac-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-teal) 18%, transparent);
}
/* Flex: 0 0 auto so the button keeps its own width and never stretches to
   the width of the two inputs beside it. */
.fitness-page .wt-submit { flex: 0 0 auto; }
.fitness-page .wt-hint { margin: 10px 0 0; line-height: 1.5; }
.fitness-page .wt-undo { margin: 8px 0 0; }
.fitness-page .wt-holder {
  height: 300px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--ac-border);
}
.fitness-page .wt-key {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 12px; font-size: .78rem; color: var(--ac-muted); font-weight: 600;
}
.fitness-page .wt-key-item { display: inline-flex; align-items: center; gap: 7px; }
.fitness-page .wt-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none;
  border: 3px solid var(--ac-teal);
}
.fitness-page .wt-dot-measured { background: #fff; }
.fitness-page .wt-dot-self { background: var(--ac-teal); border-width: 1px; width: 9px; height: 9px; }

/* On a narrow screen the button takes its own full-width row rather than
   being squeezed beside a date picker it cannot fit next to. */
@media (max-width: 520px) {
  .fitness-page .wt-row { gap: 10px; }
  .fitness-page .wt-field { flex: 1 1 100%; }
  .fitness-page .wt-submit { flex: 1 1 100%; }
  .fitness-page .wt-submit .btn { width: 100%; }
  .fitness-page .wt-holder { height: 260px; }
}

.fitness-page .goals-wrap { margin-top: 24px; }
.fitness-page .goals-title {
  font-family: var(--ac-display); font-weight: 700; font-size: 20px;
  margin: 0 0 14px; color: var(--ac-ink); display: flex; align-items: center; gap: 10px;
}
.fitness-page .goals-title::before {
  content: '🎯'; font-size: 18px;
}
.fitness-page .goals-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
}
.fitness-page .goal-card {
  background: var(--ac-surface); border: 1px solid var(--ac-border);
  border-radius: 16px; padding: 16px 18px; box-shadow: var(--ac-shadow);
}
.fitness-page .goal-card.reached {
  border-color: #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, var(--ac-surface) 60%);
}
.fitness-page .goal-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;
}
.fitness-page .goal-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ac-muted); font-weight: 800;
}
.fitness-page .goal-pct {
  font-family: var(--ac-display); font-weight: 800; font-size: 1.1rem; color: var(--ac-teal);
}
.fitness-page .goal-card.reached .goal-pct { color: #16a34a; }
.fitness-page .goal-bar {
  height: 12px; border-radius: 999px; background: var(--ac-hover, #eef4f3);
  overflow: hidden; border: 1px solid var(--ac-border);
}
.fitness-page .goal-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ac-teal), var(--ac-mint));
  transition: width .6s ease;
}
.fitness-page .goal-card.reached .goal-bar-fill {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.fitness-page .goal-foot {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-size: .8rem; color: var(--ac-muted);
}
.fitness-page .goal-foot strong { color: var(--ac-ink); font-weight: 700; }

.fitness-page .metric-card.comp-card {
  grid-column: span 2;
  --mc: #0891b2;
}
.fitness-page .comp-split {
  display: flex; gap: 22px; margin-top: 10px; flex-wrap: wrap;
}
.fitness-page .comp-part {
  flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px;
}
.fitness-page .comp-part-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ac-muted); font-weight: 700;
}
.fitness-page .comp-part-value {
  font-family: var(--ac-display); font-size: 2.3rem; font-weight: 800;
  color: var(--ac-ink); line-height: 1;
}
.fitness-page .comp-part-value small {
  font-size: .62rem; font-weight: 700; margin-left: 2px;
  text-transform: lowercase; color: var(--mc);
}
.fitness-page .comp-part-trend { margin-top: 4px; }
.fitness-page .comp-lean .comp-part-value { color: #0d9488; }
.fitness-page .comp-fat  .comp-part-value { color: #ca8a04; }
.fitness-page .comp-bar {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  margin-top: 16px; border: 1px solid var(--ac-border);
}
.fitness-page .comp-bar-lean { background: linear-gradient(90deg, #0d9488, #2ec4b6); }
.fitness-page .comp-bar-fat  { background: linear-gradient(90deg, #eab308, #f4a261); }
.fitness-page .comp-bar-key {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: .72rem; color: var(--ac-muted); font-weight: 700;
}


/* ---- training zones + blood lactate -------------------------------------
   Two full-width cards under the metric tiles. The zones card is the one a
   client actually acts on: a threshold is a number, a zone is an
   instruction. Colours run cool to warm so the ordering reads without the
   labels being needed. */
.fitness-page .zones-card,
.fitness-page .lactate-card {
  background: var(--ac-surface); border: 1px solid var(--ac-border);
  border-radius: 18px; padding: 20px 22px; margin-top: 18px;
  box-shadow: var(--ac-shadow); animation: rise .5s ease both;
}
.fitness-page .zones-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.fitness-page .zones-head .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ac-muted); font-weight: 800;
}
.fitness-page .zones-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--ac-teal) 12%, #fff);
  color: var(--ac-teal); border: 1px solid color-mix(in srgb, var(--ac-teal) 30%, #fff);
}
.fitness-page .zone-row { display: flex; gap: 12px; padding: 9px 0; }
.fitness-page .zone-row + .zone-row { border-top: 1px dashed var(--ac-border); }
.fitness-page .zone-bar { width: 6px; border-radius: 6px; flex: none; }
/* Five bands, cool to warm, so the ordering reads without the labels. */
.fitness-page .zone-row.z1 .zone-bar { background: linear-gradient(180deg, #7dd3fc, #38bdf8); }
.fitness-page .zone-row.z2 .zone-bar { background: linear-gradient(180deg, #2ec4b6, #0d9488); }
.fitness-page .zone-row.z3 .zone-bar { background: linear-gradient(180deg, #a3b81a, #849c0d); }
.fitness-page .zone-row.z4 .zone-bar { background: linear-gradient(180deg, #eab308, #d97706); }
.fitness-page .zone-row.z5 .zone-bar { background: linear-gradient(180deg, #f4715f, #c1121f); }
.fitness-page .zone-meas {
  font-size: .66rem; font-weight: 800; color: var(--ac-teal);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 3px;
}
.fitness-page .zone-body { flex: 1; min-width: 0; }
.fitness-page .zone-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.fitness-page .zone-name { font-weight: 800; font-size: .95rem; }
.fitness-page .zone-range {
  font-weight: 800; font-size: .9rem; color: var(--ac-teal);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fitness-page .zone-note {
  font-size: .8rem; color: var(--ac-muted); margin-top: 2px; line-height: 1.45;
}
.fitness-page .zones-foot {
  margin-top: 12px; font-size: .78rem; color: var(--ac-muted);
  border-top: 1px solid var(--ac-border); padding-top: 10px;
}
.fitness-page .lac-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px;
}
.fitness-page .lac-cell {
  display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--ac-teal) 4%, #fff);
  border: 1px solid var(--ac-border); border-radius: 12px; padding: 10px 12px;
}
.fitness-page .lac-v {
  font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.fitness-page .lac-v small { font-size: .66rem; font-weight: 700; color: var(--ac-muted); margin-left: 2px; }
.fitness-page .lac-l {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ac-muted); font-weight: 700;
}
@media (max-width: 520px) {
  .fitness-page .zone-top { flex-direction: column; gap: 0; }
}

/* .comp-card needs no span rule here: the base rule three hundred lines
   above already sets it, and the real mobile behaviour is in the 760px and
   420px blocks further up, where the column COUNT is pinned and these cards
   are given 1 / -1. */

.fitness-page .metric-card.has-goal {
  grid-column: span 2;
}
.fitness-page .metric-card.has-goal.goal-reached {
  border-color: #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, var(--ac-surface) 55%);
}
.fitness-page .metric-goal { margin-top: 14px; }
.fitness-page .metric-goal-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px;
}
.fitness-page .metric-goal-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ac-muted); font-weight: 800;
}
.fitness-page .metric-goal-pct {
  font-family: var(--ac-display); font-weight: 800; font-size: 1.05rem; color: var(--ac-teal);
}
.fitness-page .metric-card.goal-reached .metric-goal-pct { color: #16a34a; }
.fitness-page .metric-goal-bar {
  height: 11px; border-radius: 999px; background: var(--ac-hover, #eef4f3);
  overflow: hidden; border: 1px solid var(--ac-border);
}
.fitness-page .metric-goal-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ac-teal), var(--ac-mint));
  transition: width .6s ease;
}
.fitness-page .metric-card.goal-reached .metric-goal-fill {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.fitness-page .metric-goal-foot {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: .78rem; color: var(--ac-muted);
}
.fitness-page .metric-goal-foot strong { color: var(--ac-ink); font-weight: 700; }

.fitness-page .metric-card .metric-badge {
  display: inline-block; margin-top: 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ac-teal-deep); background: color-mix(in srgb, var(--ac-teal) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--ac-teal) 30%, #fff);
  padding: 3px 9px; border-radius: 999px;
}

@media (max-width: 420px) {
  .fitness-page .metric-card.has-goal { grid-column: span 2; }
}

@media print {
  .no-print,
  .header-nav,
  .report-actions,
  .viewer-3d,
  .carousel-arrow,
  .carousel-dots,
  .chips,
  .pagination,
  .btn { display: none !important; }

  body { background: #fff !important; }
  .site-header { position: static !important; box-shadow: none !important; }
  .site-main { padding: 0 !important; }

  .site-header, .site-footer { display: block !important; }

  .fitness-page .hero {
    color: #0f2926 !important;
    background: none !important;
    border: 1px solid #cfe6e1 !important;
    box-shadow: none !important;
  }
  .fitness-page .hero-info h1 { color: #0f2926 !important; }
  .fitness-page .hero-meta div span { color: #0b7d72 !important; }
  .fitness-page .hero-meta div strong { color: #0f2926 !important; }

  .fitness-page .chart-holder { height: 320px !important; }
  .fitness-page .fitness-section,
  .fitness-page .goal-card,
  .fitness-page .metric-card,
  .fitness-page .bioage-slide { break-inside: avoid; page-break-inside: avoid; }

  .card, .chart-card, .metric-card, .goal-card { box-shadow: none !important; }

  .fitness-page .anthro-slide[hidden],
  .fitness-page .bioage-slide[hidden] { display: block !important; }
}

.phone-input { display: flex; gap: 8px; align-items: stretch; }
.phone-input .phone-cc {
  flex: 0 0 44%; min-width: 0;
  padding: 11px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: .92rem;
}
.phone-input .phone-local {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 1rem; letter-spacing: .4px;
}
@media (max-width: 480px) {
  .phone-input { flex-direction: column; }
  .phone-input .phone-cc { flex: 1 1 auto; }
}

.link-muted { color: var(--text-soft); font-size: .86rem; text-decoration: none; }
.link-muted:hover { text-decoration: underline; }

.login-card-wide { max-width: 620px; }

.terms-box {
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; margin: 6px 0 14px;
  background: var(--ac-hover, #f7faf9);
  font-size: .88rem; line-height: 1.65; text-align: left;
}
.terms-box h2, .terms-box h3, .terms-box h4 { margin: 0 0 8px; }
.terms-box p { margin: 0 0 10px; }
.terms-box ul, .terms-box ol { margin: 0 0 10px; padding-left: 20px; }

.check-line {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0; font-size: .9rem; line-height: 1.5; text-align: left; cursor: pointer;
}
.check-line input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }

/* A single tick-box with its label beside it. Used across the branch
   panel and the admin booking screens. */
.check {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .88rem; line-height: 1.45; font-weight: 500;
  cursor: pointer; padding: 3px 0; color: var(--text);
}
.check input[type="checkbox"] {
  margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--red);
}
.check:hover { color: var(--red-deep); }
.check-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 20px;
}

/* Rows that a table's Actions menu folds open. Was duplicated as an inline
   <style> block in two tabs; it belongs here so every table can use it. */
.pin-row.show { display: table-row !important; }

.alert-info {
  background: #e8f4fb; color: #0b5673; border: 1px solid #bfe1f2;
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .88rem;
}

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
  background: #eef1f5; color: #5b6273; border: 1px solid #e0e5ec;
  /* nowrap is right for a pill saying "paid" and wrong for the sentences
     that end up inside pills — "this kitchen has no payment way set up
     yet", a provider's missing-key message, a comma-joined list of countries.
     On a phone a nowrap sentence runs off the right edge of the card and the
     page grows a sideways scroll. Wrapping at spaces costs a short pill
     nothing (it never reaches the edge) and gives a long one two tidy lines
     instead of a clipped one. max-width stops it ever exceeding its cell. */
  white-space: normal; overflow-wrap: break-word; max-width: 100%;   /* Wrap at spaces, not mid-word */
  text-align: left; vertical-align: middle; line-height: 1.35;
}
.pill-ok   { background: #e7f7ed; color: #1c7a43; border-color: #b6e6c8; }
.pill-warn { background: #fff5e0; color: #8a5a00; border-color: #ffe0a3; }
.pill-bad  { background: #ffeaec; color: #a32330; border-color: #ffc9ce; }

.mini-title { font-size: .98rem; margin: 16px 0 8px; color: var(--text); }

.prov-box {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 12px 0; background: var(--ac-hover, #f7faf9);
}

/* WhatsApp channel manager */
.wa-ch-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.wa-ch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; background: var(--surface);
}
.wa-ch-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wa-ch-name { font-weight: 700; }
.wa-ch-prov { color: var(--text-soft); font-size: .85rem; }
.wa-ch-why { font-size: .78rem; }
.wa-ch-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-ch-addbar { margin-top: 12px; }

/* Number + unit on one line */
.input-suffix { display: flex; align-items: center; gap: 8px; }
.input-suffix input { max-width: 120px; }
.input-suffix span { color: var(--text-soft); font-size: .9rem; }

/* Let an input stretch inside a toolbar */
.grow { flex: 1 1 240px; min-width: 0; }

.subtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.subtab {
  padding: 8px 14px; border-radius: 8px 8px 0 0; text-decoration: none;
  color: var(--text-soft); font-size: .88rem; border: 1px solid transparent;
}
.subtab:hover { background: var(--ac-hover, #f7faf9); }
.subtab.active {
  background: var(--surface); color: var(--ac-teal, #0d9488);
  border-color: var(--border); border-bottom-color: var(--surface); font-weight: 600;
}

.bell-wrap { position: relative; display: inline-block; }
.bell-btn {
  position: relative; background: transparent; border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 9px; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center;
}
.bell-btn:hover { background: var(--ac-hover, #f7faf9); }
.bell-dot {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #d64550; color: #fff;
  font-size: .64rem; font-weight: 700; line-height: 17px; text-align: center;
}
.bell-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 10px);
  width: 320px; max-width: calc(100vw - 24px); background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); z-index: 80; overflow: hidden; padding: 0;
}
.bell-menu.open { display: block; }
.bell-head { padding: 11px 14px; font-weight: 600; font-size: .86rem; border-bottom: 1px solid var(--border); }
.bell-empty { padding: 18px 14px; color: var(--text-soft); font-size: .85rem; text-align: center; }
.bell-item {
  display: block; padding: 11px 14px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.bell-item:hover { background: var(--ac-hover, #f7faf9); }
.bell-item.unread { background: #f0f9ff; }
.bell-item-title { display: block; font-size: .85rem; line-height: 1.4; }
.bell-item-time { display: block; font-size: .72rem; color: var(--text-soft); margin-top: 3px; }
.bell-foot {
  display: block; padding: 10px 14px; text-align: center;
  font-size: .82rem; text-decoration: none; color: var(--ac-teal, #0d9488); font-weight: 600;
}
.bell-foot:hover { background: var(--ac-hover, #f7faf9); }

.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: #f0f9ff; border-radius: 8px; padding-left: 12px; padding-right: 12px; }
.notif-main { min-width: 0; }
.notif-title { font-weight: 600; font-size: .92rem; margin-bottom: 3px; }
.notif-body { font-size: .85rem; color: var(--text-soft); line-height: 1.5; }
.notif-meta { font-size: .74rem; color: var(--text-soft); margin-top: 5px; }

.prefs-table input[type="checkbox"] { width: 17px; height: 17px; }
.prefs-table td, .prefs-table th { vertical-align: middle; }

.login-book {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.login-book span {
  display: block;
  font-size: .82rem;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.alert-warn { background: #fff5e0; color: #8a5a00; border: 1px solid #ffe0a3; }

.ls-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--text); font-size: .9rem; cursor: pointer; }
.ls-switch input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.ls-days { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-day-chk { position: relative; }
.ls-day-chk input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ls-day-chk span {
  display: inline-block; min-width: 46px; text-align: center;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--text-soft);
  cursor: pointer; transition: .12s;
}
.ls-day-chk input:checked + span {
  background: var(--red); border-color: var(--red); color: #fff;
}
.ls-day-chk input:focus-visible + span { outline: 2px solid var(--red-soft); outline-offset: 2px; }

.ls-reminders {
  margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
}
.ls-rem-title { font-weight: 700; font-size: .86rem; margin-bottom: 10px; color: var(--text); }
.ls-rem-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center;
}
.ls-rem-mins { display: flex; align-items: center; gap: 8px; }
.ls-rem-mins input { width: 84px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); }

.ls-timeline { display: flex; flex-direction: column; gap: 2px; }
.ls-tl-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start;
  padding: 12px 8px; border-bottom: 1px solid var(--border);
}
.ls-tl-row:last-child { border-bottom: none; }
.ls-tl-time { font-weight: 800; font-size: 1.02rem; color: var(--red-deep); }
.ls-tl-body strong { font-size: .98rem; }
.ls-tl-past { opacity: .5; }
.ls-tl-past .ls-tl-time { color: var(--text-soft); }

.ls-cat-tag {
  display: inline-block; font-size: .72rem; font-weight: 700; color: var(--text-soft);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 9px; margin-right: 6px; white-space: nowrap;
}

.ls-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ls-week-day {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; background: var(--surface);
}
.ls-week-head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.ls-week-head strong { font-size: .96rem; }
.ls-week-item { display: flex; gap: 8px; font-size: .82rem; padding: 3px 0; align-items: baseline; }
.ls-week-time { font-weight: 700; color: var(--red-deep); min-width: 38px; }

.ls-row-off td { opacity: .55; }

.ls-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (max-width: 640px) {
  .ls-rem-grid { grid-template-columns: 1fr; }
  .ls-tl-row { grid-template-columns: 54px 1fr; gap: 10px; }
}

/* =========================================================================
   Global mobile safety net
   Stops sections, text and buttons from spilling outside the phone screen,
   and keeps button labels inside their buttons.
   ========================================================================= */

/* Never let anything force the page wider than the screen. */
/* `clip` where it exists. overflow-x:hidden makes the element a scroll
   container, which quietly breaks position:sticky inside it; `clip` cuts the
   overhang without that side effect. Browsers that do not know `clip` keep
   the `hidden` above it. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
*, *::before, *::after { box-sizing: border-box; }

/* Media and embeds shrink to fit. */
img, svg, video, canvas, iframe, table { max-width: 100%; }

/* Long words / links / codes wrap instead of pushing the layout wide. */
p, li, td, th, a, span, strong, small, label, h1, h2, h3, h4, .muted, .hint, code {
  overflow-wrap: break-word; word-wrap: break-word;
}

/* Buttons: how a label sits inside its button is rules.css's, part 2 (one home). */

/* A row of buttons wraps as a row, and never overlaps. */
.row-actions, .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-actions > *, .toolbar > * { min-width: 0; }

/* Inputs and selects never exceed their container. */
input, select, textarea { max-width: 100%; }
.field input, .field select, .field textarea { width: 100%; }

@media (max-width: 680px) {
  /* Content padding a touch tighter so cards use the full width. */
  .card { padding: 16px 14px; }
  .section-title { font-size: 1.08rem; }

  /* Toolbars, action rows and filter bars stack and wrap cleanly. */
  .toolbar, .row-actions, .cal-filters, .ls-controls { gap: 8px; }
  .toolbar input, .toolbar .grow, .grow { flex: 1 1 100%; min-width: 0; }
  /* a select fills the line it is on, beside a Filter button if there is one, so it
     lines up with the full-width search box above it instead of stopping short */
  .toolbar select { flex: 1 1 170px; }

  /* Any table becomes horizontally scrollable instead of overflowing. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /*
     THE FLOOR ONLY APPLIES WHERE THERE IS SOMETHING TO SCROLL.

     A 520px floor is right for a wide table inside .table-wrap, which
     scrolls. Applied to a table with NO wrapper it is the opposite of a
     safety net: the table overflows its card, html/body carry
     overflow-x: hidden, and the overhang is simply CUT OFF with no way to
     reach it. On a 380px phone that is about 160px of every unwrapped
     table gone — including the right-hand column, which on these tables is
     always the value: the appointment time on branch/booking_view.php, the
     address on branch/profile.php, the amounts on branch/accounting.php,
     and the Unit price field on the invoice-lines editor, which then cannot
     be seen or typed into at all.

     Scoping the floor to wrapped tables lets the seven unwrapped ones fall
     back to being fluid — they are two- to four-column key/value tables
     that fit a phone perfectly well — and keeps the scroll behaviour for
     the wide ones it was written for.
  */
  .table-wrap table.data { min-width: 520px; }

  /* May grow to fill a row, never shrink below its own label
     (shrinking is what pushed labels into the button's edge). */
  .row-actions .btn { flex: 0 0 auto; }

  /* Modal dialogs fit the screen. */
  .modal { width: calc(100vw - 28px); max-width: calc(100vw - 28px); }
}

@media (max-width: 420px) {
  .site-main { padding: 16px 12px 44px; }
  /* Full-width primary actions read better and can't overflow. */
  .login-book .btn, .btn-block { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Trainer permissions grid (Admin > Trainers) and organization cards
   --------------------------------------------------------------------------- */
.perm-box {
  margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px 16px; background: var(--surface-2);
}
.perm-box legend { font-weight: 700; font-size: .9rem; padding: 0 6px; color: var(--text); }

.perm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 20px;
}
.perm-grid .perm-group {
  display: flex; flex-direction: column; gap: 6px;
  border: 0; padding: 0; margin: 0; background: none;
}
.perm-group-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 2px;
}
.perm-item {
  display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; font-weight: 500;
  cursor: pointer; line-height: 1.35; padding: 2px 0;
}
.perm-item input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; accent-color: var(--red); }
.perm-item:hover { color: var(--red-deep); }

/* ---------------------------------------------------------------------------
   "Where you sit" banner, shown at the top of a staff dashboard.

   Two names, one set of rules, because the two halves of the system group
   their people differently and each screen should say which one it means:

     .org-banner   a trainer's organization
     .branch-banner   an examiner's branch

   Same for the small badge marking a colleague's client in a shared list:
   .org-tag on the trainer's list, .branch-tag on the examiner's.
   --------------------------------------------------------------------------- */
.org-banner,
.branch-banner {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); margin-bottom: 18px;
}
.org-banner-img,
.branch-banner-img {
  /* The whole banner, never a crop — see .bk-branch-banner img. */
  width: 100%; height: auto; max-height: 260px;
  object-fit: contain; object-position: center;
  background: var(--surface-2, #f4f7f6); display: block;
}
.org-banner-body,
.branch-banner-body { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.org-banner-logo,
.branch-banner-logo {
  width: 54px; height: 54px; border-radius: 12px; object-fit: cover;
  border: 2px solid var(--surface); box-shadow: var(--shadow-sm); background: var(--surface);
}
.org-banner-text strong,
.branch-banner-text strong { display: block; font-size: 1.02rem; }
.org-banner-text span,
.branch-banner-text span { color: var(--text-soft); font-size: .84rem; }

.org-tag,
.branch-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; background: var(--red-tint); color: var(--red-deep); margin-left: 6px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Read-only lifestyle plan.
   Shown to a trainer who may view a plan but not change it. The server
   rejects these actions too — this only keeps the controls out of the way.
   --------------------------------------------------------------------------- */
.plan-readonly form[data-allow-readonly="1"] button,
.plan-readonly form[data-allow-readonly="1"] input,
.plan-readonly form[data-allow-readonly="1"] select {
  pointer-events: auto; opacity: 1; cursor: pointer;
}

.plan-readonly form:not([data-allow-readonly="1"]) button,
.plan-readonly form:not([data-allow-readonly="1"]) input,
.plan-readonly form:not([data-allow-readonly="1"]) select,
.plan-readonly form:not([data-allow-readonly="1"]) textarea {
  pointer-events: none;
  opacity: .5;
  background: var(--surface-2);
  cursor: not-allowed;
}
/* Hide the "add" and "settings" panels outright — they are useless read-only. */
.plan-readonly .card:has(input[value="add_item"]),
.plan-readonly .card:has(input[value="occ_add"]),
/* the plan's own setup form only — the Goals & targets form beside it stays (its own permission) */
.plan-readonly form:has(input[value="save_schedule_settings"]) { display: none; }

/* ------------------------------------------------------------------ */
/* CHOOSING A TRAINER                                                  */
/* ------------------------------------------------------------------ */

/* A face, then the essentials, then everything else. With hundreds of
   trainers in a country the scan has to be fast, so each card gives the eye
   exactly three things before it decides to read on. */
.td-card { padding-top: 16px; }
.td-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.td-face {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  border: 2px solid var(--ac-border, #dfe8e6);
  background: var(--ac-tint, #e6f5f3);
}
.td-face-ph {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem; color: #0b7d72;
}
.td-who { flex: 1 1 200px; min-width: 0; }
.td-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.td-tag {
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--ac-tint, #e6f5f3); color: #0b7d72;
}

/* The narrow view: the card stacks, and nothing is allowed to overflow the
   frame, the state pill included. */
@media (max-width: 560px) {
  .td-head { gap: 10px; }
  .td-face { width: 52px; height: 52px; }
  .td-head .pill { order: 3; width: 100%; text-align: center; }
}

/* The notification and account menus on a narrow screen.

   Anchored to the right of a button near the screen edge, a 210px panel
   simply ran off the frame. On a phone it becomes a panel with real margins
   on both sides, so it can never sit outside the page whatever it contains. */
@media (max-width: 560px) {
  .drop-menu {
    position: fixed;
    left: 12px; right: 12px; top: auto;
    min-width: 0; width: auto;
    max-height: 70vh; overflow-y: auto;
  }
  .notif-item { padding-left: 10px; padding-right: 10px; }
}

/* A meal photograph in the web chat: big enough to recognise the plate,
   small enough not to take over the conversation. */
.vc-photo {
  display: block; max-width: 78%; border-radius: 12px;
  margin: 6px 0 6px auto; border: 1px solid var(--border);
}
.vc-cam { background: none; border: none; cursor: pointer; color: var(--ac-ink-2, #4a5f5b); padding: 6px; }
.vc-cam:hover { color: var(--teal-deep, #0b7d72); }

/* ---------------------------------------------------------------------
   on a phone the account menu behind the avatar and the slide-out
   drawer held the SAME links — profile, account, notifications, log out —
   so every one of them appeared twice on one screen. The drawer wins on
   mobile: it is reachable with a thumb and already lists the navigation
   too. The avatar stays as a plain, non-tappable face in the header.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .user-wrap { display: none; }
}

/* =====================================================================
   the fitness page: measurements that read as pairs, and a body
   you can move.
   ===================================================================== */

/* THE MEASUREMENTS. Each measurement is a label-and-number pair that stays
   together — not a label on the far left and its number on the far right
   with a hand's width of nothing between them — and the pairs flow into as
   many columns as the card can hold. Nothing scrolls sideways. */
.fitness-page .anthro-wrap { overflow: visible; }
.fitness-page .anthro-wrap .anthro-table { display: block; }
.fitness-page .anthro-wrap .anthro-table thead { display: none; }
.fitness-page .anthro-wrap .anthro-table tbody {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 26px;
}
.fitness-page .anthro-wrap .anthro-table tr {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--ac-border, #e6ecea);
}
.fitness-page .anthro-wrap .anthro-table td {
  border: none; padding: 0; min-width: 0;
}
.fitness-page .anthro-wrap .anthro-table td:first-child {
  flex: 1 1 auto; min-width: 0;
}
.fitness-page .anthro-wrap .anthro-table td.num { flex: 0 0 auto; white-space: nowrap; }

/* The Move / Turn toggle, beside the enlarge button. */
.fitness-page .viewer-3d-move {
  position: absolute; top: 10px; left: 96px; z-index: 3;
  border: 1px solid var(--ac-border, #dfe8e6); background: #fff; color: var(--ac-teal, #0d9488);
  border-radius: 999px; padding: 5px 12px; font: 700 12px system-ui, sans-serif; cursor: pointer;
}
.fitness-page .viewer-3d-move.on {
  background: var(--ac-teal, #0d9488); color: #fff; border-color: var(--ac-teal, #0d9488);
}

/* =====================================================================
   the WhatsApp channel list.

   One row per channel: a summary you can scan fifty of, and the channel's
   whole set-up folded inside it. Only the two actions that make sense at a
   glance sit on the row itself.
   ===================================================================== */
.wa-row {
  border: 1px solid var(--border); border-radius: 14px;
  margin-top: 10px; background: #fff;
}
.wa-row[open] { border-color: var(--ac-teal, #0d9488); box-shadow: 0 1px 3px rgba(13,148,136,.08); }
.wa-row-new { padding: 14px; border-color: var(--ac-teal, #0d9488); }
.wa-sum {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none;
  flex-wrap: wrap;
}
.wa-sum::-webkit-details-marker { display: none; }
.wa-sum:hover { background: var(--ac-hover, #f7faf9); border-radius: 13px; }
.wa-sum-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wa-sum-main strong { font-size: 1.02rem; }
.wa-sum-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wa-caret { color: var(--text-soft); font-size: .9rem; }
.wa-row[open] .wa-caret { transform: rotate(180deg); display: inline-block; }
.wa-body { padding: 0 14px 14px; border-top: 1px dashed var(--border); }
.wa-body > .form-grid:first-child { margin-top: 12px; }

/* The branch picker: searchable, because a clinic may have fifty branches
   and a multi-select of fifty is a scroll with no search and one stray
   click away from losing every choice. */
.br-pick { border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: var(--bg); }
.br-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.br-search { flex: 1 1 180px; min-width: 140px; }
.br-count { font-size: .78rem; white-space: nowrap; }
.br-list {
  max-height: 190px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px;
  background: #fff; border-radius: 8px; padding: 6px;
}
.br-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; font-size: .9rem; }
.br-item:hover { background: var(--ac-hover, #f7faf9); }
@media (max-width: 560px) {
  .wa-sum { align-items: flex-start; }
  .wa-sum-actions { width: 100%; }
  .wa-sum-actions form, .wa-sum-actions .btn { flex: 1 1 auto; }
}


/* The kitchen's delivery block — name, phone, address, map link. */
.kn-deliver { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--bg, #f6f9f8); font-size: .9rem; line-height: 1.5; }
.kn-deliver a { font-weight: 700; }

/* =====================================================================
   PAYMENT CHANNELS (Admin > Payments)

   The rows reuse .wa-row / .wa-sum / .wa-body from the channel list above:
   a collapsible row is a collapsible row, and giving payments a private copy
   of the same rules would mean fixing every spacing bug twice. Only what is
   genuinely different lives here — the country picker.
   ===================================================================== */
.pay-scope { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.cc-pick-wrap { margin: 8px 0 4px 26px; }
.cc-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 10px; padding: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  max-height: 260px; overflow-y: auto;
}
.cc-item { display: flex; align-items: center; gap: 7px; font-size: .88rem; padding: 3px 2px; cursor: pointer; }
.cc-item:hover { background: var(--ac-hover, #f7faf9); border-radius: 6px; }
.cc-item input { flex-shrink: 0; }
.pay-form .prov-box {
  border-left: 3px solid var(--ac-teal, #0d9488); padding-left: 12px; margin-top: 4px;
}
@media (max-width: 640px) {
  .cc-pick-wrap { margin-left: 0; }
  .cc-pick { grid-template-columns: 1fr; }
}
.pay-callbacks {
  margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border);
  border-radius: 12px; background: var(--bg);
}
.pay-callbacks input[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  background: #fff; cursor: text;
}
.pay-callbacks label { font-size: .78rem; font-weight: 700; display: block; }

/* =====================================================================
   MIXED ARABIC AND LATIN TEXT.

   Names, meal names, addresses and notes are typed in Arabic; the page is
   set up as English. Without help the browser lays each mixed string out by
   the page's direction: the Arabic letters come out in the right order (the
   Unicode algorithm sees to that) but the punctuation, numbers and Latin
   fragments around them land in the wrong places — "Ordered · دجاج مشوي — P
   45g" reads with its parts shuffled, and a trailing "(closed)" jumps to the
   front. voice_chat.css does the same for the voice chat; this does it for
   every element that carries somebody's text.

   `plaintext` makes each element choose its own direction from its first
   strong character, and nothing else: alignment stays as designed, so an
   Arabic name in a left-aligned cell is still left-aligned, just readable.
   ===================================================================== */
td, th, li, p, dd, dt, label, summary, option, h1, h2, h3, h4, h5,
input, textarea, .pill, .hint, .muted, .alert, .empty-state, .kv strong, .kv span,
.wa-sum-main strong, .drop-menu, .notif-item, .empty-state {
  unicode-bidi: plaintext;
}

/* The place picker on the booking front door and the food index. */
.geo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.geo-showing { font-size: .92rem; }
.geo-field { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.geo-field select { min-width: 160px; max-width: 100%; }
@media (max-width: 560px) {
  .geo-pick { flex-direction: column; align-items: stretch; }
  .geo-field { justify-content: space-between; }
  .geo-field select { min-width: 0; flex: 1; }
}
/* A country heading inside a data table (admin branch list). */
table.data tr.group-row td { background: var(--bg); font-size: .82rem; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-strong, var(--border)); }

/* ---- date fields shown as dd/mm/yyyy (assets/js/datefield.js) ---- */
/* `position: relative` so the hidden native input below is positioned
   against THIS box. Without it the absolute input resolved against a distant
   ancestor and, at full width, hung past the right edge of the page — the 35px
   that made the fitness page wider than the screen. */
.datefield { display: inline-flex; align-items: stretch; gap: 4px; max-width: 100%; position: relative; }
.datefield .datefield-text { min-width: 0; width: 8.5em; }
.datefield .datefield-text.is-invalid { border-color: #c0392b; background: #fff5f5; }
.datefield .datefield-pick { flex: 0 0 auto; padding: 0 .55em; border: 1px solid var(--border, #cfd8dc); border-radius: 6px; background: #fff; cursor: pointer; line-height: 1; }
/* The real <input type="date"> stays in the page so the calendar picker works,
   but it must never occupy space. The selector does NOT depend on the parent
   class: if the wrapper markup ever changes, or a stylesheet is served from a
   stale cache, an unstyled full-width date input is exactly what widens a
   page. !important because nothing should ever override this one. */
.datefield-native,
.datefield .datefield-native {
  position: absolute !important;
  left: 0; top: 0;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important; max-width: 1px !important;
  padding: 0 !important; border: 0 !important; margin: 0 !important;
  opacity: 0; pointer-events: none;
}
.field .datefield { width: 100%; }
.field .datefield .datefield-text { flex: 1 1 auto; width: auto; }

/* ---- list toolkit (assets/js/listkit.js) ---- */
.lk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.lk-bar .lk-q { flex: 1 1 200px; min-width: 160px; max-width: 420px; }
.lk-bar .lk-size { flex: 0 0 auto; min-width: 0; width: auto; }
.lk-bar .lk-count { color: var(--muted, #6b7a80); font-size: .85rem; margin-left: auto; white-space: nowrap; }
th.lk-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.lk-sortable:hover { text-decoration: underline; }
th.lk-sortable::after { content: '\2195'; opacity: .3; margin-left: 5px; font-size: .8em; }
th.lk-asc::after  { content: '\25B2'; opacity: .9; }
th.lk-desc::after { content: '\25BC'; opacity: .9; }

/* ---- action buttons inside table rows — one line, same height, tight ---- */
table.data td .row-actions, table.table td .row-actions { flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
table.data td .row-actions .btn, table.table td .row-actions .btn,
table.data td > .btn, table.table td > .btn,
table.data td .inline-form .btn, table.table td .inline-form .btn { margin: 0; white-space: nowrap; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
table.data td .inline-form, table.table td .inline-form,
table.data td form.inline-form, table.table td form.inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; vertical-align: middle; }
table.data td .inline-form + .inline-form, table.data td .btn + .btn, table.data td .btn + .inline-form, table.data td .inline-form + .btn,
table.data td .inline-form + a, table.data td a + .inline-form { margin-left: 6px; }
table.data td:has(> .btn), table.data td:has(> .row-actions), table.data td:has(> .inline-form),
table.table td:has(> .btn), table.table td:has(> .row-actions), table.table td:has(> .inline-form) { white-space: nowrap; }
table.data td .row-actions form, table.table td .row-actions form { margin: 0; display: inline-flex; }
/* Phones: the buttons may wrap, but stay full-width and equal, never ragged */
@media (max-width: 640px) {
  table.data td:has(> .btn), table.data td:has(> .row-actions), table.table td:has(> .btn), table.table td:has(> .row-actions) { white-space: normal; }
  table.data td .row-actions, table.table td .row-actions { flex-wrap: wrap; justify-content: flex-start; }
  table.data td .row-actions .btn, table.table td .row-actions .btn { flex: 1 0 auto; text-align: center; }   /* Grow, never shrink */
  .lk-bar .lk-count { margin-left: 0; width: 100%; }
}

/* ---- every table behaves the same, and nothing escapes its box ----

   `break-word`, not `anywhere`: `overflow-wrap: anywhere` lets the
   browser break a word at ANY character, and in a column squeezed narrow that
   renders text one letter per line — "vertical text" in the lists.
   `break-word` breaks a word only when the word alone cannot fit, and never
   splits ordinary words that could simply wrap at a space.

   The other half of the cure is room: a data table has a sensible minimum
   width and .table-wrap scrolls sideways, so columns are never crushed to the
   point where breaking is needed at all. */
table.data td, table.table td { overflow-wrap: break-word; word-break: normal; vertical-align: top; }
table.data td.nowrap, table.table td.nowrap, table.data th.nowrap { white-space: nowrap; }
table.data td .muted { overflow-wrap: break-word; }

/* Give columns room rather than crushing them; the wrapper scrolls. A table
   with few columns still fills its card because of width:100%. */
.table-wrap > table.data, .table-wrap > table.table { min-width: min(100%, 560px); }

/* Only a genuinely unbreakable string (a URL, a token, a long e-mail) may be
   split mid-character — and only those. */
table.data td a[href^="http"], table.data td code, table.data td .break-any,
table.table td a[href^="http"], table.table td code { overflow-wrap: anywhere; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.table th, table.table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.table th { font-weight: 700; color: var(--text-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-wrap > table { min-width: 100%; }
/* The toolkit bar sits flush with the table it controls */
.lk-bar { margin: 0 0 8px; }
.lk-bar .lk-q { padding: 7px 10px; }
.lk-bar .lk-size { padding: 7px 8px; }
.lk-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; font-size: .85rem; color: var(--muted, #6b7a80); }
.lk-pager .lk-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.lk-pager .lk-page { min-width: 32px; padding: 5px 8px; border: 1px solid var(--border, #dfe6e8); border-radius: 6px; background: #fff; cursor: pointer; font-size: .85rem; line-height: 1.2; }
.lk-pager .lk-page.is-current { background: var(--teal, #0e7c7b); color: #fff; border-color: transparent; font-weight: 700; }
.lk-pager .lk-page[disabled] { opacity: .4; cursor: default; }

/* ---- photo strips inside the panels (service photos, branch pictures) ---- */
.branch-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.branch-gallery figure { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.branch-gallery img {
  /* The whole photo, never a crop — same rule as the public pages */
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: contain; object-position: center; display: block;
  background: var(--surface-2, #f4f7f6);
}
.branch-gallery figcaption { font-size: .8rem; color: var(--text-soft); border-top: 1px solid var(--border); }
.branch-gallery .inline-form { margin: 0; display: inline-flex; }

/* ---------------------------------------------------------------------------
   NOTHING MAY BE WIDER THAN THE SCREEN.

   html/body already carry overflow-x: hidden, which HIDES an overhang but
   does not prevent it — and a hidden overhang still shifts the page, which is
   what makes content look narrower than the phone with a band of empty space
   at one edge. These rules stop the usual causes at source: fixed panels sized
   in viewport units, absolutely positioned menus hung past the edge, and
   grids whose minimum column is wider than a small phone.
   --------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .site-main, .container, .card, .toolbar, .form-grid, .stats-grid { max-width: 100%; min-width: 0; }
  /* Auto-fill grids whose minimum column is wider than a small phone: the
     minimum becomes "whichever is smaller, the screen or the design width",
     so a 300px column cannot force a 300px page on a 360px screen. Only the
     grids that actually declare such a minimum are touched. */
  .metrics-grid-rich, .metrics-grid-goals, .fd-grid, .fd-meals, .perm-grid, .check-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  }
  .bk-grid { grid-template-columns: 1fr; }
  /* Dropdowns and popovers stay inside both margins */
  .drop-menu, .bell-menu, .notif-menu { max-width: calc(100% - 24px); right: 0; }
}

/* ===========================================================================
   ONE VERTICAL RHYTHM FOR THE WHOLE SYSTEM.

   As with the cards, in the smaller pieces: a block that only has space
   when it happens to sit next to a sibling of the same kind, or a heading
   that runs straight into the thing above it, breaks as soon as other markup
   comes between. Each rule below is "reserve your own space", which
   survives any markup put in between.
   =========================================================================== */

/* Blocks that stack inside a card or a page. */
.alert, .empty-state, .table-wrap, .toolbar, .pagination, .lk-bar {
  margin-bottom: 14px;
}
.alert:last-child, .empty-state:last-child, .table-wrap:last-child,
.toolbar:last-child, .pagination:last-child { margin-bottom: 0; }

/* A heading that follows content needs air above it; the first one does not. */
.card > h2, .card > h3, .card > .section-title { margin-top: 22px; }
.card > h2:first-child, .card > h3:first-child, .card > .section-title:first-child,
.card > *:first-child + h2, .card > *:first-child + h3 { margin-top: 0; }

/* A form inside a card, and the divider some pages use between sections. */
.card > form + form { margin-top: 18px; }
.card > hr { margin: 22px 0; border: none; border-top: 1px solid var(--border); }

/* The public booking pages keep their own rhythm in booking.css. */

/* Nothing should sit flush against the bottom of the page. */
.site-main > :last-child, .container > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   the last of the flush edges, found by walking the rendered pages.
   --------------------------------------------------------------------------- */

/* The sub-tab strip sat directly on the card beneath it (Bookings, Payments,
   WhatsApp, Notifications). .tabs.tab-groups deliberately has no bottom margin
   because the strip below it is meant to join on — but the CARD below must
   still be given air. */
.tabs.tab-sub { margin-bottom: 20px; }
.subtabs { margin-bottom: 18px; }

/* A paragraph of explanation ran straight into the table or toolbar under it:
   the reset clears the browser's default paragraph margin, and nothing put it
   back for the loose paragraphs pages write above their content. */
.card > p, .container > p, .card > .muted, .container > .muted { margin: 0 0 12px; }
.card > p:last-child, .container > p:last-child { margin-bottom: 0; }

/* The calendar's toolbar row and the note under it. */
.cal-top { margin-bottom: 12px; }

/* The calendar's own stack: filters, the week grid, then the legend, each
   with space beneath it. (The two tab rows above them touch ON PURPOSE —
   the group row and the sub row form one connected strip.) */
.cal-filters     { margin-bottom: 12px; }
.cal-week-scroll { margin-bottom: 12px; }
.cal-legend      { margin-top: 0; }

/* A card heading followed straight by its empty state or its content. */
.ls-card-head { margin-bottom: 12px; }
.empty-state  { margin-top: 0; }