/* v3.7.8 conservative detail polish
   Goal: keep v3.7.6 visual language, only refine spacing, alignment and small interaction states. */

:root {
  --fit-space-1: 8px;
  --fit-space-2: 12px;
  --fit-space-3: 16px;
  --fit-space-4: 24px;
  --fit-space-5: 32px;
  --fit-radius-card: 24px;
  --fit-radius-inner: 16px;
  --fit-radius-control: 14px;
}

/* Global rhythm: slightly calmer weights and more stable numerals. */
.nav-tabs a,
.system-nav-tabs a,
.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.filter-btn,
.neutral-btn,
.home-primary-cta,
.home-secondary-link,
.home-text-link,
.user-pill,
.small-btn,
.mini-link,
button {
  font-weight: 720 !important;
}

.home-kpi-row strong,
.status-kpi-grid strong,
.week-summary-grid strong,
.analysis-stat-chips strong,
.pr-card-mini strong,
.record-volume,
#restTimerDisplay,
.muted-tag {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "kern" 1 !important;
}

/* Header: make the account/settings area feel intentional instead of patched on. */
.app-header-system .header-right {
  gap: var(--fit-space-2) !important;
}

.system-header-actions,
.header-actions {
  align-items: center !important;
}

.user-menu,
.settings-menu {
  position: relative !important;
}

.user-menu > summary,
.settings-menu > summary {
  list-style: none !important;
}

.user-menu > summary::-webkit-details-marker,
.settings-menu > summary::-webkit-details-marker {
  display: none !important;
}

.user-pill,
.settings-menu > summary.ghost-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.user-pill {
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.settings-popover {
  border-radius: 18px !important;
  border: 1px solid var(--fit-border-soft) !important;
  background: var(--fit-card-solid) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12) !important;
}

html[data-theme="dark"] .settings-popover {
  background: var(--fit-card-solid) !important;
}

/* Date toolbar: preserve the existing structure, but make all controls share one rhythm. */
.home-datebar,
.train-topbar {
  margin-bottom: var(--fit-space-3) !important;
}

.home-date-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--fit-space-1) !important;
  padding: 6px !important;
  border: 1px solid var(--fit-border-soft) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: var(--fit-shadow-soft) !important;
}

html[data-theme="dark"] .home-date-switcher {
  background: rgba(255,255,255,.045) !important;
}

.home-date-switcher label,
.home-date-switcher .neutral-btn {
  min-height: 40px !important;
  border-radius: var(--fit-radius-control) !important;
  box-shadow: none !important;
}

.home-date-switcher label {
  gap: var(--fit-space-1) !important;
  padding: 0 12px !important;
  background: rgba(255,255,255,.74) !important;
}

html[data-theme="dark"] .home-date-switcher label {
  background: rgba(255,255,255,.055) !important;
}

.home-date-switcher label span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--fit-muted) !important;
}

.home-date-switcher input[type="date"] {
  min-height: 34px !important;
  font-weight: 720 !important;
}

.home-date-switcher .icon-only,
.home-date-switcher .icon-btn {
  width: 40px !important;
  min-width: 40px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Home hero: keep the v3.7.6 look, only reduce visual noise and improve alignment. */
.home-hero-grid,
.home-week-grid {
  gap: var(--fit-space-3) !important;
}

.home-primary-card,
.home-advice-card,
.home-section-card {
  border-radius: var(--fit-radius-card) !important;
}

.home-primary-card,
.home-advice-card {
  padding: 28px !important;
}

.home-card-head,
.home-section-title,
.trend-title-row,
.section-title {
  gap: var(--fit-space-2) !important;
}

.home-card-head {
  align-items: center !important;
}

.home-state-pill,
.muted-tag {
  min-height: 28px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.home-primary-card h1 {
  margin: 22px 0 10px !important;
  font-size: clamp(34px, 4.7vw, 54px) !important;
  line-height: 1.02 !important;
}

.home-lead,
.home-advice-card > p,
.home-section-title p,
.home-advice-list span,
.home-entry-links span {
  line-height: 1.66 !important;
}

.home-kpi-row {
  gap: var(--fit-space-2) !important;
  margin-top: var(--fit-space-4) !important;
}

.home-kpi-row > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 92px !important;
  padding: 14px !important;
  border-radius: var(--fit-radius-inner) !important;
}

.home-kpi-row span,
.home-kpi-row small {
  font-weight: 650 !important;
}

.home-kpi-row strong {
  margin: 6px 0 2px !important;
  font-size: clamp(25px, 3.2vw, 36px) !important;
  white-space: nowrap !important;
}

.home-main-action {
  margin-top: var(--fit-space-4) !important;
}

.home-primary-cta,
.home-secondary-link,
.home-text-link,
.home-finish-link {
  min-height: 44px !important;
}

/* Advice card: make sync info secondary and keep the recommendation readable. */
.home-advice-card {
  display: flex !important;
  flex-direction: column !important;
}

.home-advice-card h2,
.home-entry-card h2,
.home-section-title h2,
.trend-title-row h2,
.section-title h2 {
  font-weight: 760 !important;
}

.home-advice-card > p {
  margin-top: var(--fit-space-3) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

.home-sync-note {
  margin-top: auto !important;
  padding: 14px !important;
  border-radius: var(--fit-radius-inner) !important;
  background: rgba(105,115,134,.055) !important;
}

.home-sync-note strong {
  font-size: 13px !important;
  font-weight: 720 !important;
}

.home-sync-note span,
.home-sync-note small {
  color: var(--fit-muted) !important;
  font-weight: 600 !important;
}

.home-sync-note small {
  margin-top: 6px !important;
}

/* Lists: align names, metadata and right-side volume as a stable three-column row. */
.home-list {
  gap: var(--fit-space-2) !important;
}

.home-list-item {
  grid-template-columns: 46px minmax(0, 1fr) minmax(76px, auto) !important;
  gap: var(--fit-space-2) !important;
  min-height: 70px !important;
  padding: 12px !important;
  border-radius: var(--fit-radius-inner) !important;
}

.home-list-item .mini-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}

.home-list-item strong {
  font-size: 15.5px !important;
  font-weight: 760 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.home-list-item small {
  margin-top: 4px !important;
  font-size: 12.5px !important;
}

.home-list-item .muted-tag {
  justify-self: end !important;
  text-align: right !important;
  max-width: 142px !important;
}

/* Weekly and More: slightly clearer as dashboard modules / entry list. */
.home-section-card {
  padding: 24px !important;
  margin-bottom: var(--fit-space-3) !important;
}

.home-advice-list {
  gap: var(--fit-space-2) !important;
}

.home-advice-list p {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  padding: 13px 14px !important;
  border-radius: var(--fit-radius-inner) !important;
}

.home-entry-links {
  gap: var(--fit-space-2) !important;
}

.home-entry-links a {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: var(--fit-space-2) !important;
  align-items: center !important;
  padding: 14px 42px 14px 14px !important;
  border-radius: var(--fit-radius-inner) !important;
}

.home-entry-links a::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fit-muted-2);
  font-size: 22px;
  line-height: 1;
}

.home-entry-links strong {
  font-size: 15.5px !important;
  font-weight: 760 !important;
}

.home-entry-links span {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
}

/* Analysis/chart micro-fixes: tooltips have room and date labels do not feel clipped. */
.analysis-trend-card,
.analysis-trend-grid,
.analysis-trend-panel,
.analysis-bar-chart,
.analysis-bar-chart .bar-item,
.bar-chart,
.bar-chart .bar-item {
  overflow: visible !important;
}

.analysis-bar-chart .bar-tooltip,
.bar-chart .bar-tooltip {
  min-width: 230px !important;
  max-width: min(340px, 86vw) !important;
  padding: 10px 12px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

.analysis-bar-chart .bar-item small,
.bar-chart .bar-item small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Training page: keep frequent actions aligned, especially on mobile. */
.segmented-actions,
.train-top-actions,
.timer-actions,
.quick-bump-row {
  gap: var(--fit-space-1) !important;
}

.segmented-actions .neutral-btn,
.train-row-actions .neutral-btn,
.train-row-actions .primary-btn {
  min-height: 40px !important;
}

.set-row input {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* Focus states: visible but calm. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(20,184,166,.22) !important;
  outline-offset: 2px !important;
}

@media (max-width: 760px) {
  .app-header-system,
  .app-header,
  .container {
    width: min(100% - 20px, 1200px) !important;
  }

  .home-date-switcher {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 56px 40px 52px !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 5px !important;
  }

  .home-date-switcher label {
    min-width: 0 !important;
    padding: 0 8px !important;
  }

  .home-date-switcher label span {
    display: none !important;
  }

  .home-date-switcher input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .home-date-switcher .neutral-btn {
    min-width: 0 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 13px !important;
  }

  .home-primary-card,
  .home-advice-card,
  .home-section-card {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .home-primary-card h1 {
    margin-top: 18px !important;
    font-size: 36px !important;
  }

  .home-lead,
  .home-advice-card > p {
    font-size: 15px !important;
  }

  .home-kpi-row,
  .home-kpi-row.three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--fit-space-1) !important;
  }

  .home-kpi-row > div {
    min-height: 86px !important;
    padding: 12px !important;
  }

  .home-kpi-row strong {
    font-size: 27px !important;
  }

  .home-list-item {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    padding: 12px !important;
  }

  .home-list-item .mini-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .home-list-item .muted-tag {
    grid-column: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    text-align: left !important;
  }

  .home-advice-list p {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .home-entry-links a {
    padding: 13px 38px 13px 13px !important;
  }

  .segmented-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .segmented-actions .neutral-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
  }

  .analysis-bar-chart .bar-tooltip,
  .bar-chart .bar-tooltip {
    min-width: 176px !important;
    max-width: min(260px, 82vw) !important;
    font-size: 11px !important;
  }
}

@media (max-width: 420px) {
  .home-date-switcher {
    grid-template-columns: 36px minmax(0, 1fr) 50px 36px 46px !important;
  }

  .home-date-switcher .neutral-btn {
    font-size: 12px !important;
  }

  .home-kpi-row strong {
    font-size: 24px !important;
  }

  .segmented-actions {
    grid-template-columns: 1fr !important;
  }
}