/* Editorial charts, distinct from app screenshots. The labels describe fictional data. */
.stats-carousel { min-width:0; padding:28px; color:#fff7ff; background:#2b2440; border:1px solid #6e5b82; border-radius:28px; }
.stats-carousel [hidden] { display:none!important; }
#habitudes .stats-carousel .stats-rotation-status { font-size:13px; line-height:1.65; color:#e1d5ec; margin:0 0 12px; }
#habitudes .stats-carousel .stats-example { font-size:9px; letter-spacing:.1em; line-height:1.7; color:#dac8ed; margin:0 0 16px; }
.stats-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.stats-toolbar>div { display:flex; gap:5px; }
.stats-carousel button { font:500 12px/1.3 var(--sans); min-width:44px; min-height:44px; padding:9px 12px; border:1px solid #88759d; border-radius:22px; color:#fff7ff; background:transparent; cursor:pointer; }
.stats-carousel button:hover { background:#49345f; }
.stats-carousel button:focus-visible { outline:3px solid #e2c6ff; outline-offset:3px; }
.stats-carousel button[aria-pressed=true],.stats-carousel button[aria-current=true] { background:#dbc4ef; border-color:#dbc4ef; color:#2b2440; }
#habitudes .stats-carousel .stats-range { font-size:11px; color:#d7c9e4; margin:0 0 22px; }
.stats-stage { min-width:0; display:grid; }
.stats-slide { grid-area:1 / 1; min-height:385px; display:flex; flex-direction:column; gap:19px; }
/* Inactive panels reserve their natural height, avoiding page jumps between views.
   Visibility hides them visually and from accessibility APIs; native hidden is retained. */
.stats-carousel .stats-slide[hidden] { display:flex!important; visibility:hidden; pointer-events:none; }
.stats-carousel .stats-slide h3 { color:#fff7ff; font-family:var(--serif); font-size:clamp(28px,2.8vw,37px); font-weight:400; line-height:1.12; letter-spacing:-.035em; margin:0; }
#habitudes .stats-carousel .stats-comment { color:#e0d3eb; font-size:12px; line-height:1.8; margin:0; margin-top:auto; }
.stats-overview { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; margin:12px 0; }
.stats-ring { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:100%; max-width:175px; aspect-ratio:1; background:conic-gradient(#d5b7f1 var(--rate),#544164 0); border-radius:50%; isolation:isolate; }
.stats-ring:before { content:''; position:absolute; inset:11px; background:#2b2440; border-radius:50%; z-index:-1; }
.stats-ring strong { color:#fff7ff; font-size:clamp(25px,2.8vw,39px); line-height:1.1; letter-spacing:-.04em; }
.stats-ring span { font-size:11px; color:#dfcfea; margin-top:6px; }
.stats-overview dl { margin:0; }
.stats-overview dl>div { display:flex; justify-content:space-between; align-items:baseline; gap:9px; padding:11px 0; border-bottom:1px solid #655273; }
.stats-overview dt { color:#e1d5ec; font-size:10px; line-height:1.4; }
.stats-overview dd { margin:0; font-size:20px; font-weight:500; }
.stats-bars { display:grid; gap:14px; }
.stats-bar-row>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12px; }
.stats-bar-row b { font-weight:500; white-space:nowrap; }
.stats-bar-track { height:8px; background:#544164; border-radius:8px; overflow:hidden; margin:6px 0 3px; }
.stats-bar-track>i { display:block; height:100%; border-radius:8px; background:#d5b7f1; }
.stats-bar-row>small { font-size:9px; line-height:1.5; color:#d7c9e4; }
#habitudes .stats-carousel .stats-prn-total { font-size:12px; color:#e0d3eb; margin:0; }
.stats-prn-total strong { font-size:23px; font-weight:500; color:#fff7ff; }
.stats-weekdays,.stats-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.stats-weekdays { font-size:10px; text-align:center; color:#d7c9e4; margin-bottom:-13px; }
.stats-date { display:flex; justify-content:center; align-items:center; position:relative; min-height:32px; border-radius:7px; font-size:11px; border:1px solid #5f4b73; }
.stats-date.has-intake { background:#dbc4ef; color:#2b2440; border-color:#dbc4ef; }
.stats-date b { font-size:8px; margin-left:3px; border-radius:50%; min-width:12px; text-align:center; background:#6f45a0; color:white; }
#habitudes .stats-carousel .stats-calendar-key { font-size:9px; color:#e0d3eb; margin:0; display:flex; align-items:center; gap:7px; }
.stats-calendar-key>span { width:10px; height:10px; border-radius:3px; background:#dbc4ef; flex:none; }
.stats-week-chart { display:flex; align-items:end; gap:10px; padding:12px 0 4px; }
.stats-week-chart>div { flex:1; min-width:0; text-align:center; }
.stats-week-chart b { display:block; font-size:12px; font-weight:500; margin-bottom:10px; white-space:nowrap; }
.stats-week-track { height:175px; display:flex; align-items:end; border-bottom:1px solid #9e88b4; }
.stats-week-track>i { display:block; width:100%; max-width:48px; margin:0 auto; background:#d5b7f1; border-radius:6px 6px 0 0; }
.stats-week-chart>div>span { display:block; font-size:10px; margin-top:10px; }
.stats-week-chart small { display:block; font-size:9px; color:#d7c9e4; }
.stats-controls { border-top:1px solid #655273; padding-top:17px; margin-top:22px; }
#habitudes .stats-carousel .stats-position { font-size:11px; color:#e0d3eb; margin:0 0 12px; }
.stats-pages { display:flex; justify-content:space-between; gap:5px; }
.stats-pages button { padding:8px; }
#habitudes .stats-carousel .stats-method { font-size:9px; line-height:1.8; color:#d1c0e1; margin:18px 0 0; }
@media(prefers-reduced-motion:no-preference) {
  .stats-slide:not([hidden]) { animation:stats-arrive .35s ease-out both; }
  @keyframes stats-arrive { from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)} }
}
@media(max-width:1000px) { .stats-carousel{padding:24px}.stats-overview{gap:13px}.stats-ring strong{font-size:28px} }
@media(max-width:760px) { .stats-carousel{padding:24px 20px}.stats-slide{min-height:430px}.stats-carousel .stats-slide h3{font-size:33px}.stats-ring{max-width:160px}.stats-ring strong{font-size:31px}.stats-week-chart{gap:8px}.stats-week-chart b{font-size:11px} }