/* PeekWell · score graphs. Pairs with assets/js/pw-graphs.js. Tokens live in tokens.css (--graph-*). */
.pw-trend { display: block; width: 100%; max-width: 184px; height: 48px; }
.pw-trend__svg { display: block; width: 100%; height: 100%; overflow: visible; }

.pw-history { background: var(--graph-surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px 18px; box-shadow: var(--shadow-1); }
.pw-history__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.pw-history__title { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 600; font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
.pw-history__subtitle { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.pw-history__chart { position: relative; width: 100%; overflow: visible; }
.pw-history__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pw-history__chart .pw-svg-axis { font-family: var(--font-ui); font-size: 12px; font-weight: 500; fill: var(--graph-axis-text); font-variant-numeric: tabular-nums; }
.pw-history__chart .pw-svg-band-label { font-family: var(--font-hand); font-size: 15px; fill: var(--mint-600); }
.pw-history__chart .pw-svg-callout { font-family: var(--font-mono); font-size: 13px; font-weight: 500; fill: var(--graph-callout-text); letter-spacing: 0.02em; }
.pw-svg-pt { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.pw-svg-pt:focus, .pw-svg-pt * { outline: none; }
.pw-svg-pt-halo, .pw-svg-pt-ring { opacity: 0; transition: opacity var(--t-fast) var(--ease-soft); }
.pw-svg-pt-dot { transition: opacity var(--t-fast) var(--ease-soft); }
.pw-svg-pt:hover .pw-svg-pt-dot { opacity: 0; }
.pw-svg-pt:hover .pw-svg-pt-halo { opacity: 0.35; }
.pw-svg-pt:hover .pw-svg-pt-ring { opacity: 1; }
.pw-svg-tt { position: absolute; z-index: 4; background: var(--bg-sheet); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--shadow-2); pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); min-width: 170px; opacity: 0; transition: opacity var(--t-fast) var(--ease-soft); }
.pw-svg-tt.is-visible { opacity: 1; }
.pw-svg-tt__row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.pw-svg-tt__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pw-svg-tt__meta { padding-left: 16px; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.pw-history__empty { padding: var(--s-6); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.pw-history__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
.pw-history__stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sheet); }
.pw-history__stat-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.pw-history__stat-value { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 72; font-weight: 600; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.pw-history__stat-value .u { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 6px; }
.pw-history--bare { background: transparent; border: 0; box-shadow: none; padding: 0; }
.pw-history--bare .pw-history__head, .pw-history--bare .pw-history__stats { display: none; }
@media (max-width: 640px) { .pw-history { padding: 16px 14px 12px; } .pw-history__stats { grid-template-columns: 1fr; } }