/* Stats follows the same proportional desktop canvas as the dashboard. */
fokasu-stats { --stats-sidebar-width: 22.15337cqw; position: relative; display: block; container-type: inline-size; color: #f0f1f4; font: 1.08443cqw/1.4 "Fokasu Noto Sans", sans-serif; }
fokasu-stats * { box-sizing: border-box; }
.stats-layout { grid-template-columns: var(--stats-sidebar-width) 1fr; --stats-gap: 2.16886cqw; --stats-intro-height: 5.57630cqw; --stats-breakdown-height: 37.18048cqw; }
.stats-main { display: grid; grid-template-rows: 3.56313cqw minmax(0, 1fr); gap: 2.01394cqw; padding-top: 1.62665cqw; padding-bottom: 1.85902cqw; }
.stats-main .dash-lock { background: transparent; color: #a2a5ae; }
.stats-viewport { overflow: hidden; overflow: clip; min-height: 0; }
.stats-stack { display: flex; flex-direction: column; gap: var(--stats-gap); transition: transform 650ms cubic-bezier(.22, 1, .36, 1); }
.stats-show-weekly .stats-stack { transform: translateY(calc(0cqw - var(--stats-intro-height) - var(--stats-breakdown-height) - var(--stats-gap) * 2)); }
.stats-intro { flex: 0 0 var(--stats-intro-height); }
.stats-intro h3 { margin: 0 0 .38730cqw; font: 700 2.63362cqw/1.3 "Fokasu Plus Jakarta Sans", sans-serif; }
.stats-intro p { margin: 0; font-size: 1.31681cqw; color: #9da2ad; }
.stats-card { flex-shrink: 0; background: #17191d; border: .07746cqw solid #24272b; border-radius: 1.00697cqw; padding: 2.16886cqw; }
.stats-card h4 { margin: 0; font: 700 1.62665cqw/1.4 "Fokasu Plus Jakarta Sans", sans-serif; }
.stats-card-heading { display: flex; align-items: center; gap: 1.62665cqw; min-height: 2.63362cqw; }
.stats-card-heading h4 { margin-right: auto; white-space: nowrap; }
.stats-muted { color: #74808f; font-size: 1.08443cqw; }
.stats-date { display: inline-flex; align-items: center; gap: .69713cqw; white-space: nowrap; font-size: 1.08443cqw; }
.stats-layout .stats-date svg, .stats-pagination svg, .stats-todo-meta svg { width: 1.23935cqw; height: 1.23935cqw; color: #7b8490; fill: none; stroke: currentColor; stroke-width: 1.5; }
.stats-date svg:first-child { margin-right: .30984cqw; }
.stats-date svg:last-child { margin-left: .30984cqw; }
.stats-breakdown { height: var(--stats-breakdown-height); }
.stats-breakdown-body { display: grid; grid-template-columns: 24.47715cqw minmax(0, 1fr); gap: 2.32378cqw; margin-top: 1.47173cqw; }
.stats-donut { position: relative; width: 24.47715cqw; height: 24.47715cqw; margin-top: .38730cqw; }
.stats-layout .stats-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.stats-donut circle { fill: none; stroke-width: 24; }
.stats-donut .stats-donut-track { stroke: #30343b; stroke-width: 26; }
.stats-donut > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.32378cqw; }
@media (prefers-reduced-motion: no-preference) {
 .stats-donut-pending .stats-donut-segment { stroke-dasharray: 0 100; }
 .stats-donut-pending > span { opacity: 0; }
 .stats-donut-revealing .stats-donut-segment { animation: stats-donut-draw var(--segment-duration) linear var(--segment-delay) both; }
 .stats-donut-revealing > span { animation: stats-donut-total 240ms ease-out 800ms both; }
}
@keyframes stats-donut-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--segment-length) var(--segment-gap); } }
@keyframes stats-donut-total { from { opacity: 0; } to { opacity: 1; } }
.stats-details { min-width: 0; }
.stats-legend { display: grid; grid-template-columns: repeat(4, auto); gap: 2.16886cqw 1.23935cqw; align-items: center; padding: .85205cqw .61967cqw 1.70411cqw; font-size: 1.08443cqw; }
.stats-legend > span { display: flex; align-items: center; gap: .92951cqw; white-space: nowrap; }
.stats-legend i { width: .92951cqw; height: .92951cqw; border-radius: 50%; flex-shrink: 0; }
.stats-todos { display: grid; gap: .77459cqw; }
.stats-todo { display: flex; align-items: center; gap: 1.16189cqw; height: 8.13323cqw; padding: 1.39427cqw; border: .07746cqw solid #292e38; border-radius: .85205cqw; }
.stats-todo-mark { display: grid; place-items: center; flex: 0 0 3.33075cqw; height: 3.33075cqw; border-radius: 50%; background: #252932; color: #63e1be; font-size: 1.62665cqw; transform: rotate(-35deg); }
.stats-todo-copy { min-width: 0; flex: 1; }
.stats-todo-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 0 .77459cqw; font-size: 1.23935cqw; }
.stats-todo-meta { display: flex; align-items: center; justify-content: space-between; color: #9da2ad; font-size: 1.08443cqw; }
.stats-todo-meta > span:first-child { display: flex; align-items: center; gap: .54222cqw; font-family: ui-monospace, monospace; white-space: nowrap; }
.stats-tag { width: 11.61890cqw; background: #202329; border: .07746cqw solid #292e38; border-radius: .46476cqw; padding: .38730cqw .61967cqw; }
.stats-pagination { display: flex; align-items: center; justify-content: center; gap: 1.00697cqw; margin-top: 1.47173cqw; color: #9da2ad; font-size: 1.08443cqw; }
.stats-pagination svg:first-child { opacity: .4; }
.stats-weekly { height: 45.77847cqw; position: relative; }
.stats-period { display: flex; gap: .23238cqw; padding: .30984cqw; background: #191c21; border-radius: .77459cqw; color: #9da2ad; font-size: 1.16189cqw; }
.stats-period > span { padding: .77459cqw 1.39427cqw; }
.stats-period .is-selected { background: #252932; color: #f0f1f4; border-radius: .61967cqw; }
.stats-weekly-options { display: flex; align-items: center; justify-content: space-between; margin-top: 1.08443cqw; }
.stats-chart { position: absolute; inset: 10.76685cqw 2.16886cqw 1.54919cqw; }
.stats-layout .stats-trend { display: block; width: 100%; height: 100%; overflow: visible; }
.stats-trend .stats-line { fill: none; stroke: #20a880; stroke-width: 2.5; }
.stats-trend circle { fill: #20a880; }
.stats-trend text { fill: #9da2ad; font: 11px "Fokasu Noto Sans", sans-serif; }
.stats-summary { height: 13.94268cqw; padding-top: 1.70411cqw; }
.stats-summary dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .92951cqw; margin: 1.31681cqw 0 0; }
.stats-summary dl > div { padding: 1.23935cqw 1.31681cqw; background: #202329; border-radius: .92951cqw; }
.stats-summary dt { color: #9da2ad; font-size: .92951cqw; white-space: nowrap; }
.stats-summary dd { margin: .61967cqw 0 0; font: 700 1.54919cqw/1.4 "Fokasu Plus Jakarta Sans", sans-serif; white-space: nowrap; }
.stats-scroll-toggle { bottom: 0; }
@media (prefers-reduced-motion: reduce) { .stats-stack { transition: none; } }