/* Chart page (#app-chart). Tokens only. */
.chart-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.chart-bar .seg{margin:0}
.chart-bar .chip{min-height:var(--ctl-h)}
.chart-month select{min-height:var(--ctl-h);width:auto;min-width:180px}
.chart-rules{max-width:70ch;margin:0 0 var(--sp-5)}
.chart-list{list-style:none;margin:0;padding:0;border:1px solid var(--hair-strong);background:var(--paper)}
.chart-row{display:grid;grid-template-columns:48px var(--ctl-h) minmax(0,1fr) auto 80px;grid-template-areas:"rank play main num open" ". . badge . ." "player player player player player";
  align-items:center;column-gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--hair)}
.chart-row:last-child{border-bottom:0}
.chart-rank{grid-area:rank;font:500 var(--fs-h4)/1 var(--mono);letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
.chart-row.top .chart-rank{color:var(--ink)}
.chart-row:not(.top) .chart-rank{color:var(--muted)}
.chart-play{grid-area:play;width:var(--ctl-h);height:var(--ctl-h);border-radius:var(--r-round);border:1px solid var(--ink);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;padding:0}
.chart-play svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.chart-play.on{background:var(--ink);color:var(--accent)}
.chart-play:disabled{opacity:.4;cursor:not-allowed}
.chart-play:focus-visible{outline:0;box-shadow:var(--ring)}
.chart-main{grid-area:main;display:grid;gap:2px;min-width:0}
.chart-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
.chart-title:hover{text-decoration:underline;text-underline-offset:3px}
.chart-badge{grid-area:badge;justify-self:start;margin-top:var(--sp-1);white-space:normal}
.chart-num{grid-area:num;display:grid;justify-items:end;gap:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chart-open{grid-area:open;justify-self:stretch}
.chart-player{grid-area:player}
.chart-player:not(:empty){margin-top:var(--sp-3)}
.chart-list.skel .chart-row{height:68px;background:var(--mint);opacity:.5}
@media (max-width:600px){
  .chart-bar{align-items:stretch}
  .chart-bar .seg{width:100%}
  .chart-bar .seg .chip{flex:1}
  .chart-month,.chart-month select{width:100%}
  .chart-row{grid-template-columns:32px var(--ctl-h) minmax(0,1fr) auto;grid-template-areas:"rank play main main" ". . badge badge" ". . num num" "player player player player";column-gap:var(--sp-3);row-gap:var(--sp-1)}
  .chart-rank{font-size:var(--fs-h5)}
  .chart-num{justify-items:start;grid-auto-flow:column;justify-content:start;gap:var(--sp-3)}
  .chart-open{display:none}
}