/* v3.5.18 — established dark-navy dashboard summary language and real utility routes.
   This file layers on top of approved carousel art, typography and workout UI. */

/* Utility destinations have their own URL, back navigation and route surface. */
body.kkSubpage .shell > #kkUtilityPanel.kkRouteActive {
  display: block !important;
  width: min(100%, 1050px) !important;
  min-height: 65dvh !important;
  margin: 0 auto !important;
  padding: clamp(16px, 3vw, 36px) !important;
  box-sizing: border-box;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#kkUtilityPanel[hidden],
#kkUtilityPanel.hide,
#kkUtilityPanel .kkUtilitySection[hidden] { display: none !important; }
#kkUtilityPanel.kkUtilityPage .kkUtilitySection {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#kkUtilityPanel.kkUtilityPage .heading {
  border: 0 !important;
  margin-bottom: 6px;
}
.kkUtilityPage .kkUtilityIntro { font-size: 14px; margin: 0 0 29px; max-width: 720px; }
.kkUtilityPage h3 { margin: 10px 0 9px; font-size: 19px; letter-spacing: .01em; }
.kkUtilityPage .kkUtilitySection > p { max-width: 770px; margin: 0 0 21px; line-height: 1.65; }
.kkUtilityChoices { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 24px; margin: 14px 0 21px; }
.kkUtilityChoices button,
.kkSettingsSave button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ace4ff;
  padding: 7px 0 !important;
  font-weight: 720;
  text-align: left;
}
.kkUtilityChoices button:hover,
.kkSettingsSave button:hover { color: #ffdfa6; text-decoration: underline; text-underline-offset: 5px; }

/* Settings is deliberately solid navy, no artwork or separate hero. */
body.kkSubpage[data-kathy-page="settings"] {
  background: #061628 !important;
  background-image: none !important;
}
.kkSettingsGroup { display: grid; gap: 13px; max-width: 760px; padding: 19px 0 24px; border-bottom: 1px solid #95bad12e; }
.kkSettingsGroup:first-child { padding-top: 0; }
.kkSettingsGroup h3 { margin: 0; font-size: 18px; color: #f7daaa; }
.kkSettingsGroup > p.muted { margin: -5px 0 3px; max-width: 720px; font-size: 13px; }
.kkSettingsGroup > label,
.kkPhotoPrivacy label {
  display: grid !important;
  align-items: center;
  justify-content: start;
  gap: 6px !important;
  width: min(100%, 510px);
  font-size: 13px;
  color: #d5e7f5;
}
.kkSettingsGroup > label:has(input[type="checkbox"]) { display: flex !important; width: 100%; gap: 11px !important; }
.kkSettingsGroup input:not([type="checkbox"]),
.kkPhotoPrivacy select {
  width: min(100%, 510px) !important;
  min-height: 40px;
  padding: 8px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #9bbbd073 !important;
  border-radius: 0 !important;
  color: #f4faff;
  box-shadow: none !important;
}
.kkPhotoPrivacy { margin: 15px 0 0; }
.kkPhotoPrivacy h3 { font-size: 16px; margin-bottom: 9px; }
.kkPhotoPrivacy #kkPhotoPrivacyNote { max-width: 660px; line-height: 1.5; font-size: 12px; }
.kkSettingsSave { padding-top: 20px; max-width: 760px; }
.kkSettingsSave .muted { font-size: 12px; line-height: 1.5; }
#kkSettingsSaveStatus { color: #8ce9bd; font-size: 13px; }

/* Snapshot-inspired dashboard row: four coordinated compact widgets.
   All amounts/activities still originate from the user's saved data. */
.kkUtilities .kkUtilityButton {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.kkUtilities .kkUtilityButton:hover { color: #ffdfa6; }
.kkUtilities .kkUtilityButton:focus-visible,
.kkUtilityChoices button:focus-visible,
.kkSettingsSave button:focus-visible { outline: 2px solid #70d7ff; outline-offset: 5px; }
body:not(.kkSubpage) :is(.daywork,.streakpanel,.roadmap,.kkFinanceWrap,.kkRecent) {
  background: linear-gradient(180deg,rgba(4,23,42,.97),rgba(3,18,34,.98)) !important;
  border: 1px solid #1983b479 !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  color: #e6f5ff !important;
}
body:not(.kkSubpage) :is(.daywork,.streakpanel,.roadmap,.kkRecent) {
  padding: 15px 17px !important;
}
body:not(.kkSubpage) :is(.daywork,.streakpanel,.roadmap,.kkRecent) .heading {
  border-bottom: 1px solid #8dc6e21e !important;
  padding-bottom: 9px;
  margin: 0 0 12px;
  gap: 7px;
}
body:not(.kkSubpage) :is(.daywork,.streakpanel,.roadmap,.kkRecent) .heading h2 {
  font-size: clamp(14px,1.12vw,17px) !important;
  font-weight: 790;
  letter-spacing: -.012em;
  color: #f0f8ff !important;
}
body:not(.kkSubpage) :is(.daywork,.streakpanel,.roadmap) .headingIcon {
  width: 25px !important;
  height: 25px !important;
  border-radius: 6px;
}
body:not(.kkSubpage) .daywork #workoutPlan strong { font-size: clamp(16px,1.3vw,19px); line-height: 1.25; }
body:not(.kkSubpage) .daywork #workoutPlan p { font-size: 12px; }
body:not(.kkSubpage) .roadmap .objectiveText { line-height: 1.2; font-size: clamp(15px,1.4vw,19px); }
body:not(.kkSubpage) .kkFinanceWrap { min-height: 220px; }
body:not(.kkSubpage) .kkFinanceBox { padding: 15px 17px !important; }
body:not(.kkSubpage) .kkFinanceBox h3 { font-size: 16px; color: #f0f8ff; }
body:not(.kkSubpage) .kkRecent { min-height: 220px; }
.kkRecent .kkRecentViewAll {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #64cfff !important;
  padding: 0 !important;
  font-size: 12px !important;
}
.kkRecentList { display: grid; gap: 0; }
.kkRecentRow {
  display: grid;
  grid-template-columns: 21px minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 35px;
  width: 100%;
  padding: 5px 0 !important;
  text-align: left;
  font-size: 12px;
  color: #e1f0fc;
  border: 0 !important;
  border-bottom: 1px solid #8dc6e21a !important;
  background: none !important;
  box-shadow: none !important;
}
.kkRecentRow:last-child { border-bottom: 0 !important; }
.kkRecentRow:hover { color: #ffde9b !important; }
.kkRecentRow .kkRecentIcon { color: #65cdfb; font-size: 16px; }
.kkRecentRow time { font-size: 10px; color: #aac5d9; white-space: nowrap; }
.kkRecentList > p { font-size: 12px; line-height: 1.6; }

@media(min-width:1260px) {
  body:not(.kkSubpage) .daywork { grid-column: 1 / 4 !important; order: -20 !important; }
  body:not(.kkSubpage) .roadmap { grid-column: 4 / 7 !important; order: -19 !important; }
  body:not(.kkSubpage) .kkFinanceWrap { grid-column: 7 / 10 !important; order: -18 !important; }
  body:not(.kkSubpage) .kkRecent { grid-column: 10 / 13 !important; order: -17 !important; margin: 0 !important; }
  body:not(.kkSubpage) .streakpanel {
    grid-column: 1 / -1 !important;
    order: -16 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 220px 95px minmax(160px,1fr) 220px;
    gap: 9px 18px;
    align-items: center;
  }
  body:not(.kkSubpage) .streakpanel .heading { margin-bottom: 0; border: 0 !important; }
  body:not(.kkSubpage) .streakpanel .streakstat strong { font-size: 29px !important; }
  body:not(.kkSubpage) .streakpanel #streakNote { font-size: 12px; margin: 0; }
  body:not(.kkSubpage) .streakpanel #milestoneDots { grid-column: 1 / -1; }
}
@media(max-width:640px) {
  .kkSettingsGroup { max-width: 100%; }
  .kkUtilityChoices { gap: 9px 19px; }
  body:not(.kkSubpage) .kkRecent { min-height: 0; }
}