/* GENERATED by tools/build-exercise-css.js from Exercise Studio's style.css + strength.css
   (scoped to .ex-app, dark theme removed) and public/ex/theme.css. Edit those, then rebuild. */
/* ---- style.css (Exercise Studio, scoped) ---- */
.ex-app {
  --ink: #182e36;
  --muted: #52656d;
  --line: #dae3e6;
  --paper: #f4f7f8;
  --teal: #006d77;
  --lime: #d6ed9f;
  --white: #fff;
}
.ex-app * {
  box-sizing: border-box;
}
.ex-app {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.5 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}
.ex-app button,
.ex-app input,
.ex-app select,
.ex-app textarea {
  font: inherit;
  color: inherit;
}
.ex-app button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 14px;
  font-weight: 600;
}
.ex-app button:hover {
  border-color: var(--teal);
  background: #f0f8f8;
}
.ex-app button:disabled {
  opacity: 0.45;
  cursor: default;
}
.ex-app button.primary {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
}
.ex-app button.secondary {
  background: var(--lime);
  border-color: var(--lime);
}
.ex-app button.icon {
  padding: 5px 10px;
}
.ex-app button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.ex-app input,
.ex-app textarea,
.ex-app select {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 10px;
  max-width: 100%;
  min-width: 0;
}
.ex-app input:focus,
.ex-app textarea:focus,
.ex-app select:focus,
.ex-app button:focus-visible {
  outline: 3px solid #70bec3;
  outline-offset: 2px;
}
.ex-app textarea {
  resize: vertical;
  min-height: 80px;
  width: 100%;
}
.ex-app label {
  font-size: 14px;
  color: var(--muted);
  display: grid;
  gap: 5px;
}
.ex-app h1 {
  font-size: 29px;
  letter-spacing: -0.9px;
  margin: 4px 0 0;
  line-height: 1.2;
}
.ex-app h2 {
  font-size: 20px;
  margin: 0;
}
.ex-app h3 {
  font-size: 16px;
  margin: 0;
}
.ex-app p {
  margin: 8px 0;
}
.ex-app .eyebrow {
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--muted);
}
.ex-app .rail {
  width: 110px;
  background: var(--ink);
  color: white;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 25px 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 2;
}
.ex-app .brand {
  font-size: 45px;
  font-weight: 800;
  line-height: 1;
}
.ex-app .brand span {
  color: var(--lime);
}
.ex-app .rail p {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-align: center;
  font-weight: 700;
  margin: 12px 0 36px;
}
.ex-app .rail nav {
  display: grid;
  gap: 9px;
  width: 100%;
}
.ex-app .rail nav button {
  border: 0;
  background: transparent;
  color: #b7c8ce;
  padding: 13px 2px;
  font-size: 13px;
}
.ex-app .rail nav button.active {
  background: #35505b;
  color: white;
}
.ex-app .rail-bottom {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
}
.ex-app .rail-bottom small {
  display: block;
  letter-spacing: 0;
  color: #b7c8ce;
  margin-top: 5px;
}
.ex-app main {
  margin-left: 110px;
  padding: 30px 32px;
}
.ex-app .ex-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.ex-app .actions,
.ex-app .toolbar,
.ex-app .row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ex-app .local-badge,
.ex-app .pill {
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 5px;
  background: #e6eeee;
  color: #3d6467;
}
.ex-app .workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(350px, 1fr);
  gap: 22px;
  align-items: start;
}
.ex-app .panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.ex-app .panel-head {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ex-app .panel-head p,
.ex-app .muted {
  font-size: 14px;
  color: var(--muted);
}
.ex-app .panel-body {
  padding: 20px;
}
.ex-app .search {
  width: 100%;
  margin-bottom: 12px;
  background: var(--paper);
}
.ex-app .toolbar {
  margin-bottom: 16px;
}
.ex-app .catalogue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ex-app .exercise-card {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px;
  min-height: 135px;
  display: flex;
  flex-direction: column;
}
.ex-app .exercise-card h3 {
  margin-bottom: 12px;
  line-height: 1.35;
}
.ex-app .exercise-card .row {
  margin-top: auto;
  justify-content: space-between;
}
.ex-app .exercise-card .open {
  border: 0;
  padding: 0;
  text-align: left;
  font-size: 16px;
  background: none;
}
.ex-app .exercise-card .initial {
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ex-app .count {
  color: var(--muted);
  font-size: 13px;
}
.ex-app .draft-title {
  font-weight: 700;
  font-size: 19px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 0 14px;
  margin-bottom: 15px;
}
.ex-app .empty {
  padding: 42px 20px;
  text-align: center;
  background: var(--paper);
  border: 1px dashed #cbd8dd;
  border-radius: 9px;
  color: var(--muted);
}
.ex-app .empty strong {
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}
.ex-app .empty .symbol {
  font-size: 36px;
  color: var(--teal);
  margin-bottom: 14px;
}
.ex-app .section-label {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--muted);
  margin: 20px 0 10px;
}
.ex-app .rx-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}
.ex-app .rx-card .row {
  justify-content: space-between;
}
.ex-app .rx-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.ex-app .rx-fields input {
  width: 100%;
  padding: 6px 8px;
}
.ex-app .rx-fields label {
  font-size: 12px;
}
.ex-app .small {
  font-size: 12px;
}
.ex-app .spacer {
  flex: 1;
}
.ex-app .footer-actions {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.ex-app .table {
  width: 100%;
  border-collapse: collapse;
}
.ex-app .table td,
.ex-app .table th {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
}
.ex-app .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.ex-app .stack {
  display: grid;
  gap: 16px;
}
.ex-app .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ex-app .full {
  grid-column: 1/-1;
}
.ex-app dialog {
  width: min(760px, calc(100% - 32px));
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  color: var(--ink);
}
.ex-app dialog::backdrop {
  background: #0f283888;
}
.ex-app .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.ex-app .check {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 7px 0;
}
.ex-app .check input {
  width: 17px;
  height: 17px;
}
.ex-app .filter-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.ex-app details {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
}
.ex-app summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.ex-app .notice {
  background: #eef5f6;
  padding: 12px 15px;
  font-size: 14px;
  border-radius: 7px;
  margin: 15px 0;
}
.ex-app .schedule-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  margin: 16px 0;
}
.ex-app .schedule-tabs button {
  white-space: nowrap;
}
.ex-app .danger {
  color: #a53139;
}
.ex-app #toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  border-radius: 9px;
  padding: 12px 20px;
  z-index: 10;
  display: none;
}
.ex-app .print-only {
  display: none;
}
.ex-app .program-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ex-app .status-strip {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin-bottom: 20px;
}
.ex-app .status-strip strong {
  font-size: 26px;
  display: block;
}
.ex-app .status-strip span {
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 1100px) {
.ex-app main {
    padding: 24px 20px;
  }
.ex-app .workspace {
    grid-template-columns: 1fr;
  }
.ex-app .local-badge {
    display: none;
  }
}
@media (max-width: 650px) {
.ex-app .rail {
    width: 100%;
    height: 65px;
    bottom: 0;
    top: auto;
    padding: 0;
    display: block;
  }
.ex-app .brand,
.ex-app .rail > p,
.ex-app .rail-bottom {
    display: none;
  }
.ex-app .rail nav {
    display: flex;
    height: 100%;
    justify-content: space-around;
    gap: 0;
  }
.ex-app .rail nav button {
    font-size: 12px;
    padding: 7px;
    flex: 1;
  }
.ex-app main {
    margin: 0;
    padding: 22px 14px 85px;
  }
.ex-app .ex-head {
    align-items: start;
  }
.ex-app h1 {
    font-size: 24px;
  }
.ex-app .eyebrow {
    font-size: 10px;
  }
.ex-app .panel-head,
.ex-app .panel-body {
    padding: 15px;
  }
.ex-app .catalogue-grid,
.ex-app .form-grid,
.ex-app .filter-groups {
    grid-template-columns: 1fr 1fr;
  }
.ex-app .actions > button {
    padding: 7px;
    font-size: 12px;
  }
.ex-app .table {
    display: block;
    overflow: auto;
  }
.ex-app .rx-fields {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media print {
.ex-app {
    background: white;
  }
.ex-app .rail,
.ex-app .ex-head,
.ex-app #toast,
.ex-app dialog,
.ex-app .no-print {
    display: none !important;
  }
.ex-app main {
    margin: 0;
    padding: 0;
  }
.ex-app .print-only {
    display: block;
  }
.ex-app .panel {
    border: 0;
  }
.ex-app .rx-card {
    break-inside: avoid;
  }
.ex-app .workspace > .panel:first-child {
    display: none;
  }
.ex-app .workspace {
    display: block;
  }
.ex-app button {
    display: none !important;
  }
.ex-app input,
.ex-app textarea,
.ex-app select {
    border: 0;
    padding: 0;
  }
.ex-app .rx-fields {
    grid-template-columns: repeat(6, 1fr);
  }
}
.ex-app .compact .rx-card {
  padding: 10px;
}
.ex-app .compact .rx-fields {
  margin: 8px 0;
}
.ex-app .client-plan article {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.ex-app .client-plan h2 {
  margin-top: 28px;
}
.ex-app .client-plan label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ex-app .catalogue-grid > .empty {
  grid-column: 1/-1;
}
.ex-app a {
  color: var(--teal);
}
.ex-app .workspace #results {
  max-height: calc(100vh - 370px);
  min-height: 240px;
  overflow: auto;
  padding-right: 4px;
}
.ex-app .workspace > #builderPanel {
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
  overflow: auto;
}
@media (max-width: 1100px) {
.ex-app .workspace #results {
    max-height: 360px;
  }
.ex-app .workspace > #builderPanel {
    position: static;
    max-height: none;
  }
}
@media (max-width: 650px) {
.ex-app .workspace #results {
    max-height: 300px;
  }
.ex-app .toolbar button {
    padding: 7px 10px;
  }
.ex-app .rx-card[draggable] {
    touch-action: pan-y;
  }
}
@media print {
.ex-app .workspace > #builderPanel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}
.ex-app .table-scroll {
  overflow-x: auto;
}
.ex-app .pain-chart {
  width: 100%;
  max-height: 220px;
  color: inherit;
}
.ex-app .pain-chart text {
  font: 11px system-ui;
  fill: currentColor;
}
.ex-app .history-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 20px 0;
}
.ex-app .history-calendar > strong {
  text-align: center;
  font-size: 12px;
}
.ex-app .calendar-day {
  min-height: 60px;
  padding: 6px;
  border: 1px solid #bccdcd55;
  border-radius: 6px;
}
.ex-app .calendar-day small {
  display: block;
  font-size: 10px;
}
.ex-app .calendar-day.recorded {
  background: #79b2ad33;
}
.ex-app .table input[type='checkbox'] {
  width: 18px;
  height: 18px;
}
.ex-app .history-calendar .calendar-day strong {
  font-size: 12px;
}
.ex-app .catalogue-names {
  max-height: calc(100vh - 340px);
  min-height: 200px;
  overflow: auto;
}
.ex-app .exercise-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid #b9c8cb55;
}
.ex-app .exercise-name-row > .open {
  text-align: left;
  white-space: normal;
  background: transparent;
  border: 0;
  color: inherit;
  flex: 1;
  padding: 6px;
}
.ex-app .exercise-name-row > button:last-child {
  flex-shrink: 0;
}
@media (max-width: 1100px) {
.ex-app .catalogue-names {
    max-height: 360px;
  }
}
@media (max-width: 600px) {
.ex-app .catalogue-names {
    max-height: 300px;
  }
}
.ex-app .exercise-instructions {
  margin: 18px 0;
}
.ex-app .exercise-instructions section {
  margin: 18px 0;
}
.ex-app .exercise-instructions h4 {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--teal);
  margin: 0 0 7px;
}
.ex-app .exercise-instructions p {
  font-size: 14px;
  line-height: 1.7;
  margin: 6px 0;
}
.ex-app .instruction-credit {
  font-size: 11px !important;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.ex-app .instruction-credit a {
  color: var(--teal);
}
.ex-app .instruction-badge {
  display: inline-block;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #edf1f1;
  color: #546b6b;
  line-height: 1.4;
}
.ex-app .instruction-badge.ready {
  background: #e3efde;
  color: #37613c;
}
.ex-app .instruction-badge.reviewed {
  background: #d8eee9;
  color: #22614f;
}
.ex-app .instruction-missing {
  font-size: 13px;
  background: #fff5df;
  color: #72592d;
  padding: 12px;
  border-radius: 6px;
}
.ex-app .instruction-coverage {
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0;
}
.ex-app .compact-instructions {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.ex-app .rail nav {
  gap: 4px;
}
.ex-app .rail nav button {
  padding: 9px 2px;
}
.ex-app .instruction-credit a:focus-visible {
  outline: 3px solid #70bec3;
}
@media (max-width: 600px) {
.ex-app .rail nav button {
    font-size: 10px;
    padding: 8px 3px;
  }
.ex-app .rail nav {
    gap: 0;
  }
}
.ex-app .instruction-source-note {
  padding: 10px 12px;
  border-left: 3px solid #bd7a19;
  background: var(--surface-alt, #fff7e7);
  color: var(--text);
  font-size: 13px;
}
.ex-app .exercise-instructions h4 {
  margin-bottom: 7px;
}
.ex-app .exercise-instructions p {
  overflow-wrap: anywhere;
}
.ex-app .instruction-coverage {
  font-size: 13px;
  padding: 10px 12px;
  background: var(--surface-alt, #edf5f4);
  border-radius: 8px;
}
.ex-app .modal-head {
  align-items: flex-start;
  gap: 20px;
}
.ex-app .modal-head h2 {
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ex-app .modal-head > button {
  flex-shrink: 0;
  min-width: 40px;
  min-height: 40px;
}
.ex-app .instruction-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.ex-app .instruction-meta .instruction-badge {
  font-size: 12px;
  padding: 5px 9px;
}
.ex-app .instruction-review-state {
  font-size: 13px;
  color: var(--muted);
}
.ex-app .instruction-meta-divider {
  color: var(--muted);
}
.ex-app .exercise-instructions {
  max-width: 70ch;
  margin: 24px 0;
}
.ex-app .exercise-instructions section {
  margin: 0 0 26px;
}
.ex-app .exercise-instructions section:last-child {
  margin-bottom: 0;
}
.ex-app .exercise-instructions h4 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 12px;
}
.ex-app .exercise-instructions p {
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.ex-app .exercise-instructions p:last-child {
  margin-bottom: 0;
}
.ex-app .exercise-instructions ul,
.ex-app .exercise-instructions ol {
  padding-left: 1.6em;
  margin: 10px 0 18px;
  font-size: 15px;
  line-height: 1.7;
}
.ex-app .exercise-instructions li {
  padding-left: 5px;
  margin-bottom: 11px;
}
.ex-app .exercise-instructions li::marker {
  color: var(--teal);
  font-weight: 700;
}
.ex-app .exercise-instructions li p {
  margin: 0 0 8px;
}
.ex-app .instruction-steps li {
  padding-left: 8px;
  margin-bottom: 14px;
}
.ex-app .instruction-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 20px;
  margin-top: 28px;
}
.ex-app .instruction-actions button {
  min-height: 44px;
  line-height: 1.4;
  white-space: normal;
}
.ex-app .instruction-categories {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.ex-app .instruction-categories:empty {
  display: none;
}
.ex-app .instruction-categories p {
  margin: 5px 0;
}
@media (max-width: 520px) {
.ex-app .instruction-actions {
    grid-template-columns: 1fr;
  }
.ex-app .instruction-meta-divider {
    display: none;
  }
.ex-app .instruction-review-state {
    flex-basis: 100%;
  }
.ex-app .exercise-instructions p,
.ex-app .exercise-instructions ul,
.ex-app .exercise-instructions ol {
    font-size: 15px;
  }
.ex-app .exercise-instructions {
    max-width: 100%;
  }
}
@media print {
.ex-app .exercise-instructions {
    max-width: none;
  }
.ex-app .exercise-instructions h4 {
    break-after: avoid;
  }
.ex-app .exercise-instructions li {
    break-inside: avoid;
  }
}
.ex-app .today-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 6px;
}
.ex-app .today-head h2 {
  margin: 4px 0 0;
  font-size: 24px;
}
.ex-app .training-stats.today-stats {
  margin: 14px 0 20px;
}
.ex-app .today-stats > div {
  background: var(--white);
}
.ex-app .today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.ex-app .today-grid .panel-head h2 {
  font-size: 17px;
  margin: 0;
}
.ex-app .today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow: auto;
}
.ex-app .today-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.ex-app .today-row:last-child {
  border-bottom: 0;
}
.ex-app .today-row > div {
  min-width: 0;
}
.ex-app .today-row strong,
.ex-app .today-row small {
  display: block;
  overflow-wrap: anywhere;
}
.ex-app .today-row small {
  color: var(--muted);
  margin-top: 2px;
}
.ex-app .today-row button {
  flex: none;
}
.ex-app .today-steps li {
  margin: 8px 0;
}
.ex-app .today-data {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.ex-app .today-data h3 {
  margin: 0 0 6px;
}
.ex-app .today-data p {
  margin: 4px 0;
}
.ex-app .notice.recovery {
  border-color: #b64a36;
}
.ex-app #backupReminder:not([hidden]) {
  border-color: #b64a36;
  color: #b64a36;
}
@media (max-width: 900px) {
.ex-app .today-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
.ex-app .rail nav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
.ex-app .rail nav::-webkit-scrollbar {
    display: none;
  }
.ex-app .rail nav button {
    flex: none;
    padding: 8px 12px;
    font-size: 12px;
  }
}
@media (max-width: 650px) {
.ex-app #toast {
    bottom: 80px;
  }
}

/* ---- strength.css (Exercise Studio, scoped) ---- */
.ex-app .strength-hero {
  background: #163d3c;
  color: #fff;
  border-radius: 18px;
  padding: 34px 38px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
}
.ex-app .strength-hero .eyebrow {
  color: #b9dabe;
}
.ex-app .strength-hero h2,
.ex-app .strength-hero h1 {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -1.4px;
  margin: 12px 0 18px;
}
.ex-app .strength-hero em {
  font-style: normal;
  color: #d6ed9f;
}
.ex-app .strength-hero p {
  color: #d7e7e1;
  max-width: 570px;
}
.ex-app .week-pill {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-width: 200px;
  text-align: center;
}
.ex-app .week-pill span {
  border: 1px solid #688f82;
  border-radius: 9px;
  padding: 13px 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}
.ex-app .week-pill small {
  grid-column: 1/-1;
  color: #d6ed9f;
}
.ex-app .strength-tabs {
  margin: 18px 0;
}
.ex-app .strength-selectors {
  display: flex;
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.ex-app .strength-selectors label {
  flex: 1;
  min-width: 220px;
}
.ex-app .strength-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr);
  gap: 22px;
  align-items: start;
}
.ex-app .movement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px 0;
}
.ex-app .movement-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.ex-app .movement-grid h3 {
  margin-top: 10px;
}
.ex-app .movement-grid p {
  font-size: 13px;
  color: var(--muted);
}
.ex-app .movement-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #225c53;
  background: #e5eedb;
  border-radius: 5px;
  padding: 5px 8px;
  display: inline-block;
}
.ex-app .research-note {
  margin: 15px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid #a9c970;
  border-radius: 8px;
  background: var(--white);
}
.ex-app .research-note summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.ex-app .research-note summary > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.ex-app .research-note p {
  font-size: 14px;
  margin: 12px 0;
}
.ex-app .research-note a {
  font-size: 13px;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ex-app .schedule-list {
  margin-top: 15px;
}
.ex-app .schedule-list > details {
  border-top: 1px solid var(--line);
  padding: 13px 0;
}
.ex-app .schedule-list summary {
  cursor: pointer;
  font-weight: 600;
}
.ex-app .scheduled-session {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.ex-app .scheduled-session > div {
  flex: 1;
}
.ex-app .scheduled-session small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.ex-app .scheduled-session > span {
  font-size: 12px;
  color: var(--muted);
}
.ex-app .strength-quote {
  margin: 22px 4px;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--teal);
}
.ex-app .strength-quote small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 12px;
}
.ex-app .training-exercise {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 22px 0;
  padding: 18px;
  min-width: 0;
}
.ex-app .training-exercise legend {
  font-size: 16px;
  font-weight: 600;
  padding: 0 8px;
}
.ex-app .set-table input[type='number'] {
  width: 100%;
  min-width: 64px;
  max-width: 120px;
}
.ex-app .set-table th {
  font-size: 12px;
}
.ex-app .strength-chart {
  display: block;
  width: 100%;
  max-height: 360px;
  margin: 20px 0;
}
.ex-app .strength-chart text {
  font: 12px system-ui;
  fill: currentColor;
}
.ex-app .progress-key {
  display: flex;
  gap: 22px;
  font-size: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.ex-app .progress-key span:first-child {
  color: #006d77;
}
.ex-app .progress-key span:last-child {
  color: #997126;
}
.ex-app .history-entry {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.ex-app .history-entry > div {
  flex: 1;
  min-width: 200px;
}
.ex-app .history-entry p {
  font-size: 13px;
}
.ex-app .client-training main {
  margin: 0 auto;
  max-width: 1050px;
  padding: 24px;
}
.ex-app .client-training #clientMessage {
  position: sticky;
  bottom: 12px;
  background: #183e3c;
  color: white;
  border-radius: 8px;
  padding: 12px;
  margin-top: 20px;
}
.ex-app .client-training #clientMessage:empty {
  display: none;
}
.ex-app .panel.panel-body {
  padding: 22px;
}
.ex-app .strength-layout ol {
  padding-left: 20px;
}
.ex-app .strength-layout li {
  margin: 12px 0;
  font-size: 14px;
}
@media (max-width: 1100px) {
.ex-app .strength-layout {
    grid-template-columns: 1fr;
  }
.ex-app .strength-layout > aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
.ex-app .strength-layout > aside > .panel {
    grid-column: 1/-1;
  }
}
@media (max-width: 650px) {
.ex-app .strength-hero {
    padding: 24px;
    display: block;
  }
.ex-app .week-pill {
    margin-top: 20px;
  }
.ex-app .movement-grid {
    grid-template-columns: 1fr;
  }
.ex-app .strength-layout > aside {
    display: block;
  }
.ex-app .strength-selectors {
    display: block;
  }
.ex-app .strength-selectors label {
    margin-bottom: 12px;
  }
.ex-app .scheduled-session {
    flex-wrap: wrap;
  }
.ex-app .training-exercise {
    padding: 12px;
  }
.ex-app .client-training main {
    padding: 12px;
  }
.ex-app .strength-tabs button {
    padding: 8px 11px;
  }
.ex-app .rail nav {
    gap: 1px;
  }
.ex-app .rail nav button {
    font-size: 11px;
    padding: 8px 2px;
  }
.ex-app .strength-chart text {
    font-size: 13px;
  }
}
.ex-app .day-planner {
  margin-top: 24px;
}
.ex-app .six-movements {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ex-app .session-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px;
  background: #eaf3ed;
  border-radius: 10px;
  margin-bottom: 20px;
  color: #183e36;
}
.ex-app .session-tools small {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
.ex-app .rest-tools {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.ex-app .rest-tools output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 75px;
  padding: 10px;
}
.ex-app .rest-tools label {
  font-size: 11px;
}
.ex-app .training-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px;
}
.ex-app .training-stats > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.ex-app .training-stats strong {
  font-size: 28px;
  display: block;
  line-height: 1.2;
  color: var(--teal);
}
.ex-app .training-stats span {
  font-size: 12px;
  color: var(--muted);
}
.ex-app .stats-caption {
  margin: 0 20px !important;
  font-size: 12px;
}
@media (max-width: 650px) {
.ex-app .training-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 14px 0;
  }
.ex-app .six-movements {
    grid-template-columns: 1fr;
  }
.ex-app .rest-tools button {
    padding: 8px;
  }
.ex-app .stats-caption {
    margin: 0 !important;
  }
}
.ex-app .session-state {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.ex-app .session-state.state-complete {
  background: #dff1e5;
  border-color: #9fd1b0;
  color: #1f6b3a;
}
.ex-app .session-state.state-partial {
  background: #fdf0d8;
  border-color: #efc877;
  color: #7a5200;
}
.ex-app .session-state.state-due-today {
  background: var(--lime);
  border-color: #b8d774;
  color: #34420f;
}
.ex-app .session-state.state-not-recorded {
  color: var(--muted);
}
.ex-app .rest-auto {
  font-size: 13px;
  margin: 0;
}
.ex-app #toast button {
  margin-left: 10px;
  padding: 4px 10px;
}
.ex-app .recorded-entry {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
}
.ex-app .recorded-entry h3 {
  margin: 0;
  font-size: 16px;
}
.ex-app .recorded-entry .table-scroll {
  margin-top: 8px;
}
.ex-app .unticked-question p {
  margin: 0 0 10px;
  font-weight: 600;
}
.ex-app .movement-pill.pattern-pull {
  color: #1f4f78;
  background: #e2edf7;
}
.ex-app .movement-pill.pattern-squat {
  color: #7a4b00;
  background: #fbecd0;
}
.ex-app .movement-pill.pattern-hinge {
  color: #6b2d5c;
  background: #f5e4f0;
}
.ex-app .movement-pill.pattern-balance {
  color: #34420f;
  background: var(--lime);
}
.ex-app .balance-item {
  align-items: flex-start;
  margin: 10px 0;
  font-size: 14px;
}
.ex-app .balance-item input {
  flex: none;
  margin-top: 2px;
}
.ex-app .balance-plan {
  border: 1px dashed #b8d774;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 24px;
}
.ex-app .balance-plan h3 {
  margin: 0 0 6px;
}
.ex-app .balance-plan ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 14px;
}
.ex-app .balance-summary {
  font-size: 13px;
  margin: 10px 0 0;
}
.ex-app .easier-option {
  margin: 12px 0 0;
}

/* ---- theme.css ---- */
/* The Physio Now look for the exercise system: the portal's tokens (styles.css), Inter, pill
   buttons, white cards with a soft shadow, green for action, purple for the nervous system. It
   sits on top of Exercise Studio's own (scoped) styles, so only looks change, never layout
   behaviour. Used on the studio's Exercise page and around Functional Strength in the portal. */

.ex-app {
  --ink: var(--text, #0a0a0a);
  --muted: var(--text-muted, #5a5a5a);
  --line: var(--border, #e5e7eb);
  --paper: var(--page, #f7f9fa);
  --teal: var(--brand-strong, #2f7a43);
  --lime: var(--brand-light, #e8f5ed);
  --white: #fff;
  --surface-alt: var(--bg-alt, #f5f7f9);
  font-family: var(--font, Inter, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text, #0a0a0a);
  background: transparent;
  min-width: 0;
}
.ex-app a { color: var(--brand-dk, #3d8c52); }
.ex-app h1,
.ex-app h2,
.ex-app h3 { font-family: var(--font); letter-spacing: -0.01em; }
.ex-app h2 { font: 800 19px/1.25 var(--font); }
.ex-app h3 { font: 700 15.5px/1.3 var(--font); }
.ex-app .eyebrow,
.ex-app .section-label { font: 700 11px/1.2 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-text, #2b6e3d); }
.ex-app .muted,
.ex-app .panel-head p { color: var(--text-light, #6b6b6b); }
.ex-app .danger { color: var(--danger, #b23b30); }

/* ---- page head and the section tabs ---- */
.ex-app .ex-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.ex-app .ex-title .ni-eyebrow { display: block; margin-bottom: 4px; }
.ex-app .ex-head h1 { font: 800 clamp(22px, 2.6vw, 28px)/1.15 var(--font); letter-spacing: -0.02em; margin: 0; color: var(--text); }
.ex-app .ex-head .actions { gap: 8px; }
/* the save status keeps its width, so nothing beside it moves as it changes */
.ex-app .local-badge { min-width: 150px; text-align: right; background: none; padding: 0 4px; font: 500 12.5px/1.3 var(--font); color: var(--text-light); border-radius: 0; }
.ex-app .ex-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 22px; background: var(--bg-alt, #f5f7f9); border: 1px solid var(--border); border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.ex-app .ex-tabs::-webkit-scrollbar { display: none; }
.ex-app .ex-tabs button { flex: none; border: 0; background: transparent; border-radius: 999px; padding: 9px 16px; font: 600 13.5px/1 var(--font); color: var(--text-muted); box-shadow: none; }
.ex-app .ex-tabs button:hover { background: #fff; color: var(--text); }
.ex-app .ex-tabs button.active { background: #fff; color: var(--brand-dk, #3d8c52); box-shadow: var(--shadow-sm); }
.ex-app .ex-opening { color: var(--text-light); padding: 40px 0; }

/* ---- buttons ---- */
.ex-app button { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 9px 16px; font: 600 13px/1.2 var(--font); transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.ex-app button:hover { border-color: var(--brand, #58bb72); background: var(--brand-light, #e8f5ed); }
.ex-app button.primary { background: var(--brand-strong, #2f7a43); border-color: var(--brand-strong, #2f7a43); color: #fff; box-shadow: 0 4px 14px rgba(47, 122, 67, 0.22); }
.ex-app button.primary:hover { background: var(--brand-strong-dk, #276437); border-color: var(--brand-strong-dk, #276437); }
.ex-app button.secondary { background: var(--brand-light); border-color: var(--brand-pale, #cfe9da); color: var(--brand-text); }
.ex-app button.active { background: var(--text); border-color: var(--text); color: #fff; }
.ex-app button.small,
.ex-app button.icon { padding: 6px 11px; font-size: 12.5px; }
.ex-app button:focus-visible { outline: 3px solid rgba(88, 187, 114, 0.45); outline-offset: 2px; }

/* ---- fields ---- */
.ex-app input,
.ex-app select,
.ex-app textarea { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 10px 12px; font: 400 14px/1.4 var(--font); color: var(--text); }
.ex-app input[type='checkbox'],
.ex-app input[type='radio'] { accent-color: var(--brand-strong); padding: 0; }
.ex-app input:focus,
.ex-app select:focus,
.ex-app textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(88, 187, 114, 0.18); }
.ex-app label { font: 600 12.5px/1.35 var(--font); color: var(--text-muted); }
.ex-app .search { background: #fff; font-size: 15px; padding: 12px 14px; }
.ex-app .draft-title { font: 800 20px/1.3 var(--font); border-radius: 0; box-shadow: none; }

/* ---- cards and panels ---- */
.ex-app .panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-sm); }
.ex-app .panel-head { padding: 18px 22px; }
.ex-app .panel-body,
.ex-app .panel.panel-body { padding: 20px 22px; }
.ex-app .exercise-card,
.ex-app .training-exercise,
.ex-app .movement-grid article,
.ex-app .training-stats > div { border-radius: var(--radius-md, 16px); border-color: var(--border); background: #fff; }
.ex-app .exercise-card:hover { border-color: var(--brand-pale, #cfe9da); }
.ex-app .exercise-card .initial { color: var(--brand-text); }
.ex-app .rx-card { border-radius: var(--radius-md, 16px); border-left: 4px solid var(--brand, #58bb72); background: #fff; }
.ex-app .empty { background: var(--bg-soft, #fafbfc); border: 1px dashed var(--border-strong, #cfd4da); border-radius: var(--radius-md); }
.ex-app .empty .symbol { color: var(--brand); }
.ex-app details { border-radius: 12px; border-color: var(--border); }
.ex-app .notice { background: var(--bg-alt, #f5f7f9); border-radius: 12px; font-size: 14px; }
.ex-app .notice.recovery { background: var(--danger-light, #faece9); border: 1px solid #efc4bd; }
.ex-app .pill { background: var(--brand-light); color: var(--brand-text); border-radius: 999px; font: 700 11.5px/1 var(--font); padding: 6px 10px; }
.ex-app .table td,
.ex-app .table th { border-color: var(--border); font-size: 14px; }
.ex-app .table th { font: 700 10.5px/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); }
.ex-app .instruction-badge { border-radius: 999px; background: var(--bg-alt); color: var(--text-muted); }
.ex-app .instruction-badge.ready { background: var(--brand-light); color: var(--brand-text); }
.ex-app .instruction-badge.reviewed { background: var(--brand-pale); color: var(--brand-strong-dk, #276437); }
.ex-app .instruction-badge.check { background: var(--amber-light, #f6efdf); color: var(--amber, #8a5e12); }
.ex-app .instruction-missing { background: var(--amber-light, #f6efdf); color: var(--amber, #8a5e12); border-radius: 12px; }
.ex-app .exercise-instructions h4 { color: var(--text); }
.ex-app .exercise-instructions li::marker { color: var(--brand-strong); }
.ex-app .calendar-day.recorded { background: var(--brand-light); border-color: var(--brand-pale); }

/* the builder beside the library stays in view under the studio's top bar */
.ex-app .workspace > #builderPanel { top: 80px; max-height: calc(100vh - 100px); }

/* ---- dialogs and messages ---- */
.ex-app dialog { border: 1px solid var(--border); border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-lg); padding: 24px 26px; background: #fff; }
.ex-app dialog::backdrop { background: rgba(10, 10, 10, 0.5); }
.ex-app #toast { background: var(--text); color: #fff; border-radius: 14px; padding: 12px 18px; font: 500 14px/1.4 var(--font); box-shadow: var(--shadow-md); z-index: 90; }
.ex-app #toast button { background: transparent; color: #9fe0b2; border-color: rgba(255, 255, 255, 0.35); }

/* ---- Functional Strength ---- */
.ex-app .strength-hero { background: linear-gradient(135deg, #1f4a2b, #2f7a43); border-radius: var(--radius-lg, 20px); }
.ex-app .strength-hero em { color: #bfe8c9; }
.ex-app .strength-hero .eyebrow { color: #cfe9da; }
.ex-app .week-pill span { border-color: rgba(255, 255, 255, 0.35); }
.ex-app .week-pill small { color: #bfe8c9; }
.ex-app .movement-pill { background: var(--brand-light); color: var(--brand-text); border-radius: 999px; font-weight: 700; }
.ex-app .research-note { border-left: 4px solid var(--anat, #7d5ba6); border-radius: 12px; }
.ex-app .research-note a { color: var(--anat-dk, #5f4488); }
.ex-app .strength-quote { color: var(--brand-strong); }
.ex-app .training-stats strong { color: var(--brand-strong); }
.ex-app .session-tools { background: var(--brand-light); border-radius: var(--radius-md); }
.ex-app .session-state.state-complete { background: var(--brand-light); border-color: var(--brand-pale); color: var(--brand-strong-dk, #276437); }
.ex-app .session-state.state-partial { background: var(--amber-light); border-color: #e7cf9a; color: var(--amber); }
.ex-app .session-state.state-due-today { background: #fff; border-color: var(--brand); color: var(--brand-text); }
.ex-app .progress-key span:first-child { color: var(--brand-strong); }

/* ---- phones and tablets: the studio shell becomes one column ---- */
@media (max-width: 980px) {
  .ex-app .workspace > #builderPanel { position: static; max-height: none; }
}
@media (max-width: 650px) {
  .ex-app { font-size: 14.5px; }
  .ex-app .local-badge { min-width: 0; }
  .ex-app .ex-tabs button { padding: 9px 13px; font-size: 13px; }
  .ex-app #toast { bottom: 18px; }
}
@media print {
  .ni-topbar,
  .ni-side,
  .ex-app .ex-head,
  .ex-app .ex-tabs { display: none !important; }
  .ni-shell { display: block; padding: 0; }
}

/* ---- pieces the portal version adds ---- */
/* the program's portal schedule, in the builder */
.ex-app .ex-portal-panel { margin: 14px 0 6px; padding: 12px 14px; background: var(--brand-light, #e8f5ed); border: 1px solid var(--brand-pale, #cfe9da); border-radius: var(--radius-md, 16px); }
.ex-app .ex-portal-panel summary { font: 700 13.5px/1.35 var(--font); color: var(--brand-strong-dk, #276437); }
.ex-app .ex-portal-panel summary .muted { font-weight: 500; }
.ex-app .ex-portal-panel .form-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 12px; }
.ex-app .ex-portal-panel .section-label { margin: 14px 0 6px; }
.ex-app .ex-portal-hint { margin: 10px 0 0; font-size: 13px; }
.ex-app .ex-days { gap: 6px; margin: 4px 0; }
.ex-app .ex-days button { min-width: 48px; }
.ex-app .ex-days button.active { background: var(--brand-strong, #2f7a43); border-color: var(--brand-strong, #2f7a43); color: #fff; }
.ex-app .ex-days-label { flex: 0 0 140px; font: 600 12.5px/1.3 var(--font); color: var(--text-muted); overflow-wrap: anywhere; }
/* finding a client: nothing is listed until two letters are typed */
.ex-app .assign-results { display: grid; gap: 6px; margin: 8px 0 4px; min-height: 8px; }
.ex-app .assign-results button { justify-content: flex-start; text-align: left; border-radius: 12px; }
.ex-app .assign-on { display: grid; gap: 4px; margin-bottom: 12px; }
.ex-app .assign-on .row { margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft, #fafbfc); }
.ex-app .strength-client { display: grid; gap: 6px; flex: 1; min-width: 240px; }
.ex-app .strength-client-label { font: 600 12.5px/1.35 var(--font); color: var(--text-muted); }
.ex-app .strength-client strong { display: inline-block; margin-right: 10px; font-size: 15px; }
.ex-app .strength-client .search { margin: 0; }
/* the clinic's photos and videos */
.ex-app .ex-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.ex-app .ex-media img,
.ex-app .ex-media video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-alt); }
.ex-app .ex-media-edit figure { margin: 0; display: grid; gap: 6px; }
.ex-app .ex-linkbtn { align-self: center; font: 600 13px/1.2 var(--font); color: var(--brand-dk, #3d8c52); text-decoration: underline; text-underline-offset: 3px; }
.ex-app .panel-head > button { white-space: nowrap; }
@media (max-width: 650px) {
  .ex-app .ex-portal-panel .form-grid { grid-template-columns: 1fr; }
  .ex-app .ex-days-label { flex-basis: 100%; }
}

/* ---- the client portal: Functional Strength (ex/portal-strength.js) ----
   Phones first: 44 px tap targets, 16 px text in fields (iOS zooms into anything smaller),
   nothing wider than a 360 px screen, and status lines that keep their space so nothing
   moves while the client types (Lee's rule). The landing card is a portal .ni-card. */
.ex-app.ex-portal { font-size: 15.5px; color: var(--text); }
.ex-app.ex-portal .strength-hero.sp-hero { display: block; padding: 22px 26px 20px; margin: 0 0 14px; }
.ex-app.ex-portal .sp-hero .sp-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin: 8px 0 10px; color: #fff; }
.ex-app.ex-portal .sp-hero .sp-title:focus { outline: none; }
.ex-app.ex-portal .sp-hero p { margin: 0; max-width: none; font-size: 14px; color: #d8efdf; }
.ex-app.ex-portal .sp-state { margin: 0 0 14px; }
.ex-app.ex-portal .sp-msg { margin: 0 0 14px; max-width: none; white-space: pre-line; }
.ex-app.ex-portal .sp-msg cite { white-space: normal; }

/* the three tabs */
.ex-app.ex-portal .sp-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: var(--bg-alt, #f5f7f9); border: 1px solid var(--border); border-radius: 999px; }
.ex-app.ex-portal .sp-tabs button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; box-shadow: none; border-radius: 999px; font: 700 14.5px/1 var(--font); color: var(--text-muted); }
.ex-app.ex-portal .sp-tabs button:hover { background: #fff; color: var(--text); }
.ex-app.ex-portal .sp-tabs button.active { background: #fff; color: var(--brand-text, #2b6e3d); box-shadow: var(--shadow-sm); }

/* tap targets and fields */
.ex-app.ex-portal button { min-height: 44px; }
.ex-app.ex-portal input:not([type='checkbox']):not([type='radio']),
.ex-app.ex-portal select,
.ex-app.ex-portal textarea { font-size: 16px; min-height: 44px; }
.ex-app.ex-portal input:not([type='checkbox']):not([type='radio']),
.ex-app.ex-portal select { width: 100%; min-width: 0; }
.ex-app.ex-portal input[type='checkbox'] { width: 24px; height: 24px; flex: none; margin: 0; }
.ex-app.ex-portal .check { min-height: 44px; margin: 4px 0; cursor: pointer; }
.ex-app.ex-portal .form-grid.sp-graph-controls { align-items: end; }
/* every fold-out (research, how to, the graph's notes) opens with a chevron at the right */
.ex-app.ex-portal details { padding: 0 14px; }
.ex-app.ex-portal details[open] { padding-bottom: 12px; }
.ex-app.ex-portal details > summary { position: relative; min-height: 44px; padding: 12px 28px 12px 0; list-style: none; }
.ex-app.ex-portal details > summary::-webkit-details-marker { display: none; }
.ex-app.ex-portal details > summary::after { content: '⌄'; position: absolute; right: 2px; top: 50%; transform: translateY(-62%); font: 400 18px/1 var(--font); color: var(--text-light); transition: transform 0.2s; }
.ex-app.ex-portal details[open] > summary::after { transform: translateY(-30%) rotate(180deg); }
.ex-app.ex-portal .research-note p { margin: 0 0 10px; }
.ex-app.ex-portal .panel-body { padding: 18px; }
.ex-app.ex-portal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-app.ex-portal .notice { margin: 0 0 14px; }

/* Train: the session, its tools and the form */
.ex-app.ex-portal .sp-session-head { flex-wrap: wrap; align-items: flex-start; padding: 16px 18px; }
.ex-app.ex-portal .sp-session-head h2 { font-size: 19px; }
.ex-app.ex-portal .sp-session-head h2:focus { outline: none; }
.ex-app.ex-portal .sp-session-head p { margin: 4px 0 0; }
.ex-app.ex-portal .sp-session-head .pill { white-space: normal; line-height: 1.35; }
.ex-app.ex-portal .sp-picker { margin: 0 0 16px; }
/* the set counter and the draft line keep their height, and the rest clock its width, so
   nothing beside or below them moves as they change */
.ex-app.ex-portal .session-tools { align-items: flex-start; gap: 12px; padding: 14px; }
.ex-app.ex-portal .session-tools > div:first-child { flex: 1 1 250px; min-width: 0; }
.ex-app.ex-portal [data-session-count] { display: block; min-height: 1.5em; }
.ex-app.ex-portal [data-draft-status] { min-height: 2.8em; line-height: 1.4; }
.ex-app.ex-portal .rest-tools { flex: 0 1 auto; align-items: flex-end; gap: 8px; }
.ex-app.ex-portal .rest-tools output { display: inline-block; min-width: 7.5em; padding: 12px 6px; text-align: center; }
.ex-app.ex-portal .training-exercise { padding: 14px; margin: 18px 0; }
.ex-app.ex-portal .training-exercise legend { max-width: 100%; padding: 0 6px; font-size: 16px; line-height: 1.35; }
/* the set table fits the screen: no sideways scrolling */
.ex-app.ex-portal .table-scroll { overflow-x: visible; }
.ex-app.ex-portal .set-table { display: table; table-layout: fixed; width: 100%; overflow: visible; }
.ex-app.ex-portal .set-table th,
.ex-app.ex-portal .set-table td { padding: 6px 4px; vertical-align: middle; }
.ex-app.ex-portal .set-table th { white-space: normal; }
.ex-app.ex-portal .set-table th:nth-child(1) { width: 56px; }
.ex-app.ex-portal .set-table th:nth-child(2) { width: 34px; }
.ex-app.ex-portal .set-table td:nth-child(1) { text-align: center; cursor: pointer; }
.ex-app.ex-portal .set-table td:nth-child(2) { text-align: center; font-weight: 700; color: var(--text-muted); }
.ex-app.ex-portal .set-table input[name='done'] { width: 28px; height: 28px; vertical-align: middle; }
.ex-app.ex-portal .set-table input[type='number'] { min-width: 0; max-width: none; padding: 8px 4px; text-align: center; }
/* the save area: messages land at its foot, under the button */
.ex-app.ex-portal .sp-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ex-app.ex-portal .sp-foot > button { flex: 0 1 auto; }
.ex-app.ex-portal .sp-foot .sp-status { flex: 1 0 100%; min-height: 48px; }
.ex-app.ex-portal .sp-status .unticked-question { margin: 0; }
/* brought into view with room around them (and clear of the portal's sticky top bar) */
.ex-app.ex-portal [data-sp-status],
.ex-app.ex-portal [data-unticked-question] { scroll-margin: 80px 0 24px; }
/* how to do an exercise: steps, photos, videos (a photo loads when it's opened, into a box
   that already has its size, so nothing jumps as it arrives) */
.ex-app.ex-portal .sp-how { margin: 10px 0 12px; background: var(--bg-soft, #fafbfc); border: 1px solid var(--border); }
.ex-app.ex-portal .sp-how > summary { color: var(--brand-text, #2b6e3d); font: 700 14px/1.4 var(--font); }
.ex-app.ex-portal .sp-how-body { font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.ex-app.ex-portal .sp-how-body h4 { margin: 12px 0 4px; font: 700 14px/1.3 var(--font); }
.ex-app.ex-portal .sp-how-body p { margin: 6px 0; }
.ex-app.ex-portal .sp-how-body ol,
.ex-app.ex-portal .sp-how-body ul { margin: 6px 0; padding-left: 22px; }
.ex-app.ex-portal .sp-media { display: grid; gap: 10px; margin: 10px 0 4px; }
.ex-app.ex-portal .sp-media img,
.ex-app.ex-portal .sp-media video { display: block; width: 100%; max-width: 480px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-alt); }
/* a paused or finished program: the session's plan, read only */
.ex-app.ex-portal .sp-plan { margin: 10px 0 18px; padding-left: 22px; }
.ex-app.ex-portal .sp-plan > li { margin: 12px 0; }

/* Progress */
.ex-app.ex-portal .sp-notice { margin: 0 0 14px; }
.ex-app.ex-portal .sp-notice:focus { outline: 2px solid var(--brand-pale, #cfe9da); outline-offset: 2px; }
.ex-app.ex-portal .training-stats { margin: 14px 0; }
.ex-app.ex-portal .stats-caption { margin: 0 0 14px !important; }
.ex-app.ex-portal .sp-next { margin: 4px 0 18px; }
.ex-app.ex-portal .strength-chart polyline:not([stroke-dasharray]) { stroke: var(--brand-strong, #2f7a43); }
.ex-app.ex-portal .strength-chart circle { fill: var(--brand-strong, #2f7a43); }
.ex-app.ex-portal .sp-progression { margin: 14px 0; }
.ex-app.ex-portal .sp-profile-row { margin-top: 10px; }
.ex-app.ex-portal .sp-profile-status { min-height: 48px; margin-top: 8px; }
.ex-app.ex-portal .sp-history-title { margin: 22px 0 4px; }
.ex-app.ex-portal .sp-entry { align-items: flex-start; gap: 10px 14px; }
.ex-app.ex-portal .sp-entry-main { flex: 1 1 260px; min-width: 0; }
.ex-app.ex-portal .sp-entry-main p { margin: 4px 0; }
.ex-app.ex-portal .sp-entry-sets { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.ex-app.ex-portal .sp-entry-sets li { margin: 2px 0; overflow-wrap: anywhere; }
.ex-app.ex-portal .sp-entry-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; }
.ex-app.ex-portal .sp-entry-actions:empty { display: none; }
.ex-app.ex-portal .sp-entry-actions .ni-alert { flex-basis: 100%; }
.ex-app.ex-portal .sp-confirm { font: 600 13.5px/1.3 var(--font); color: var(--danger, #b23b30); }
.ex-app.ex-portal button.sp-danger { color: #fff; background: var(--danger, #b23b30); border-color: var(--danger, #b23b30); }
.ex-app.ex-portal .sp-more { margin-top: 14px; }
.ex-app.ex-portal .sp-physio { display: inline-block; margin-top: 6px; padding: 7px 11px; border-radius: 999px; background: var(--brand-light); color: var(--brand-text); font: 700 12.5px/1.2 var(--font); }

/* readable on a phone: no text under 12 px, links big enough to tap, 4.5:1 for small text */
.ex-app.ex-portal .eyebrow,
.ex-app.ex-portal .pill,
.ex-app.ex-portal .movement-pill,
.ex-app.ex-portal .research-note summary > span { font-size: 12px; }
.ex-app.ex-portal .table th { font: 700 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ex-app.ex-portal .rest-tools label { font-size: 12.5px; }
.ex-app.ex-portal .research-note a { display: inline-flex; align-items: center; min-height: 44px; }
.ex-app.ex-portal .progress-key span:last-child { color: var(--amber, #8a5e12); }
.ex-app.ex-portal .nobr { white-space: nowrap; }
/* the date and the pain score line up, whatever their labels' lengths */
.ex-app.ex-portal #strengthLogForm > .form-grid { align-items: end; }

/* the landing card (a portal .ni-card, beside the ordinary program's) */
.ni-sp-home .ni-sp-next { margin-top: 14px; }
.ni-sp-home .ni-sp-next .ni-eyebrow { margin-bottom: 4px; }
.ni-sp-home .ni-sp-next-name { margin: 0; font: 500 15.5px/1.45 var(--font); color: var(--ink, #0a0a0a); }
.ni-sp-home .ni-sp-next-meta { margin: 2px 0 0; font: 500 13px/1.5 var(--font); color: var(--text-muted); }
.ni-sp-home .ni-sp-week { margin: 8px 0 0; font: 700 13.5px/1.4 var(--font); color: var(--brand-text); }
.ni-sp-home .ni-sp-state { margin-top: 14px; }

@media (max-width: 560px) {
  .ex-app.ex-portal .strength-hero.sp-hero { padding: 18px 18px 16px; }
  .ex-app.ex-portal .panel-body { padding: 14px 12px; }
  .ex-app.ex-portal .sp-session-head { padding: 14px 12px; }
  .ex-app.ex-portal .training-exercise { padding: 10px; }
  .ex-app.ex-portal .training-exercise .form-grid { grid-template-columns: minmax(0, 1fr); }
  .ex-app.ex-portal .rest-auto { flex-basis: 100%; }
  .ex-app.ex-portal .sp-foot > button,
  .ex-app.ex-portal .sp-more { flex: 1 1 100%; width: 100%; }
  .ex-app.ex-portal .sp-graph-controls label:nth-child(-n + 2) { grid-column: 1 / -1; }
  .ex-app.ex-portal .strength-chart text { font-size: 28px; }
  .ni-sp-home .ni-pg-home-actions .ni-btn { width: 100%; }
}

/* ---- library instructions still to check (hidden from clients until read) ---- */
.ex-app .ex-check-callout { display: flex; gap: 12px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: var(--amber-light, #f6efdf); }
.ex-app .ex-check-callout p { margin: 0; flex: 1 1 300px; font-size: 14px; line-height: 1.5; color: var(--text); }
.ex-app .ex-check-badge { border: 0; cursor: pointer; font: 600 11.5px/1.2 var(--font); padding: 4px 9px; margin-left: 6px; vertical-align: middle; min-height: 0; }
.ex-app .ex-check-badge:hover,
.ex-app .ex-check-badge:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.ex-app .ex-check-status { min-height: 1.5em; margin: 0 0 6px; }
.ex-app .ex-check-tags { font-size: 12.5px; margin: -4px 0 10px; }

/* ---- nothing moves while typing (Lee's rule) ---- */
/* Dialogs open at a fixed height from the top: results appearing below the search box grow the
   dialog downwards instead of re-centring it (which moved the box being typed in). */
.ex-app dialog { margin-top: 8vh; margin-bottom: auto; }
/* The Strength page's client search grows downwards; the Program list beside it stays put. */
.ex-app .strength-selectors { align-items: start; }
/* Page counters keep one width as their numbers change. */
.ex-app .ex-pager { display: inline-block; min-width: 10.5em; text-align: center; font-variant-numeric: tabular-nums; }
/* The portal line above the day chips stays one line whatever the days picked. */
.ex-app .ex-portal-panel summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The save status shows at every width, in a space of its own. */
@media (max-width: 1100px) {
  .ex-app .local-badge { display: inline-block; min-width: 6.5em; font-size: 12px; }
}

/* ---- verification round ---- */
/* the builder beside the library is its own scroll box only where the two sit side by side */
@media (max-width: 1100px) {
  .ex-app .workspace > #builderPanel { position: static; max-height: none; }
}
/* progress graphs in Physio Now green (studio and portal alike) */
.ex-app .strength-chart polyline:not([stroke-dasharray]) { stroke: var(--brand-strong, #2f7a43); }
.ex-app .strength-chart circle { fill: var(--brand-strong, #2f7a43); }
.ex-app .today-notes { margin-top: 18px; }
/* client search results open over the page instead of pushing it down while typing */
.ex-app .ex-find { position: relative; }
.ex-app .ex-find-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); max-height: 280px; overflow: auto; padding: 6px; }
.ex-app .ex-find-results:empty { display: none; }
/* status pills and counts keep one width as their words change */
.ex-app .ex-status-pill { min-width: 9.5em; text-align: center; }
.ex-app #resultCount { display: inline-block; min-width: 8em; font-variant-numeric: tabular-nums; }
/* on a phone a message spans the screen instead of half of it */
@media (max-width: 650px) {
  .ex-app #toast { left: 16px; right: 16px; transform: none; max-width: none; }
}

/* Today: clients' details behind a click */
.ex-app .today-privacy { gap: 12px; align-items: center; margin: 4px 0 14px; }
.ex-app .today-hidden { font-style: italic; }

/* ---- 2026-09-29: each program's dose fields, one dose for the whole program ---- */
.ex-app .ex-dose-bar { margin: 14px 0 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-alt, #f5f7f9); }
.ex-app .ex-dose-bar .section-label { margin: 0 0 8px; }
.ex-app .ex-dose-bar .section-label .muted { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ex-app .ex-dose-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-app .ex-dose-fields button { min-width: 3.9em; }
.ex-app .ex-dose-fields button.active { background: var(--brand-strong, #2f7a43); border-color: var(--brand-strong, #2f7a43); color: #fff; }
.ex-app .ex-dose-fields button:not(.active) { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.35); }
.ex-app .ex-dose-actions { gap: 8px; margin-top: 10px; }
.ex-app .ex-dose-actions [data-action="doseFieldsDefault"] { min-width: 12.5em; }
.ex-app .ex-dose-later { margin: 8px 0 0; font-size: 13px; }
.ex-app .ex-dose-later button { margin-left: 4px; }
.ex-app .ex-dose-scope { margin: 14px 0 4px; padding: 0; border: 0; }
.ex-app .ex-dose-scope legend { margin: 0 0 4px; padding: 0; font: 600 13px/1.3 var(--font); }
.ex-app .ex-dose-later-check { margin: 10px 0 0; }

/* the instructions to check sit right under the question, the buttons stay in view */
.ex-app .ex-check-why { margin: 4px 0 12px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.ex-app .ex-check-text { margin: 0 0 4px; padding: 14px 16px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-alt, #f5f7f9); }
.ex-app .ex-check-text > .section-label { margin: 0 0 8px; }
.ex-app .ex-check-text .exercise-instructions { margin: 0; }
.ex-app .ex-check-actions { position: sticky; bottom: -24px; z-index: 1; gap: 8px; margin: 0 -26px -24px; padding: 14px 26px 22px; background: #fff; border-top: 1px solid var(--border); }

/* the client's program in the preview: the same sheet as the PDF (SHEET_CSS in app.js) */
.ex-app .client-plan { margin-top: 14px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }