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

/* This rule defines the regular application font from its browser subset. */
@font-face {
  font-family: "PragmataPro";
  font-style: normal;
  font-weight: 400;
  src: url("/static/216437a29d2a49a701f84ebe863714681104c63d9a9e22a36b0b5b19cf00cc96.woff2") format("woff2");
}

/* This rule defines the bold application font from its browser subset. */
@font-face {
  font-family: "PragmataPro";
  font-style: normal;
  font-weight: 700;
  src: url("/static/0286a71fcc9ff8e65870ec00f8e8f28b2d501dfb916487085968c33663cbebd6.woff2") format("woff2");
}

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

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

/* This rule makes every native text control use the application font. */
button,
input,
select,
textarea {
  font: inherit;
}

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

/* This rule fixes the white surface to the viewport so WebKit can use its color at the screen edges. */
#root {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 0;
  /* Keep all controls inside the phone's current safe area. */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  color: #000000;
  background: #ffffff;
}

/* This rule defines the full phone application surface. */
.application {
  display: flex;
  width: 100%;
  max-width: 36rem;
  height: 100%;
  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 five main selectors equal widths. */
.navigation {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  color: #000000;
  background: #ffffff;
}

/* This rule gives every main page a fixed light surface. */
.plan-page,
.sore-page,
.lift-page,
.run-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 keeps each application banner above the navigation at full height. */
.date-banner,
.perfect-cycle-banner,
.daily-goal-banner {
  flex: 0 0 auto;
}

/* This rule marks a non-current selected date. */
.date-banner {
  background: #c81e36;
}

/* This rule marks a complete daily activity goal. */
.daily-goal-banner {
  background: #1565c0;
}

/* This rule marks an exact complete workout cycle. */
.perfect-cycle-banner {
  background: #2e7d32;
}

/* 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 gives each PLAN page link a full-width touch target. */
.plan-page-link {
  display: flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.75rem 1rem;
  color: inherit;
  font-weight: 700;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule separates each equipment entry and new equipment form. */
.inventory-item {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule aligns equipment field labels with phone-sized inputs. */
.inventory-field {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

/* This rule permits names and numbers to fit the available field width. */
.inventory-field input {
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  padding: 0.25rem 0.4rem;
  color: inherit;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule places plate weights and removal controls on one row. */
.inventory-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* This rule keeps bar removal controls at the right edge of each entry. */
.inventory-bar .inventory-actions {
  justify-content: flex-end;
}

/* This rule lets large weight values wrap inside a phone row. */
.inventory-actions strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* This rule gives equipment actions a clear touch target. */
.inventory-button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: inherit;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule marks an incomplete new equipment form. */
.inventory-button:disabled {
  opacity: 0.3;
}

/* This rule separates equipment instructions from editable rows. */
.inventory-help {
  margin: 0;
  padding: 0.75rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule keeps a duplicate plate message inside its add form. */
.inventory-message {
  margin: 0;
}

/* This rule centers the selected date and its reset action. */
.plan-date {
  display: flex;
  min-height: 4.1667rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule sizes the native selected-date control. */
.plan-date__input {
  width: 10rem;
  height: 2.5rem;
  padding: 0.25rem 0.4rem;
  color: inherit;
  font: inherit;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule defines the square selected-date reset control. */
.plan-date__reset {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule keeps the unavailable date reset visible. */
.plan-date__reset:disabled {
  opacity: 0.3;
}

/* This rule lays out one parameter row. */
.plan-field {
  display: grid;
  min-height: 4.1667rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.4rem 0.75rem;
  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 each native Plan number control. */
.plan-set-count,
.plan-number {
  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 stacks all run parameter options in catalog order. */
.plan-run-options {
  display: flex;
  min-height: 4.5rem;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule aligns one run option checkbox with its label. */
.plan-run-option {
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
}

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

/* 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: 2rem;
  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 Lift page all space below the navigation. */
.lift-page {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

/* This rule contains each workout rest title. */
.lift-header,
.run-header {
  flex: 0 0 auto;
  border-bottom: 1px solid #3f3f3f;
}

/* 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. */
.lift-list {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* This rule lays out one rectangular exercise row. */
.lift-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. */
.lift-row--progress {
  background: #fff2a8;
}

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

/* This rule aligns the checkbox with its exercise name. */
.lift-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. */
.lift-row__selection input {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  margin: 0;
}

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

/* This rule aligns and sizes the pattern label. */
.lift-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;
}

/* These rules keep calculator labels and completed repetition buttons plain. */
button.group-set-row__label,
.group-set-row__edit {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  background: transparent;
  border: 0;
}

/* This rule keeps the native calculator inside the phone's current safe area. */
.weight-calculator {
  box-sizing: border-box;
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 2rem);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem);
  margin: auto;
  padding: 1rem;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule dims the set page while the calculator is open. */
.weight-calculator::backdrop {
  background: rgb(0 0 0 / 45%);
}

/* This rule keeps the close control beside the target weight. */
.weight-calculator__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* This rule makes the target weight twice the normal text size. */
.weight-calculator__target {
  font-size: 2rem;
  line-height: 1;
}

/* This rule keeps the plate heading small enough for a phone. */
.weight-calculator h2 {
  margin: 0;
  font-size: 1rem;
}

/* This rule supplies a clear close control with a large tap area. */
.weight-calculator__header button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 2rem;
  background: transparent;
  border: 0;
}

/* This rule places the two-bar checkbox to the right of the bar selector. */
.weight-calculator__equipment {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* This rule keeps long bar names inside the space beside the checkbox. */
.weight-calculator select {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  color: inherit;
  font: inherit;
  background: #ffffff;
}

/* This rule keeps the checkbox and its label together in one tap area. */
.weight-calculator__equipment label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  white-space: nowrap;
}

/* This rule gives the native checkbox a fixed size beside the selector. */
.weight-calculator__equipment input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* This rule places the plate diagram to the right of the numeric counts. */
.weight-calculator__load {
  display: grid;
  grid-template-columns: fit-content(50%) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* This rule displays one plate count and weight per line. */
.weight-calculator__plates {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* This rule centers plate heights and wraps extra plates inside the phone width. */
.weight-plate-diagram {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

/* This rule gives each plate four character widths, small padding, and the same reduced text size. */
.weight-plate-diagram__plate {
  display: flex;
  width: calc(4ch + 0.25rem);
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  color: #ffffff;
  font: inherit;
  font-size: 0.6em;
  text-align: center;
  background: #000000;
}

/* 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 one shared note icon and expanded field. */
.note-editor {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
}

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

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

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

/* This rule keeps the complete generated outline above segment progress. */
.run-outline {
  display: block;
  flex: 0 0 auto;
}

/* This rule resets one interactive Run summary card. */
.run-outline-card {
  margin: 0;
  padding: 0.25rem;
  color: inherit;
  font: inherit;
  text-align: center;
  border-radius: 0;
}

/* This rule keeps a protected Run summary card visually unchanged. */
.run-outline-card:disabled {
  opacity: 1;
}

/* This rule sizes the two primary interval summary details. */
.run-outline-card__detail {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* This rule makes the interval recovery activity secondary but readable. */
.run-outline-card__recovery {
  margin-top: 0.1rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* This rule lays out one editable Run summary form. */
.run-outline-editor {
  display: flex;
  width: 100%;
  min-height: 5.5rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.75rem 1rem;
  color: inherit;
  font: inherit;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule gives the complete interval editor space for three controls. */
.run-outline-interval-editor {
  min-height: 11rem;
}

/* This rule aligns one summary label with its native control. */
.run-outline-editor__field {
  display: grid;
  width: 100%;
  min-height: 2.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 13rem);
  gap: 0.75rem;
  align-items: center;
  font-size: 1rem;
}

/* This rule sizes each native summary selector. */
.run-outline-editor select {
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  padding: 0.25rem 0.5rem;
  color: inherit;
  font: inherit;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule aligns one summary number with its unit. */
.run-outline-editor__number {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* This rule keeps the pace picker inside its phone-width field. */
.run-outline-editor__pace-picker {
  gap: 0.25rem;
}

/* This rule sizes each native summary number input. */
.run-outline-editor input {
  width: 5rem;
  height: 2.5rem;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  color: inherit;
  font: inherit;
  text-align: center;
  background: #ffffff;
  border: 1px solid #3f3f3f;
}

/* This rule aligns the cancel and save summary actions. */
.run-outline-editor__actions {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* This rule draws each summary form action as a plain icon. */
.run-outline-editor button {
  width: 2.25rem;
  min-height: 2.5rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  background: transparent;
  border: 0;
}

/* This rule dims a summary value that cannot be stored. */
.run-outline-editor button:disabled {
  opacity: 0.3;
}

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

/* This rule contains the visible completed and next run segments. */
.run-segments {
  display: block;
}

/* This rule lays out one sequential run segment. */
.run-segment-row {
  display: grid;
  width: 100%;
  min-height: 5.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  margin: 0;
  padding: 0.75rem 1rem;
  color: inherit;
  font: inherit;
  text-align: left;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #3f3f3f;
  border-radius: 0;
}

/* This rule stacks the segment name above its target details. */
.run-segment-row__label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

/* This rule defines the sequential segment name. */
.run-segment-row__label strong {
  font-size: 1rem;
  font-weight: 500;
}

/* This rule defines the distance and optional pace details. */
.run-segment-row__label small {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* This rule aligns the immediate run result actions. */
.run-segment-row__actions,
.run-segment-row__edit-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* This rule draws every run result action as a plain icon. */
.run-segment-row__actions button,
.run-segment-row__edit-actions button {
  width: 2rem;
  min-height: 2.75rem;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 1.8rem;
  line-height: 1;
  background: transparent;
  border: 0;
}

/* This rule dims run actions until the required interval pace exists. */
.run-segment-row__actions button:disabled {
  opacity: 0.3;
}

/* This rule makes the stored result symbol prominent. */
.run-segment-row__outcome {
  font-size: 1.8rem;
  font-weight: 500;
}

/* This rule marks a failed run segment with reference red. */
.run-segment-row--fail {
  background: #efb0b0;
}

/* This rule marks a met run segment with reference yellow. */
.run-segment-row--meet {
  background: #fff2a8;
}

/* This rule gives the Run note the wireframe space after visible segments. */
.run-note {
  min-height: 8rem;
}

/* 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 the build version from the archive sections. */
.data-version {
  display: block;
  border-bottom: 1px solid #3f3f3f;
}

/* This rule centers the larger full Git commit on a phone screen. */
.data-version__commit {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem 1.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(0.85rem, 4.2vw, 1.2rem);
  text-align: center;
}

/* 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 keeps exercise estimates within the phone page width. */
.data-stats table {
  width: 100%;
  border-collapse: collapse;
}

/* This rule separates exercise names and estimates with compact rows. */
.data-stats th,
.data-stats td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #3f3f3f;
  text-align: left;
  font-weight: normal;
}

/* This rule aligns the estimated weights in one right-hand column. */
.data-stats td {
  text-align: right;
}

/* 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 note row for one history result. */
.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 keeps the run interval summary on one line. */
.run-history-result__summary {
  white-space: nowrap;
}

/* This rule contains all completed run interval rows. */
.run-history-result__interval-rows {
  display: block;
}

/* This rule gives each group of four interval paces equal-width cells. */
.run-history-result__intervals {
  display: grid;
  min-height: 3rem;
}

/* This rule separates each added interval pace row. */
.run-history-result__intervals + .run-history-result__intervals {
  border-top: 1px solid #3f3f3f;
}

/* This rule centers one completed interval pace in its cell. */
.run-history-result__interval {
  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 divider from the final interval cell. */
.run-history-result__interval:last-child {
  border-right: 0;
}

/* This rule marks a failed interval pace with bold reference red text. */
.run-history-result__interval--fail {
  color: #c81e36;
  font-weight: 700;
}

/* This rule lays out the three run mileage targets. */
.run-history-result__miles {
  display: grid;
  min-height: 3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #3f3f3f;
}

/* This rule centers one compact run mileage target. */
.run-history-result__miles span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.2rem;
  font-size: 0.85rem;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid #3f3f3f;
}

/* This rule removes the duplicate divider from the final mileage target. */
.run-history-result__miles span:last-child {
  border-right: 0;
}

/* This rule marks every retained input value that cannot be stored. */
input[data-valid="false"] {
  border: 2px solid #c81e36;
}