/* ==========================================================================
   OgbonMath — Progress Dashboard
   --------------------------------------------------------------------------
   Restyles showProgress() — skill mastery bars, activity heatmap, summary
   stats. The heatmap SVG uses rgba(200, 255, 0, ...) for active cells; we
   re-map these to terracotta shades via overlay, keeping the "density"
   gradient but matching the warm palette.

   Scope: body[data-view="progress"].
   ========================================================================== */

body[data-view="progress"] #ct {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-10);
  font-family: var(--font-sans);
}

body[data-view="progress"] #ct > .view-container,
body[data-view="progress"] #ct > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

body[data-view="progress"] #ct h2 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-3xl) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
  line-height: var(--lh-tight) !important;
  color: var(--tx) !important;
  margin-bottom: var(--sp-1) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

body[data-view="progress"] #ct h3 {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--tx2) !important;
  margin: var(--sp-5) 0 var(--sp-2) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   Activity heatmap — wrap in a warm card
   ==========================================================================
   The SVG itself uses hardcoded fills in the JS. We can't change the fills
   without editing app.js, but we can wrap the overflow-x container in a
   paper card and apply a mix-blend filter to tint the lime toward warm
   terracotta.
*/
body[data-view="progress"] #ct div[style*="overflow-x:auto"] {
  padding: var(--sp-4) var(--sp-5) !important;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--sp-2) !important;
}

/* Re-tint the lime heatmap cells to terracotta shades via filter.
   The SVG fills use rgba(200,255,0,X) which a hue-rotate can shift. */
body[data-view="progress"] #ct div[style*="overflow-x:auto"] svg {
  filter: hue-rotate(-80deg) saturate(1.1);
}

/* Keep empty cells neutral (bg3) — hue-rotate doesn't affect them since
   they use var(--bg3), but we also keep their appearance consistent. */

/* ==========================================================================
   Skill mastery bars
   ==========================================================================
   app.js renders:
     <div style="display:grid;gap:8px">
       <div style="display:flex;align-items:center;gap:8px">
         <span style="min-width:120px;...">skill name</span>
         <div style="flex:1;height:8px;background:var(--bg3);...">
           <div style="width:X%;height:100%;background:...;..."></div>
         </div>
         <span style="min-width:35px;...">XX%</span>
       </div>
       ...
     </div>
*/
body[data-view="progress"] #ct div[style*="display:grid;gap:8px"],
body[data-view="progress"] #ct div[style*="display:grid; gap:8px"] {
  gap: var(--sp-2) !important;
  padding: var(--sp-4) !important;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* Each skill row */
body[data-view="progress"] #ct div[style*="display:grid;gap:8px"] > div,
body[data-view="progress"] #ct div[style*="display:grid; gap:8px"] > div {
  padding: 6px 10px !important;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}

body[data-view="progress"] #ct div[style*="display:grid;gap:8px"] > div:hover {
  background: var(--hover-bg) !important;
}

/* Skill name label (first span inside each row) */
body[data-view="progress"] #ct div[style*="display:grid;gap:8px"] > div > span:first-child {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--tx1) !important;
  letter-spacing: 0 !important;
}

/* Progress bar track */
body[data-view="progress"] #ct div[style*="display:grid;gap:8px"] > div > div[style*="flex:1"] {
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--bdr);
  background: var(--bg3) !important;
  overflow: hidden;
}

body[data-view="progress"] #ct div[style*="display:grid;gap:8px"] > div > div[style*="flex:1"] > div {
  border-radius: var(--radius-full) !important;
  transition: width var(--dur-slow) var(--ease-out) !important;
}

/* Percent label */
body[data-view="progress"] #ct div[style*="display:grid;gap:8px"] > div > span:last-child {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--tx2) !important;
}

/* ==========================================================================
   Summary stats card
   ==========================================================================
*/
body[data-view="progress"] #ct h3[style*="margin-bottom:8px"] + div,
body[data-view="progress"] #ct h3 + .summary-stats {
  /* Future: if the view gets restructured into cards, style here */
}

/* The renderLevelCard output (generic wrapper) — kept as-is since it
   already uses themed vars. Just ensure container spacing. */
body[data-view="progress"] #ct .lvl-card,
body[data-view="progress"] #ct .level-card {
  padding: var(--sp-5) !important;
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   Empty state fallback (if no skills practiced yet)
   ==========================================================================
*/
body[data-view="progress"] #ct > .view-container > p[style*="color:var(--tx3)"],
body[data-view="progress"] #ct > div p[style*="font-family:var(--mono)"] {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-base) !important;
  color: var(--tx2) !important;
  padding: var(--sp-8) var(--sp-5) !important;
  text-align: center;
  background: var(--bg2);
  border: 1px dashed var(--bdr);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Mobile
   ==========================================================================
*/
@media (max-width: 560px) {
  body[data-view="progress"] #ct {
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
  }
  body[data-view="progress"] #ct h2 {
    font-size: var(--fs-2xl) !important;
  }
  body[data-view="progress"] #ct div[style*="display:grid;gap:8px"] > div > span:first-child {
    min-width: 90px !important;
    font-size: var(--fs-xs) !important;
  }
}