/* Stitch progress surfaces: one visual layer for real local-first data.
   Brand inks live in packages/ui/blupoli-design.css; all other tones are neutrals. */

:where(.statistics-page,.achievements-page,.streaks-page){
  width:min(1360px,calc(100% - 44px));
  margin-inline:auto;
  color:var(--text);
}

:where(.statistics-page,.achievements-page,.streaks-page) .kicker{
  color:var(--app-accent-ink);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

:where(:where(.statistics-hero,.achievements-hero,.streaks-hero)){
  padding-block:clamp(28px,4vw,52px) clamp(22px,3vw,34px);
  gap:clamp(16px,3vw,36px);
}

:where(:where(.statistics-hero,.achievements-hero,.streaks-hero) h1){
  margin:.16em 0 .25em;
  font-size:clamp(2.6rem,5.4vw,4.7rem);
  line-height:.99;
  letter-spacing:-.055em;
  text-wrap:balance;
}

:where(:where(.statistics-hero,.achievements-hero,.streaks-hero) p){
  max-width:720px;
  color:var(--text-secondary);
  font-size:clamp(.92rem,1.22vw,1.07rem);
  line-height:1.64;
}

:where(:where(.statistics-hero-actions,.stats-hero-actions) .button,
.achievements-hero>.button){
  min-height:44px;
}

:where(.statistics-local-badge,.stats-local-badge){
  border-color:var(--line-strong);
  background:var(--surface);
  color:var(--text-secondary);
}

:where(.statistics-scope,.statistics-card,.statistics-kpi,.statistics-empty,
       .achievements-overview article,.achievements-controls,.achievements-browser,
       .achievements-related,.achievements-spotlight,
       .streaks-page .stats-card,.streaks-page .stats-kpi){
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}

:where(.statistics-card-head,.stats-card-head,.achievements-browser-head) h2{
  font-size:clamp(1.22rem,1.9vw,1.62rem);
  line-height:1.2;
  letter-spacing:-.034em;
}

:where(.statistics-kpi,.achievements-overview article,.streaks-page .stats-kpi){
  position:relative;
  min-width:0;
  overflow:hidden;
  border-top:0;
  background:var(--progress-tint,var(--surface));
  padding:clamp(16px,2vw,22px);
  transition:border-color .15s ease;
}

:where(.statistics-kpi,.achievements-overview article,.streaks-page .stats-kpi):nth-child(4n + 2){
  border-top-color:var(--brand-aqua);
}
:where(.statistics-kpi,.achievements-overview article,.streaks-page .stats-kpi):nth-child(4n + 3){
  border-top-color:var(--brand-yellow);
}
:where(.statistics-kpi,.achievements-overview article,.streaks-page .stats-kpi):nth-child(4n + 4){
  border-top-color:var(--brand-coral);
}

:where(.statistics-kpi strong,.achievements-overview strong,.streaks-page .stats-kpi strong){
  font-variant-numeric:tabular-nums;
  letter-spacing:-.05em;
}

:where(.statistics-scope-tabs button,.statistics-periods button,
       .stats-achievement-scopes button,.streaks-calendar-nav button){
  min-height:44px;
  color:var(--text-secondary);
}

:where(.statistics-scope-tabs button,.statistics-periods button,
       .stats-achievement-scopes button)[aria-pressed="true"]{
  border-color:var(--brand-violet);
  background:var(--brand-violet);
  color:#fff;
  box-shadow:none;
}

:where(.statistics-scope-tabs button,.statistics-periods button,
       .stats-achievement-scopes button,.streaks-calendar-nav button,
       .streaks-day,.streaks-game-controls select,
       .achievements-select select,.achievements-search input):focus-visible{
  outline:3px solid var(--brand-aqua);
  outline-offset:3px;
}

:where(.statistics-scope,.achievements-controls) label select,
:where(.statistics-scope,.achievements-controls) label input{
  min-height:44px;
}

:where(.statistics-grid,.streaks-primary-grid,.stats-dashboard-grid){
  align-items:stretch;
}

:where(.statistics-performance-item,.streaks-month-stat,.stats-streak-stat){
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
}

.statistics-scope{
  padding:clamp(18px,2.7vw,28px);
  border-left:4px solid var(--brand-violet);
}

.statistics-scope-tabs{
  border-radius:14px;
  background:var(--surface-soft);
}

.statistics-scope-badge{
  border-color:var(--brand-violet);
  color:var(--app-accent-ink);
  font-variant-numeric:tabular-nums;
}

.statistics-kpis{
  gap:12px;
  margin-top:18px;
}

.statistics-kpi{
  min-height:138px;
  gap:16px;
}

.statistics-kpi>span,
.achievements-overview article>span,
.streaks-page .stats-kpi-label{
  color:var(--text-subtle);
  font-size:.7rem;
  line-height:1.35;
}

.statistics-kpi strong{
  font-size:clamp(1.8rem,3vw,2.6rem);
}

.statistics-performance-item{
  min-height:116px;
  padding:17px;
}

.statistics-performance-item:nth-child(4n + 1){border-left:3px solid var(--brand-violet)}
.statistics-performance-item:nth-child(4n + 2){border-left:3px solid var(--brand-aqua)}
.statistics-performance-item:nth-child(4n + 3){border-left:3px solid var(--brand-yellow)}
.statistics-performance-item:nth-child(4n + 4){border-left:3px solid var(--brand-coral)}

.statistics-activity-chart{
  height:240px;
  gap:clamp(3px,.55vw,8px);
  border-top-color:var(--line);
  background:transparent;
}

.statistics-activity-bar i{
  min-height:2px;
  background:var(--brand-violet);
  opacity:1;
}
.statistics-activity-day:nth-child(4n + 2) .statistics-activity-bar i{background:var(--brand-aqua)}
.statistics-activity-day:nth-child(4n + 3) .statistics-activity-bar i{background:var(--brand-coral)}
.statistics-activity-day:nth-child(4n + 4) .statistics-activity-bar i{background:var(--brand-yellow)}

.statistics-breakdown-row{
  border:1px solid transparent;
  min-height:64px;
}
.statistics-breakdown-row:hover{border-color:var(--line)}
.statistics-breakdown-track{
  height:10px;
  background:var(--surface-soft);
}
.statistics-breakdown-track i{background:var(--brand-violet)}
.statistics-breakdown-row:nth-child(4n + 2) .statistics-breakdown-track i{background:var(--brand-aqua)}
.statistics-breakdown-row:nth-child(4n + 3) .statistics-breakdown-track i{background:var(--brand-coral)}
.statistics-breakdown-row:nth-child(4n + 4) .statistics-breakdown-track i{background:var(--brand-yellow)}

.statistics-history-row{
  border-bottom:1px solid var(--line);
  border-radius:8px;
}
.statistics-history-row:last-child{border-bottom:0}

.statistics-empty,
.statistics-empty-inline{
  border-style:dashed;
}
.statistics-empty-icon{
  border:1px solid var(--brand-aqua);
  color:var(--app-accent-ink);
}

:where(.achievements-hero){
  align-items:end;
}

.achievements-overview{
  gap:12px;
  margin-block:10px 18px;
}
.achievements-overview article{
  min-height:132px;
  padding:20px;
}
.achievements-overview article strong{
  font-size:clamp(1.7rem,2.8vw,2.5rem);
}
.achievements-overview article small{
  line-height:1.4;
  letter-spacing:normal;
  text-transform:none;
}

.achievements-spotlight{
  padding:clamp(18px,2.6vw,26px);
  margin:0 0 18px;
  border-left:4px solid var(--brand-yellow);
}
.achievements-spotlight[hidden]{display:none}
.achievements-spotlight-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.achievements-spotlight-header h2{
  margin:4px 0 0;
  font-size:clamp(1.3rem,2.2vw,1.8rem);
  letter-spacing:-.04em;
}
.achievements-spotlight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.achievements-spotlight .stats-achievement{
  min-height:190px;
  border-top:3px solid var(--brand-yellow);
  background:var(--surface-soft);
}

.achievements-controls{
  margin-top:14px;
}
.stats-achievement-scopes button[aria-pressed="true"]{
  border-color:var(--brand-violet);
}
.achievements-browser,
.achievements-related{
  padding:clamp(18px,2.6vw,26px);
}
.achievements-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement{
  min-width:0;
  padding:clamp(15px,1.7vw,20px);
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
  overflow-wrap:anywhere;
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement.is-locked{
  opacity:1;
  border-style:dashed;
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement.is-unlocked{
  border-color:var(--line-strong);
  border-top:3px solid var(--brand-yellow);
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement.is-master{
  border-top-color:var(--brand-violet);
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement-badge{
  width:48px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  color:var(--app-accent-ink);
  font-size:1.25rem;
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement.is-unlocked .stats-achievement-badge{
  border-color:var(--brand-yellow);
  color:var(--app-accent-ink);
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement.is-locked .stats-achievement-badge{
  color:var(--text-secondary);
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement p{
  color:var(--text-secondary);
  line-height:1.5;
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement-progress{
  height:7px;
  background:var(--surface);
}
:where(.achievements-grid,.achievements-spotlight-grid) .stats-achievement-progress>span{
  background:var(--brand-violet);
}
:where(.achievements-grid,.achievements-spotlight-grid) .is-unlocked .stats-achievement-progress>span{
  background:var(--brand-yellow);
}
.achievements-game-progress-card{
  border-radius:14px;
  border-left:3px solid var(--brand-aqua);
}
.achievements-game-progress-card .stats-achievement-progress>span{
  background:var(--brand-aqua);
}

.streaks-page .stats-kpi-grid{
  gap:12px;
}
.streaks-page .stats-kpi{
  min-height:132px;
}
.streaks-page .stats-kpi-icon{
  border:1px solid var(--line);
  background:var(--surface-soft);
  color:var(--app-accent-ink);
}
.streaks-primary-grid{
  grid-template-columns:minmax(290px,.78fr) minmax(0,1.22fr);
  gap:16px;
  margin-top:18px;
}
.streaks-current-card{
  border-top:4px solid var(--brand-yellow)!important;
}
.streaks-current-icon{
  border-color:var(--brand-yellow);
  background:var(--surface-soft);
}
.streaks-current-number strong{
  color:var(--brand-violet);
  font-variant-numeric:tabular-nums;
}
html[data-theme="dark"] .streaks-current-number strong{
  color:var(--brand-yellow);
}
.streaks-current-message{color:var(--text-secondary)}
.streaks-goal-track{height:10px;background:var(--surface-soft)}
.streaks-goal-track>span{background:var(--brand-yellow)}
.streaks-current-state.is-complete{border-color:var(--brand-aqua)}
.streaks-current-state.is-complete::before{background:var(--brand-aqua)}
.streaks-calendar-card{min-width:0}
.streaks-calendar-nav button:enabled:hover{border-color:var(--brand-violet)}
.streaks-month-stat{min-height:62px}
.streaks-day{
  min-width:0;
  min-height:62px;
  border-radius:11px;
  background:var(--surface-soft);
}
.streaks-day[data-level="1"]{background:var(--brand-violet);color:#fff;border-color:var(--brand-violet)}
.streaks-day[data-level="2"]{background:var(--brand-aqua);color:var(--neutral-ink);border-color:var(--brand-aqua)}
.streaks-day[data-level="3"]{background:var(--brand-coral);color:var(--neutral-ink);border-color:var(--brand-coral)}
.streaks-day[data-level="4"]{background:var(--brand-yellow);color:var(--neutral-ink);border-color:var(--brand-yellow)}
.streaks-day[data-level]:not([data-level="0"]) .streaks-day-count{color:inherit}
.streaks-day[data-level]:not([data-level="0"]) .streaks-day-count i{background:currentColor}
.streaks-day.is-selected{
  outline:3px solid var(--brand-violet);
  outline-offset:2px;
}
.streaks-day.is-today:not(.is-selected){
  border-width:2px;
  border-color:var(--brand-violet);
}
.streaks-day-detail{border-left:3px solid var(--brand-aqua)}
.streaks-line-chart svg{max-width:100%}
.streaks-chart-area{fill:var(--brand-aqua)}
.streaks-chart-line,.streaks-chart-point{stroke:var(--brand-violet)}
.streaks-weekday-bar{background:var(--brand-violet)}
.streaks-weekday-col:nth-child(2n) .streaks-weekday-bar{background:var(--brand-aqua)}
/* The shared theme has heatmap rules too: page scope ensures the four brand inks prevail. */
.streaks-page .streaks-heatmap-day[data-level="1"]{background:var(--brand-violet)}
.streaks-page .streaks-heatmap-day[data-level="2"]{background:var(--brand-aqua)}
.streaks-page .streaks-heatmap-day[data-level="3"]{background:var(--brand-coral)}
.streaks-page .streaks-heatmap-day[data-level="4"]{background:var(--brand-yellow)}
.streaks-page .streaks-heatmap-legend i:nth-of-type(2){background:var(--brand-violet)}
.streaks-page .streaks-heatmap-legend i:nth-of-type(3){background:var(--brand-aqua)}
.streaks-page .streaks-heatmap-legend i:nth-of-type(4){background:var(--brand-coral)}
.streaks-page .streaks-heatmap-legend i:nth-of-type(5){background:var(--brand-yellow)}
.streaks-run-badge.is-current{border-color:var(--brand-aqua);color:var(--app-accent-ink)}

@media (max-width:1050px){
  .achievements-spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .achievements-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .streaks-primary-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  :where(.statistics-page,.achievements-page,.streaks-page){width:min(calc(100% - 24px),1360px)}
  :where(:where(.statistics-hero,.achievements-hero,.streaks-hero)){padding-top:25px;gap:18px}
  :where(:where(.statistics-hero,.achievements-hero,.streaks-hero) h1){font-size:clamp(2.25rem,10vw,3.2rem)}
  .statistics-hero-actions{gap:8px}
  .statistics-scope{padding:18px}
  .statistics-activity-chart{height:190px}
  .achievements-spotlight-grid,.achievements-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .achievements-spotlight-grid .stats-achievement{min-height:168px}
  .streaks-primary-grid{grid-template-columns:minmax(0,1fr)}
  .streaks-page .stats-kpi{min-height:114px}
  .streaks-calendar-nav{grid-template-columns:44px minmax(0,1fr) 44px}
}
@media (max-width:480px){
  .statistics-kpi{min-height:120px}
  .statistics-hero-actions{grid-template-columns:1fr 1fr}
  .statistics-hero-actions .button{padding-inline:8px;font-size:.76rem}
  .statistics-card{padding:16px}
  .achievements-spotlight-grid{grid-template-columns:1fr}
  .achievements-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .achievements-grid .stats-achievement{min-height:184px}
  .achievements-grid .stats-achievement strong{font-size:.79rem}
  .achievements-grid .stats-achievement p{font-size:.67rem}
  .achievements-overview article{min-height:116px;padding:13px}
  .streaks-day{min-height:44px;padding:5px}
  .streaks-day-number{font-size:.72rem}
  .streaks-month-stat{min-height:55px;padding:9px}
}
@media (max-width:360px){
  .achievements-grid{grid-template-columns:1fr}
  .statistics-performance{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  :where(.statistics-page,.achievements-page,.streaks-page) *,
  :where(.statistics-page,.achievements-page,.streaks-page) *::before,
  :where(.statistics-page,.achievements-page,.streaks-page) *::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}