/* Website A chart follows the reviewed desktop A visual reference. */
.trend-panel{--trend-paper:#fffef7;--trend-soft:#f5f7eb;--trend-line:#d6dfc4;--trend-green:#627e33;--trend-dark:#25351e;--trend-muted:#62745b;background:var(--trend-paper);border-color:var(--trend-line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 24px;padding:24px;border-radius:16px;color:var(--trend-dark)}
.trend-panel>:not(.trend-heading):not(.trend-tools){grid-column:1/-1}
.trend-panel .trend-heading{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;min-width:0}
.trend-heading #trend-coverage{order:0;font-size:12px;margin:0;color:var(--trend-muted)}
.trend-heading #trend-title{order:1;font-size:21px;line-height:1.4}
.trend-heading #trend-method{order:2;font-size:13px;line-height:1.7;margin:0;max-width:65ch;color:var(--trend-muted)}
.trend-panel .trend-tools{display:flex;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap;gap:8px;max-width:550px;align-self:start}
.trend-panel .segmented{background:#eef2e3;border:1px solid var(--trend-line);padding:4px;gap:3px;border-radius:12px}
.trend-panel .segmented button{min-height:44px;padding:8px 13px;font-size:13px;border:1px solid transparent;background:transparent;color:var(--trend-dark);border-radius:9px}
.trend-panel .segmented button[aria-pressed=true]{background:#dfea9e;border-color:#afc370;color:var(--trend-dark)}
.trend-panel .segmented button:hover{background:#e2eacb;color:var(--trend-dark)}
.trend-panel .segmented button[aria-pressed=true]:hover{background:#d4e38c}
.trend-metric-label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;color:var(--trend-muted)}
.trend-metric-label select{min-height:54px;min-width:178px;max-width:100%;border:1px solid var(--trend-line);border-radius:12px;background:var(--trend-paper);color:var(--trend-dark);font:inherit;font-size:13px;padding:8px 30px 8px 12px;caret-color:var(--trend-dark)}
.trend-summary{display:grid;grid-template-columns:150px 150px minmax(0,1fr);gap:20px;padding:0 0 16px;margin:24px 0 0;border-bottom:1px solid var(--trend-line)}
.trend-summary>div{min-width:0}.trend-summary>div:last-child{justify-self:end;max-width:320px}
.trend-summary span,.trend-summary small{display:block;font-size:12px;line-height:1.7;color:var(--trend-muted)}
.trend-summary strong{display:block;margin:2px 0;font-size:21px;font-weight:700;line-height:1.45;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:var(--trend-dark)}
.trend-summary>div:not(:last-child) small{color:var(--trend-green)}
.trend-summary>div:last-child strong{font-size:17px}
.trend-legend{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.8;margin:15px 0 10px;color:var(--trend-muted)}
.demo-badge{display:inline-flex;flex:none;padding:1px 7px;border:1px solid var(--trend-line);border-radius:4px;background:var(--trend-soft);color:var(--trend-dark);font-size:11px;font-weight:600;line-height:1.8}
#trend-chart{position:relative;margin:0}
#trend-chart svg{overflow:hidden}
#trend-chart .axis{fill:var(--trend-muted);font-size:12px}
#trend-chart .grid{stroke:var(--trend-line);stroke-width:1}
#trend-chart .curve{fill:none;stroke:var(--trend-green);stroke-width:2.5}
#trend-chart .point{fill:var(--trend-paper);stroke:#56732b;stroke-width:2.6}
#trend-chart .trend-bridge{fill:none;stroke:#8ba266;stroke-width:2.4;stroke-dasharray:5 5}
#trend-chart .missing-line{stroke:#b18b53;stroke-dasharray:3 7;stroke-width:1}
#trend-chart .trend-callout{pointer-events:none}
#trend-chart .trend-callout rect{fill:#edf3dd;stroke:var(--trend-line);stroke-width:1}
#trend-chart .trend-callout text{fill:var(--trend-dark);font-size:12px;font-weight:600}
#trend-chart .trend-callout circle{fill:var(--trend-paper);stroke:#56732b;stroke-width:2.6}
#trend-chart .chart-hit{fill:transparent;stroke:none;cursor:crosshair}
#trend-chart .chart-hit:focus-visible{outline:none;fill:#d6e4bc;fill-opacity:.16;stroke:var(--trend-green);stroke-width:1}
#trend-chart .trend-selection-guide{stroke:#8ba266;stroke-width:1;stroke-dasharray:4 4;pointer-events:none}
#trend-chart .trend-selected-mark{fill:#e0eca7;stroke:#56732b;stroke-width:2.5;pointer-events:none}
.trend-tooltip{position:absolute;top:0;z-index:2;pointer-events:none;width:220px;max-width:100%;padding:9px 12px;border:1px solid var(--trend-line);border-radius:9px;background:var(--trend-soft);color:var(--trend-dark);font-size:12px;line-height:1.7;font-variant-numeric:tabular-nums}
.trend-tooltip b,.trend-tooltip strong,.trend-tooltip span{display:block}.trend-tooltip span{color:var(--trend-muted);font-size:11px}.trend-tooltip[hidden]{display:none}
.trend-gap-status{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px}
.trend-gap-status button{min-height:44px;padding:6px 0;border:0;border-bottom:1px dashed var(--trend-line);border-radius:0;background:transparent;color:var(--trend-muted);font:inherit;font-size:12px;line-height:1.7;text-decoration:underline;text-underline-offset:4px}
.trend-gap-status button:hover{color:var(--trend-dark);border-bottom-color:var(--trend-green)}
.trend-panel .chart-readout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.2fr);gap:24px;border:1px solid var(--trend-line);border-radius:13px;background:var(--trend-soft);padding:16px;margin:8px 0 12px;min-height:112px;line-height:1.7;font-size:13px;color:var(--trend-dark);font-variant-numeric:tabular-nums}
.trend-selection-main,.trend-selection-context{min-width:0}.trend-selection-main h4{font-size:13px;line-height:1.6;margin:0 0 5px;font-weight:650}
.trend-detail-value{display:block;font-size:28px;line-height:1.3;margin:0 0 7px}.trend-detail-value small{font-size:14px;font-weight:400;margin-left:4px}
.trend-inline-state{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--trend-muted)}
.trend-selection-context p{font-size:12px;line-height:1.8;color:var(--trend-muted);margin:0}.trend-selection-context p+p{margin-top:5px}
.trend-state-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;font-size:11px;line-height:1.8;color:var(--trend-muted)}
.trend-state-item{display:inline-flex;align-items:center;gap:4px}
.trend-status-symbol{flex:none;vertical-align:middle}.trend-status-symbol circle,.trend-status-symbol rect{fill:none;stroke:#56732b;stroke-width:2}
.trend-status-symbol.missing rect{stroke:#ad7a2d}.trend-status-symbol.unknown circle{stroke:#7b846c;stroke-dasharray:2.5 2}.trend-status-symbol.no-live rect{stroke:#7b846c;fill:#e4e7de}
.trend-daily-details{border-top:1px solid var(--trend-line);margin-top:6px;background:transparent;padding:0}
.trend-daily-details>summary{min-height:44px;padding:9px 0;cursor:pointer;font-size:12px;color:var(--trend-dark);font-weight:600}
.trend-date-picker{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;padding:8px 0 12px}
.trend-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:58px;padding:6px 3px;border:1px solid var(--trend-line);border-radius:7px;background:var(--trend-paper);color:var(--trend-dark);font-variant-numeric:tabular-nums}
.trend-day span{font-size:12px;font-weight:650}.trend-day small{font-size:11px;line-height:1.5;color:var(--trend-muted)}.trend-day.is-missing{border-style:dashed}.trend-day[aria-pressed=true]{background:#e5edc3;border-color:#afc370}.trend-day:hover{border-color:var(--trend-green)}
.trend-boundary{font-size:11px!important;line-height:1.8;margin:5px 0 0!important;color:var(--trend-muted);max-width:none}
@media(max-width:1050px){.trend-panel{grid-template-columns:minmax(0,1fr)}.trend-panel .trend-tools{justify-content:flex-start;margin-top:15px;max-width:none}.trend-summary{margin-top:20px;grid-template-columns:140px 140px minmax(0,1fr)}.trend-date-picker{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:760px){.trend-panel{padding:18px 12px;gap:0}.trend-heading #trend-title{font-size:19px}.trend-heading #trend-method{font-size:12px}.trend-panel .trend-tools{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:10px;width:100%}.trend-panel .segmented button{padding:8px 10px;font-size:12px}.trend-metric-label{grid-column:1/-1;order:3;width:100%}.trend-metric-label select{width:100%;min-width:0;min-height:46px}.trend-summary{grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:20px;padding-bottom:14px}.trend-summary>div:last-child{grid-column:1/-1;justify-self:stretch;max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:baseline}.trend-summary>div:last-child small{grid-column:1/-1}.trend-summary strong{font-size:20px}.trend-summary>div:last-child strong{font-size:16px}.trend-legend{font-size:11px;gap:7px;margin-top:12px}.trend-panel .chart-readout{grid-template-columns:1fr;gap:12px;padding:13px;min-height:0}.trend-detail-value{font-size:26px}.trend-selection-context{border-top:1px solid var(--trend-line);padding-top:11px}.trend-state-legend{gap:5px 12px}.trend-gap-status{gap:2px 12px}.trend-gap-status button{font-size:11px;min-height:44px}.trend-date-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.trend-tooltip{width:204px;font-size:11px}.trend-boundary{font-size:11px!important}}