/* =============================================================================
   FitMind — Training Insights v2 styles
   Premium Garmin/Intervals-style analytics screen. All classes prefixed "in2-".
   Tokens only — no color literals. Loaded lazily by js/insights.js.
   ============================================================================= */

.in2-root{
  display:flex;flex-direction:column;gap:var(--space-md);
  padding-bottom:var(--space-lg);
  -webkit-user-select:none;user-select:none;
}

/* ── Numbers: mono + tabular everywhere ───────────────────────────────────── */
.in2-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-style:normal;
}

/* ── Header: period nav + segmented control ───────────────────────────────── */
.in2-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);flex-wrap:wrap;
}
.in2-nav{
  display:flex;align-items:center;gap:2px;
  min-width:0;flex:1;
}
.in2-nav-btn{
  flex:0 0 auto;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  background:var(--fill-1);border:1px solid var(--border);
  color:var(--text-secondary);
  transition:background 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.in2-nav-btn:active{background:var(--fill-3);color:var(--text);transform:scale(0.94)}
.in2-nav-btn:disabled{opacity:0.35;pointer-events:none}
.in2-nav-btn svg{width:16px;height:16px}
.in2-period{
  flex:1;min-width:0;text-align:center;
  font-family:var(--font-display);
  font-size:0.95rem;font-weight:700;letter-spacing:-0.01em;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 var(--space-xs);
}
.in2-seg{
  flex:0 0 auto;
  display:flex;align-items:stretch;gap:2px;
  padding:3px;border-radius:var(--radius-full);
  background:var(--fill-1);border:1px solid var(--border);
}
.in2-seg-btn{
  min-height:38px;min-width:64px;
  padding:0 var(--space-md);
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  font-family:var(--font-display);
  font-size:0.78rem;font-weight:600;letter-spacing:0.02em;
  color:var(--text-secondary);
  transition:background 0.2s var(--ease), color 0.2s var(--ease);
}
.in2-seg-btn.is-active{
  background:var(--surface-3);
  color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
}

/* ── Hero stat strip ──────────────────────────────────────────────────────── */
.in2-hero{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--space-sm);
}
@media (min-width:520px){
  .in2-hero{grid-template-columns:repeat(4,1fr)}
}
.in2-hero-card{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  min-width:0;
}
.in2-hero-label{
  font-size:0.62rem;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-muted);
}
.in2-hero-value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:1.35rem;font-weight:700;
  color:var(--text);letter-spacing:-0.02em;
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.in2-hero-judge{
  display:flex;align-items:baseline;gap:6px;
  min-height:1em;flex-wrap:wrap;
}
.in2-hero-extra{
  font-size:0.68rem;color:var(--text-muted);
  white-space:nowrap;
}

/* Delta pills (shared with records) */
.in2-delta{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:0.66rem;font-weight:700;
  padding:1px 7px;border-radius:var(--radius-full);
  white-space:nowrap;
}
.in2-delta-up{color:var(--lime);background:var(--lime-dim)}
.in2-delta-down{color:var(--red);background:var(--red-dim)}
.in2-delta-flat{color:var(--text-secondary);background:var(--fill-2)}

/* ── Section card scaffold ────────────────────────────────────────────────── */
.in2-section{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  display:flex;flex-direction:column;gap:var(--space-md);
  overflow:hidden;
}
.in2-sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-sm);
}
.in2-sec-title{
  font-family:var(--font-display);
  font-size:0.66rem;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--text-secondary);
}
.in2-sec-note{
  font-size:0.64rem;color:var(--text-muted);
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.in2-empty{
  font-size:0.82rem;line-height:1.55;
  color:var(--text-muted);
}
.in2-sentence{
  font-size:0.82rem;line-height:1.55;
  color:var(--text-secondary);
}
.in2-sentence-warn{color:var(--amber)}

/* Chips (streaks / missed counts) */
.in2-chip-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.in2-chip{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:6px 12px;border-radius:var(--radius-full);
  background:var(--fill-1);border:1px solid var(--border);
  font-size:0.72rem;color:var(--text-secondary);
  white-space:nowrap;
}
.in2-chip .in2-num{color:var(--text);font-size:0.8rem}
.in2-chip-warn{background:var(--red-dim);border-color:var(--red-dim);color:var(--text-secondary)}
.in2-chip-warn .in2-num{color:var(--red)}

/* ── Consistency heat grid (SVG) ──────────────────────────────────────────── */
.in2-heatgrid{
  width:100%;max-width:340px;height:auto;
  margin:0 auto;display:block;
}
.in2-hm-axis{
  fill:var(--text-muted);
  font-family:var(--font-mono);
  font-size:10px;font-weight:600;
}
.in2-hm-cell{stroke-width:1.5}
/* State classes double as SVG rect fills and HTML legend-swatch backgrounds */
.in2-hm-completed{fill:var(--lime-vivid);background:var(--lime-vivid)}
.in2-hm-partial{
  fill:var(--lime-dim);background:var(--lime-dim);
  stroke:var(--lime-vivid);
}
.in2-hm-missed,
.in2-hm-skipped{fill:var(--red-dim);background:var(--red-dim)}
.in2-hm-rest{fill:var(--fill-2);background:var(--fill-2)}
.in2-hm-today{fill:var(--fill-faint);stroke:var(--lime-vivid)}
.in2-hm-future{fill:transparent;stroke:var(--border)}
.in2-hm-mark{stroke:var(--red);stroke-width:2;stroke-linecap:round}
.in2-hm-dot{fill:var(--red)}
.in2-hm-legend{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-sm) var(--space-md);
}
.in2-hm-key{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.66rem;color:var(--text-muted);
}
.in2-hm-swatch{
  width:11px;height:11px;border-radius:3px;
  display:inline-block;flex:0 0 auto;
  border:1px solid var(--border);
}
.in2-hm-swatch.in2-hm-partial{border-color:var(--lime-vivid)}

/* ── Training load mix ────────────────────────────────────────────────────── */
.in2-mix{display:flex;flex-direction:column;gap:7px}
.in2-mix-row{
  display:grid;grid-template-columns:44px 1fr 48px;
  align-items:center;gap:var(--space-sm);
}
.in2-mix-label{
  font-size:0.68rem;font-weight:600;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.in2-mix-total{
  font-size:0.7rem;color:var(--text-secondary);
  text-align:right;
}

/* Shared bar canvas: 100×12 SVG stretched into a rounded clip */
.in2-bar-clip{
  height:12px;min-width:0;
  border-radius:var(--radius-full);
  background:var(--fill-1);
  overflow:hidden;
}
.in2-bar-clip svg{width:100%;height:100%;display:block}
.in2-split-clip{height:14px}

/* Legends */
.in2-legend{
  display:flex;flex-wrap:wrap;
  gap:var(--space-xs) var(--space-md);
}
.in2-legend-item{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.7rem;color:var(--text-secondary);
  white-space:nowrap;
}
.in2-legend-item .in2-num{color:var(--text);font-size:0.72rem}
.in2-legend-swatch{
  width:9px;height:9px;border-radius:3px;
  display:inline-block;flex:0 0 auto;
}
.in2-split-legend{justify-content:space-between}

/* ── Muscle focus ─────────────────────────────────────────────────────────── */
.in2-muscle-bars{display:flex;flex-direction:column;gap:7px}
.in2-muscle-row{
  display:grid;grid-template-columns:96px 1fr 34px;
  align-items:center;gap:var(--space-sm);
}
.in2-muscle-name{
  font-size:0.74rem;font-weight:500;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.in2-muscle-sets{
  font-size:0.72rem;color:var(--text);
  text-align:right;
}

/* Callouts (imbalances / praise) */
.in2-callouts{display:flex;flex-direction:column;gap:var(--space-sm)}
.in2-callout{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-md);
  font-size:0.76rem;line-height:1.5;
}
.in2-callout-warn{
  background:var(--amber-dim);
  color:var(--text-secondary);
}
.in2-callout-warn .in2-callout-icon{color:var(--amber)}
.in2-callout-good{
  background:var(--green-dim);
  color:var(--text-secondary);
}
.in2-callout-good .in2-callout-icon{color:var(--lime)}
.in2-callout-icon{flex:0 0 auto;width:17px;height:17px;margin-top:1px}
.in2-callout-icon svg{width:100%;height:100%}

/* ── Missed-training impact ───────────────────────────────────────────────── */
.in2-miss-list{
  display:flex;flex-direction:column;
  border-top:1px solid var(--border);
}
.in2-miss-row{
  display:flex;align-items:baseline;gap:var(--space-sm);
  padding:9px 0;
  border-bottom:1px solid var(--border);
  min-height:36px;
}
.in2-miss-row:last-child{border-bottom:none}
.in2-miss-date{
  flex:0 0 auto;width:104px;
  font-size:0.68rem;color:var(--text-muted);
}
.in2-miss-name{
  flex:1;min-width:0;
  font-size:0.78rem;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.in2-miss-reason{
  flex:0 0 auto;
  font-size:0.66rem;font-weight:600;
  color:var(--red);
  padding:2px 8px;border-radius:var(--radius-full);
  background:var(--red-dim);
  white-space:nowrap;
}

/* ── Cross-training findings ──────────────────────────────────────────────── */
.in2-findings{display:flex;flex-direction:column;gap:var(--space-sm)}
.in2-finding{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  background:var(--fill-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  min-height:52px;
}
.in2-finding-icon{
  flex:0 0 auto;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  background:var(--fill-2);
}
.in2-finding-icon svg{width:15px;height:15px}
.in2-finding-good{color:var(--lime);background:var(--lime-dim)}
.in2-finding-warn{color:var(--red);background:var(--red-dim)}
.in2-finding-flat{color:var(--text-muted)}
.in2-finding-text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.in2-finding-main{
  font-size:0.78rem;font-weight:600;color:var(--text);
  line-height:1.4;
}
.in2-finding-sub{
  font-size:0.68rem;color:var(--text-muted);
  line-height:1.4;
}

/* ── Records & progression ────────────────────────────────────────────────── */
.in2-pr-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.in2-pr-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;min-height:44px;
  background:var(--lime-glow);
  border:1px solid var(--lime-dim);
  border-radius:var(--radius-md);
}
.in2-pr-badge{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:0.6rem;font-weight:800;letter-spacing:1px;
  color:var(--bg);
  background:var(--lime-vivid);
  padding:3px 7px;border-radius:var(--radius-sm);
}
.in2-pr-name{
  flex:1;min-width:0;
  font-size:0.8rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.in2-pr-value{flex:0 0 auto;font-size:0.8rem;color:var(--lime)}
.in2-pr-prev{flex:0 0 auto;font-size:0.66rem;font-weight:500;color:var(--text-muted)}

.in2-lift-list{
  display:flex;flex-direction:column;
}
.in2-lift-row{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:9px 0;min-height:44px;
  border-bottom:1px solid var(--border);
}
.in2-lift-row:last-child{border-bottom:none}
.in2-lift-name{
  flex:1;min-width:0;
  font-size:0.78rem;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.in2-lift-top{
  flex:0 0 auto;font-size:0.76rem;color:var(--text-secondary);
  text-align:right;min-width:52px;
}
.in2-spark{flex:0 0 auto;width:64px;height:22px}

/* ── Coach observations ───────────────────────────────────────────────────── */
.in2-obs-list{display:flex;flex-direction:column;gap:var(--space-md)}
.in2-obs{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.8rem;line-height:1.55;
  color:var(--text-secondary);
}
.in2-obs-dot{
  flex:0 0 auto;width:7px;height:7px;
  border-radius:var(--radius-full);
  margin-top:7px;
  background:var(--ink-3);
}
.in2-obs-good .in2-obs-dot{background:var(--lime-vivid);box-shadow:0 0 8px var(--lime-glow)}
.in2-obs-warn .in2-obs-dot{background:var(--amber)}
.in2-obs-flat .in2-obs-dot{background:var(--ink-3)}

/* ── Motion ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .in2-section,.in2-hero-card{
    animation:in2Rise 0.4s var(--ease) both;
  }
  .in2-hero-card:nth-child(2){animation-delay:0.03s}
  .in2-hero-card:nth-child(3){animation-delay:0.06s}
  .in2-hero-card:nth-child(4){animation-delay:0.09s}
  @keyframes in2Rise{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
}
@media (prefers-reduced-motion:reduce){
  .in2-root *,.in2-root *::before,.in2-root *::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
}