.parent-reading-trend { padding: 27px 0 10px; border-top: 1px solid var(--line); color: #202229; font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", system-ui, sans-serif; }
.reading-trend-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; }
.reading-trend-heading h2 { margin:0; font-size:27px; font-weight:780; letter-spacing:-.9px; }
.reading-estimate-label { max-width:105px; color:#777b84; font-size:11px; line-height:1.4; text-align:right; }
.reading-trend-value { display:flex; align-items:center; gap:9px; margin-left:auto; }
.reading-trend-value > strong { display:block; color:#398e92; font-size:42px; font-weight:780; line-height:1.05; letter-spacing:-1.5px; }
.reading-trend-value.is-collecting > strong { font-size:25px; letter-spacing:-.7px; margin:12px 0 0; }
.reading-chart-control { width:100%; touch-action:pan-y; border-radius:12px; margin-top:9px; cursor:crosshair; }
.reading-chart-control:focus-visible { outline:2px solid #439d9a; outline-offset:5px; }
.reading-trend-svg { display:block; width:100%; overflow:visible; }
.reading-grid { stroke:#d8dde2; stroke-width:.7; stroke-dasharray:4 4; opacity:.65; }
.reading-axis, .reading-day { fill:#777b84; font-size:12px; font-weight:550; }
.reading-axis { font-size:14px; }
.reading-edge-label { font-size:11px; }
.reading-axis-caption { font-size:9px; fill:#777b84; }
.reading-target { stroke:#fa7a43; stroke-width:1.1; stroke-dasharray:4 4; }
.reading-target-label { fill:#bf501f; font-size:11px; font-weight:650; }
.reading-grade { fill:#777b84; font-size:10px; }
.reading-trend-line { fill:none; stroke-width:2.1; stroke-linecap:round; }
.reading-trend-ink circle { transition:r 150ms ease-out, stroke-width 150ms ease-out; }
.reading-trend-ink circle.is-selected { r:6.7; stroke:#fff; stroke-width:2.5; }
.reading-trend-legend { display:flex; justify-content:center; gap:23px; color:#777b84; font-size:11px; margin:8px 0 0; }
.reading-trend-legend span { display:flex; align-items:center; gap:8px; }
.reading-legend-dot { width:9px; height:9px; background:#247dff; border-radius:50%; }
.reading-legend-band { width:26px; height:12px; border-radius:10px; background:linear-gradient(90deg,#26b0b532,#247dff2b); }
.reading-selected { margin:16px 0 0; padding:10px 0; color:#397e82; font-size:12px; line-height:1.6; border-bottom:1px solid var(--line); }
.reading-trend-summary { margin-top:27px; }
.reading-trend-summary h3 { margin:0 0 11px; font-size:22px; line-height:1.3; font-weight:760; letter-spacing:-.6px; text-wrap:balance; }
.reading-trend-summary p { margin:8px 0; color:#707681; font-size:13px; line-height:1.65; }
.reading-trend-summary strong { color:#28858a; font-weight:720; }
.reading-trend-details { margin-top:17px; font-size:12px; color:#656b77; line-height:1.65; }
.reading-trend-details > summary { display:flex; align-items:center; gap:8px; list-style:none; color:#28858a; font-size:14px; font-weight:650; min-height:44px; cursor:pointer; }
.reading-trend-details > summary::-webkit-details-marker { display:none; }
.reading-trend-details > summary span { font-size:23px; transition:transform 160ms ease; }
.reading-trend-details[open] > summary span { transform:rotate(90deg); }
.reading-trend-details table { border-collapse:collapse; width:100%; margin-top:18px; text-align:left; }
.reading-trend-details th,.reading-trend-details td { padding:8px 4px; border-bottom:1px solid var(--line); vertical-align:top; }
.reading-trend-details th { font-weight:600; }
.reading-trend-details th small { display:block; font-weight:400; max-width:145px; font-size:10px; }
.reading-trend-details caption { text-align:left; font-weight:650; margin-bottom:5px; }
.reading-rating-version { overflow-wrap:anywhere; font-size:10px; }
.reading-enter .reading-trend-ink { animation:reading-reveal 650ms cubic-bezier(.16,1,.3,1) both; }
@keyframes reading-reveal { from { clip-path:inset(0 100% 0 0); opacity:.35; } to { clip-path:inset(0); opacity:1; } }
@media(max-width:350px) { .reading-trend-heading h2 { font-size:24px; } .reading-trend-value > strong { font-size:36px; } .reading-trend-value.is-collecting > strong { font-size:23px; } .reading-trend-summary h3 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .reading-enter .reading-trend-ink { animation:none; } .reading-trend-ink circle,.reading-trend-details > summary span { transition:none; } }