/* FitApp theme on Bootstrap 5.3.8. Layout and controls use Bootstrap components. */
:root {
  --bs-body-font-family: Inter, "Segoe UI", Arial, sans-serif;
  --bs-body-color: #29332b;
  --bs-body-bg: #f5f6f1;
  --bs-secondary-color: #727d6a;
  --bs-border-color: #e2e7da;
  --bs-primary: #d4ef69;
  --bs-primary-rgb: 212, 239, 105;
  --bs-link-color: #5c753b;
  --bs-link-hover-color: #354b24;
  --fit-dark: #26332a;
  --fit-muted: #727d6a;
  --fit-mono: "SFMono-Regular", Consolas, monospace;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(5rem + env(safe-area-inset-top)); }
body { font-size: .9rem; }
[hidden] { display: none !important; }
.form-control-lg, .form-select-lg, .btn-lg, .btn-group-lg > .btn { border-radius: var(--bs-border-radius); }
button, a, summary { touch-action: manipulation; }
:where(a, button, input, summary):focus-visible { outline: 3px solid #839d38; outline-offset: 4px; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.filled { fill: currentColor; stroke-width: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1050; background: var(--fit-dark); color: white; padding: .75rem; }
.skip-link:focus { top: 1rem; }
/* Mobile portrait stacks the content; wider layouts keep controls left and workouts or metrics right. */
.app-header { padding-top: max(.5rem, env(safe-area-inset-top)); padding-bottom: .5rem; }
.app-header-inner { width: 100%; max-width: none; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.brand { font-size: 1.3rem; font-weight: 700; letter-spacing: -.04rem; color: var(--fit-dark); min-height: 44px; }
.header-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: .6rem; flex-shrink: 0; border: var(--bs-border-width) solid var(--bs-border-color); }
.header-controls { margin-left: auto; }
.header-brand { flex-wrap: wrap; }
.install-app { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-size: .75rem; white-space: nowrap; }
.units-switch { min-height: 44px; font-size: .75rem; color: var(--fit-muted); cursor: pointer; white-space: nowrap; }
.units-switch #units-toggle { float: none; margin: 0; font-size: .9rem; cursor: pointer; }
.app-header .nav-link { color: #66755b; }
.app-header .nav-link.active, .app-header .nav-link:hover { color: #34452d; background: #eef4df; }
.status-dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: #a1ae94; flex-shrink: 0; }
#main { width: 100%; max-width: none; outline: none; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important; padding-left: max(1rem, env(safe-area-inset-left)) !important; padding-right: max(1rem, env(safe-area-inset-right)) !important; }
#main .btn, .offcanvas .btn { min-height: 44px; }
#main .workout-card .btn-sm, .offcanvas .workout-card .btn-sm { min-height: 0; }
.offcanvas .btn-close { width: 44px; height: 44px; padding: 0; }
.offcanvas { --bs-offcanvas-width: 560px; padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
.offcanvas .card { --bs-card-bg: #fff; }
.connection-card, .control-card, .metric-card, .device-log { --bs-card-bg: #fff; --bs-card-border-color: var(--bs-border-color); }
.connection-icon { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; background: #f0f4e7; color: #6a7c53; flex-shrink: 0; }
.connection-actions { width: 100%; }
.connection-actions .btn { flex-grow: 1; }
.connection-status { background: #f1f4ec; color: #717d66; font-size: .7rem; font-weight: 500; padding: .6rem .7rem; }
.connection-status.connected { color: #507336; background: #edf5e4; }
.connection-status.connected .status-dot { background: #6c9d52; }
.connection-status.connecting .status-dot { background: #bd8e35; animation: breathe 1s infinite; }
.notice.success { --bs-alert-bg: #edf5e7; --bs-alert-border-color: #d7e6cb; --bs-alert-color: #536e42; }
.notice { display: flex; align-items: center; gap: .5rem; }
.notice-message { min-width: 0; }
#main .session-reconnect { min-height: 0; padding: .25rem .5rem; font-size: .7rem; white-space: nowrap; --bs-btn-color: #768465; --bs-btn-bg: #f1f4e9; --bs-btn-border-color: #f1f4e9; --bs-btn-hover-color: #657351; --bs-btn-hover-bg: #e7eddb; --bs-btn-hover-border-color: #e7eddb; --bs-btn-active-color: #657351; --bs-btn-active-bg: #e7eddb; --bs-btn-active-border-color: #e7eddb; --bs-btn-disabled-color: #768465; --bs-btn-disabled-bg: #f1f4e9; --bs-btn-disabled-border-color: #f1f4e9; --bs-btn-focus-shadow-rgb: 118, 132, 101; }
.btn-primary { --bs-btn-color: #304125; --bs-btn-bg: #d4ef69; --bs-btn-border-color: #d4ef69; --bs-btn-hover-color: #24351c; --bs-btn-hover-bg: #c7e355; --bs-btn-hover-border-color: #c7e355; --bs-btn-active-color: #24351c; --bs-btn-active-bg: #bcd74e; --bs-btn-active-border-color: #bcd74e; --bs-btn-disabled-color: #304125; --bs-btn-disabled-bg: #d4ef69; --bs-btn-disabled-border-color: #d4ef69; --bs-btn-focus-shadow-rgb: 145, 171, 77; }
.btn-dark { --bs-btn-bg: #26332a; --bs-btn-border-color: #26332a; --bs-btn-hover-bg: #3c4b39; --bs-btn-hover-border-color: #3c4b39; }
.btn-outline-secondary { --bs-btn-color: #66755b; --bs-btn-border-color: #dce2d3; --bs-btn-hover-color: #35482a; --bs-btn-hover-bg: #edf2e5; --bs-btn-hover-border-color: #9fb87a; --bs-btn-active-bg: #e7efdb; --bs-btn-active-border-color: #9fb87a; --bs-btn-active-color: #35482a; --bs-btn-disabled-color: #66755b; --bs-btn-disabled-border-color: #dce2d3; }
.chip { font-size: .65rem; padding: .5rem .65rem; background: #f1f4e9; color: #768465; font-weight: 500; }
.chip.running { background: #edf5dc; color: #587632; }
.pace-caption, .preset-heading { font-size: .65rem; letter-spacing: .08rem; color: #82906f; }
#target-speed { line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
#target-speed { font-size: clamp(1.7rem, 6vw, 2.5rem); letter-spacing: -.05rem; }
.pace-unit { font-size: .75rem; color: #778567; }
.step-button { width: 44px; height: 44px; font-size: 1.3rem; padding: 0; flex-shrink: 0; }
.form-range::-webkit-slider-thumb { background: #91ae4b; }
.form-range::-moz-range-thumb { background: #91ae4b; }
.form-range:disabled::-webkit-slider-thumb { background: #abb990; }
.form-range:disabled::-moz-range-thumb { background: #abb990; }
.form-check-input:checked { background-color: #819d44; border-color: #819d44; }
.form-check-input:focus { border-color: #91ae4b; box-shadow: 0 0 0 .25rem #91ae4b30; }
.speed-presets > .col { flex: 1 0 3rem; min-width: max-content; }
.speed-presets .btn { font-size: .95rem; padding: .7rem .1rem; }
.speed-presets .btn span { display: block; font-size: .62rem; margin-top: .3rem; }
.speed-presets .btn .preset-speed-value { font-size: .95rem; margin-top: 0; }
.speed-presets .btn.selected { --bs-btn-bg: #f1f7e4; --bs-btn-border-color: #b8ce81; --bs-btn-color: #54732e; }
.workout-actions .btn { font-size: 1rem; min-height: 52px !important; }
.workout-action-row { display: flex; gap: .5rem; }
.workout-action-row > .btn { flex: 1 1 0; min-width: 0; }
.form-range { min-height: 44px; margin-top: -.25rem; margin-bottom: 0; }
.form-check-label { display: inline-flex; min-height: 44px; align-items: center; }
.form-check-input { margin-top: .85rem; }
.metric-card { min-height: 112px; }
.metric-label { color: #72815f; font-size: .75rem; }
.metric-value { font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -.06rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: .3rem; white-space: nowrap; }
.metric-unit { font-size: .7rem; letter-spacing: 0; color: #7c896e; font-weight: 400; margin-left: .35rem; }
.metric-card p { color: #7b886d; font-size: .68rem; margin-top: .2rem; }
.device-log .log-output { min-height: 160px; max-height: 55dvh; }
.log-output { font: .7rem/1.8 var(--fit-mono); background: #f6f8f1; border: 1px solid #e3e9d9; min-height: 90px; max-height: 240px; overflow: auto; overflow-wrap: anywhere; }
.log-line { margin: 0; }
.log-line time { color: #7d8a6d; margin-right: .65rem; }
.log-line.error { color: #a2402c; }
.log-line.tx { color: #877324; }
.log-line.rx { color: #507347; }
.frame-details { font-size: .75rem; color: #73845f; }
.frame-details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.program-summary { background: #f6f8f1; }
#stats-page { outline: none; }
#stats-page .card { --bs-card-bg: #fff; }
.stats-chart { min-height: 215px; }
.stats-column { min-width: 0; }
.stats-track { position: relative; height: 140px; border-bottom: 1px solid var(--bs-border-color); }
.stats-bar { position: absolute; bottom: 0; left: 0; width: 100%; background: #91ae4b; }
.stats-target-marker { position: absolute; left: 0; right: 0; border-top: 2px dashed #526337; }
.stats-target-label { font-size: .8rem; }
.stats-target-label.has-target::before { content: ''; display: inline-block; width: 1.25rem; margin-right: .4rem; border-top: 2px dashed #526337; vertical-align: middle; }
.stats-target-dialog { width: calc(100% - 2rem); max-width: 420px; max-height: calc(100dvh - 2rem); background: #fff; color: var(--bs-body-color); }
.stats-target-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.stats-table { --bs-table-bg: transparent; width: 100%; table-layout: fixed; }
.stats-table th, .stats-table td { overflow-wrap: anywhere; }
.program-summary .progress { height: .35rem; }
.program-summary .progress-bar { background: #91ae4b; }
.workout-steps { font-size: .75rem; }
.workout-steps li { padding: .35rem 0; }
.workout-title { min-width: 0; overflow-wrap: anywhere; }
.workout-card.selected { border-color: #9fb87a; }
#featured-workouts .workout-card { --bs-card-bg: #fff; }
#featured-workouts .workout-steps { margin-top: .35rem !important; }
#featured-workouts .workout-steps li { padding: .15rem 0; line-height: 1.3; }
#live-workout .metrics-grid { --bs-gutter-y: .375rem; }
#live-workout .metric-card { min-height: 84px; }
#live-workout .metric-card .card-body { padding: .5rem .75rem !important; }
#live-workout .metric-value { font-size: clamp(1.15rem, 3vw, 2rem); line-height: 1.15; margin-top: .15rem; }
#live-workout .metric-card p { margin-top: .15rem; line-height: 1.2; }
@media (min-width: 768px), (orientation: landscape) {
  .workout-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
  }
  .workout-layout > * { min-width: 0; padding: 0; margin: 0; }
  .workout-controls { grid-column: 1; grid-row: 1; }
  #featured-workouts, #live-workout { grid-column: 2; grid-row: 1; }
  #live-workout .metrics-grid > .col-4 { width: 100%; }
}
@media (max-height: 575.98px) and (orientation: landscape) {
  .workout-layout { gap: .75rem; }
  #live-workout .metric-card .card-body { padding: .75rem .5rem; }
  #live-workout .metric-label { gap: .25rem !important; font-size: .65rem; }
  #live-workout .metric-value { font-size: clamp(1.15rem, 4vw, 1.8rem); }
}
@keyframes breathe { 50% { opacity: .3; } }
@media (max-width: 575.98px) {
  #live-workout .metric-card .card-body { padding: .75rem .5rem; }
  #live-workout .metric-label { gap: .25rem !important; font-size: .65rem; }
  #live-workout .metric-label .icon { width: .85rem; height: .85rem; }
  #live-workout .metric-value { font-size: clamp(1.15rem, 5vw, 1.8rem); }
  .stats-table { font-size: .75rem; }
  .stats-table > :not(caption) > * > * { padding: .4rem .2rem; }
  .header-controls, .header-controls .nav { width: 100%; }
  .header-controls { order: 1; }
  .header-controls .nav { justify-content: space-between; }
  .app-header-inner, #main { padding-left: max(.75rem, env(safe-area-inset-left)) !important; padding-right: max(.75rem, env(safe-area-inset-right)) !important; }
  .brand { font-size: 1.15rem; }
  .brand img { width: 28px; height: 28px; }
  .connection-copy { flex-basis: calc(100% - 4rem); }
  .connection-actions { gap: .65rem !important; }
  .connection-actions .btn { flex-grow: 1; }
  .metric-card { min-height: 112px; }
  .metric-card .card-body { padding: .85rem; }
  .metric-label { font-size: .68rem; }
  .metric-value { font-size: 1.8rem; }
  .metric-unit { font-size: .6rem; margin-left: .2rem; }
  .metric-card p { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}