/* ---------------- Round 3: analytics screen ---------------- */
.an-summary-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.an-summary-box{flex:1; min-width:100px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; transition:box-shadow 200ms ease, transform 200ms var(--ease-pop);}
@media (hover:hover){ .an-summary-box:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(18,18,18,0.06); } }
.an-summary-num{font-size:var(--fs-2xl); font-weight:800; color:var(--ink);}
.an-summary-label{font-size:var(--fs-xs); color:var(--muted); margin-top:2px;}

.an-trend-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.an-trend-label{width:120px; flex-shrink:0; font-size:var(--fs-sm); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-trend-bar-wrap{flex:1; height:10px; border-radius:6px; background:rgba(18,18,18,0.07); overflow:hidden;}
/* Round 11: bar fill previously appeared at full width instantly (no prior state for a CSS
   transition to animate from). js/analytics.js now sets each bar to 0% then to its real target
   on the next animation frame (see animateTrendBar() there) specifically so this transition has
   something to interpolate between — the two changes only work together, neither alone. Eased
   with a slightly longer, gentler curve than the app's usual --ease-pop since this is a "value
   settling in" motion, not a tap response — a bouncy overshoot would read as a wrong/jittery
   number for a moment before landing, wrong feeling for a score. */
.an-trend-bar{height:100%; background:var(--yellow-deep); border-radius:6px; transition:width 650ms cubic-bezier(.16,.72,.25,1);}
@media (prefers-reduced-motion:reduce){ .an-trend-bar{ transition:none; } }
.an-trend-pct{width:56px; flex-shrink:0; text-align:right; font-size:var(--fs-sm); font-weight:700; color:var(--ink);}

.an-topic-box{border-radius:12px; padding:12px 14px; margin-bottom:10px; animation:motionFadeUp 300ms cubic-bezier(.2,.8,.3,1) both;}
.an-topic-weak{background:#FBE3DD; border:1px solid #F2C4B6;}
.an-topic-strong{background:var(--success-bg); border:1px solid var(--success-border);}
.an-topic-head{display:flex; justify-content:space-between; font-weight:700; font-size:var(--fs-base);}
.an-topic-tip{font-size:var(--fs-sm); color:var(--ink); margin-top:6px; opacity:0.85;}
@media (prefers-reduced-motion:reduce){ .an-topic-box{ animation:none; } }

.an-upsell-card{border:1.5px dashed var(--yellow-deep); background:#FFFBEA; border-radius:14px; padding:18px 20px; margin-top:14px;}
.an-upsell-title{font-weight:800; font-size:var(--fs-base); margin-bottom:6px;}
.an-upsell-sub{font-size:var(--fs-sm); color:var(--ink); opacity:0.85; line-height:1.6;}

/* Round 13: per-subject combined graph — same .an-trend-row bar as the score trend, just a
   different accent color so the two graphs stay visually distinct, plus a small text toggle
   (same "▲/▼ text button + .hidden" pattern as the comment reply-toggle in comments.js) that
   keeps the explanation out of the way until someone actually wants to read it. */
.an-trend-bar-subject{background:#2F8FD1;}
.an-desc-toggle{background:none; border:none; font-size:var(--fs-xs); color:#2F8FD1; font-weight:600; cursor:pointer; padding:0; flex-shrink:0; transition:opacity 150ms ease;}
.an-desc-toggle:active{ opacity:0.6; }
.an-desc{font-size:var(--fs-sm); color:var(--ink); opacity:0.85; line-height:1.6; margin-top:6px; margin-bottom:4px; overflow:hidden; animation:motionFadeUp 220ms ease both;}
.an-desc.hidden{ display:none; }
@media (prefers-reduced-motion:reduce){ .an-desc{ animation:none; } }

/* Round 13: per-attempt delete controls on the score-trend list — checkbox prepended to each
   .an-trend-row (flexbox already has gap+align-items:center, so it just slots in), plus the
   select-all/delete-selected/delete-all row above the list. */
.an-trend-check{flex-shrink:0; display:flex; align-items:center;}
.an-attempt-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.an-select-all{display:flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--muted); font-weight:600; cursor:pointer;}
.an-delete-btn{width:auto; padding:6px 12px; font-size:var(--fs-sm); display:inline-flex; align-items:center; gap:5px;}
.an-delete-btn:disabled{opacity:0.4; cursor:not-allowed;}

/* Round 12: exam-recommendation buttons ("ฝึกหัวข้อนี้") on weak-topic boxes, and the small
   per-topic recent-trend line premium shows underneath each one — see analytics.js. */
.an-recommend-btn{background:var(--card);}
.an-mini-trend{font-size:var(--fs-xs); color:var(--muted); margin-top:6px;}

/* Round 14: subject-aptitude radar chart (premium) — SVG is built entirely in JS (see
   buildRadarSvg in analytics.js), this just centers/sizes it and styles the pct legend below it
   the same way an-trend-row lists elsewhere on this page look, for consistency. */
.an-radar-wrap{border:1px solid var(--line); border-radius:14px; padding:16px 10px; background:var(--card);}
.an-radar-svg{width:100%; max-width:340px; display:block; margin:0 auto; animation:motionFadeUp 420ms cubic-bezier(.2,.8,.3,1) both;}
@media (prefers-reduced-motion:reduce){ .an-radar-svg{ animation:none; } }
.an-radar-legend{margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px;}
.an-radar-legend-row{display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--ink);}
.an-radar-legend-row span:last-child{font-weight:700;}

/* Round 15: "ข้อมูลยังน้อย" badge on weak/strong topic boxes — flags topics that only cleared
   the Wilson-score bar loosely (see wilsonLowerBound in analytics.js) so the person knows to
   treat that ranking as provisional rather than final. */
.an-lowsample-badge{font-size:10px; font-weight:700; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:2px 7px; margin-left:4px; vertical-align:middle;}

/* Round 16: EWMA momentum badge — shown next to the "แนวโน้มคะแนน" header (overall) and next to
   each weak topic's mini-trend (per-topic), see ewma()/momentumBadge() in analytics.js. */
.an-momentum-badge{font-size:11px; font-weight:700; border-radius:999px; padding:2px 8px; white-space:nowrap;}
.an-momentum-up{background:var(--success-bg); border:1px solid var(--success-border); color:#2E6B4F;}
.an-momentum-down{background:#FBE3DD; border:1px solid #F2C4B6; color:#A24A34;}
.an-momentum-flat{background:var(--paper); border:1px solid var(--line); color:var(--muted);}

/* Round 17: Elo ability-rating rows (premium) — see getMySubjectRatings in supabase.js /
   _elo_apply_response in 034-elo-ability-ratings.sql for where the numbers come from. Bar fill
   width is set inline per-row from the rating (see analytics.js), this just styles the track. */
.an-elo-row{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); margin-top:10px;}
.an-elo-row:first-child{margin-top:0;}
.an-elo-head{display:flex; justify-content:space-between; align-items:baseline; font-weight:700; color:var(--ink);}
.an-elo-head span:last-child{font-size:var(--fs-lg); color:var(--yellow-deep);}
.an-elo-bar-track{height:8px; border-radius:999px; background:var(--paper); border:1px solid var(--line); margin-top:8px; overflow:hidden;}
.an-elo-bar-fill{height:100%; background:var(--yellow-deep); border-radius:999px;}
.an-elo-meta{font-size:var(--fs-xs); color:var(--muted); margin-top:6px;}

/* Round 22: Elo cold-start messaging — provisional badge + progress note (shown while
   gamesPlayed < 20, matching the SQL's own K-factor threshold) and an explicit "not enough
   peers yet" note when percentile is null, instead of just quietly omitting it. */
.an-elo-provisional-badge{font-size:10px; font-weight:700; color:#8A6A1E; background:#FFF6E0; border:1px solid #F0DFA0; border-radius:999px; padding:2px 7px; margin-left:4px; vertical-align:middle;}
.an-elo-provisional-note{font-size:var(--fs-xs); color:var(--muted); margin-top:4px; font-style:italic;}

/* Round 18: forgetting-curve review queue (premium) — reuses the .an-topic-box shape the weak/
   strong boxes already use, with its own tint so it doesn't read as "this is a weak topic" (it
   may well have a fine lifetime accuracy — it's flagged for staleness, not low skill). */
.an-topic-forget{background:#FDF3D9; border:1px solid #F0DFA0;}

/* Round 19: unified "สรุปสิ่งที่ควรทำวันนี้" priority summary (premium) — sits above the detailed
   Wilson/forgetting-curve/Elo/radar sections and pulls the top 3 combined-signal items up front,
   see priorityTopics in analytics.js. Deliberately a stronger accent than the plain weak-topic
   boxes so it reads as "the one section to check first", not just another list. */
.an-priority-intro{font-size:var(--fs-sm); color:var(--muted); margin-top:8px; margin-bottom:14px;}
.an-topic-priority{background:#FFF6E0; border:1.5px solid var(--yellow-deep);}
.an-priority-empty{border:1px solid var(--success-border); background:var(--success-bg); border-radius:12px; padding:14px; font-size:var(--fs-sm); color:var(--ink);}

/* Round 23: linear-regression forecast line inside a priority card — see linearForecast() in
   analytics.js. Kept visually secondary to the reason line above it (smaller, muted) since it's
   an estimate, not the headline fact about the topic. */
.an-topic-forecast{font-size:var(--fs-xs); color:var(--ink); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line);}
.an-forecast-caveat{color:var(--muted); font-style:italic;}

/* Round 24: low-data empty-states for the premium sections above — shown when a section's
   underlying data is genuinely too thin to compute anything yet (not when the computation ran
   and simply found nothing to flag, which usually means the person is doing fine and shouldn't
   be nagged). Deliberately plainer than .an-priority-empty (no success-green tint) since "not
   enough data yet" isn't a congratulatory message the way "nothing needs fixing" is. */
.an-empty-state{border:1px dashed var(--line); border-radius:12px; padding:14px; font-size:var(--fs-sm); color:var(--muted); margin-top:8px;}

/* Round 20: repeated wrong-choice pattern boxes (premium) — same shape as the other topic boxes,
   neutral tint since this isn't "weak" or "stale", it's a specific misconception (see
   getErrorPatterns in supabase.js). */
.an-topic-errpattern{background:var(--card); border:1px solid var(--line);}