/* Blupoli Puzzles · statistics ---------------------------------------------
   Scope-pure analytics. Every visible metric belongs to one active context. */

.statistics-page{
  width:min(1240px,calc(100% - 40px));
  margin-inline:auto;
  padding:0 0 96px;
}

.statistics-page a{text-decoration:none}

.statistics-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:end;
  padding:clamp(54px,7vw,88px) 0 32px;
}

.statistics-hero>div:first-child{max-width:840px}

.statistics-hero h1{
  margin:.12em 0 .2em;
  font-size:var(--type-display);
  line-height:.94;
  letter-spacing:-.065em;
}

.statistics-hero p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:var(--type-lead);
  line-height:1.62;
}

.statistics-local-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-subtle);
  font-size:var(--type-caption);
  font-weight:800;
}

.statistics-local-badge>span:first-child{color:var(--mint);font-size:.65rem}

.statistics-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.statistics-danger-action{
  color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 28%,var(--line));
}

.statistics-scope{
  position:relative;
  padding:clamp(20px,3vw,30px);
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:calc(var(--radius-md) + 2px);
  background:
    radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 30%),
    var(--surface);
  box-shadow:var(--shadow-soft);
}

.statistics-section-heading,
.statistics-card-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.statistics-section-heading h2,
.statistics-card-head h2{
  margin:.1em 0 0;
  font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.04;
  letter-spacing:-.04em;
}

.statistics-scope-badge{
  max-width:min(420px,50vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-soft));
  color:var(--text);
  font-size:.74rem;
  font-weight:900;
}

.statistics-scope-tabs{
  display:inline-grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin-top:22px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
}

.statistics-scope-tabs button,
.statistics-periods button{
  min-height:38px;
  border:0;
  border-radius:10px;
  padding:0 16px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.76rem;
  font-weight:850;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.statistics-scope-tabs button:hover,
.statistics-periods button:hover{color:var(--text)}

.statistics-scope-tabs button[aria-pressed="true"]{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 3px 14px color-mix(in srgb,var(--shadow-color,#000) 14%,transparent);
}

.statistics-scope-selectors{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.statistics-scope-selectors label{
  display:grid;
  gap:6px;
  min-width:min(100%,360px);
}

.statistics-scope-selectors label>span{
  color:var(--text-subtle);
  font-size:.7rem;
  font-weight:850;
}

.statistics-scope-selectors select{
  width:100%;
  min-height:46px;
  padding:0 42px 0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:.82rem;
  font-weight:750;
}

.statistics-scope-copy{
  margin:16px 0 0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
}

.statistics-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.statistics-kpi{
  min-height:148px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}

.statistics-kpi>span{
  color:var(--text-subtle);
  font-size:.71rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.statistics-kpi strong{
  font-size:clamp(1.9rem,3.8vw,3rem);
  line-height:.92;
  letter-spacing:-.06em;
}

.statistics-kpi small{
  color:var(--muted);
  font-size:.7rem;
  line-height:1.4;
}

.statistics-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

.statistics-grid--primary{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)}

.statistics-card{
  min-width:0;
  padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}

.statistics-card-head{margin-bottom:22px}

.statistics-card-head--controls{align-items:center}

.statistics-card-meta{
  color:var(--text-subtle);
  font-size:.68rem;
  font-weight:800;
  text-align:right;
}

.statistics-performance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.statistics-performance-item{
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-soft);
}

.statistics-performance-item span{
  color:var(--text-subtle);
  font-size:.7rem;
  font-weight:800;
}

.statistics-performance-item strong{
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1;
  letter-spacing:-.045em;
}

.statistics-periods{
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
}

.statistics-periods button{
  min-height:34px;
  padding:0 10px;
  font-size:.68rem;
}

.statistics-periods button[aria-pressed="true"]{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 2px 10px color-mix(in srgb,var(--shadow-color,#000) 10%,transparent);
}

.statistics-activity-summary{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 9px;
  margin-bottom:18px;
}

.statistics-activity-summary strong{
  font-size:1.4rem;
  letter-spacing:-.04em;
}

.statistics-activity-summary span,
.statistics-activity-summary b{
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
}

.statistics-activity-summary b{
  margin-left:auto;
  color:var(--text-subtle);
}

.statistics-activity-chart{
  height:216px;
  display:flex;
  align-items:stretch;
  gap:clamp(2px,.5vw,6px);
  padding:14px 0 0;
  border-top:1px solid var(--line);
  background:
    linear-gradient(to bottom,transparent 24%,color-mix(in srgb,var(--line) 60%,transparent) 25%,transparent 26%),
    linear-gradient(to bottom,transparent 49%,color-mix(in srgb,var(--line) 60%,transparent) 50%,transparent 51%),
    linear-gradient(to bottom,transparent 74%,color-mix(in srgb,var(--line) 60%,transparent) 75%,transparent 76%);
}

.statistics-activity-day{
  min-width:0;
  flex:1 1 0;
  display:grid;
  grid-template-rows:1fr 24px;
  gap:7px;
  align-items:end;
}

.statistics-activity-bar{
  height:100%;
  display:flex;
  align-items:flex-end;
}

.statistics-activity-bar i{
  width:100%;
  min-height:2px;
  border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--accent),var(--blue));
  opacity:.88;
  transition:height .2s ease,opacity .16s ease;
}

.statistics-activity-day:hover .statistics-activity-bar i{opacity:1}

.statistics-activity-day small{
  min-width:0;
  overflow:hidden;
  color:var(--text-subtle);
  font-size:.58rem;
  line-height:1.15;
  white-space:nowrap;
  text-align:center;
}

.statistics-detail-note{
  margin:12px 0 0;
  color:var(--text-subtle);
  font-size:.66rem;
  line-height:1.5;
}

.statistics-breakdown{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.statistics-breakdown-row{
  display:grid;
  grid-template-columns:minmax(120px,.9fr) minmax(100px,1.1fr);
  gap:14px;
  align-items:center;
  min-height:58px;
  padding:9px 10px;
  border-radius:11px;
  color:inherit;
  transition:background .16s ease,transform .16s ease;
}

a.statistics-breakdown-row:hover{
  background:var(--surface-soft);
  transform:translateX(2px);
}

.statistics-breakdown-copy{
  min-width:0;
  display:grid;
  gap:3px;
}

.statistics-breakdown-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.78rem;
}

.statistics-breakdown-copy small{
  color:var(--text-subtle);
  font-size:.64rem;
}

.statistics-breakdown-track{
  height:9px;
  overflow:hidden;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
}

.statistics-breakdown-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--brand-gradient);
}

.statistics-history{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.statistics-history-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  min-height:59px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:11px;
  color:inherit;
  transition:border-color .16s ease,background .16s ease;
}

.statistics-history-row:hover{
  border-color:var(--line);
  background:var(--surface-soft);
}

.statistics-history-row>span{
  min-width:0;
  display:grid;
  gap:3px;
}

.statistics-history-row>span:last-child{text-align:right}

.statistics-history-row strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.77rem;
}

.statistics-history-row small{
  color:var(--text-subtle);
  font-size:.63rem;
}

.statistics-empty{
  margin-top:16px;
  padding:clamp(34px,6vw,68px);
  border:1px dashed color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--accent) 4%,var(--surface));
  text-align:center;
}

.statistics-empty-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:17px;
  background:color-mix(in srgb,var(--accent) 11%,var(--surface-soft));
  color:var(--blue);
  font-size:1.6rem;
  font-weight:900;
}

.statistics-empty h2{
  margin:0;
  font-size:clamp(1.45rem,3vw,2.15rem);
  letter-spacing:-.045em;
}

.statistics-empty p{
  max-width:560px;
  margin:10px auto 20px;
  color:var(--muted);
  line-height:1.6;
}

.statistics-empty-inline{
  margin:0;
  padding:28px 18px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.55;
  text-align:center;
}

.statistics-data-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  margin-top:14px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-soft);
}

.statistics-data-note strong{font-size:.88rem}

.statistics-data-note p{
  max-width:760px;
  margin:5px 0 0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.55;
}

.statistics-data-note>span{
  flex:0 0 auto;
  color:var(--text-subtle);
  font-size:.66rem;
  font-weight:800;
}

@media (max-width:980px){
  .statistics-hero{grid-template-columns:1fr;align-items:start}
  .statistics-hero-actions{justify-content:flex-start}
  .statistics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statistics-grid,
  .statistics-grid--primary{grid-template-columns:1fr}
}

@media (max-width:700px){
  .statistics-page{width:min(100% - 24px,1240px);padding-bottom:72px}
  .statistics-hero{padding:38px 0 24px;gap:22px}
  .statistics-hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .statistics-hero-actions .button{justify-content:center}
  .statistics-section-heading{align-items:flex-start}
  .statistics-scope-badge{max-width:42vw}
  .statistics-scope-tabs{display:grid;width:100%}
  .statistics-scope-tabs button{padding-inline:8px}
  .statistics-kpis{gap:8px}
  .statistics-kpi{min-height:132px;padding:16px}
  .statistics-card{padding:18px}
  .statistics-card-head--controls{align-items:flex-start;flex-direction:column}
  .statistics-periods{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .statistics-activity-chart{height:190px;overflow:hidden}
  .statistics-activity-day small{font-size:.52rem}
  .statistics-breakdown-row{grid-template-columns:minmax(104px,.9fr) 1.1fr;gap:10px;padding-inline:4px}
  .statistics-data-note{align-items:flex-start;flex-direction:column;gap:10px}
}

@media (max-width:460px){
  .statistics-kpis{grid-template-columns:1fr 1fr}
  .statistics-kpi{min-height:122px}
  .statistics-kpi strong{font-size:1.75rem}
  .statistics-performance{grid-template-columns:1fr 1fr}
  .statistics-performance-item{min-height:92px;padding:12px}
  .statistics-history-row{grid-template-columns:minmax(0,1fr) auto;padding-inline:4px}
}

@media (prefers-reduced-motion:reduce){
  .statistics-scope-tabs button,
  .statistics-periods button,
  .statistics-breakdown-row,
  .statistics-activity-bar i,
  .statistics-history-row{transition:none}
}