/* The trends app on top of Searchscape's layout (app.css): softer cards on a faint chart-paper grid,
   a wordmark with a rising line, and the trends report. Colours come from tokens.css. */
:root {
  --line: oklch(52% 0.14 160);          /* the 3-month average, one series per chart */
  --line-area: oklch(52% 0.14 160 / 0.12);
  --fast: oklch(62% 0.15 60);           /* the "doubled" badge, with its label */
  --grid: oklch(23% 0.035 258 / 0.045);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --line: oklch(78% 0.15 158); --line-area: oklch(78% 0.15 158 / 0.14); --fast: oklch(80% 0.13 70); --grid: oklch(96% 0.01 165 / 0.05); }
}
:root[data-theme="dark"] { --line: oklch(78% 0.15 158); --line-area: oklch(78% 0.15 158 / 0.14); --fast: oklch(80% 0.13 70); --grid: oklch(96% 0.01 165 / 0.05); }

body {
  background-color: var(--color-paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
.diecut { border: 1px solid var(--color-rule); border-radius: 16px; box-shadow: 0 1px 0 var(--color-rule), 0 18px 40px -24px var(--color-shadow); }
.primary { box-shadow: 0 10px 24px -14px var(--color-shadow); }
.primary:active:not(:disabled) { translate: 0 1px; box-shadow: none; }
.primary:disabled { box-shadow: none; }
.done-list { rotate: none; }
.top { border-bottom: 1px solid var(--color-rule); background: color-mix(in oklch, var(--color-paper) 85%, transparent); backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-lg); font-weight: 700; }
.brand::before { content: ""; width: 28px; height: 20px; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2 17 L9 11 L14 13 L25 3' fill='none' stroke='%2318a06a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 3 H25 V9' fill='none' stroke='%2318a06a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.intro h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 16ch; letter-spacing: -0.02em; }
.phrase .count { white-space: nowrap; }

/* The report: one section per topic, a card per trend with its line */
.report { margin-top: var(--space-xl); display: grid; gap: var(--space-2xl); }
.report-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.report-note { color: var(--color-muted); font-size: var(--text-sm); max-width: 60ch; }
.topic-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.topic-nav a { font-size: var(--text-sm); font-weight: 700; text-decoration: none; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-rule); background: var(--color-card); }
.topic-nav a:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }
.topic h2 { font-size: var(--text-2xl); max-width: none; }
.topic > p { color: var(--color-ink-2); margin-top: var(--space-2xs); max-width: 70ch; }
.topic small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); margin-left: var(--space-xs); letter-spacing: 0; }
.cards { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--space-md); }
.trend { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.trend-term { font-weight: 700; font-size: var(--text-md); line-height: 1.3; overflow-wrap: anywhere; }
.trend-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.trend-meta .up { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; padding: 1px var(--space-xs); border-radius: var(--radius-pill); color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--fast); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fast); }
.trend-explain { font-size: var(--text-sm); color: var(--color-ink-2); }
.trend-variants { font-size: var(--text-xs); color: var(--color-muted); }
.chart { position: relative; margin-top: auto; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .area { fill: var(--line-area); }
.chart .ln { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .base { stroke: var(--color-rule); stroke-width: 1; }
.chart .yr { fill: var(--color-muted); font-size: 10px; font-family: var(--font-body); }
.chart .hair { stroke: var(--color-ink); stroke-width: 1; stroke-dasharray: 2 2; }
.chart .dot { fill: var(--line); stroke: var(--color-card); stroke-width: 2; }
.tip { position: absolute; top: -6px; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap; font-size: var(--text-xs); font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--color-fill-ink); color: var(--color-white); }
.more { margin-top: var(--space-md); }
.more summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); }
.more ul { margin: var(--space-xs) 0 0; padding-left: 1.2em; columns: 2 16rem; font-size: var(--text-sm); }
.table-toggle { font-size: var(--text-sm); }
.how-trend { padding: var(--space-lg); }
.how-trend h2 { font-size: var(--text-lg); }
.how-trend p { margin-top: var(--space-2xs); color: var(--color-ink-2); }