/* This file defines the Exercise phone layout and status colors. */

/* This rule forces the document to use the light color scheme. */
:root {
  height: 100%;
  color: #000000;
  color-scheme: only light;
  font-family: system-ui, sans-serif;
  background: #ffffff;
}

/* This rule includes borders and padding in every displayed size. */
* {
  box-sizing: border-box;
}

/* This rule defines the white document body without a browser margin. */
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
}

/* This rule fixes the React mount area to the dynamic viewport height. */
#root {
  height: 100dvh;
  min-height: 0;
  color: #000000;
  background: #ffffff;
}

/* This rule defines the full phone application surface. */
.application {
  display: flex;
  width: 100%;
  max-width: 36rem;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
  border-top: 1px solid #3f3f3f;
  border-right: 1px solid #3f3f3f;
  border-left: 1px solid #3f3f3f;
}

/* This rule gives the four main selectors equal widths. */
.navigation {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  color: #000000;
  background: #ffffff;
}

/* This rule gives every main page a fixed light surface. */
.plan-page,
.sore-page,
.today-page,
.group-page,
.data-page {
  color: #000000;
  background: #ffffff;
}

/* This rule defines one rectangular main selector. */
.navigation__link {
  display: flex;
  min-height: 3.375rem;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 1.1rem;
  text-decoration: none;
  border-right: 1px solid #3f3f3f;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule removes the duplicate border from the final selector. */
.navigation__link:last-child {
  border-right: 0;
}

/* This rule gives the selected main page the inverted style. */
.navigation__link--active {
  color: #ffffff;
  font-weight: 700;
  background: #000000;
}

/* This rule defines one shared compact inverted section title. */
.inverted-title {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5rem 1.5rem;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  background: #000000;
}

/* This rule makes the Plan page the scroll area below navigation. */
.plan-page {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* This rule lays out one parameter row. */
.plan-field {
  display: grid;
  min-height: 6.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  color: inherit;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule defines the fixed parameter label size. */
.plan-field__label {
  font-size: 1.25rem;
}

/* This rule sizes one native set count control. */
.plan-set-count {
  width: 5rem;
  height: 2.5rem;
  padding: 0.25rem 0.4rem;
  color: inherit;
  font: inherit;
  text-align: center;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule places primary and secondary patterns in two columns. */
.plan-patterns {
  display: grid;
  min-height: 18rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.5rem 1rem 2rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule centers one pattern category in its column. */
.plan-pattern-group {
  min-width: 0;
}

/* This rule defines one pattern category heading. */
.plan-pattern-group h2 {
  margin: 0 0 1.25rem;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}

/* This rule stacks all pattern options in catalog order. */
.plan-pattern-group__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* This rule aligns one native checkbox with its pattern notation. */
.plan-pattern-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 1rem;
  font-size: 1rem;
}

/* This rule gives each pattern checkbox a clear touch size. */
.plan-pattern-option input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin: 0;
}

/* This rule contains all complete muscle priority rows. */
.plan-muscles {
  display: block;
}

/* This rule lays out one muscle and its two move controls. */
.plan-muscle-row {
  display: grid;
  min-height: 5.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0 0 0 1.35rem;
  font-size: 1.2rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule makes both muscle move controls fill the row edge. */
.plan-muscle-row__controls {
  display: grid;
  width: 4.5rem;
  align-self: stretch;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* This rule draws one plain muscle move control. */
.plan-muscle-row__controls button {
  width: 100%;
  min-height: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 1.7rem;
  line-height: 1;
  background: transparent;
  border: 0;
}

/* This rule keeps an unavailable boundary control visible. */
.plan-muscle-row__controls button:disabled {
  opacity: 0.3;
}

/* This rule rotates the common move symbol for the lower direction. */
.plan-muscle-row__controls button:last-child {
  transform: rotate(180deg);
}

/* This rule gives all forecast rows the same content-sized date columns. */
.forecast-results {
  display: grid;
  grid-template-columns: max-content max-content repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

/* This rule makes one forecast row use the shared forecast columns. */
.forecast-result {
  display: grid;
  min-height: 4rem;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #3f3f3f;
  border-radius: 0;
}

/* This rule makes a rest result use both remaining forecast columns. */
.forecast-result--rest > :last-child {
  grid-column: 3 / -1;
}

/* This rule centers one forecast value inside its rectangular cell. */
.forecast-result > * {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: clamp(0.8rem, 3.25vw, 1rem);
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid #3f3f3f;
}

/* This rule gives the compact date columns one character of horizontal space. */
.forecast-result > :nth-child(-n + 2) {
  padding-inline: 1ch;
}

/* This rule removes the divider after the final forecast cell. */
.forecast-result > :last-child {
  border-right: 0;
}

/* This rule makes the Sore page one continuous vertical scroll area. */
.sore-page {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* This rule lays out all twelve body shortcuts in reference order. */
.soreness-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.75rem 0.5rem 1rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule defines one white shortcut with a transparent target. */
.soreness-shortcut {
  --soreness-highlight: transparent;
  display: flex;
  min-width: 0;
  min-height: 7.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.25rem 0.1rem 0.5rem;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  background: #ffffff;
  border: 0;
  touch-action: manipulation;
}

/* This rule marks a partially selected shortcut with reference yellow. */
.soreness-shortcut[data-state="partial"] {
  --soreness-highlight: #e0a526;
}

/* This rule marks a fully selected shortcut with reference red. */
.soreness-shortcut[data-state="selected"] {
  --soreness-highlight: #c81e36;
}

/* This rule keeps one shortcut image inside its grid column. */
.soreness-shortcut__image {
  display: block;
  width: 100%;
  height: auto;
}

/* This rule gives every body path one black outline. */
.soreness-shortcut__path {
  stroke: #000000;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* This rule gives the complete body shape a transparent fill. */
.soreness-shortcut__path--body {
  fill: transparent;
}

/* This rule draws anatomical guides without a fill. */
.soreness-shortcut__path--guide {
  fill: none;
}

/* This rule applies the controlled selection color to the target area. */
.soreness-shortcut__path--highlight {
  fill: var(--soreness-highlight);
}

/* This rule shrinks one uppercase shortcut label to keep it on one line. */
.soreness-shortcut span {
  min-width: 0;
  font-size: clamp(0.625rem, 3vw, 0.85rem);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* This rule gives keyboard focus a simple visible tile outline. */
.soreness-shortcut:focus-visible {
  outline: 2px solid #3f3f3f;
  outline-offset: -2px;
}

/* This rule contains every individual muscle in catalog order. */
.sore-muscles {
  display: block;
}

/* This rule defines one complete individual muscle touch row. */
.sore-muscle-row {
  display: flex;
  min-height: 4.125rem;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.35rem;
  font-size: 1.2rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule gives each individual muscle checkbox a clear touch size. */
.sore-muscle-row input {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  margin: 0;
}

/* This rule keeps long individual muscle labels inside their rows. */
.sore-muscle-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* This rule gives the Today page all space below the navigation. */
.today-page {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

/* This rule stacks the independent Today title and date rows. */
.today-header {
  min-height: 4.375rem;
  flex: 0 0 auto;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule centers the local date in its separate Today row. */
.today-header__date {
  display: flex;
  min-height: 1.875rem;
  align-items: center;
  justify-content: center;
}

/* This rule defines the Today date size. */
.today-header time {
  font-size: 1.1rem;
}

/* This rule lays out the three set metrics. */
.metrics {
  display: grid;
  min-height: 4.375rem;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule defines one rectangular set metric. */
.metric-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 0;
  border-right: 1px solid #3f3f3f;
}

/* This rule removes the divider after the final set metric. */
.metric-card:last-child {
  border-right: 0;
}

/* This rule marks a metric that meets its target. */
.metric-card--met {
  background: #b7dfb5;
}

/* This rule defines the metric label size. */
.metric-card__label {
  font-size: 0.95rem;
}

/* This rule defines the metric value size and weight. */
.metric-card__value {
  margin-top: 0.25rem;
  font-size: 1.8rem;
  font-weight: 500;
}

/* This rule makes the exercise list the only vertical scroll area. */
.exercise-list {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* This rule lays out one rectangular exercise row. */
.exercise-row {
  display: grid;
  min-height: 4.125rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: #ffffff;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule marks a group that has sets but no final result. */
.exercise-row--progress {
  background: #fff2a8;
}

/* This rule marks a group that has sets and a final result. */
.exercise-row--complete {
  background: #b7dfb5;
}

/* This rule aligns the checkbox with its exercise name. */
.exercise-row__selection {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
}

/* This rule gives the native checkbox a clear touch size. */
.exercise-row__selection input {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  margin: 0;
}

/* This rule keeps long exercise labels inside their row. */
.exercise-row__selection span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* This rule aligns and sizes the pattern label. */
.exercise-row__pattern {
  color: inherit;
  font-size: 1.15rem;
  text-align: right;
}

/* This rule gives the Group page all space below the navigation. */
.group-page {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

/* This rule centers the exercise name and pattern. */
.group-header {
  display: flex;
  min-height: 3.25rem;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #000000;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule defines the Group exercise heading. */
.group-header h1 {
  margin: 0 0 0.1rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}

/* This rule defines the Group pattern label. */
.group-header span {
  font-size: 0.9rem;
  line-height: 1;
}

/* This rule defines the full-width first-set weight row. */
.group-weight {
  display: grid;
  width: 100%;
  min-height: 3.5rem;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0.25rem 1.25rem;
  color: inherit;
  font: inherit;
  font-size: 1.25rem;
  text-align: left;
  background: #ffffff;
  border: 0;
  border-radius: 0;
}

/* This rule keeps a protected weight card visually unchanged. */
.group-weight:disabled {
  opacity: 1;
}

/* This rule defines the displayed weight value. */
.group-weight strong {
  font-size: 1.8rem;
  font-weight: 500;
}

/* This rule lets the weight label contain a native input. */
.group-weight--editing {
  cursor: text;
}

/* This rule sizes the first-set weight input. */
.group-weight input {
  width: 7.5rem;
  min-width: 0;
  height: 2.75rem;
  padding: 0.25rem 0.5rem;
  color: inherit;
  font: inherit;
  font-size: 1.2rem;
  text-align: right;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule makes group progress the only vertical scroll area. */
.group-progress {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  border-top: 1px solid #3f3f3f;
}

/* This rule lays out one prescribed set row. */
.group-set-row {
  display: grid;
  width: 100%;
  min-height: 6.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  color: inherit;
  font: inherit;
  font-size: 1.2rem;
  text-align: left;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule keeps the set notation on one line. */
.group-set-row__label {
  white-space: nowrap;
}

/* This rule makes one completed repetition count prominent. */
.group-set-row--complete strong {
  font-size: 1.8rem;
}

/* This rule aligns the three set result actions. */
.group-set-row__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* This rule draws every set row action as a plain icon. */
.group-set-row__actions button,
.group-set-row__entry button {
  width: 2.25rem;
  min-height: 2.75rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  background: transparent;
  border: 0;
}

/* This rule aligns the back action, input, and confirmation. */
.group-set-row__entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* This rule sizes the actual repetition input. */
.group-set-row__entry input {
  width: 5.5rem;
  height: 2.75rem;
  padding: 0.25rem 0.5rem;
  color: inherit;
  font: inherit;
  text-align: center;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule dims only a repetition confirmation that cannot submit. */
.group-set-row__entry button:disabled {
  opacity: 0.3;
}

/* This rule contains the note icon and expanded field. */
.group-note {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
}

/* This rule draws the note disclosure as a plain edit icon. */
.group-note button {
  min-width: 3rem;
  min-height: 3rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 2rem;
  background: transparent;
  border: 0;
}

/* This rule sizes the expanded group note field. */
.group-note textarea {
  width: 100%;
  min-height: 7rem;
  padding: 0.75rem;
  color: inherit;
  font: inherit;
  resize: vertical;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule makes the DATA page one continuous vertical scroll area. */
.data-page {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* This rule separates one archive domain from the next domain. */
.data-transfer-group {
  display: block;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule gives both archive actions equal widths. */
.data-transfer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #3f3f3f;
}

/* This rule defines one rectangular archive action. */
.data-transfer-actions button {
  min-height: 5rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  background: transparent;
  border: 0;
  border-right: 1px solid #3f3f3f;
  touch-action: manipulation;
}

/* This rule removes the duplicate border from the final visible action. */
.data-transfer-actions button:nth-of-type(2) {
  border-right: 0;
}

/* This rule keeps native file inputs available only to their action buttons. */
.data-transfer-input {
  display: none;
}

/* This rule contains the DATA history filters and matching rows. */
.data-history-browser {
  display: block;
}

/* This rule separates the DATA history title from its filters. */
.data-history-browser > .inverted-title {
  border-bottom: 1px solid #3f3f3f;
}

/* This rule aligns one history filter label with its native select. */
.data-history-filter {
  display: grid;
  min-height: 5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 13rem);
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  font-size: 1.15rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule sizes one native DATA history selector. */
.data-history-filter select {
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0.25rem 0.5rem;
  color: inherit;
  font: inherit;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule contains every matching historical result. */
.history-results {
  display: block;
}

/* This rule draws one compact historical result card. */
.history-result {
  display: block;
  margin: 0.75rem 0.5rem 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule places the date and optional pattern above the set grid. */
.history-result__header {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.5rem;
  color: #ffffff;
  font-size: 1.15rem;
  background: #000000;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule keeps the optional pattern notation on one line. */
.history-result__pattern {
  white-space: nowrap;
}

/* This rule gives every completed set an equal-width grid column. */
.history-result__sets {
  display: grid;
  min-height: 3rem;
}

/* This rule centers one repetition and weight value in its cell. */
.history-result__set {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  font-size: 1rem;
  white-space: nowrap;
  border-right: 1px solid #3f3f3f;
}

/* This rule removes the duplicate border from the final set cell. */
.history-result__set:last-child {
  border-right: 0;
}

/* This rule defines the optional third result row for a group note. */
.history-result__note {
  margin: 0;
  padding: 0.75rem 0.5rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-top: 1px solid #3f3f3f;
}

/* This rule inverts each enabled button except a soreness shortcut during one press. */
button:enabled:not(.soreness-shortcut):active {
  color: #ffffff;
  background: #000000;
}