/* Worxphere AI Tracker — Personal Dashboard Styles */

/* Heatmap grid */
.heatmap-grid { display: grid; gap: 2px; }
.heatmap-cell { border-radius: 3px; cursor: default; }

/* Share stats banner (future use) */
#share-stats-banner { display: none; }

/* Peer comparison */
.peer-card { background: white; border: 1px solid var(--gray-200); border-radius: 14px; padding: 20px; margin-bottom: 24px; }
.peer-metric { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.peer-metric:last-child { border-bottom: none; }
.peer-bar { height: 8px; border-radius: 4px; background: var(--gray-100); position: relative; margin-top: 6px; }
.peer-bar-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.peer-bar-me { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--purple); border-radius: 2px; }

/* Summary row */
.summary-row { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.summary-item { flex: 1; min-width: 100px; background: white; border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 16px; text-align: center; }
.summary-item .s-label { font-size: 11px; color: var(--gray-500); margin-bottom: 4px; }
.summary-item .s-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-item .s-unit { font-size: 12px; color: var(--gray-400); }

/* Limit history */
.limit-history { font-size: 13px; color: var(--gray-500); padding: 12px 16px; background: var(--gray-50); border-radius: 10px; border: 1px solid var(--gray-200); margin-top: 16px; }

/* Spin animation */
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive overrides for personal page */
@media (max-width: 640px) {
  .summary-row { gap: 8px; }
  .summary-item { padding: 10px 12px; }
  .summary-item .s-value { font-size: 16px; }
  .peer-card { padding: 14px; }
}