/* v3.5.15 workout controls: flat, borderless, backgroundless as requested. */
.kkLibraryNav {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.kkLibraryNav svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kkPhotoPrivacy {
  flex-basis: 100%;
  margin-top: 16px;
}
.kkPhotoPrivacy h3 { margin: 0 0 9px; }
.kkPhotoPrivacy label { display: block; margin: 0 0 5px; }
.kkPhotoPrivacy select {
  display: block;
  width: min(420px,100%);
  max-width: 100%;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f1f8ff;
}
.kkPhotoPrivacy option { background: #07172a; color: #fff; }
#workoutForm .workoutDateField {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
  position: relative;
  min-width: 0;
}
#workoutForm .workoutFields { align-items: flex-start; }
#workoutForm #workoutDateManual {
  display: block;
  width: 119px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 4px 2px 5px !important;
  box-sizing: border-box;
}
#workoutForm #workoutDateInput { display: none !important; }
#workoutCalendarToggle { margin-bottom: 4px !important; }
#workoutForm .workoutCalendar[hidden] { display: none !important; }
#workoutForm .workoutCalendar {
  display: grid;
  gap: 9px;
  position: static;
  flex: 1 1 100%;
  width: min(525px, calc(100vw - 44px));
  padding: 18px 12px !important;
  box-sizing: border-box;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #f1f8ff;
  text-shadow: 0 2px 4px #000f, 0 0 10px #000b;
}
.workoutCalendarNav {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.workoutCalendarNav strong { font-size: 21px; color: #ffe2ac; }
.workoutCalendarNav button { font-size: 35px; padding: 0 !important; line-height: 1; }
.workoutCalendarBody { display: grid; grid-template-columns: minmax(0,1fr) 81px; gap: 12px; }
.workoutCalendarDays { min-width: 0; }
.workoutCalendarWeekdays,
.workoutCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 3px;
}
.workoutCalendarWeekdays { margin-bottom: 7px; }
.workoutCalendarWeekdays span { text-align: center; color: #ffe0a7; font-size: 12px; }
.workoutCalendarGrid button,
.workoutYearWheel button {
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 40px !important;
  width: 100%;
  font-size: 16px;
  font-weight: 650;
  color: #e6f6ff;
  border: none !important;
  background: none !important;
}
.workoutCalendarGrid button:hover,
.workoutYearWheel button:hover { color: #ffe4ab !important; text-decoration: underline; }
.workoutCalendarGrid .isSelected,
.workoutYearWheel .isSelected { color: #ffcc77 !important; text-decoration: underline; text-underline-offset: 5px; }
.workoutCalendarGrid .isToday { font-weight: 850; }
.workoutYearWheel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  touch-action: pan-y;
  outline-offset: 4px;
  min-width: 0;
}
.workoutYearWheel button { min-height: 38px !important; }
.workoutYearWheel .isSelected { transform: scale(1.18); }
.workoutCalendarFoot { display: flex; gap: 22px; justify-content: flex-end; }
.workoutCalendarFoot button { padding: 2px 0 !important; color: #b1e8ff !important; }
#workoutForm #workoutNotes {
  width: 100% !important;
  min-height: 106px !important;
  max-height: none !important;
  overflow-y: hidden;
  box-sizing: border-box;
  resize: vertical;
}
#workoutForm .workoutPhotoControls {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 7px 14px;
  max-width: min(620px,100%);
}
#workoutForm .workoutPhotoControls > label { flex: 1 1 100%; margin: 0 !important; }
#workoutForm #workoutPhotoStatus { margin: 0; font-size: 12px; }
#workoutForm #workoutPhotoPreview[hidden] { display: none !important; }
#workoutForm #workoutPhotoPreview { display: flex; flex-wrap: wrap; gap: 9px; flex: 1 1 100%; }
#workoutForm #workoutPhotoPreview img {
  width: 105px;
  height: 82px;
  object-fit: cover;
  border-radius: 9px;
}
#workoutForm input[type=number] { font-variant-numeric: tabular-nums; }
.kkLibraryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(210px,100%),1fr));
  align-items: start;
  gap: 18px;
  margin-top: 22px;
}
.kkLibraryPhoto { margin: 0; padding: 0; min-width: 0; }
.kkLibraryPhoto img {
  display: block;
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.kkLibraryPhoto figcaption {
  margin-top: 7px;
  font-size: 13px;
  color: #eaf7ff;
}
.workoutAttachedPhotos {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 7px;
}
.workoutAttachedPhotos img {
  display: block;
  width: 112px;
  height: 82px;
  object-fit: cover;
  border-radius: 8px;
}
.workoutEntry p:not(.muted) { white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:580px){
 #workoutForm .workoutCalendar { width: min(415px,calc(100vw - 34px)); padding: 12px 0 !important; }
 .workoutCalendarNav strong { font-size: 18px; }
 .workoutCalendarBody { grid-template-columns: minmax(0,1fr) 64px; gap: 5px; }
 .workoutCalendarGrid button { min-height: 37px !important; font-size: 14px; }
 .workoutYearWheel button { font-size: 13px; }
}

/* 3.5.16: one universal pantograph rule for all routed subpages.
   These images are visual watermarks, not bright hero artwork. The dark overlay
   leaves approximately 12% of the original art visible, like a check pattern.
   New pages automatically inherit this when routed with .kkSubpage and
   .kkRouteActive; only --kk-subpage-art changes per destination. */
body.kkSubpage {
  background-color: #041326 !important;
  background-image:
    linear-gradient(rgba(3, 12, 27, .88), rgba(3, 12, 27, .88)),
    var(--kk-subpage-art, url("art/training.webp")) !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
}
body.kkSubpage .shell > .kkRouteActive {
  /* Same delicate transparency as the Library, including Training and WOTD. */
  background: rgba(3, 13, 28, .14) !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.kkSubpage .shell > .kkRouteActive::before {
  display: none !important;
}
body.kkSubpage .shell > .kkRouteActive .heading {
  border-bottom: 0 !important;
}
@media (max-width: 700px) {
  body.kkSubpage { background-attachment: scroll, scroll !important; }
}

/* v3.5.17 — truly unboxed subpage canvas.
   The old #workoutDetailPage:not(.hide) selector had ID specificity and
   overrode the shared 3.5.16 panel rule. :is() intentionally raises this
   universal rule to the same ID specificity without hardcoding every page. */
body.kkSubpage .shell > :is(.kkRouteActive, #workoutDetailPage) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.kkSubpage .shell > :is(.kkRouteActive, #workoutDetailPage)::before { display: none !important; }
body.kkSubpage .shell > :is(.kkRouteActive, #workoutDetailPage) .heading { border: 0 !important; }

/* Workout form redesign — quiet typography and purposeful baseline alignment.
   These two grouped rows remain plain elements over the page pantograph. */
#workoutForm {
  max-width: 840px !important;
  gap: 18px !important;
  background: transparent !important;
  border: 0 !important;
}
#workoutForm .workoutFields {
  display: grid !important;
  align-items: start !important;
  gap: 22px !important;
  max-width: 100%;
}
#workoutForm .workoutPrimaryFields,
#workoutForm .workoutMetricsFields {
  display: grid;
  align-items: end;
  column-gap: clamp(18px, 2.5vw, 29px);
  row-gap: 14px;
}
#workoutForm .workoutPrimaryFields {
  grid-template-columns: 168px 195px minmax(170px, 1fr);
}
#workoutForm .workoutMetricsFields {
  grid-template-columns: 137px 129px 102px 200px;
}
#workoutForm .workoutField,
#workoutForm .workoutTimePart,
#workoutForm .workoutDuration legend,
#workoutForm .workoutNotesField {
  color: #c8d9e8 !important;
  font-size: 11px !important;
  font-weight: 680;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1.4;
}
#workoutForm .workoutField,
#workoutForm .workoutTimePart {
  min-width: 0;
  margin: 0 !important;
  gap: 5px !important;
}
#workoutForm .workoutField > input,
#workoutForm .workoutField > select,
#workoutForm .workoutTimePart > input,
#workoutForm .workoutNotesField > textarea {
  color: #fff8ec !important;
  font-size: 15px !important;
  font-weight: 520;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 0 !important;
  border-bottom: 1px solid #96b7ca78 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 6px 0 7px !important;
  min-height: 40px !important;
}
#workoutForm .workoutField > input:focus,
#workoutForm .workoutField > select:focus,
#workoutForm .workoutTimePart > input:focus,
#workoutForm #workoutNotes:focus {
  outline: none !important;
  border-bottom-color: #e9b86d !important;
}
#workoutForm .workoutDateField {
  display: block !important;
  position: static;
  min-width: 0;
}
#workoutForm .workoutDateField > .workoutField { display: block; margin-bottom: 5px !important; }
#workoutForm .workoutDateControl {
  display: flex;
  align-items: center;
  width: 164px;
  min-height: 40px;
  border-bottom: 1px solid #96b7ca78;
}
#workoutForm .workoutDateControl:focus-within { border-bottom-color: #e9b86d; }
#workoutForm #workoutDateManual {
  flex: 1 1 auto;
  min-width: 0;
  width: 116px !important;
  height: 40px !important;
  padding: 6px 2px 7px 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  color: #fff8ec !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  letter-spacing: 0;
  text-transform: none;
}
#workoutCalendarToggle {
  flex: 0 0 30px;
  width: 30px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  color: #afc9d9 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
#workoutCalendarToggle:hover,
#workoutCalendarToggle[aria-expanded="true"] { color: #ffe0a3 !important; }
#workoutCalendarToggle svg,
#workoutPhotoChoose svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#workoutForm .workoutCalendar {
  grid-column: 1 / -1;
  width: min(525px, 100%) !important;
  padding: 12px 0 5px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#workoutForm .workoutDuration { min-width: 0; }
#workoutForm .workoutDuration legend { padding-bottom: 5px !important; }
#workoutForm .workoutDurationParts { gap: 13px !important; }
#workoutForm #workoutHours,
#workoutForm #workoutMinutePart {
  width: 60px !important;
  text-align: center;
}
#workoutForm input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
#workoutForm input[type="number"]::-webkit-inner-spin-button,
#workoutForm input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#workoutForm #workoutMiles { width: 126px !important; }
#workoutForm #workoutRpe { width: 99px !important; }
#workoutForm #workoutSource { width: 200px !important; }
#workoutForm .workoutNotesField {
  display: block;
  width: min(760px, 100%) !important;
  margin: 0 !important;
}
#workoutForm #workoutNotes {
  width: 100% !important;
  min-height: 84px !important;
  margin-top: 5px !important;
  line-height: 1.6;
  padding: 8px 0 10px !important;
  box-sizing: border-box;
  resize: vertical;
}
#workoutForm #workoutNotes::placeholder,
#workoutForm .workoutField input::placeholder { color: #aab9c7a9; }
#workoutForm .workoutPhotoControls {
  align-items: center;
  gap: 8px 16px;
  width: min(760px, 100%);
  max-width: 100%;
}
#workoutPhotoChoose {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0 !important;
  margin: 0 !important;
  color: #c7e8fb !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
#workoutForm #workoutPhotoStatus {
  color: #a9bfcd;
  font-size: 11px;
  flex: 1 1 220px;
}
#workoutForm .rowcheck {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e0effa;
  font-size: 13px;
}
#workoutForm .workoutEntryActions { gap: 24px; }
#workoutForm .workoutEntryActions button { font-size: 14px !important; font-weight: 700; }
#workoutLogRoot > h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 30px 0 12px;
}
@media (max-width: 740px) {
  #workoutForm .workoutPrimaryFields { grid-template-columns: 168px minmax(170px, 1fr); }
  #workoutForm #workoutCustomField { grid-column: 1 / -1; }
  #workoutForm .workoutMetricsFields { grid-template-columns: 137px minmax(129px, 1fr); }
}
@media (max-width: 390px) {
  #workoutForm .workoutPrimaryFields { grid-template-columns: minmax(0, 1fr); }
  #workoutForm .workoutMetricsFields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}