/* ═══ DASHBOARD POLISH LAYER (dash-polish.css) — additive only ═══
   Light-theme refinements for the personal dashboard. Uses theme vars
   where they exist; dark theme intentionally left untouched except nav. */

/* ── 1. Nav: stop mid-word truncation, tighten rhythm ── */
.nav-links { gap: 1px; }
.nav-link {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  padding: 8px 11px !important;
  font-size: 12.5px !important;
  letter-spacing: .01em;
}
.nav-logo { letter-spacing: .14em; }

/* ── 2. Cards: depth, hover lift, consistent radius ── */
.td-card {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05) !important;
}
.td-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 34px rgba(16,24,40,.09) !important;
}
.td-card { transition: box-shadow .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1); }

/* ── 3. Metric hierarchy: numbers pop, labels recede ── */
.td-weekly-value { font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: -.02em; }
.td-weekly-label { font-weight: 700; }
.td-today-value  { font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -.02em; }
.td-today-label  { font-size: .74rem; }
.td-meta-value   { font-weight: 800; }

/* delta pills (week compare + steps) */
.td-weekly-delta, .td-delta {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; line-height: 1.5;
}
.td-weekly-delta.up, .td-delta.up   { background: rgba(52,199,89,.12);  color: #1d9d50; }
.td-weekly-delta.down, .td-delta.down { background: rgba(255,59,48,.10); color: #d70015; }
.td-weekly-delta.flat, .td-weekly-delta.neutral { background: rgba(120,120,128,.10); color: #6b7280; }
.td-weekly-prev { font-size: .74rem; color: var(--text2, #6b7280); }

/* ── 4. Progress bars: gradient + sheen sweep ── */
.td-progress-fill { position: relative; overflow: hidden; }
.td-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: dpSheen 3.2s ease-in-out 1.2s infinite;
}
@keyframes dpSheen { 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }
.td-today-bar { border-radius: 6px; }
.td-today-bar-fill { border-radius: 6px; transition: width .8s cubic-bezier(.2,.7,.3,1); }

/* ── 5. Heatmap cells: rounder + hover lift ── */
.td-heatmap-grid div { border-radius: 4px; transition: transform .15s ease, box-shadow .15s ease; }
.td-heatmap-grid div:hover { transform: scale(1.35); box-shadow: 0 2px 8px rgba(0,0,0,.18); position: relative; z-index: 2; }

/* ── 6. Page background: soft vertical gradient (light theme) ── */
html[data-theme="light"] body,
html.light-mode body {
  background: linear-gradient(180deg, #f7f8fc 0%, #eef1f8 100%) !important;
  background-attachment: fixed !important;
}

/* ── 7. Card entrance (staggered) — JS adds .dp-in ── */
@media (prefers-reduced-motion: no-preference) {
  .dp-anim { opacity: 0; transform: translateY(14px); }
  .dp-anim.dp-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
}

/* ── 8. Today's Protocol card: calmer gold accent ── */
.td-card[style*="gradient"] { border-radius: 18px; }