/* v3.7.1 layout and content polish: less empty space, cleaner hierarchy, mobile-first forms */
:root {
  --ft-card-pad: 22px;
  --ft-row-gap: 14px;
  --ft-soft-border: rgba(23, 59, 45, .12);
  --ft-quiet-bg: rgba(255,255,255,.74);
  --ft-quiet-bg-2: rgba(244,249,246,.9);
}

/* Header icon: replace the old hamburger-like mark with a training readiness mark. */
.header-copy::before {
  border-radius: 18px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='25' fill='none' stroke='white' stroke-width='6' opacity='.96'/%3E%3Cpath d='M25 53h12l7-18 10 30 7-22h12' fill='none' stroke='white' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% 76% no-repeat,
    linear-gradient(135deg, #19a984, #087658) !important;
  box-shadow: 0 14px 28px rgba(8,118,88,.26) !important;
}
.header-copy::after { display: none !important; }
.header-copy .eyebrow { color: #087658 !important; }
.header-copy .sub { color: rgba(19,38,31,.62) !important; }

/* Green is reserved for the primary action. Secondary controls are quiet and neutral. */
.ghost-btn,
.neutral-btn,
.home-secondary-link,
.home-text-link,
.history-switcher .ghost-btn,
.train-top-actions .neutral-btn,
.timer-actions .neutral-btn,
.segmented-actions .neutral-btn,
.quick-bump-row .neutral-btn {
  color: #2b463e !important;
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(23,59,45,.12) !important;
  box-shadow: 0 6px 14px rgba(19,38,31,.035) !important;
}
.primary-btn,
.home-primary-cta,
.train-finish-btn {
  background: linear-gradient(135deg, #14906e, #087658) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 24px rgba(20,144,110,.22) !important;
}

/* Homepage copy and structure */
.home-datebar { margin-bottom: 12px !important; }
.home-hero-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.home-primary-card,
.home-advice-card,
.home-section-card,
.train-hero-card {
  box-shadow: 0 14px 34px rgba(22,60,46,.07) !important;
  border-color: var(--ft-soft-border) !important;
}
.home-primary-card,
.home-advice-card { min-height: 300px !important; }
.home-primary-card { padding: 28px !important; }
.home-advice-card { padding: 24px !important; display: flex !important; flex-direction: column !important; }
.home-primary-card h1 { margin-top: 18px !important; font-size: clamp(34px, 4.6vw, 54px) !important; letter-spacing: -.055em !important; }
.home-lead { max-width: 620px !important; font-size: 16px !important; line-height: 1.65 !important; }
.home-kpi-row { margin-top: 22px !important; gap: 9px !important; }
.home-kpi-row > div { padding: 14px !important; min-height: 92px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.home-kpi-row strong { font-size: clamp(24px, 3.2vw, 34px) !important; }
.home-main-action { margin-top: 22px !important; }
.home-primary-cta { min-height: 52px !important; }
.home-advice-card h2 { font-size: 24px !important; }
.home-advice-card > p { margin-top: 12px !important; font-size: 16px !important; line-height: 1.65 !important; }
.home-sync-note {
  margin-top: auto !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: var(--ft-quiet-bg-2) !important;
}
.home-section-card { padding: 22px !important; margin-bottom: 14px !important; }
.home-section-title { margin-bottom: 14px !important; align-items: center !important; }
.home-section-title h2 { font-size: 24px !important; }
.home-section-title p { font-size: 14px !important; color: rgba(19,38,31,.64) !important; }
.home-list { gap: 8px !important; }
.home-list-item { min-height: 58px !important; padding: 10px 12px !important; border-radius: 16px !important; }
.home-week-grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr) !important; gap: 14px !important; align-items: stretch !important; }
.home-entry-card { display: flex !important; flex-direction: column !important; }
.home-entry-links { margin-top: auto !important; }
.home-entry-links a { min-height: 68px !important; }
.home-advice-list p { min-height: 46px !important; }

/* Analysis: remove the large blank gap between quality and joint analysis. */
.professional-analysis-grid {
  grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
}
.training-quality-card,
.analysis-joint-card {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.training-quality-card .quality-card-list {
  display: grid !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
.training-quality-card .quality-card-list > div {
  min-height: 76px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.analysis-joint-card .joint-health-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.analysis-joint-card .joint-health-grid > div {
  min-height: 88px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.analysis-joint-card .analysis-chart-note,
.analysis-joint-card .training-advice-text { margin-top: 8px !important; margin-bottom: 0 !important; }
.analysis-card { padding: 20px !important; }
.analysis-grid { align-items: start !important; }
.analysis-summary-card { padding: 22px !important; }
.analysis-summary-grid > div { min-height: 78px !important; }
.week-insight-card { grid-template-columns: 180px minmax(0,1fr) !important; align-items: center !important; }

/* Top page heads: keep date filters beside title on desktop to save vertical space. */
.page-head.history-head-compact,
.page-head.analysis-head-compact {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 24px !important;
}
.page-head.history-head-compact > div,
.page-head.analysis-head-compact > div { min-width: 0 !important; }
.page-head.history-head-compact .history-switcher,
.page-head.analysis-head-compact .history-switcher {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  width: auto !important;
}
.page-head.history-head-compact input[type="date"],
.page-head.analysis-head-compact input[type="date"] { width: 148px !important; min-width: 148px !important; }
.history-calendar-strip { margin-top: 0 !important; }
.history-day { padding: 18px !important; }
.history-head { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 14px !important; }
.history-head h2 { font-size: 24px !important; }
.history-head p { margin-top: 4px !important; }

/* Training page: stronger end button and denser action layout. */
.train-topbar { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 12px !important; align-items: center !important; }
.train-top-actions { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; justify-content: flex-end !important; }
.train-finish-btn { min-height: 44px !important; border-radius: 999px !important; padding: 0 18px !important; white-space: nowrap !important; }
.train-hero-card { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 18px !important; align-items: center !important; padding: 24px !important; }
.train-mini-stats { min-width: 360px !important; }
.train-record-card .home-section-title { align-items: center !important; }
.train-form input[type="number"],
.day-edit-form input[type="number"],
.train-form select,
.train-form input,
.day-meta-form input,
.day-edit-form input,
.day-edit-form select {
  min-height: 46px !important;
}
.train-set-panel .set-row,
.day-set-panel .set-row { min-height: 48px !important; }
.segmented-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; }
.segmented-actions .neutral-btn { min-width: 0 !important; padding: 0 10px !important; }

/* Day detail: note is a single shared note with health site. */
.day-summary-card { min-height: 260px !important; }
.day-summary-card h1 { font-size: clamp(28px, 4vw, 42px) !important; }
.day-meta-form { align-items: end !important; }
.day-meta-card .home-section-title { margin-bottom: 12px !important; }
.day-record-item { grid-template-columns: 64px minmax(0,1fr) auto !important; }
.day-record-item .record-volume { align-self: start !important; }

/* General two-column equalization. */
.template-admin-grid,
.plan-admin-grid,
.analysis-grid,
.home-week-grid,
.home-hero-grid { align-items: stretch !important; }
.template-admin-grid > *,
.plan-admin-grid > *,
.analysis-grid > *,
.home-week-grid > *,
.home-hero-grid > * { min-width: 0 !important; }
.card:empty,
.home-section-card:empty { display: none !important; }

/* Mobile: compact header, stable CTA, larger inputs, no squeezed button text. */
@media (max-width: 860px) {
  .app-header,
  .container { width: min(100% - 24px, 1180px) !important; }
  .app-header { grid-template-columns: 1fr !important; gap: 10px !important; padding-top: 12px !important; }
  .header-copy { padding-left: 46px !important; }
  .header-copy::before { width: 36px !important; height: 36px !important; top: 2px !important; border-radius: 14px !important; }
  .header-copy h1 { font-size: 28px !important; }
  .header-copy .sub { font-size: 13px !important; max-width: 100% !important; }
  .system-nav-tabs { overflow-x: auto !important; justify-content: flex-start !important; scrollbar-width: none; }
  .system-nav-tabs a { flex: 0 0 auto !important; min-width: 58px !important; }
  .home-date-switcher,
  .page-head.history-head-compact .history-switcher,
  .page-head.analysis-head-compact .history-switcher {
    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) 56px 40px 58px !important;
    gap: 7px !important;
    width: 100% !important;
  }
  .home-date-switcher label { min-width: 0 !important; padding: 0 10px !important; }
  .home-date-switcher label span { display: none !important; }
  .home-date-switcher input[type="date"] { width: 100% !important; }
  .home-hero-grid,
  .home-week-grid,
  .professional-analysis-grid,
  .analysis-grid,
  .mini-trend-grid.two-only,
  .analysis-trend-grid {
    grid-template-columns: 1fr !important;
  }
  .home-primary-card,
  .home-advice-card { min-height: 0 !important; padding: 20px !important; border-radius: 22px !important; }
  .home-primary-card h1 { font-size: 36px !important; margin-top: 12px !important; }
  .home-kpi-row,
  .home-kpi-row.three { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home-kpi-row > div { min-height: 78px !important; padding: 12px !important; }
  .home-kpi-row strong { font-size: 26px !important; }
  .home-main-action { display: none !important; }
  .home-section-card { padding: 18px !important; border-radius: 20px !important; }
  .home-section-title { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .home-section-title .neutral-btn { justify-self: start !important; }
  .home-list-item { grid-template-columns: auto minmax(0,1fr) auto !important; }
  .home-list-item small { display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .mobile-fixed-cta { bottom: 78px !important; left: 16px !important; right: 16px !important; min-height: 52px !important; }

  .train-topbar { grid-template-columns: 1fr !important; }
  .train-top-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 7px !important; }
  .train-top-actions a { padding: 0 8px !important; min-height: 42px !important; font-size: 13px !important; }
  .train-hero-card { grid-template-columns: 1fr !important; padding: 18px !important; }
  .train-mini-stats { min-width: 0 !important; width: 100% !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .train-mini-stats > div { padding: 10px !important; }
  .train-template-strip { grid-template-columns: 1fr !important; }
  .train-form,
  .quick-record-form,
  .day-edit-form,
  .day-meta-form { grid-template-columns: 1fr !important; gap: 10px !important; }
  .train-form .span-2,
  .train-form .wide,
  .day-edit-form .wide,
  .day-meta-form .span-2,
  .day-meta-form .wide { grid-column: auto !important; }
  .train-form input,
  .train-form select,
  .train-form textarea,
  .day-edit-form input,
  .day-edit-form select,
  .day-edit-form textarea,
  .day-meta-form input { min-height: 48px !important; font-size: 16px !important; }
  .set-panel-head { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .segmented-actions { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .segmented-actions .neutral-btn { font-size: 12px !important; min-height: 42px !important; white-space: normal !important; line-height: 1.15 !important; }
  .train-bump-row { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 6px !important; }
  .train-bump-row .neutral-btn { min-height: 40px !important; font-size: 12px !important; padding: 0 6px !important; }
  .set-row { grid-template-columns: 30px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 32px !important; gap: 6px !important; }
  .set-row input { min-width: 0 !important; padding-left: 8px !important; padding-right: 8px !important; }

  .page-head.history-head-compact,
  .page-head.analysis-head-compact { grid-template-columns: 1fr !important; padding: 18px !important; gap: 12px !important; }
  .page-head.history-head-compact input[type="date"],
  .page-head.analysis-head-compact input[type="date"] { width: 100% !important; min-width: 0 !important; }
  .history-calendar-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
  .history-calendar-day { min-height: 62px !important; }
  .history-head { grid-template-columns: 1fr !important; }
  .history-head .ghost-btn { justify-self: start !important; }
  .desktop-history-table { display: none !important; }
  .history-entry-cards { display: grid !important; gap: 8px !important; }
  .history-day { padding: 16px !important; }
  .history-entry-card { padding: 12px !important; border-radius: 14px !important; background: var(--ft-quiet-bg) !important; border: 1px solid var(--ft-soft-border) !important; }

  .analysis-joint-card .joint-health-grid,
  .analysis-summary-grid,
  .week-summary-grid { grid-template-columns: 1fr !important; }
  .week-insight-card { grid-template-columns: 1fr !important; }
  .analysis-stat-chips { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .bar-chart { min-height: 180px !important; height: 180px !important; }
  .day-record-item { grid-template-columns: 48px minmax(0,1fr) !important; gap: 10px !important; }
  .day-record-item .delete-form { grid-column: 1 / -1 !important; justify-self: end !important; }
  .record-volume { font-size: 18px !important; min-width: 70px !important; }
}

@media (max-width: 520px) {
  .home-kpi-row,
  .home-kpi-row.three { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home-primary-card h1 { font-size: 32px !important; }
  .home-lead,
  .home-advice-card > p { font-size: 15px !important; }
  .home-section-title h2,
  .home-advice-card h2 { font-size: 22px !important; }
  .train-steps { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 5px !important; }
  .train-steps span { font-size: 11px !important; padding: 8px 4px !important; }
  .history-calendar-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .history-calendar-day small { font-size: 11px !important; }
}