/* ============ Design tokens (colors and fonts from the screen designs) ============ */
:root {
  --navy: #16213A;
  --navy-2: #24345A;
  --blue: #2451D6;
  --blue-dark: #1D43B5;
  --blue-soft: #EEF3FF;
  --gold: #E8B400;
  --bg: #F3F5F8;
  --card: #FFFFFF;
  --border: #D8DEE8;
  --border-strong: #B5BECC;
  --rule: #E6EAF0;
  --text: #16213A;
  --muted: #6B7688;
  --nav-icon: #AEB8CC;
  --green: #1E7A43;
  --green-soft: #E1F4E8;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --amber: #B07800;
  --amber-text: #8A5A00;
  --amber-soft: #FFF3C4;
  --amber-border: #F0C766;
  --technical: #6B8F2E;       /* technical workouts' color in the designs */
  --technical-soft: #EEF4E2;
  --running: #C4561B;         /* running workouts' color */
  --running-soft: #FCEEE5;

  --radius: 12px;
  --rail: 72px;
  --tabbar: 64px;

  --font: 'Barlow', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-cond: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', Arial, sans-serif;
}

/* ============ Basics ============ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden always wins, even over display: grid */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3 { margin: 0; line-height: 1.15; }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; }
.muted { color: var(--muted); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--text); }
.page-head .btn, .popover summary.btn { flex: none; white-space: nowrap; } /* header buttons stay on one line */
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-block { width: 100%; min-height: 48px; }

/* ============ Form fields ============ */
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 16px; /* 16px or larger stops iPhones from zooming in */
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 81, 214, .15);
}
.pw { position: relative; }
.pw input { padding-right: 72px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.alert {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
}

/* ============ Cards ============ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.empty { padding: 40px 24px; text-align: center; }
.empty h2 { margin-bottom: 6px; font-size: 18px; }
.empty p { margin: 0; color: var(--muted); }

/* ============ Sign in (Screen 11) ============ */
.signin { display: grid; grid-template-columns: 5fr 7fr; min-height: 100vh; }
.signin-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.signin-brand .logo { width: 110px; height: auto; margin-bottom: 56px; }
.brand-tagline { max-width: 12em; font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; }
.brand-tagline span { color: var(--gold); }
.brand-foot { position: absolute; bottom: 32px; margin: 0; font-size: 12px; color: var(--nav-icon); }
.brand-welcome, .brand-welcome-sub { display: none; }

.signin-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.signin-box { width: 100%; max-width: 400px; }
.signin-title { font-family: var(--font-cond); font-size: 36px; font-weight: 700; }
.signin-sub { margin: 6px 0 28px; font-size: 14px; }
.signin-new {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 14px;
}

/* ============ App layout: navy sidebar on computers ============ */
.nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--rail);
  padding: 20px 0;
  background: var(--navy);
}
.nav-logo {
  display: flex;
  justify-content: center;
  width: 40px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--navy-2);
}
.nav-logo .logo { width: 36px; height: 24px; }
.nav-links { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
  border-radius: 8px;
  color: var(--nav-icon);
  text-decoration: none;
}
.nav-link svg { width: 22px; height: 22px; }
.nav-link:hover { color: #fff; }
.nav-link.is-active { background: var(--navy-2); color: #fff; }
.nav-link.is-active::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -8px;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--gold);
}
/* Labels are hidden on the sidebar (icons only) but still read by screen readers */
.nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.account { position: relative; }
.account summary { display: flex; flex-direction: column; align-items: center; list-style: none; cursor: pointer; }
.account summary::-webkit-details-marker { display: none; }
.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.account-menu {
  position: absolute;
  bottom: 0;
  left: calc(100% + 14px);
  width: 240px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 33, 58, .15);
  color: var(--text);
}
.account-menu strong { display: block; }
.account-menu .muted { display: block; margin: 2px 0 14px; font-size: 13px; }
.account-menu .btn { width: 100%; }

.page { margin-left: var(--rail); padding: 32px 24px 48px; }
.page-solo { max-width: 520px; margin: 80px auto; }
.narrow { max-width: 640px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-title { font-family: var(--font-cond); font-size: 32px; font-weight: 700; }
.page-title-xl { font-size: 40px; }
.page-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* ============ Messages ("Saved ...") ============ */
.toast {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}
.toast-error { background: var(--danger-soft); color: var(--danger); }
.toast-warning { background: var(--amber-soft); color: var(--amber-text); }

/* ============ Badges and chips ============ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-amber { background: var(--amber-soft); color: var(--amber-text); }
.badge-e {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--amber-soft);
  color: var(--amber-text);
  font-size: 10px;
  font-weight: 700;
}
.chip { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--rule); font-size: 12px; font-weight: 500; }
.missing { color: var(--amber); font-weight: 600; }
.link { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.small { margin: 2px 0 0; font-size: 12px; }

/* ============ Tables ============ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { position: relative; }
.table tbody tr:hover { background: #F8FAFC; }
.table tbody tr.is-selected { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.row-link { color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; } /* makes the whole row clickable */
.phone-only { display: none; }

/* ============ Roster (Screen 8) ============ */
.roster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.roster.has-selection { grid-template-columns: minmax(0, 1fr) 360px; }
.roster-table { overflow: hidden; }
.roster-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--amber-text);
  font-size: 13px;
  font-weight: 600;
}
a.roster-banner { text-decoration: none; }
a.roster-banner:hover { background: var(--amber-soft); }
.roster-banner-go { margin-left: auto; color: var(--blue); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.athlete-cell { display: flex; align-items: center; gap: 10px; }
.athlete-cell strong { display: block; font-weight: 600; }
.athlete-cell small { display: block; font-size: 12px; }
.avatar-soft { flex: none; width: 28px; height: 28px; background: var(--rule); color: var(--text); font-size: 11px; }
.avatar-lg { width: 44px; height: 44px; font-size: 14px; }
.max-val { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.cell-date { display: block; font-size: 11px; }

.panel { padding: 20px; }
.back-link { display: none; margin-bottom: 12px; font-size: 14px; font-weight: 600; text-decoration: none; }
.panel-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: 20px; }
.panel-head p { margin: 2px 0 0; font-size: 13px; }
.panel-head .badge { margin-left: auto; }
.panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.panel-row .label { margin-right: 4px; font-weight: 600; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 0 8px; }
.section-head h3 { font-size: 16px; }
.max-list { margin: 0; padding: 0; list-style: none; }
.max-list li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.max-list li:last-child { border-bottom: 0; }
.max-list .grow { flex: 1; min-width: 0; }
.max-list strong { display: block; font-size: 15px; }
.max-list small { font-size: 12px; color: var(--muted); }
.max-list small.missing { color: var(--amber); }
.max-big { font-family: var(--font-cond); font-size: 24px; font-weight: 700; white-space: nowrap; }

/* ============ Add a max ============ */
.add-max {
  margin: 4px 0 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 33, 58, .12);
}
.add-max-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.add-max-head h3 { font-size: 17px; }
.close { padding: 0 4px; color: var(--muted); font-size: 26px; line-height: 1; text-decoration: none; }
.add-max .field { margin-bottom: 14px; }

/* Two radio buttons that look like a toggle */
.seg { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; padding: 3px; border-radius: 10px; background: var(--rule); }
.seg-option { position: relative; cursor: pointer; }
.seg-option input { position: absolute; opacity: 0; }
.seg-option span { display: block; padding: 8px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 500; text-align: center; }
.seg-option input:checked + span { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(22, 33, 58, .15); }
.seg-option input:focus-visible + span { outline: 2px solid var(--blue); }

.add-max-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.unit-input { position: relative; }
.unit-input input { padding-right: 40px; }
.unit-input span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--muted); font-size: 14px; }
.hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

/* Reps and the estimate only show for "From a rep set" */
.reps-field, .estimate { display: none; }
.add-max:has(input[value="estimated"]:checked) .reps-field { display: block; }
.add-max:has(input[value="estimated"]:checked) .estimate { display: flex; }
.estimate {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--amber-border);
  border-radius: 10px;
  background: #FFF8E1;
  color: var(--amber-text);
}
.estimate-label { font-size: 13px; font-weight: 600; }
.estimate small { display: block; font-size: 12px; }
.estimate strong { color: var(--text); font-family: var(--font-cond); font-size: 26px; white-space: nowrap; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: 13px; }

/* ============ Shared bits for the workout pages ============ */
.grow { flex: 1; min-width: 0; }
.crumbs { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.card-title { font-size: 17px; }
.card-pad { padding: 16px 20px; }
.section-title { margin: 28px 0 12px; font-size: 18px; }
.section-title .muted { margin-left: 6px; font-size: 13px; font-weight: 500; }
.section-gap { margin-top: 20px; margin-bottom: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip-blue { background: var(--blue-soft); color: var(--blue); font-size: 11px; padding: 1px 6px; }
.field textarea { height: auto; padding: 10px 14px; resize: vertical; }

/* Category colors: blue for strength, gold for explosive */
.cat-strength { --cat: var(--blue); }
.cat-explosive { --cat: var(--gold); }
.cat-accessory { --cat: var(--border-strong); }
.cat-technical { --cat: var(--technical); }
.cat-running { --cat: var(--running); }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.legend i { display: inline-block; width: 3px; height: 12px; margin-left: 8px; border-radius: 2px; }
.bar-strength { background: var(--blue); }
.bar-explosive { background: var(--gold); }
.bar-name { display: block; padding-left: 10px; border-left: 3px solid var(--cat, var(--blue)); }
.bar-name strong, .bar-name small { display: block; }

/* Sticky buttons along the bottom of a form */
.action-bar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 33, 58, .12);
}

/* ============ Workout Builder (Screen 1) ============ */
.builder-head { align-items: flex-end; }
.title-input {
  width: 100%;
  max-width: 640px;
  padding: 2px 0;
  border: 0;
  border-bottom: 2px dashed var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-cond);
  font-size: 32px;
  font-weight: 700;
}
.title-input:focus { outline: none; border-bottom-color: var(--blue); }

.builder { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }

.library { position: sticky; top: 16px; max-height: calc(100vh - 120px); overflow: auto; padding: 16px; }
.lib-search {
  width: 100%;
  height: 40px;
  margin: 12px 0 4px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
}
.lib-group h3 { margin: 14px 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.lib-row { display: flex; align-items: center; gap: 2px; }
.lib-row .lib-item { flex: 1; min-width: 0; }
.lib-name { min-width: 0; }
.lib-original { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.lib-menu summary { padding: 0 6px; font-size: 16px; line-height: 26px; }
.lib-menu .menu-list { width: 200px; }
.lib-none { margin-top: 12px; }

/* "+ Create custom exercise" and its box, right under the search box */
.lib-create {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 8px 6px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: none;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.lib-create:hover { border-color: var(--blue); background: var(--blue-soft); }
.lib-panel { margin: 8px 0 4px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.lib-panel h3 { margin-bottom: 8px; font-size: 15px; }
.lib-panel .field { margin-bottom: 10px; }
.lib-panel .field input, .lib-panel .field select { height: 40px; font-size: 15px; }
.lib-panel .small { margin: -4px 0 10px; }
.lib-panel .form-actions .btn { min-height: 38px; padding: 0 14px; }
.lib-panel .field-error { margin: 0 0 10px; }
.lib-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.lib-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.lib-panel .hint { margin: -4px 0 10px; }
.lib-flash { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 600; }

.lib-group ul { margin: 0; padding: 0; list-style: none; }
.lib-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.lib-item:hover { background: var(--bg); }
.lib-add {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 700;
}
.lib-added { display: none; color: var(--muted); font-size: 12px; }
.lib-item.is-added { cursor: default; }
.lib-item.is-added:hover { background: none; }
.lib-item.is-added .lib-add { display: none; }
.lib-item.is-added .lib-added { display: inline; }

.workout-card { padding: 16px 16px 20px; }
.workout-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* Each row: move, name, sets, reps, load, rest, remove */
.b-header, .b-row {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) 58px 58px 150px 66px 28px;
  gap: 8px;
  align-items: center;
}
.b-header { padding: 0 8px 6px; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.b-header span:nth-child(n+3):nth-child(-n+4) { text-align: center; }
.b-rows { margin: 0; padding: 0; list-style: none; }
.b-row { padding: 8px; border-bottom: 1px solid var(--rule); }
.b-handle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--border-strong);
  cursor: grab;
  touch-action: none; /* lets a finger drag the row instead of scrolling the page */
}
.b-handle svg { width: 10px; height: 16px; fill: currentColor; }
.b-handle:hover, .b-handle:focus-visible { background: var(--bg); color: var(--text); }
.b-handle:focus-visible { outline: 2px solid var(--blue); }
.b-row.is-dragging {
  position: relative;
  z-index: 2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 33, 58, .18);
}
.b-row.is-dragging .b-handle { color: var(--blue); cursor: grabbing; }
body.is-dragging { cursor: grabbing; user-select: none; }
@media (hover: hover) { .b-name { cursor: grab; } } /* mice can drag by the name too */
.b-remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.1;
  cursor: pointer;
}
.b-remove:hover { color: var(--text); }
.b-remove { font-size: 22px; }
.b-name { padding-left: 10px; border-left: 3px solid var(--cat, var(--border)); }
.b-name strong { display: block; font-size: 15px; }
.b-name small { display: block; color: var(--muted); font-size: 12px; }
.b-label { display: none; }
.b-cell input {
  width: 100%;
  height: 38px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
  text-align: center;
}
.b-cell input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }
.b-pct { position: relative; display: none; }
.b-pct input { padding-right: 72px; border-color: #B9C9F3; background: var(--blue-soft); text-align: left; padding-left: 10px; }
.b-pct em { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--muted); font-size: 12px; font-style: normal; pointer-events: none; }
.b-note { display: block; }
.b-note input { text-align: left; padding-left: 10px; }
.uses-max .b-pct { display: block; }
.uses-max .b-note { display: none; }
.b-errors { grid-column: 2 / -1; }
.b-errors .field-error { margin: 2px 0 0; }
.b-empty { margin: 0; padding: 28px 12px; border: 1.5px dashed var(--border); border-radius: 10px; text-align: center; font-size: 14px; }
.notes-field { margin: 16px 0 0; }

.preview { position: sticky; top: 16px; padding: 16px; }
.preview-select {
  width: 100%;
  height: 44px;
  margin: 12px 0 4px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.pv-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pv-weight { font-family: var(--font-cond); font-size: 26px; font-weight: 700; white-space: nowrap; }
.pv-item small { color: var(--muted); font-size: 12px; }
.pv-item small.missing { color: var(--amber); }
.pv-others { flex-direction: row; justify-content: space-between; font-size: 14px; font-weight: 600; }
.preview-foot { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 12px; }

/* ============ Assign Workout (Screen 2) ============ */
.assign { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.form-card { padding: 20px; }
.form-card .small { margin-bottom: 12px; }
.who { padding: 20px; }
.who-count { margin: 8px 0 12px; }
.who-count strong { font-family: var(--font-cond); font-size: 40px; }
.who-list { margin: 0; padding: 0; list-style: none; }
.who-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.who-list li:last-child { border-bottom: 0; }
.who-list small { margin-left: auto; text-align: right; }

/* ============ Workouts home (Screen 6) ============ */
.assigned .table td { padding-top: 12px; padding-bottom: 12px; }
.wo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wo-card { display: flex; flex-direction: column; border-left: 3px solid var(--blue); }
.wo-card-body { flex: 1; padding: 14px 16px; }
.wo-card h3 { font-size: 16px; }
.wo-summary { margin: 4px 0 2px; font-size: 13px; }
.wo-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.wo-actions a, .wo-actions button {
  display: block;
  width: 100%;
  padding: 11px 8px;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.wo-actions > :last-child { border-left: 1px solid var(--rule); }
.wo-actions button, .wo-actions .wo-secondary { color: var(--text); }
.wo-actions form { margin: 0; }

/* ============ Search box with chips (Assign) ============ */
.picker { position: relative; margin-bottom: 4px; }
.picker-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 50px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: text;
}
.picker-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }
.picker-input { flex: 1; min-width: 150px; height: 34px; border: 0; outline: none; background: transparent; color: var(--text); font-size: 16px; }
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border: 1px solid #C9D6F7;
  border-radius: 8px;
  background: var(--blue-soft);
  font-size: 14px;
  font-weight: 600;
}
.pchip small { color: var(--muted); font-size: 12px; font-weight: 500; }
.pchip button { padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.pchip button:hover { color: var(--text); }
.pchip-out { border-color: #F3C3BD; background: var(--danger-soft); color: var(--danger); }
.picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 290px;
  overflow: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 33, 58, .15);
  list-style: none;
}
.picker-menu li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: 500; }
.picker-menu li small { color: var(--muted); font-size: 12px; text-align: right; }
.picker-menu li:hover, .picker-menu li.is-active { background: var(--blue-soft); }
.picker-native .field { margin-bottom: 8px; }
.picker-native select { height: 140px; }
.form-divider { margin: 20px 0 16px; border-top: 1px solid var(--rule); }
.minus-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
  vertical-align: 2px;
}
.badge-gray { background: var(--rule); color: var(--muted); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.link-button { padding: 0; border: 0; background: none; color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.who-list .who-tag { display: inline-flex; align-items: center; gap: 6px; }
.who-list li.is-out strong { color: var(--muted); text-decoration: line-through; }
.who-list li.is-out .avatar { opacity: .5; }
.who-list li.is-skipped strong { color: var(--muted); }
.who-warning { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--amber-border); border-radius: 10px; background: #FFF8E1; color: var(--amber-text); font-size: 13px; font-weight: 600; }
.who-warning p { margin: 0 0 4px; }
.who-warning ul { margin: 0; padding-left: 18px; font-weight: 500; }

/* ============ ⋯ menus ============ */
.menu { position: relative; }
.menu summary {
  padding: 0 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 20px;
  line-height: 28px;
  list-style: none;
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--bg); color: var(--text); }
.menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  width: 240px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 33, 58, .15);
}
.menu-list form { margin: 0; }
.menu-list button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.menu-list button:hover { background: var(--bg); }
.menu-list button.danger { color: var(--danger); }
.menu-note { margin: 0; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.cell-menu { position: relative; z-index: 2; width: 44px; text-align: right; } /* above the row link */
.cell-sub { display: block; font-size: 12px; }
.cell-actions { text-align: right; }
.menu-link { display: block; padding: 9px 10px; border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; }
.menu-link:hover { background: var(--bg); }
.btn-danger { border-color: #F3C3BD; color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }
.link-danger { color: var(--danger); }
.table tr.is-past td { color: var(--muted); }
.wo-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wo-oneoff { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }

/* "Save to Workout History" checkbox in the builder's bottom bar */
.history-check { display: flex; align-items: center; gap: 12px; margin-right: auto; cursor: pointer; }
.history-check input { flex: none; width: 22px; height: 22px; accent-color: var(--blue); }
.history-check strong { display: block; font-size: 15px; }
.history-check small { display: block; color: var(--muted); font-size: 12px; }

/* ============ Assign: "When" (set time / time window / times per week, once or weekly) ============ */
/* Which pieces show is decided by assign.js from each piece's data-show. */
.seg-3 { grid-template-columns: repeat(3, 1fr); max-width: 460px; margin-top: 10px; }
.seg-2 { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
.when-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.when-fields .field { margin-bottom: 4px; }
.when-wide { grid-column: span 2; }
.field-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.field label .muted { font-size: 12px; }

/* Sun to Sat day picker */
.day-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip { position: relative; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; }
.day-chip span {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.day-chip input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.day-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* A time for each chosen day */
.day-times { display: grid; gap: 8px; margin: 4px 0 12px; }
.day-time { display: grid; grid-template-columns: 48px minmax(0, 150px) minmax(0, 150px); gap: 8px; align-items: center; }
.day-time strong { font-size: 14px; }
.day-time input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
}
.day-time input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }
.day-time .field-error { margin-top: 2px; }

.when-dates { margin-top: 8px; }
.when-dates summary { color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.when-dates ol { columns: 2; max-height: 260px; overflow: auto; margin: 8px 0 0; padding-left: 22px; color: var(--muted); font-size: 13px; }
.when-check { align-items: center; gap: 10px; margin: 8px 0 4px; font-size: 14px; font-weight: 600; cursor: pointer; }
.when-check input { width: 20px; height: 20px; accent-color: var(--blue); }
.when-summary { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--bg); font-size: 14px; }
.when-summary p { margin: 0; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input { width: 64px; text-align: center; }
.stepper button {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}
.stepper button:hover { border-color: var(--text); }

@media (max-width: 1280px) {
  /* Two columns: the library gets the whole left column, so as it follows you
     down the page it never covers the preview, which sits under the workout. */
  .builder { grid-template-columns: 230px minmax(0, 1fr); }
  .library { grid-row: 1 / span 2; }
  .preview { position: static; grid-column: 2; }
}
@media (max-width: 960px) {
  .builder, .assign { grid-template-columns: minmax(0, 1fr); }
  .library { position: static; max-height: none; grid-row: auto; order: 2; }
  .workout-card { order: 1; }
  .preview { grid-column: auto; order: 3; }

  /* Rows turn into small cards with labels */
  .b-header { display: none; }
  .b-row { grid-template-columns: 24px 1fr 1fr 1fr 28px; grid-template-areas:
      "move name name name remove"
      "move sets reps rest remove"
      "move load load load remove"; row-gap: 10px; padding: 12px 4px; }
  .b-handle { grid-area: move; align-self: start; }
  .b-name { grid-area: name; }
  .b-row > .b-cell:nth-of-type(1) { grid-area: sets; }
  .b-row > .b-cell:nth-of-type(2) { grid-area: reps; }
  .b-row > .b-load { grid-area: load; }
  .b-row > .b-cell:nth-of-type(4) { grid-area: rest; }
  .b-remove { grid-area: remove; align-self: start; }
  .b-errors { grid-column: 2 / 5; }
  .b-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
}

/* ============ Athlete: Today (Screen 3) ============ */
.today .section-title { margin: 24px 0 10px; }
.list-card { overflow: hidden; }
.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  text-decoration: none;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: #F8FAFC; }
.list-row strong { display: block; font-size: 16px; }
.list-row small { display: block; font-size: 13px; }
.list-row.is-done strong { color: var(--muted); }
.list-when { flex: none; width: 52px; }
.list-when strong { font-size: 16px; }
.list-when small { color: var(--muted); }
.list-bar { flex: none; align-self: stretch; width: 3px; border-radius: 2px; background: var(--blue); }
.list-bar-week { background: #2E8C82; }
.chev { color: var(--border-strong); font-size: 24px; line-height: 1; }
.check-done { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; font-weight: 700; }
.week-count { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.week-count strong { font-size: 15px; }
.dots { display: flex; gap: 4px; }
.dots i { width: 12px; height: 12px; border: 2px solid #2E8C82; border-radius: 50%; }
.dots i.is-done { background: #2E8C82; }

/* The big navy "up next" card */
.next-card { padding: 20px; border-radius: 18px; background: var(--navy); color: #fff; }
.next-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.pill { padding: 4px 12px; border-radius: 999px; background: var(--navy-2); font-size: 13px; font-weight: 600; }
.next-when { color: var(--nav-icon); text-align: right; }
.next-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 0 2px; }
.next-title h2 { font-family: var(--font-cond); font-size: 30px; }
.next-title span { flex: none; color: var(--nav-icon); font-size: 14px; }
.next-picked { margin: 0; color: var(--gold); font-size: 14px; font-weight: 600; }
.next-lifts { display: flex; flex-wrap: wrap; gap: 0; margin: 14px 0 16px; }
.next-lift { flex: 1 1 0; min-width: 96px; padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--navy-2); }
.next-lift:last-of-type { border-right: 0; }
.next-lift span { display: block; color: var(--nav-icon); font-size: 13px; }
.next-lift strong { font-family: var(--font-cond); font-size: 40px; line-height: 1.05; }
.next-lift strong small { margin-left: 2px; color: var(--nav-icon); font-family: var(--font); font-size: 13px; font-weight: 500; }
.next-lift em { display: block; margin-top: 8px; font-size: 16px; font-style: normal; font-weight: 600; }
.next-more {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--navy-2);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.next-more strong { font-size: 22px; }
.next-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.btn-gold { flex: 1 1 200px; min-height: 50px; border-color: var(--gold); background: var(--gold); color: var(--navy); font-size: 17px; }
.btn-gold:hover { border-color: #D4A300; background: #D4A300; }
.btn-on-dark { min-height: 50px; border-color: #3A4B73; background: var(--navy-2); color: #fff; }
.btn-on-dark:hover { border-color: #fff; }
.btn-on-dark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pick-time { flex: 0 1 auto; }
.pick-time summary { list-style: none; cursor: pointer; }
.pick-time summary::-webkit-details-marker { display: none; }
.pick-form { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff; color: var(--text); }
.pick-form label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.pick-row { display: flex; gap: 8px; }
.pick-row input { flex: 1; height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 16px; }
.next-note { margin: 14px 0 0; color: var(--nav-icon); font-size: 12px; }

/* ============ Athlete: Lift Logging (Screen 4) ============ */
.log-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.back { padding: 0 8px 4px 0; color: var(--text); font-size: 40px; line-height: 1; text-decoration: none; }
.log-progress { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.progress { height: 8px; margin: 8px 0 16px; overflow: hidden; border-radius: 999px; background: var(--rule); }
.progress span { display: block; height: 100%; border-radius: 999px; background: var(--blue); transition: width .3s; }
.log-banner { margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-text); font-size: 14px; font-weight: 600; }
.banner-green { background: var(--green-soft); color: var(--green); }
.coach-note { margin-bottom: 10px; padding: 12px 14px; border-left: 3px solid var(--blue); border-radius: 8px; background: #fff; }
.coach-note strong { font-size: 13px; }
.coach-note p { margin: 4px 0 0; font-size: 15px; }
.weight-note { margin: 0 0 14px; color: var(--muted); font-size: 13px; }

.log-ex { position: relative; margin-bottom: 14px; padding: 16px 16px 12px 20px; }
.log-ex::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 0; width: 4px; border-radius: 0 3px 3px 0; background: var(--cat, var(--blue)); }
.log-ex-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.log-ex-head h2 { font-size: 21px; }
.log-ex-head p { margin: 4px 0 0; font-size: 14px; }
.ex-check { display: none; color: var(--green); font-size: 18px; }
.log-ex.is-done .ex-check { display: inline; }
.log-target { flex: none; text-align: right; }
.log-target strong { display: block; font-family: var(--font-cond); font-size: 34px; line-height: 1; }
.log-target strong.missing { font-family: var(--font); font-size: 16px; }
.log-target small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

.sets { width: 100%; border-collapse: collapse; }
.sets th { padding: 6px 4px; color: var(--muted); font-size: 13px; font-weight: 500; text-align: center; }
.sets th:first-child, .sets td:first-child { text-align: left; }
.sets td { padding: 5px 4px; text-align: center; }
.sets tr.is-logged td { background: none; }
.set-n { width: 40px; color: var(--muted); font-size: 18px; font-weight: 600; }
.set-input {
  width: 100%;
  max-width: 120px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #F8FAFC;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
}
.set-input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }
.set-input:disabled { opacity: .7; }
.reps-box { position: relative; display: inline-block; width: 100%; max-width: 120px; }
.set-target { position: absolute; top: 5px; right: 9px; color: var(--muted); font-size: 12px; pointer-events: none; }
.set-load { color: var(--muted); font-size: 15px; font-weight: 500; }
.set-done {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.set-done svg { width: 26px; height: 26px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.set-done:hover { border-color: var(--blue); }
.set-done:disabled { cursor: default; opacity: .6; }
tr.is-logged .set-done { border-color: var(--green); background: var(--green); }
tr.is-logged .set-done svg { stroke: #fff; }
tr.is-logged .set-n { color: var(--green); }

.effort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.effort-label { font-size: 15px; font-weight: 600; }
.rpe { display: flex; gap: 6px; }
.rpe-chip { position: relative; cursor: pointer; }
.rpe-chip input { position: absolute; opacity: 0; }
.rpe-chip span { display: grid; place-items: center; width: 42px; height: 38px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 15px; }
.rpe-chip input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 600; }
.rpe-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.effort .link-button { margin-left: auto; font-size: 15px; }
.ex-note {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  resize: vertical;
}
.ex-note:focus { outline: none; border-color: var(--blue); }

/* Bottom bar: rest timer + Finish workout */
.log-bar { position: sticky; bottom: 16px; z-index: 5; display: grid; gap: 10px; margin-top: 20px; }
.rest { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--navy); color: #fff; box-shadow: 0 8px 24px rgba(22, 33, 58, .25); }
.rest small { display: block; color: var(--nav-icon); font-size: 13px; }
.rest strong { font-family: var(--font-cond); font-size: 30px; line-height: 1; }
.rest-ring {
  --done: 0deg;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--navy-2) var(--done), var(--gold) 0);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px);
          mask: radial-gradient(circle, transparent 13px, #000 14px);
}
.rest.is-over { background: var(--green); }
.rest.is-over small { color: #fff; }
.rest-btn { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--navy-2); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.rest.is-over .rest-btn { background: rgba(255, 255, 255, .2); }
.btn-dark { border: 2px solid var(--navy); background: #fff; color: var(--navy); font-size: 17px; }
.btn-dark:hover { background: var(--navy); color: #fff; }
.log-bar .btn-block { min-height: 54px; border-radius: 14px; box-shadow: 0 4px 14px rgba(22, 33, 58, .12); }
.log-toast {
  position: fixed;
  right: 16px;
  bottom: 90px;
  left: 16px;
  z-index: 40;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ============ Who's done what (Screen 5) and progress on Workouts ============ */
.progress-summary { margin-bottom: 16px; padding: 16px 20px; }
.summary-counts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.sum strong { margin-right: 4px; font-family: var(--font-cond); font-size: 30px; vertical-align: -3px; }
.sum-green strong { color: var(--green); }
.sum-blue strong { color: var(--blue); }
.sum-gray strong { color: var(--muted); }
.summary-bar { display: flex; height: 8px; gap: 3px; max-width: 520px; margin-bottom: 8px; }
.summary-bar span { border-radius: 999px; }
.seg-green { background: var(--green); }
.seg-blue { background: var(--blue); }
.seg-gray { background: var(--border); }
.attention-text { color: var(--amber-text); font-weight: 600; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.tab { margin-bottom: -1px; padding: 8px 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-active { border-bottom-color: var(--blue); color: var(--text); font-weight: 600; }
.tab-count { margin-left: 4px; color: var(--muted); font-size: 12px; }
.assigned-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 28px; padding: 16px 20px 0; }
.tabs-inline { margin-bottom: 0; border-bottom: 0; }
.group-heading th { padding-top: 14px; background: none; color: var(--text); font-size: 13px; font-weight: 700; }

.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-finished { background: var(--green-soft); color: var(--green); }
.status-in_progress { background: var(--blue-soft); color: var(--blue); }
.status-not_started { background: var(--rule); color: var(--muted); }
.status-late { background: var(--amber-soft); color: var(--amber-text); }

.mini-bar { display: inline-flex; width: 90px; height: 6px; margin-right: 8px; overflow: hidden; border-radius: 999px; background: var(--rule); vertical-align: middle; }
.mini-bar span { height: 100%; }
.mini-bar-split span:first-child { border-radius: 999px 0 0 999px; }
.fill-finished { background: var(--green); }
.fill-in_progress { background: var(--blue); }
.fill-not_started { background: var(--border-strong); }
.note-text { display: block; color: var(--amber-text); font-size: 13px; font-weight: 600; }
.note-added { display: block; color: var(--blue); font-size: 13px; font-weight: 600; }
.phone-note { display: none; } /* phones hide the Notes column, so notes show under the status */
.session-link { color: inherit; text-decoration: none; }
.session-link:hover { color: var(--blue); }

/* The athlete panel: reps per set */
.detail-time { margin: 16px 0 4px; font-size: 14px; }
.detail-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 14px; }
.detail-table th { padding: 6px 4px; color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; }
.detail-table th:last-child, .detail-table td:last-child { text-align: right; }
.detail-table td { padding: 8px 4px; border-top: 1px solid var(--rule); vertical-align: top; }
.detail-name { display: block; padding-left: 8px; border-left: 3px solid var(--cat, var(--blue)); }
.detail-name strong { display: block; font-size: 14px; }
.detail-name small { color: var(--muted); font-size: 12px; }
.detail-reps { white-space: nowrap; }
.rep { display: inline-block; min-width: 20px; margin-right: 6px; font-weight: 500; text-align: center; }
.rep small { display: block; color: var(--muted); font-size: 10px; }
.rep.is-short { color: var(--amber); font-weight: 700; }
.athlete-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; }
.athlete-notes strong { display: block; margin-bottom: 4px; font-size: 13px; }
.athlete-notes p { margin: 2px 0; }

/* ============ Groups (Screen 7) ============ */
.groups-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.group-list { position: sticky; top: 16px; padding: 12px; }
.group-list .lib-search { margin: 0 0 10px; }
.group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}
.group-item:hover { background: var(--bg); }
.group-item.is-active { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); font-weight: 600; }
.group-all { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; }
.group-all strong, .group-all small { display: block; }
.group-all small { font-size: 12px; font-weight: 400; }
.group-count { color: var(--muted); font-size: 13px; }

.group-detail { padding: 20px; }
.group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.group-head h2 { font-family: var(--font-cond); font-size: 30px; }
.rename summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.rename summary::-webkit-details-marker { display: none; }
.pencil { color: var(--muted); font-size: 18px; }
.rename summary:hover .pencil { color: var(--blue); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.inline-form input { flex: 1; min-width: 160px; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 16px; }
.inline-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }

.group-add { margin-bottom: 12px; }
.add-plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.picker-menu .picker-empty { color: var(--muted); cursor: default; }
.picker-menu .picker-empty:hover { background: none; }
.group-table td { padding-top: 8px; padding-bottom: 8px; }
.wide-only-inline { display: inline; }

/* Each group's color: a chip in the table, a dot in the list */
.gc-0 { --g-bg: #E8EEFD; --g-fg: #2451D6; }
.gc-1 { --g-bg: #E1F4E8; --g-fg: #1E7A43; }
.gc-2 { --g-bg: #FFF3C4; --g-fg: #8A5A00; }
.gc-3 { --g-bg: #EFE7FB; --g-fg: #6B3FB5; }
.gc-4 { --g-bg: #DDF3F0; --g-fg: #1F7A70; }
.gc-5 { --g-bg: #FCE7F0; --g-fg: #A8326A; }
.gc-6 { --g-bg: #FDEBDD; --g-fg: #A6501A; }
.gc-7 { --g-bg: #E9EDF2; --g-fg: #45526A; }
.gchip { margin: 2px 2px 2px 0; border: 1.5px solid transparent; background: var(--g-bg); color: var(--g-fg); font-weight: 600; }
.gchip.is-current { border-color: var(--g-fg); }
.gchip.is-pending { border-style: dashed; }
.group-name { display: inline-flex; align-items: center; gap: 8px; }
.dot-color { width: 10px; height: 10px; border-radius: 50%; background: var(--g-fg, transparent); }
.group-all .dot-color { display: none; }

/* Changes waiting for Save */
.group-table tr.is-adding td { background: var(--green-soft); }
.group-table tr.is-removing strong { color: var(--muted); text-decoration: line-through; }
.group-table tr.is-removing .avatar { opacity: .5; }
.row-change { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.save-bar { align-items: center; }
.save-bar small { display: block; font-size: 12px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.unsaved { max-width: 500px; padding: 22px; border: 0; border-radius: 14px; box-shadow: 0 16px 48px rgba(22, 33, 58, .3); }
.unsaved::backdrop { background: rgba(22, 33, 58, .4); }
.unsaved h2 { font-size: 19px; }
.unsaved p { margin: 6px 0 18px; }
.unsaved .form-actions { flex-wrap: wrap; }
.unsaved .btn { white-space: nowrap; }
.log-toast.toast-ok { background: var(--green); }

/* "+ New group" opens a small box under the button */
.popover { position: relative; }
.popover summary { list-style: none; }
.popover summary::-webkit-details-marker { display: none; }
.popover-box {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 320px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 33, 58, .15);
}
.popover-box label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }

/* Roster: Edit groups */
.edit-groups { flex-basis: 100%; }
.edit-groups summary { display: inline; list-style: none; cursor: pointer; color: var(--blue); }
.edit-groups summary::-webkit-details-marker { display: none; }
.edit-groups[open] summary { display: none; }
.edit-groups form { margin-top: 8px; }
.group-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.check-chip { position: relative; cursor: pointer; }
.check-chip input { position: absolute; opacity: 0; }
.check-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; }
.check-chip input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.check-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Narrower screens: the panel replaces the table instead of sitting beside it */
/* ---------- Roster: change team status ---------- */
.status-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.status-foot p { margin: 0 0 8px; }
.status-box { width: min(500px, calc(100vw - 32px)); }
.status-choices { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.status-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; }
.status-choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.status-choice input { margin-top: 3px; }
.status-choice small { display: block; }
.status-effect { padding: 10px 12px; border-radius: 10px; background: var(--amber-soft); font-size: 14px; }
.status-effect-empty { background: var(--rule); color: var(--muted); }
.not-active-out { margin-top: 18px; }
/* The panel's status badge is a button: it opens Change team status */
.badge-button { gap: 4px; border: 1px solid transparent; font-family: inherit; cursor: pointer; }
.badge-button:hover, .badge-button:focus-visible { border-color: currentColor; }
/* Ineligible and not training: grayed, but still there (and selectable on Assign) */
.is-dim { opacity: .6; }
.table tbody tr.table-section td { padding: 14px 12px 6px; background: var(--bg, #F4F6FA); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.table tbody tr.table-section:hover { background: none; }
.athlete-cell .badge { margin-left: 6px; vertical-align: middle; }
.who-reminder { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--amber-soft); font-size: 14px; }
.alert-amber { background: var(--amber-soft); color: var(--amber-text); }

@media (max-width: 1100px) {
  .roster.has-selection { grid-template-columns: minmax(0, 1fr); }
  .has-selection .roster-table { display: none; }
  .back-link { display: inline-block; }
}

/* ============ Phones: tab bar along the bottom ============ */
@media (max-width: 760px) {
  /* Sign in stacks: navy header on top, form below */
  .signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .signin-brand { padding: 56px 24px 40px; }
  .signin-brand .logo { width: 96px; margin-bottom: 28px; }
  .brand-tagline, .brand-foot, .signin-title, .signin-sub { display: none; }
  .brand-welcome { display: block; font-family: var(--font-cond); font-size: 40px; }
  .brand-welcome-sub { display: block; margin: 10px 0 0; color: var(--border); }
  .signin-form { align-items: flex-start; padding: 32px 20px; }

  .nav {
    top: auto;
    right: 0;
    flex-direction: row;
    width: auto;
    height: calc(var(--tabbar) + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: #fff;
  }
  .nav-logo { display: none; }
  .nav-links { display: contents; } /* every tab, including Me, gets an equal share */
  .account { flex: 1; }
  .nav-link { flex: 1; width: auto; height: var(--tabbar); gap: 3px; border-radius: 0; color: var(--muted); }
  .nav-link:hover { color: var(--text); }
  .nav-link.is-active { background: none; color: var(--blue); }
  .nav-link.is-active::before { display: none; }
  .nav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 12px; font-weight: 500; }
  .account summary { justify-content: center; gap: 3px; height: var(--tabbar); color: var(--muted); }
  .account .avatar { width: 24px; height: 24px; font-size: 10px; }
  .account-menu { right: 8px; bottom: calc(100% + 8px); left: auto; }

  .page { margin-left: 0; padding: 20px 16px calc(var(--tabbar) + 32px); }
  .page-solo { margin: 40px 16px; }
  .page-title-xl { font-size: 44px; }

  .wide-only { display: none; }
  .phone-note { display: block; margin-top: 4px; }
  .groups-layout { grid-template-columns: minmax(0, 1fr); }
  .group-list { position: static; padding: 8px; overflow-x: auto; }
  .group-list .lib-search { display: none; }
  .group-items { display: flex; gap: 6px; }
  .group-item { flex: none; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 14px; }
  .group-item.is-active { border-color: var(--g-fg, var(--blue)); background: var(--g-bg, var(--blue-soft)); box-shadow: none; color: var(--g-fg, var(--blue)); }
  .group-all { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); border-radius: 999px; }
  .group-all small { display: none; }
  .group-count { font-size: 12px; }
  .save-bar { flex-wrap: wrap; }
  .wide-only-inline { display: none; }
  .popover-box { width: min(320px, calc(100vw - 32px)); }
  .action-bar { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 10px); flex-wrap: wrap; }
  .action-bar .btn { flex: 1; padding: 0 12px; }
  .history-check { flex: 1 0 100%; margin-right: 0; }
  .log-bar { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 10px); }
  .log-toast { bottom: calc(var(--tabbar) + 90px); }
  .next-title h2 { font-size: 26px; }
  .next-lift strong { font-size: 34px; }
  .log-target strong { font-size: 28px; }
  .rpe-chip span { width: 36px; }
  .when-fields { grid-template-columns: 1fr 1fr; }
  .when-wide { grid-column: 1 / -1; }
  .title-input { font-size: 28px; }
  .builder-head { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .phone-only { display: table-cell; }
  .panel { padding: 16px; }
}

/* ---------- Invites and joining (Screens 9, 10) ---------- */
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.email-checks { margin: 0 0 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 10px; list-style: none; }
.email-checks li { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.email-checks li small { font-size: 12px; }
.email-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; }
.email-checks .is-ready .email-icon { background: var(--green); }
.email-checks .is-ready small { color: var(--green); font-weight: 600; }
.email-checks .is-skip { color: var(--muted); }
.email-checks .is-skip .email-icon { background: var(--border); color: var(--muted); }
.email-checks .is-bad { color: var(--danger); }
.email-checks .is-bad .email-icon { background: var(--danger); }
.they-see { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.they-see p { margin: 4px 0 0; }
.save-bar small + small { margin-top: 2px; }
.invite-link-row { display: grid; gap: 6px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.invite-link-row:last-child { border-bottom: 0; }
.invite-link-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.invite-state { display: block; color: var(--amber-text); font-weight: 600; font-size: 13px; }
.invite-state.is-expired { color: var(--danger); }
.invite-actions { display: flex; gap: 12px; }
.invite-actions form { display: inline; }
.panel-invite .invite-state { display: inline; margin-right: 8px; }
.panel-invite .invite-actions { display: inline-flex; }
.panel-invite p { flex-basis: 100%; margin: 4px 0 0; }
.team-switch { display: grid; gap: 4px; margin: 6px 0; text-align: left; }
.signin-forgot { margin: 12px 0 0; text-align: center; font-size: 14px; }

.join { max-width: 480px; min-height: 100vh; margin: 0 auto; background: var(--bg); }
.join-hero { padding: 56px 28px 36px; background: var(--navy, #16213A); color: #fff; text-align: center; }
.join-hero .logo { width: 84px; height: auto; }
.join-hero h1 { margin: 6px 0; font-size: 32px; }
.join-hero p { margin: 0; opacity: .85; }
.join-sport { margin-top: 18px !important; font-size: 14px; }
.join-body { padding: 24px 28px 36px; }
.join-body h2 { font-size: 17px; }
.join-uses { margin: 0 0 24px; padding: 0; list-style: none; }
.join-uses li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; }
.join-uses small { display: block; color: var(--muted); }
.join-check { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-weight: 700; flex: none; }
.join-foot { margin-top: 14px; font-size: 14px; text-align: center; }
.join-form { padding: 32px 24px; }
.join-form .back-link { display: inline-block; margin-bottom: 12px; }
.is-locked { background: var(--bg) !important; color: var(--muted); }
.who-sees { margin: 4px 0 20px; padding: 12px 14px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 14px; }
.who-sees p { margin: 2px 0 0; }
.join-form .page-sub { margin-bottom: 20px; }
.account-menu > .link { display: block; margin: 0 0 12px; font-size: 14px; }

/* ---------- Enter maxes (Screen 8b) ---------- */
.bulk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 14px; }
.inline-field { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.inline-field input, .inline-field select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 15px; }
.edit-columns { margin-left: auto; }
.edit-columns .popover-box { right: 0; left: auto; min-width: 220px; }
.column-check { display: flex !important; gap: 8px; align-items: center; font-weight: 500 !important; }
.bulk-scroll { overflow-x: auto; }
.bulk-table th, .bulk-table td { white-space: nowrap; }
.bulk-table th { font-size: 13px; color: var(--text); }
.bulk-athlete { position: sticky; left: 0; z-index: 1; background: #fff; }
.bulk-table tbody tr:hover .bulk-athlete { background: #F8FAFC; }
.bulk-cell { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.bulk-cell input { width: 96px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 16px; font-weight: 600; }
.bulk-cell input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.bulk-cell input.is-bad { border-color: var(--danger); }
.bulk-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.bulk-note .bad { color: var(--danger); font-weight: 600; }
.bulk-note .diff, .bulk-note .est { color: var(--green); font-weight: 600; }
.bulk-note .check { color: var(--amber-text); font-weight: 600; }
.bulk-note .check { flex-basis: 100%; }

/* ---------- History (athlete Workouts tab, coach "Open full history") ---------- */
.history-summary { padding: 14px 20px; margin-bottom: 8px; }
.history-summary p { margin: 2px 0 0; font-size: 16px; }
.needs { color: var(--amber-text); font-weight: 700; }
.history-row .history-when { width: 96px; flex: none; color: var(--muted); font-size: 13px; }
.history-row .badge { flex: none; }
.history-more { text-align: center; margin: 20px 0; }
.history-finish { margin-bottom: 16px; }
.history-exercise { padding: 14px 20px; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; }
.history-exercise:last-child { border-bottom: 0; }
.history-exercise.cat-strength { border-left-color: var(--blue); }
.history-exercise.cat-explosive { border-left-color: #E8B400; }
.history-exercise-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.history-sets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.history-sets li { padding: 3px 10px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 600; }
.history-sets li.is-short { background: var(--amber-soft); color: var(--amber-text); }
.history-sets li.is-missing { color: var(--muted); font-weight: 400; }
.history-effort { margin: 8px 0 0; font-size: 13px; }
.panel-history { margin: 16px 0 0; text-align: center; }
.former-setting { display: flex; align-items: center; gap: 16px; padding: 14px 20px; margin-bottom: 14px; }
.former-setting small { display: block; margin-top: 2px; }

/* ---------- "Workout in progress" bar (every athlete page, like Strong / Hevy) ---------- */
.resume-bar {
  position: fixed; z-index: 20; left: calc(var(--rail) + 24px); bottom: 16px; width: min(560px, calc(100vw - var(--rail) - 48px));
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--navy); color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(22, 33, 58, .25);
}
.resume-bar strong { display: block; font-size: 15px; }
.resume-bar small { display: block; color: #C9D2E3; font-size: 13px; }
.resume-bar.is-resting small { color: #fff; font-weight: 600; }
.resume-bar.is-over small { color: #E8B400; font-weight: 700; }
.resume-dot { width: 10px; height: 10px; border-radius: 50%; background: #3DD68C; flex: none; animation: resume-pulse 1.6s ease-in-out infinite; }
.resume-go { color: #E8B400; font-weight: 700; white-space: nowrap; }
@keyframes resume-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .resume-dot { animation: none; } }
.page.has-resume { padding-bottom: 110px; }
@media (max-width: 760px) {
  .resume-bar { left: 8px; right: 8px; width: auto; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); }
  .page.has-resume { padding-bottom: calc(var(--tabbar) + 96px); }
}
/* Coach history: back to where you came from */
.back-to { display: inline-block; margin-bottom: 8px; font-size: 14px; }

/* ---------- Coach feedback ---------- */
.feedback-coach { margin-top: 14px; }
.feedback-box { margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); }
.feedback-box p { margin: 4px 0 0; }
.feedback-actions { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; }
.feedback-actions form { display: inline; }
.feedback-edit[open] { flex-basis: 100%; }
.feedback-edit summary, .feedback-new summary { list-style: none; cursor: pointer; }
.feedback-edit summary::-webkit-details-marker, .feedback-new summary::-webkit-details-marker { display: none; }
.feedback-new[open] summary { display: none; }
.feedback-coach textarea { width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; }
.feedback-card { padding: 16px 20px; margin-bottom: 16px; }
.feedback-from { margin-bottom: 16px; padding: 14px 16px; border-left: 4px solid var(--blue); border-radius: 10px; background: var(--blue-soft); }
.feedback-from small { color: var(--blue); font-weight: 600; }
.feedback-from p { margin: 6px 0 0; font-size: 16px; }
.feedback-today { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px 16px; border-left: 4px solid var(--blue); text-decoration: none; color: inherit; }
.feedback-today strong { display: block; font-weight: 600; }
.feedback-today small { display: block; }
.feedback-icon { display: inline-flex; color: var(--blue); font-size: 24px; }
.feedback-mark { display: inline-flex; color: var(--muted); font-size: 16px; }
.feedback-mark.is-new { color: var(--blue); }

/* ---------- Error pages (404, 403, 500, expired form) ---------- */
.error-page { text-align: center; }
.error-logo { display: inline-flex; margin-bottom: 20px; padding: 12px 14px; border-radius: 14px; background: var(--navy); } /* the logo is drawn for a dark background */
.error-logo .logo { width: 64px; height: auto; }
.error-card { max-width: 520px; margin: 40px auto; }
.error-code { margin: 0 0 4px !important; color: var(--muted); font-family: var(--font-cond); font-size: 40px; font-weight: 700; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px !important; }

/* ---------- Notifications: the bell and the list ---------- */
.page-top { display: flex; justify-content: flex-end; margin: -12px 0 4px; }
.bell { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--text); font-size: 24px; }
.bell:hover, .bell.is-active { background: var(--blue-soft); color: var(--blue); }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.nav-link { position: relative; }
.nav-badge { position: absolute; top: 6px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notification { align-items: flex-start; }
.notification .notification-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex: none; }
.notification.is-unread { background: var(--blue-soft); }
.notification.is-unread .notification-dot { background: var(--blue); }
.notification small { display: block; }
.notification-time { flex: none; white-space: nowrap; }
.remind { display: flex; align-items: center; gap: 12px; text-align: right; }
.remind .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .nav-badge { top: 8px; right: auto; left: calc(50% + 6px); }  /* next to the tab's icon */
}

/* ---------- Messages (inbox/) ---------- */
.inbox-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.inbox-filters input[type=search] { flex: 1 1 200px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; }
.inbox-filters select { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; }
.inbox-row { align-items: center; }
.inbox-row.is-unread { background: var(--blue-soft); }
.inbox-row.is-unread .notification-dot { background: var(--blue); }
.inbox-row strong { display: block; }
.inbox-row small { display: block; }
.inbox-time, .inbox-count { flex: none; white-space: nowrap; }
.inbox-count { color: var(--muted); font-size: 13px; }
.thread { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; }
.bubble small { display: block; font-size: 12px; opacity: .8; }
.bubble p { margin: 4px 0 0; }
.bubble.from-coach { justify-self: start; background: var(--blue-soft); }
.bubble.from-athlete { justify-self: end; background: #fff; border: 1px solid var(--border); }
.thread-small { margin: 10px 0 6px; }
.thread-small .bubble { max-width: 100%; font-size: 14px; }
.thread-inline { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.thread-inline .thread { flex-basis: 100%; }
.reply-inline { flex-basis: 100%; }
.reply-inline summary { list-style: none; cursor: pointer; display: inline; }
.reply-inline summary::-webkit-details-marker { display: none; }
.reply-inline textarea, .reply-box textarea, .announcement-page textarea { width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; }
.reply-box { padding: 14px 16px; }
.reply-box label { font-size: 13px; color: var(--muted); }
.reply-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.confirm-state { margin: 0 0 14px; }
.confirm-card { margin-bottom: 12px; padding: 14px 16px; border-left: 4px solid var(--blue); }
.confirm-card p { margin: 6px 0 12px; font-size: 16px; }
.confirm-head { display: flex; justify-content: space-between; gap: 12px; }
.confirm-actions { display: flex; gap: 10px; }
.more-confirm { display: flex; justify-content: space-between; margin-bottom: 16px; padding: 12px 16px; background: var(--blue-soft); color: var(--blue); font-weight: 600; text-decoration: none; }
.fyi-card { display: block; margin-bottom: 12px; padding: 12px 16px; text-decoration: none; color: inherit; }
.fyi-card small, .fyi-card strong { display: block; }
.section-head-row { display: flex; justify-content: space-between; align-items: baseline; }
.check-line { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.versions { margin-top: 8px; font-size: 13px; }
.versions summary { cursor: pointer; color: var(--muted); }
.version { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--border); }
.version p { margin: 2px 0 0; color: var(--muted); text-decoration: line-through; }
.correction-note { margin: 0 0 12px; font-size: 14px; }
.show-for { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0 4px; }
.show-for p { flex-basis: 100%; margin: 0; }
.announcement-text { font-size: 17px; margin: 0 0 10px; }
.announcement-page .label { margin: 12px 0 2px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ============ Max history and My progress (graphs drawn in lifting/graphs.py) ============ */
.progress-link { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 600; }
.graph-card { padding: 18px 20px 12px; }
.graph-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.graph-head h2 { font-size: 18px; }
.graph-head p { margin: 2px 0 0; }
.range-picker { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); }
.range { padding: 4px 10px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.range:hover { color: var(--text); }
.range.is-active { background: var(--card); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 33, 58, .12); }
.graph { position: relative; margin: 10px 0 0; }
.graph svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.graph-grid line { stroke: var(--rule); stroke-width: 1; }
.graph-grid text, .graph-months text { fill: var(--muted); font-size: 13px; font-family: var(--font); }
.graph-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graph-dot { fill: var(--blue); stroke: var(--card); stroke-width: 2; }
.graph-hit { fill: transparent; cursor: pointer; }
.graph-hit:focus { outline: none; }
.graph-hit:focus-visible { stroke: var(--blue); stroke-width: 2; }
.graph-cross { stroke: var(--border-strong); stroke-width: 1; }
.graph-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none;
  padding: 5px 10px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 13px; white-space: nowrap;
}
.graph-tip strong { font-weight: 700; }
.graph-empty { padding: 30px 0 20px; text-align: center; }
.max-row { cursor: default; }
.max-change { min-width: 44px; color: var(--muted); font-size: 14px; font-weight: 600; text-align: right; }
.max-change.is-up { color: var(--green); }
.max-change.is-down { color: var(--danger); }
.max-row form { margin: 0; }
.narrow-graph { display: none; }
@media (max-width: 600px) {
  .wide-graph { display: none; }
  .narrow-graph { display: block; }
  .graph-card { padding: 16px 14px 10px; }
}

/* ============ Builder: Changes by week (wave loading) ============ */
.b-weeks-toggle {
  margin-top: 4px; padding: 0; border: 0; background: none; color: var(--blue);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left;
}
.b-weeks-toggle:hover { text-decoration: underline; }
.b-weeks-toggle.is-on { color: var(--text); }
.b-weeks-toggle.is-on::before { content: "↗ "; color: var(--blue); }
.b-weeks { grid-column: 2 / -1; margin: 4px 0 6px; padding: 12px; border-radius: 10px; background: var(--bg); }
.b-weeks-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.b-weeks-count button { width: 32px; height: 32px; font-size: 18px; }
.b-weeks-count button:disabled { opacity: .4; cursor: default; }
.b-weeks-scroll { overflow-x: auto; }
.b-weeks-table { border-collapse: separate; border-spacing: 4px; }
.b-weeks-table th { color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
.b-weeks-table tbody th { padding-right: 6px; text-align: left; }
.b-weeks-table input {
  width: 52px; height: 34px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
  font: inherit; font-size: 14px; text-align: center;
}
.b-weeks-table input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }
.b-weeks-table tr:first-child input[data-key="percent"] { border-color: #B9C9F3; background: var(--blue-soft); }
.b-weeks-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.b-weeks-actions [data-weeks-done] { margin-left: auto; }
.btn-small { min-height: 34px; padding: 0 12px; font-size: 13px; }
@media (max-width: 960px) { .b-weeks { grid-column: 2 / 5; } }

/* ============ Builder: pairs (contrast training) ============ */
.b-links { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.b-pair-toggle {
  margin-top: 4px; padding: 0; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.b-pair-toggle:hover { color: var(--blue); text-decoration: underline; }
/* The rows of a group look joined: no line between them, and a blue bracket on the left */
.b-row.has-pair, .b-row.is-paired { position: relative; }
.b-row.has-pair { border-bottom-color: transparent; }
.b-row.is-paired:has(+ .b-row.is-paired) { border-bottom-color: transparent; }
.b-row.has-pair::after, .b-row.is-paired::after {
  content: ""; position: absolute; left: 30px; width: 3px; background: var(--blue); border-radius: 2px;
}
.b-row.has-pair::after { top: 50%; bottom: 0; }
.b-row.is-paired::after { top: 0; bottom: 0; }
.b-row.is-paired:not(:has(+ .b-row.is-paired))::after { bottom: 50%; }
.b-row.is-paired .b-name { margin-left: 14px; }
.b-row.no-rest > .b-cell:nth-of-type(4) input { visibility: hidden; }
.b-cell input[readonly] { background: var(--bg); color: var(--muted); }
/* Athlete: a pair's cards sit together under one label */
.pair-head { margin: 18px 0 6px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.log-ex.has-pair { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.log-ex.is-paired { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.log-ex.is-paired:has(+ .log-ex.is-paired) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ============ Builder: reps, time or distance ============ */
/* The picker hangs just under the Reps box, so the box lines up with Sets */
.b-amount { position: relative; }
.b-measure {
  position: absolute; top: 100%; left: 0;
  display: block; width: 100%; margin-top: 1px; padding: 0 2px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; text-align: center; cursor: pointer;
}
.b-measure:hover, .b-measure:focus { color: var(--blue); outline: none; }

/* ============ Who's Done What: a new max to OK ============ */
.suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; padding: 12px 16px; border-color: #B9C9F3; background: var(--blue-soft); }
.suggestion p { margin: 0; font-size: 15px; }
.suggestion-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; }
.suggestion-actions { display: flex; gap: 8px; margin: 0; }
.move-form { margin-top: 16px; } .move-form .form-actions { margin-top: 14px; }

/* ============ Location ============ */
.place-field { max-width: 420px; }
.place-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.place-chip { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.place-chip:hover { border-color: var(--text); }
.place-chip.is-on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.place-hint { margin: 6px 0 0; color: var(--amber-text); font-size: 13px; }
.place-hint .link-button { font-size: 13px; }
.place-row { gap: 14px; }
.place-rename { display: flex; gap: 8px; margin: 0; }
.place-rename input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.place-row form { margin: 0; }
.place-for { margin: 0 0 14px; padding: 0; border: 0; } .place-for .when-check { margin: 4px 0; }

/* ============ Builder: library filter chips ============ */
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lib-chip { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.lib-chip:hover { color: var(--text); border-color: var(--border-strong); }
.lib-chip.is-on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.when-dates label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.when-dates li.is-skipped label { opacity: .6; text-decoration: line-through; }

/* ============ Workouts: search and sort saved workouts ============ */
.wo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.wo-search { flex: 1; min-width: 200px; max-width: 360px; margin: 0; }

/* ============ Technical workouts: a checklist of drills ============ */
/* "What kind of workout?" (pop-up on Workouts, or its own page) */
.kind-box { width: min(640px, calc(100vw - 32px)); }
.kind-box h2 { margin-bottom: 14px; }
.kind-box .form-actions { margin-top: 14px; justify-content: flex-end; }
.kind-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kind-choice {
  display: block;
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}
.kind-choice strong { display: block; font-size: 18px; }
.kind-choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.kind-choice:hover, .kind-choice:focus-visible { border-color: var(--blue); background: var(--blue-soft); outline: none; }
.kind-technical { border-left-color: var(--technical); }
.kind-technical:hover, .kind-technical:focus-visible { border-color: var(--technical); background: var(--technical-soft); }
@media (max-width: 480px) { .kind-choices { grid-template-columns: 1fr; } }
.kind-tag { margin-right: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.kind-tag-technical { background: var(--technical-soft); color: var(--technical); }

/* Where technical workouts show up next to lifting ones */
.wo-card.wo-technical { border-left-color: var(--technical); }
.list-bar-technical { background: var(--technical); }
.pill-technical { background: var(--technical); }

/* The Technical builder: library + checklist (no Load preview) */
.builder-technical { grid-template-columns: 250px minmax(0, 1fr); }
.d-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; align-items: start; padding: 10px 8px; border-bottom: 1px solid var(--rule); }
.d-row .b-handle, .d-row .b-remove { margin-top: 2px; }
.d-row.is-dragging { position: relative; z-index: 2; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(22, 33, 58, .18); }
.d-row.is-dragging .b-handle { color: var(--blue); cursor: grabbing; }
.d-row .b-name { --cat: var(--technical); display: flex; gap: 6px; align-items: baseline; padding-top: 6px; }
.d-number { color: var(--muted); font-size: 14px; font-weight: 600; }
.d-details { display: block; margin-top: 8px; }
.d-details textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
}
.d-details textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }
.d-row .b-errors { grid-column: 2 / 3; }
@media (max-width: 960px) {
  .builder-technical { grid-template-columns: minmax(0, 1fr); }
  /* The lifting rows' phone layout puts pieces in named spots; drill rows keep their 3 columns */
  .d-row .b-handle, .d-row .b-name, .d-row .b-remove { grid-area: auto; }
}

/* Athlete: check off each drill */
.drill-list { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.drill { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--technical); }
.drill:last-child { border-bottom: 0; }
.drill-check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.drill-check svg { width: 26px; height: 26px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.drill-check:hover { border-color: var(--blue); }
.drill-check:disabled { cursor: default; opacity: .6; }
.drill.is-done .drill-check { border-color: var(--green); background: var(--green); }
.drill.is-done .drill-check svg { stroke: #fff; }
.drill-name { margin-top: 2px; font-size: 18px; }
.drill.is-done .drill-name { color: var(--muted); }
.drill-details { margin: 4px 0 0; font-size: 15px; }
.drill .link-button { margin-top: 6px; font-size: 14px; }

/* Coach (Who's Done What panel) and history: each drill, checked or not, with the note */
.detail-drills, .history-drills { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; }
.detail-drills li, .history-drills li { display: flex; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--rule); }
.history-drills li { padding: 12px 20px; }
.history-drills li:first-child { border-top: 0; }
.detail-drills small, .history-drills small { display: block; margin-top: 2px; color: var(--muted); }
.detail-tick { flex: none; width: 18px; color: var(--muted); font-weight: 700; }
.is-done .detail-tick { color: var(--green); }
.is-short .detail-tick { color: var(--amber); }
.is-missing strong { color: var(--muted); font-weight: 500; }

/* Drill tags: chips over the library, the tag picker in the drill box, and Manage tags */
.lib-tags { margin-top: 10px; }
.lib-manage { margin-top: 6px; font-size: 12px; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-picker .tag-none { margin: 0; }
.tag-new { display: flex; gap: 6px; }
.tag-new input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.tag-new input:focus, .tag-list input:focus { outline: none; border-color: var(--blue); }
.tag-new .btn { min-height: 36px; padding: 0 12px; }
.tag-list { margin: 0 0 8px; padding: 0; list-style: none; }
.tag-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.tag-list input { flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.tag-list small { flex: none; width: 50px; font-size: 12px; text-align: right; }
.lib-tags .lib-chips { margin-top: 0; }

/* ============ Running workouts ============ */
.kind-running { border-left-color: var(--running); }
.kind-running:hover, .kind-running:focus-visible { border-color: var(--running); background: var(--running-soft); }
.kind-choices:has(.kind-running) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .kind-choices:has(.kind-running) { grid-template-columns: 1fr; } }
.kind-tag-running { background: var(--running-soft); color: var(--running); }
.wo-card.wo-running { border-left-color: var(--running); }
.list-bar-running { background: var(--running); }
.pill-running { background: var(--running); }

/* The Running builder: one column of lines */
.builder-running { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.r-row .b-name { --cat: var(--running); }
.r-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 8px; }
.r-field { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 12px; }
.r-field input, .r-field select {
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
}
.r-field input:focus, .r-field select:focus, .r-note input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 81, 214, .15); }
.r-reps input { width: 60px; }
.r-distance input { width: 84px; }
.r-target input { width: 76px; }
.r-rest input { width: 66px; }
.r-x { padding-bottom: 9px; color: var(--muted); font-weight: 600; }
.r-suffix { display: inline-flex; align-items: center; gap: 4px; }
.r-suffix small { color: var(--muted); font-size: 13px; }
.r-note { display: block; margin-top: 8px; }
.r-note input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.r-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.run-tags { margin: 18px 0 0; }
.run-tags .tag-new { margin-top: 6px; max-width: 360px; }
.run-tags .lib-manage { display: block; }
.tag-check { position: relative; display: inline-flex; align-items: center; }
.tag-check input { position: absolute; opacity: 0; pointer-events: none; }
.tag-check:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.tag-check:has(input:checked) span::before { content: "✓ "; }
.tag-check:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Athlete: each rep's time and check */
.run-note { margin: 6px 0 0; font-size: 15px; }
.run-time { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.run-time .set-input { width: 104px; }
.run-result { min-height: 16px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.run-result.is-faster { color: var(--green); }
.detail-reps .rep small { display: block; color: var(--muted); font-size: 11px; }
.history-sets small { color: var(--muted); }