/* /shell/trend.css — the chart spends the shell palette; series own their strokes. */
.trend { position: relative; font-family: var(--font); color: var(--ink); }
.trend__svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend__tick, .trend__label { font-family: var(--font); font-size: 11.5px; fill: var(--muted); }
.trend__label.is-on { fill: var(--ink); font-weight: 500; }
.trend__axis { stroke: var(--hair); }
.trend__axis--base { stroke: color-mix(in srgb, var(--ink) 20%, transparent); }
.trend__guide { stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-dasharray: 2 4; }
.trend__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.trend__dot { fill: var(--paper); stroke-width: 2; pointer-events: none; }
.trend__hit { fill: transparent; cursor: pointer; }
.trend__hit:focus-visible { outline: var(--focus); outline-offset: -2px; }
.trend__tip { position: absolute; transform: translate(-50%, -125%); background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.4; box-shadow: var(--lift); pointer-events: none; width: max-content; max-width: min(280px, 90%); box-sizing: border-box; overflow-wrap: anywhere; }
.trend__tip-note { display: block; font-size: 10px; }
.trend__tip[hidden], .trend__tip-note[hidden], .trend__empty[hidden] { display: none; }
.trend__empty { margin: 12px 0; color: var(--muted); font-size: 14px; }

/* SVG type scales with its viewBox; restore readable phone-sized words. */
@media (max-width: 600px) {
  .trend__tick, .trend__label { font-size: 24px; }
}