/* charts.css — Canvas and chart wrapper sizing */

/* Standard chart wrapper */
.ch-w{height:300px;position:relative}
.ch-w canvas{width:100%!important;height:100%!important}
.ch-w-lg{height:400px;position:relative}
.ch-w-lg canvas{width:100%!important;height:100%!important}
.ch-w-sm{height:200px;position:relative}
.ch-w-sm canvas{width:100%!important;height:100%!important}

/* Calendar heatmap canvas */
#calCanvas{
  width:100%;
  display:block;
  cursor:crosshair;
  border-radius:8px;
}
.cal-wrap{overflow-x:auto;padding-bottom:8px}
.cal-legend{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.72rem;color:var(--text-ghost);font-family:'JetBrains Mono',monospace}
.cal-legend-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}

/* Clock canvas */
#clockCanvas,#dowCanvas{display:block;margin:0 auto}

/* Treemap canvas */
#treemapCanvas{
  width:100%;display:block;cursor:pointer;
  border-radius:8px;
}

/* Bubble/scatter responsive sizing */
.ch-bubble{height:420px;position:relative}
.ch-bubble canvas{width:100%!important;height:100%!important}

/* Chart legend custom */
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.76rem;font-family:'JetBrains Mono',monospace;color:var(--text-dim)}
.chart-legend span{display:flex;align-items:center;gap:5px}
.chart-legend i{width:12px;height:12px;border-radius:3px;flex-shrink:0}

/* Loading placeholder */
.chart-loading{
  display:flex;align-items:center;justify-content:center;
  height:100%;color:var(--text-ghost);font-family:'JetBrains Mono',monospace;
  font-size:.8rem;letter-spacing:.1em;
}
.chart-loading::after{content:'...';animation:textGlowGreen 1.5s ease infinite}

/* Canvas tooltip shared */
.canvas-tooltip{
  position:fixed;z-index:400;pointer-events:none;
  background:rgba(8,8,16,.97);border:1px solid var(--glass-border);
  border-radius:10px;padding:8px 12px;
  font-family:'JetBrains Mono',monospace;font-size:.76rem;
  color:var(--text);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .15s;
  max-width:220px;line-height:1.5;
}
.canvas-tooltip.show{opacity:1}

/* Section-specific colors */
#sec-cal .s-title .dot{color:var(--green)}
#sec-clock .s-title .dot{color:var(--cyan)}
#sec-treemap .s-title .dot{color:var(--gold)}
#sec-skip .s-title .dot{color:var(--orange)}
#sec-discover .s-title .dot{color:var(--pink)}
#sec-platform .s-title .dot{color:var(--purple)}