@import url('/_ds/dudes-baseball-design-system-6e014591-26f3-421f-8ee8-1db07ee65c11/tokens/fonts.css');
/* Paint the same dark document canvas before the design runtime starts. */
html, body { background-color: #0A0A0A !important; margin: 0; }
x-dc { display: none !important; }
#dds-loader {
  position: fixed; inset: 0 0 calc(var(--dds-nav-height) + var(--dds-nav-bottom, 0px));
  z-index: 8999; background: #0A0A0A; color: #F4F1EC;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; opacity: 1; transition: opacity 160ms ease-out;
}
#dds-loader.dds-transition-leaving { opacity: 0; pointer-events: none; }
.dds-transition-label { font: 12px/1.4 'JetBrains Mono', monospace; text-align: center; padding: 0 20px; }
.dds-transition-track { width: 132px; height: 3px; background: #292929; overflow: hidden; border-radius: 2px; }
.dds-transition-track > span { display: block; width: 40%; height: 100%; background: #C8232A; animation: dds-loading-track 900ms ease-in-out infinite; }
#dds-loader button { min-height: 48px; padding: 10px 20px; color: #fff; background: #A11D28; border: 1px solid #E32A32; border-radius: 6px; cursor: pointer; }
@keyframes dds-loading-track { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { #dds-loader { transition: none; } #dds-loader * { animation: none !important; } }
/* One unscaled viewport bar for every route, sized from Exo's Gear reference. */
:root {
  --dds-nav-width: min(100vw, 440px) !important;
  --dds-nav-height: calc((min(100vw, 440px) - 56px) / 5 + 8px + env(safe-area-inset-bottom, 0px)) !important;
}
#dds-bottom-nav {
  zoom: calc(1 / var(--dds-screen-zoom, 1)) !important;
  position: fixed;
  z-index: 9000 !important;
  left: 50% !important;
  bottom: var(--dds-nav-bottom, 0px) !important;
  transform: translateX(-50%) !important;
  width: var(--dds-nav-width) !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: #0B0B0B !important;
  color: #F04A55 !important;
  isolation: isolate !important;
}
#dds-bottom-nav > button {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  border: 1px solid rgba(200,35,42,.4) !important;
  border-radius: 14px !important;
  background: rgba(200,35,42,.08) !important;
  box-shadow: none !important;
  color: #F04A55 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
#dds-bottom-nav > button[aria-current="page"] {
  background: rgba(200,35,42,.28) !important;
  border-color: #F04A55 !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(200,35,42,.45) !important;
}
#dds-bottom-nav > button:focus-visible { outline: 2px solid #F4F1EC !important; outline-offset: -4px !important; }
#dds-bottom-nav > button > svg { width: 24px !important; height: 24px !important; flex: none !important; }
#dds-bottom-nav > button > span:not(#dds-chat-badge) {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
[data-dds-legacy-nav] { display: none !important; }
/* Keep the full artboard box, reserving the nav in its bottom border.
   Absolute sheets use the remaining padding box and stop above the nav.
   Visible overflow lets fixed chrome keep its viewport coordinates. */
html [data-dds-app-screen][data-screen-label][style] {
  position: relative !important;
  --dds-screen-zoom: 1;
  box-sizing: border-box !important;
  height: calc(var(--dds-view-height, 100dvh) / var(--dds-screen-zoom)) !important;
  /* The rounding clearance keeps content above fractional nav edges. It is
     painted the nav's own black so the 2px between a screen's content and the
     tab tiles never shows the cream artboard canvas (2026-09-21, Exo: a white
     bar flashed above the nav on the workout and chat screens). */
  border-bottom: calc((var(--dds-nav-height) + 2px) / var(--dds-screen-zoom)) solid #0B0B0B !important;
  overflow: visible !important;
  min-height: 0 !important;
}
@media (max-width: 439.98px) {
  html [data-dds-app-screen][data-screen-label][style^="width: 440px"] {
    --dds-screen-zoom: var(--dds-zoom, 1);
  }
}
body[data-dds-document] {
  padding-bottom: var(--dds-nav-height);
}

/* Readable secondary copy on the app's dark cards. Geometry remains in nav tokens above. */
:root { --ink-mute: rgba(244,241,236,.68) !important; --ink-faint: rgba(244,241,236,.62) !important; --ink-dim: rgba(244,241,236,.68) !important; }
.dds-secondary { font-size: max(12px, calc(12px / var(--dds-zoom, 1))) !important; line-height: 1.45 !important; }
[role="group"][aria-label] > button { min-height: calc(44px / var(--dds-zoom, 1)); }
#assessment-weight:focus-visible { outline: 3px solid #62caff; outline-offset: 2px; }

button[data-assessment-trend] { min-height: calc(44px / var(--dds-zoom, 1)); font-size: max(11px, calc(11px / var(--dds-zoom, 1))) !important; color: #F04A55 !important; }