/* Statrow
 * The row of glass score circles inside the sticky header.
 *
 * Lifted from the prototype's single stylesheet, unchanged apart from
 * indentation. Every colour resolves through a token in tokens.css.
 */

/* ---------- stat row (glass circles) ---------- */
/* lives inside the sticky header so the circles stay visible at all times */
.statrow-outer { max-width: 900px; margin: 10px auto 0; padding: 0 18px; }
.statrow-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px; margin: 0 -18px;
  scrollbar-width: none;
}
.statrow-wrap::-webkit-scrollbar { display: none; }
.statrow { display: flex; gap: 16px; padding: 2px 18px 6px; width: max-content; margin: 0 auto; }
.stat-item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 86px; }
.statcircle {
  flex: none; width: 86px; height: 86px; border-radius: 50%;
  background: var(--glass-bg); border: 1.5px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; padding: 0; font-family: inherit;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), outline-color .2s;
}
.statcircle:active { transform: scale(0.94); }
.statcircle:hover { transform: translateY(-1px); }
.statcircle[data-current="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-icon { display: flex; color: var(--accent-ink); }
.stat-icon svg { width: 27px; height: 27px; }
.stat-num { font-family: 'Karla', system-ui, sans-serif; font-size: 22px; font-weight: 700; line-height: 1; color: var(--ink); }
.stat-num[data-empty="true"] { color: var(--ink-faint); font-size: 16px; font-family: 'Karla', sans-serif; font-weight: 500; }
.stat-label {
  font-size: 14px; font-weight: 700; color: var(--ink-soft); text-align: center;
  max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the first circle: this week's aggregate score, styled to stand apart from the 7 F circles */
.statcircle.total-circle {
  width: 92px; height: 92px;
  background: linear-gradient(155deg, var(--accent) 0%, var(--accent-ink) 130%);
  border-color: transparent; box-shadow: 0 6px 18px -6px var(--accent-glow), var(--glass-shadow);
}
.statcircle.total-circle .stat-num { color: #fff; font-size: 24px; }
.statcircle.total-circle .stat-num[data-empty="true"] { color: rgba(255,255,255,.75); }
.total-item .stat-label { color: var(--accent-ink); font-weight: 800; }