/* ============================================
   AEROBIC - shared by coach-hub and client-hub
   Type colors, dots and the one-round bar are the same everywhere.
   Then the client's aerobic exercise screen (client-aerobic.js).
============================================ */

/* ---------- type colors ---------- */
.xf-aer-swatch, .xf-aer-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.xf-aer-dot { margin-right: 5px; vertical-align: 0; }
.xf-aer-t-none { background: #d9d3ca; }
.xf-aer-t-light { background: #b9dcc7; }
.xf-aer-t-moderate { background: #f3c98b; }
.xf-aer-t-vigorous { background: #e79a8a; }
.xf-aer-t-rest { background: #fff; border: 1px dashed #a99f92; }

/* ---------- one round to scale ---------- */
.xf-aer-bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; border: 1px solid #e6dfd4; }
.xf-aer-bar span { display: block; height: 100%; }
.xf-aer-bar .xf-aer-t-rest { border: none; background: repeating-linear-gradient(45deg, #fff, #fff 3px, #eee7dc 3px, #eee7dc 6px); }

/* ---------- client aerobic exercise screen ---------- */
.aer-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8073; margin-top: 0.4rem; }
#aer-detail-panel { margin-top: 0.4rem; }
.aer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.aer-chip { background: #fff; border: 1px solid #ddd2eb; border-radius: 999px; padding: 4px 10px; font-size: 0.8rem; color: #4b3f5c; }
.aer-chip b { color: #3f3550; }
.aer-status { border-radius: 10px; padding: 7px 10px; font-size: 0.85rem; margin-bottom: 10px; background: #f2ede6; color: #4b3f5c; }
.aer-status-done { background: #e6f4ec; color: #24704d; font-weight: 600; }
.aer-status-partial { background: #fdf0dc; color: #8a5a12; }
.aer-plan { background: #fff; border: 1px solid #eee6da; border-radius: 12px; padding: 4px 12px; margin-bottom: 12px; }
.aer-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.92rem; color: #333; }
.aer-row + .aer-row { border-top: 1px solid #f0ebe3; }
.aer-type { color: #8a8073; font-size: 0.78rem; margin-left: 6px; }
.aer-time { font-variant-numeric: tabular-nums; color: #4b3f5c; font-weight: 600; }
.aer-repeat { font-size: 0.8rem; color: #8a8073; padding: 7px 0 9px; border-top: 1px solid #f0ebe3; }
.aer-bar-card { padding: 10px 12px; margin-top: 12px; }
.aer-bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: #8a8073; margin-bottom: 6px; }
.aer-bar-head b { color: #3f3550; }
.aer-bar { height: 22px; }
.aer-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.75rem; color: #8a8073; margin-top: 6px; }
.aer-edit { background: #ece6f5; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.aer-edit-label { font-size: 0.78rem; font-weight: 700; color: #4b3f5c; margin-bottom: 6px; }
.aer-edit-seg { display: flex; gap: 6px; }
.aer-edit-seg button {
  flex: 1; background: #fff; border: 1px solid #ddd2eb; border-radius: 10px;
  padding: 0.6rem; font: inherit; font-size: 0.9rem; color: #4b3f5c; cursor: pointer;
}
.aer-edit-seg button.on { background: #c6b7e2; border-color: #a893cf; font-weight: 700; color: #3f3550; }
.aer-hist-note { font-size: 0.8rem; color: #8a8073; margin-top: 2px; }

/* ---------- full-screen timer (aerobic-timer.js) ---------- */
#aer-timer {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column;
  background: #faf7f2; color: #3f3550;
  font-family: inherit;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  transition: background 0.4s;
  overflow-y: auto;
}
.at-top-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 0; }
.at-x { background: none; border: none; font-size: 1.6rem; line-height: 1; color: #4b3f5c; cursor: pointer; padding: 4px 8px; }
.at-name { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8073; text-align: center; flex: 1; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-gear { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.7); border: 1px solid #ddd2eb; font-size: 1rem; color: #4b3f5c; cursor: pointer; }
.at-body { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 480px; margin: 0 auto; }
.at-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.at-mid.at-top { justify-content: flex-start; padding-top: 16px; }
.at-label { font-size: 2.3rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.at-type { font-size: 1rem; font-weight: 700; margin-top: 2px; }
.at-clock { font-size: clamp(4.5rem, 22vw, 7rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; margin: 18px 0 8px; }
.at-clock-sm { font-size: 4rem; margin: 10px 0 2px; }
.at-faded { opacity: 0.55; }
.at-big { font-size: 6rem; font-weight: 800; line-height: 1; margin: 6px 0; }
.at-msg { font-size: 1rem; color: #4b3f5c; margin-top: 4px; }
.at-small { font-size: 0.85rem; }
.at-next { margin-top: 22px; background: rgba(255,255,255,0.65); border-radius: 12px; padding: 9px 16px; font-size: 0.95rem; color: #4b3f5c; }
.at-tot { display: flex; justify-content: space-between; padding: 0 20px; font-size: 0.8rem; color: #4b3f5c; margin-bottom: 5px; }
.at-barwrap { padding: 0 20px; }
.at-bar { height: 10px; position: relative; overflow: visible; }
.at-marker { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1px; background: #3f3550; border-radius: 2px; }
.at-ctrl { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 14px 0 4px; }
.at-c { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid #ddd2eb; font-size: 1.15rem; color: #4b3f5c; cursor: pointer; }
.at-c.at-cbig { width: 78px; height: 78px; background: #8f78bd; color: #fff; border: none; font-size: 1.5rem; }
.at-cl { display: flex; justify-content: center; gap: 24px; font-size: 0.7rem; color: #6b6258; }
.at-cl span { width: 56px; text-align: center; }
.at-cl .at-clbig { width: 78px; }
.at-stop { margin: 12px 18px 16px; background: #fff; border: 1px solid #ddd2eb; border-radius: 12px; padding: 0.75rem; font: inherit; font-weight: 700; color: #4b3f5c; font-size: 0.95rem; cursor: pointer; }
.at-btn { width: 100%; max-width: 360px; box-sizing: border-box; border-radius: 12px; padding: 0.8rem; font: inherit; font-weight: 700; font-size: 1rem; margin-top: 10px; cursor: pointer; }
.at-p { background: #8f78bd; color: #fff; border: none; }
.at-w { background: #fff; color: #4b3f5c; border: 1px solid #ddd2eb; }
.at-pill { background: #3f3550; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.at-check { font-size: 3rem; color: #24704d; }
.at-list { width: 100%; max-width: 360px; background: #fff; border-radius: 14px; padding: 4px 10px; text-align: left; margin-top: 14px; box-sizing: border-box; }
.at-rh { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: #8a8073; text-transform: uppercase; padding: 7px 4px 2px; }
.at-r { display: flex; justify-content: space-between; padding: 8px 4px; font-size: 0.9rem; color: #333; }
.at-r + .at-r { border-top: 1px solid #f0ebe3; }
.at-r.at-done { color: #b3aba0; }
.at-r.at-cur { background: #fdf0dc; border-radius: 8px; font-weight: 700; color: #3f3550; }
.at-overlay { position: fixed; inset: 0; z-index: 3001; background: rgba(40,30,55,0.45); align-items: center; justify-content: center; padding: 1rem; }
.at-card { background: #faf7f2; border-radius: 16px; padding: 1.2rem; width: 100%; max-width: 360px; text-align: center; box-sizing: border-box; }
.at-ctitle { font-weight: 700; font-size: 1.05rem; color: #3f3550; }
.at-csub { font-size: 0.88rem; color: #6b6258; margin: 6px 0 4px; line-height: 1.4; }
.at-sheet { align-items: flex-end; padding: 0; }
.at-sheet-card { background: #fff; border-radius: 18px 18px 0 0; padding: 14px 18px 20px; width: 100%; max-width: 480px; box-sizing: border-box; }
.at-sheet-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #3f3550; margin-bottom: 4px; }
.at-tg { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 0.95rem; color: #4b3f5c; }
.at-tg + .at-tg { border-top: 1px solid #f0ebe3; }
.at-lim { font-size: 0.75rem; color: #8a8073; margin-top: 8px; line-height: 1.4; }
.at-switch {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 44px; height: 26px; margin: 0; border-radius: 13px; background: #cfc8bd; position: relative; cursor: pointer;
}
.at-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.at-switch:checked { background: #8f78bd; }
.at-switch:checked::after { left: 21px; }

/* "Start timer" on the aerobic exercise screen */
.aer-start-btn { width: 100%; background: #8f78bd; color: #fff; border: none; border-radius: 12px; padding: 0.8rem; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; margin-bottom: 0.5rem; }

/* ---------- weekly views: client Aerobic tab + coach Aerobic tab (aerobic-weekly.js) ---------- */
.aw-card { background: #fff; border: 1px solid #eee6da; border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.aw-lbl { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8a8073; }
.aw-muted { font-size: 0.8rem; color: #8a8073; margin-top: 4px; }
.aw-ok { color: #24704d; font-weight: 700; }
.aw-pill { font-size: 0.72rem; background: #ece6f5; color: #4b3f5c; border-radius: 999px; padding: 2px 9px; font-weight: 700; white-space: nowrap; }
.aw-link { color: #7c5cbf; font-weight: 700; text-decoration: underline; font-size: 0.88rem; }
.aw-btn { width: 100%; border-radius: 12px; padding: 0.75rem; font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; margin-bottom: 10px; }
.aw-btn-p { background: #8f78bd; color: #fff; border: none; }
.aw-btn-w { background: #fff; color: #4b3f5c; border: 1px solid #ddd2eb; }
.aw-btn-del { background: #fff; color: #b3402f; border: 1px solid #e8c5bd; }
.aw-donut-row { display: flex; align-items: center; gap: 14px; }
.aw-donut { width: 128px; height: 128px; flex: none; }
.aw-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; color: #4b3f5c; }
.aw-legend b { color: #3f3550; font-variant-numeric: tabular-nums; }
.aw-legend-row { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem; margin-top: 8px; }
.aw-goal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.aw-trow { margin: 8px 0; }
.aw-trow-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; color: #4b3f5c; font-variant-numeric: tabular-nums; }
.aw-pb { height: 6px; border-radius: 3px; background: #f2ede6; overflow: hidden; margin-top: 4px; }
.aw-pb span { display: block; height: 100%; border-radius: 3px; }
.aw-ent { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid #f0ebe3; font-size: 0.88rem; color: #333; }
.aw-ents .aw-lbl + .aw-ent, .aw-card > .aw-ent:first-child { border-top: none; }
.aw-ent-l { min-width: 0; }
.aw-ent-r { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.aw-sub { font-size: 0.74rem; color: #8a8073; }
.aw-time { font-weight: 700; color: #3f3550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw-mini { display: flex; width: 64px; height: 6px; border-radius: 3px; overflow: hidden; background: #f2ede6; margin-top: 5px; }
.aw-mini span { display: block; height: 100%; border: none; }
.aw-edit { background: none; border: none; padding: 0 0 0 4px; color: #7c5cbf; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.aw-more-btn { background: none; border: none; color: #7c5cbf; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 6px 0 0; }
.aw-last { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; color: #3f3550; }
.aw-range { display: flex; gap: 4px; background: #ece6f5; border-radius: 20px; padding: 3px; margin-bottom: 10px; }
.aw-range button { flex: 1; border: none; background: transparent; border-radius: 17px; padding: 6px 0; font: inherit; font-size: 0.82rem; color: #4b3f5c; cursor: pointer; }
.aw-range button.on { background: #fff; font-weight: 700; }
.aw-chart { position: relative; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid #e6dfd4; margin-top: 10px; }
.aw-bar { flex: 1; min-width: 2px; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; }
.aw-bar span { display: block; border: none !important; }
.aw-goal-line { position: absolute; left: 0; right: 0; border-top: 2px dashed #8f78bd; z-index: 1; }
.aw-goal-line b { position: absolute; right: 0; top: -15px; font-size: 0.66rem; color: #7c5cbf; font-style: normal; }
.aw-xl { display: flex; gap: 4px; font-size: 0.6rem; color: #8a8073; margin-top: 3px; }
.aw-xl span { flex: 1; min-width: 2px; text-align: center; white-space: nowrap; }
.aw-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.aw-tile { position: relative; overflow: hidden; border-radius: 10px; padding: 8px 4px; text-align: center; background: #f6f2ec; }
.aw-tile-fill { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0.85; }
.aw-tile-k, .aw-tile-v, .aw-tile-g { position: relative; }
.aw-tile-k { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #4b3f5c; }
.aw-tile-v { font-weight: 800; color: #3f3550; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.aw-tile-g { font-size: 0.64rem; color: #4b3f5c; margin-top: 2px; }

/* "Log minutes or steps" popup */
.aw-overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(40,30,55,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.aw-pop { background: #faf7f2; border-radius: 16px; padding: 16px; width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; box-sizing: border-box; }
.aw-pop-title { font-weight: 700; font-size: 1.05rem; color: #3f3550; }
.aw-seg { display: flex; gap: 4px; background: #ece6f5; border-radius: 20px; padding: 3px; margin: 10px 0 4px; }
.aw-seg button { flex: 1; border: none; background: transparent; border-radius: 17px; padding: 7px 0; font: inherit; font-size: 0.88rem; color: #4b3f5c; cursor: pointer; }
.aw-seg button.on { background: #fff; font-weight: 700; }
.aw-fl { display: block; font-size: 0.82rem; font-weight: 600; color: #4b3f5c; margin: 10px 0 4px; }
.aw-fl i { font-style: normal; font-weight: 500; color: #8a8073; font-size: 0.75rem; }
.aw-req { color: #c0392b; font-weight: 700; }
.aw-pop .hub-input.aw-in { margin: 0; }
.aw-lmv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aw-in.aw-opt { border-style: dashed; }
.aw-help { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: #7c5cbf; font-weight: 700; text-decoration: underline; }
.aw-info { background: #ece6f5; border-radius: 8px; padding: 7px 9px; font-size: 0.8rem; color: #4b3f5c; margin-top: 12px; }
.aw-err { color: #b3402f; font-size: 0.82rem; min-height: 1em; margin: 8px 0 6px; }

/* weekly record badge that flashes, then fades */
.aw-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2600; width: calc(100% - 2rem); max-width: 380px; box-sizing: border-box;
  background: #c6b7e2; color: #3d2f52; border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 20px rgba(60,40,90,0.25); transition: opacity 1s; }
.aw-toast-out { opacity: 0; }
.aw-toast-row { display: flex; gap: 10px; align-items: center; font-size: 0.85rem; }
.aw-toast-row + .aw-toast-row { margin-top: 6px; }
.aw-toast-star { font-size: 1.2rem; color: #4b3f5c; }

/* ---------- coach Aerobic tab (coach-aerobic-tab.js) ---------- */
.ca-tabs { display: flex; border-bottom: 1px solid #ddd2eb; margin: 0.4rem 0 0.9rem; }
.ca-tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 14px; font: inherit; font-size: 0.9rem; color: #8a8073; cursor: pointer; }
.ca-tabs button.on { color: #4b3f5c; border-bottom-color: #c6b7e2; font-weight: 600; }
/* Which parts of the client page show on each tab */
#workout-builder-view[data-ca-tab="workouts"] > #client-extras-section,
#workout-builder-view:not([data-ca-tab="aerobic"]) > #ca-aer-label,
#workout-builder-view[data-ca-tab="extras"] > :not(#workout-back-btn):not(.hub-bottom-back):not(.cs-head):not(#ca-tabs):not(#weekly-note-box):not(#client-extras-section),
#workout-builder-view[data-ca-tab="aerobic"] > :not(#workout-back-btn):not(.hub-bottom-back):not(.cs-head):not(#ca-tabs):not(#ca-aer-label):not(#ca-view) { display: none !important; }
.ca-off { background: #fbeee6; color: #a3542e; border-radius: 10px; padding: 8px 10px; font-size: 0.82rem; margin-bottom: 10px; }
.ca-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 900px) { .ca-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.ca-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ca-target-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: none; border: none; padding: 0; font: inherit; font-size: 0.88rem; color: #4b3f5c; text-align: left; cursor: pointer; }
.ca-target-right { display: flex; align-items: center; gap: 8px; flex: none; }
.ca-caret { color: #8a8073; }
.ca-target-edit { margin-top: 10px; border-top: 1px solid #f0ebe3; padding-top: 10px; }
.ca-seg { display: flex; gap: 4px; margin-bottom: 8px; }
.ca-seg button { flex: 1; background: #fff; border: 1px solid #ddd2eb; border-radius: 8px; padding: 6px 0; font: inherit; font-size: 0.82rem; color: #4b3f5c; cursor: pointer; }
.ca-seg button.on { background: #ece6f5; border-color: #c6b7e2; font-weight: 700; }
.ca-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ca-fields label { font-size: 0.78rem; font-weight: 600; color: #4b3f5c; }
.ca-fields .hub-input { margin: 3px 0 0; }
.ca-fields .ca-wide { grid-column: 1 / span 2; }
.ca-small-btn { background: #ece6f5; border: none; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 0.78rem; font-weight: 700; color: #4b3f5c; cursor: pointer; }