/*
 * Stockpicker — shared design tokens and components ("Fintech Precision").
 * Applied to every server-rendered page (including /login). Loaded once per
 * request as a plain <link>, no build step (AD-12).
 *
 * Class names below intentionally match the markup already emitted by
 * LeaderboardController/FullListController/WatchlistController/
 * StockDetailController/InfoController/AuthController byte-for-byte — only
 * this stylesheet changed, not their PHP-generated hrefs or class names, so
 * the existing HTTP/unit test suite (which asserts exact hrefs and class
 * strings) keeps passing unchanged.
 */

/* -- Fonts (self-hosted, latin subset only — covers å/ä/ö) ---------------- */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* -- Tokens ---------------------------------------------------------------- */

:root {
  /* Color */
  --bg-app: #F2F4F5;
  --bg-surface: #FFFFFF;
  --text-primary: #152126;
  --text-secondary: #526168;
  --text-muted: #68777E;
  --border: #D8DEE1;
  --accent: #146C94;
  --accent-tint: #E7F2F7;
  --positive: #0B7F52;
  --positive-tint: #E7F6F0;
  --negative: #C93832;
  --negative-tint: #FBEDEC;
  /* Darkened from the handbook's #A86100 (4.36:1 against --spike-tint,
     under WCAG AA's 4.5:1 for .badge--spike's 11px/600 text -- P2 contrast
     QA pass, design handbook §13); #8C5100 measures 5.79:1. */
  --spike: #8C5100;
  --spike-tint: #FFF3D8;
  --neutral: #68777E;
  --neutral-tint: #E8ECEE;
  --star-filled: #A86100;
  --star-empty: #B7C0C4;

  /* Type */
  --font-heading: 'Sora', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* 4pt spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radius: small elements / controls / panels */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* -- Reset & base ------------------------------------------------------------ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
h1 { font-size: 24px; line-height: 30px; margin: var(--sp-1) 0 2px; }
h2 { font-size: 20px; line-height: 28px; margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Numeric/mono values: owner counts, deltas, percentages, axis ticks */
.stat,
.delta-chip,
.period-pct-value,
.y-axis-tick,
.legend-swatch + * {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Visible focus ring everywhere (P0) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* -- Page shell -------------------------------------------------------------- */

.page { max-width: 720px; margin: 0 auto; padding: var(--sp-4); }

/* -- Product navigation + wordmark ------------------------------------------- */

.nav-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}
.wordmark {
  display: inline-flex; align-items: center;
}
.wordmark-logo {
  display: block; height: 22px; width: auto;
}

/* -- Segmented controls (källa, period) + product nav share this pill look -- */

.tab-bar, .source-switcher, .range-picker {
  display: inline-flex; background: var(--neutral-tint); border-radius: var(--radius-md);
  padding: 3px; gap: 2px; flex-wrap: wrap;
}
.tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm); text-decoration: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.tab-bar .tab--active, .source-switcher .tab--active {
  background: var(--text-primary); color: var(--bg-surface);
}
.range-picker .tab--active {
  background: var(--bg-surface); color: var(--accent);
  box-shadow: 0 1px 2px rgba(21,33,38,0.12);
}

/* -- Sortering / ranking: kept as anchor-based two-way toggles (see docs/
   lovable-ux-review-brief.md §"avsiktliga avvikelser") but visually
   downgraded relative to källa/period so they read as a lighter-weight
   choice, not another identical segmented control. -- */
.ranking-toggle, .sort-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.ranking-toggle .tab, .sort-toggle .tab {
  border-radius: 0; min-height: 32px;
}
/* The container's own overflow:hidden (above, for the rounded corners)
   clips a focus ring drawn outside the element's box -- inverting the
   offset keeps it fully visible inside the container instead of reducing
   to an all-but-invisible sliver at the shared edge between two tabs
   (P2 keyboard-order QA pass, design handbook §13). */
.ranking-toggle .tab:focus-visible, .sort-toggle .tab:focus-visible {
  outline-offset: -2px;
}
.ranking-toggle .tab--active, .sort-toggle .tab--active {
  background: var(--accent-tint); color: var(--accent);
}

.ranking-toggle { max-width: 100%; flex-wrap: wrap; }

/* -- Period row + market row (spec-stadig-tillvaxt-period,
   spec-topplista-market-filter): Topplista header rows 2 and 3, rendered
   in every mode. Each its own full-width line under .controls, left-aligned
   with the source switcher: the shared .range-picker pill (same look and
   32px tap targets as Aktiedetalj's Range picker); right of the period
   pill sits Flest ägare's muted note (when present) and then one
   .period-extras slot — a fixed two-row, right-aligned stack
   (spec-topplista-filter-toggle-badge-color) reusing the Fullständig
   lista .filter-toggle checkbox chip for "Dölj spikar"/"Dölj blankade"
   instead of the old plain-text .spike-toggle links. Wraps (segments
   within the pill, then the note/slot) on a narrow viewport rather than
   scrolling. The negative top margin collapses with the previous block's
   sp-4 bottom margin to an sp-2 gap. -- */
.period-row, .market-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: var(--sp-2) var(--sp-4);
  margin: calc(var(--sp-2) - var(--sp-4)) 0 var(--sp-4);
  max-width: 100%;
}

/* Flest ägare: the period doesn't apply — greyed out, inert <span>
   segments, remembered period still marked (muted), plus a muted note. */
.period-row--muted .range-picker .tab { color: var(--text-muted); font-weight: 500; cursor: default; }
.period-row--muted .range-picker .tab--active {
  background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border);
}
.period-note { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* The period pill's right-hand slot: exactly two fixed, right-aligned rows
   (never greyed by the muted rules above, which target only
   `.range-picker .tab`) so "Dölj blankade" sits in the same row 2 position
   in every ranking mode. Row 1 holds the spike .filter-toggle in Plusdagar
   or is rendered empty (aria-hidden) in Flest ägare/Stadig tillväxt — still
   reserving its min-height so row 2 never shifts up. Row 2 always holds
   the short .filter-toggle. flex-basis 0 + min-width 0 so the slot never
   wraps onto a line of its own (that would push the market row lower than
   in the other modes). */
.period-extras {
  flex: 1 1 0; min-width: 0; line-height: 1.25;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1);
}
.period-extras-row { display: flex; align-items: center; min-height: 32px; }

.market-filter {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  background: var(--neutral-tint); border-radius: var(--radius-md); padding: 3px;
}

/* -- Page header --------------------------------------------------------- */

.page-header { margin-bottom: var(--sp-4); }
.subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--sp-4); }
.controls { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* -- Search field ---------------------------------------------------------- */

.search-form { display: flex; gap: var(--sp-2); }
.search-form input[type="text"] {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  border: 1px solid var(--border); font-family: var(--font-body); font-size: 13px;
  background: var(--bg-surface); color: var(--text-primary);
}
.search-form input[type="text"]::placeholder { color: var(--text-muted); }
.search-form button, .sort-form button {
  min-height: 40px; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); border: none;
  background: var(--accent); color: #fff; font-family: var(--font-body);
  font-size: 13px; font-weight: 600; cursor: pointer;
}

/* -- Filter toggles: compact checkbox-style controls, not pills ----------- */

.filter-toggles { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 6px var(--sp-3);
  border-radius: var(--radius-md); border: 1px solid var(--border);
  text-decoration: none; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: var(--bg-surface);
}
.filter-toggle::before {
  content: ""; width: 12px; height: 12px; border-radius: 3px;
  border: 1.5px solid var(--text-muted); flex: 0 0 auto;
}
.filter-toggle--active {
  border-color: var(--accent); color: var(--accent); font-weight: 600;
  background: var(--accent-tint);
}
.filter-toggle--active::before {
  content: "✓"; border-color: var(--accent); background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
}

/* -- Instrument list ------------------------------------------------------- */

.rows { display: flex; flex-direction: column; gap: var(--sp-2); }

.row-head {
  display: none; /* shown ≥900px, see breakpoint block */
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  /* text-secondary, not text-muted: this sits directly on --bg-app (no card
     behind it), where text-muted's contrast ratio falls under WCAG AA's
     4.5:1 for text this size (measured 4.20:1) -- found during the P2
     contrast QA pass, design handbook §13. */
  color: var(--text-secondary); padding: 0 var(--sp-3);
}
.row-head .col { display: flex; align-items: center; }

.row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-2) var(--sp-3);
}
.rank {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-muted);
  width: 1.5em; text-align: center;
}
.star {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: var(--sp-2); min-width: 44px; min-height: 44px;
  border-radius: var(--radius-sm);
}
.star--filled { color: var(--star-filled); }
.star--empty { color: var(--star-empty); }
.row-body {
  display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
.namecol { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.name {
  display: block; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  border-radius: var(--radius-sm); padding: 2px 6px; white-space: nowrap;
}
.badge--streak { background: var(--accent-tint); color: var(--accent); }
.badge--spike { background: var(--spike-tint); color: var(--spike); }
/* text-secondary, not text-muted: 3.90:1 against --neutral-tint measured
   below WCAG AA's 4.5:1 (P2 contrast QA pass, design handbook §13). */
.badge--nohist { background: var(--neutral-tint); color: var(--text-secondary); }
/* Plusdagar "16/18 · +1 035" chip: same quiet grey as "flat", mono digits. */
.badge--plusdays {
  font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums;
  white-space: normal; max-width: 100%;
}
.plusdays-part { white-space: nowrap; }
/* "Blankad 15,8 %" — its own red rule (spec-topplista-filter-toggle-badge-color):
   short interest used to share .badge--nohist's quiet grey and got lost
   among the other neutral chips in the Topplista header. */
.badge--short { background: var(--negative-tint); color: var(--negative); }
.trend {
  flex: 0 0 auto; width: 52px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px;
}
.sparkline { width: 52px; height: 22px; }
.sparkline--empty { width: 52px; height: 22px; display: inline-block; }
.sparkline-label {
  font-size: 10px; color: var(--text-muted); white-space: normal;
  overflow-wrap: break-word; max-width: 52px; line-height: 1.3;
}
.sparkline-line--positive { fill: none; stroke: var(--positive); stroke-width: 2px; }
.sparkline-line--negative { fill: none; stroke: var(--negative); stroke-width: 2px; }
.sparkline-line--neutral { fill: none; stroke: var(--accent); stroke-width: 2px; }
.sparkline-line--spike { fill: none; stroke: var(--spike); stroke-width: 2px; }
.sparkline-line--nohistory { fill: none; stroke: var(--text-muted); stroke-width: 2px; stroke-dasharray: 2 3; }
.statcol { text-align: right; flex-shrink: 0; width: 100px; }
.stat {
  display: block; font-size: 14px; white-space: normal;
  overflow-wrap: break-word; line-height: 1.25; color: var(--text-primary);
}
.stat-line { display: block; white-space: nowrap; }
.stat-src { font-size: 11px; color: var(--text-secondary); }
.delta-chip {
  display: inline-block; margin-top: 3px;
  font-size: 11px; border-radius: var(--radius-sm); padding: 2px 6px;
  white-space: nowrap;
}
.delta-chip--positive { background: var(--positive-tint); color: var(--positive); }
.delta-chip--negative { background: var(--negative-tint); color: var(--negative); }
.delta-chip--neutral { background: var(--neutral-tint); color: var(--text-secondary); }
.period-pcts {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-2); margin-top: 2px; border-top: 1px solid var(--border);
}
.period-pct { display: flex; flex-direction: column; gap: 1px; }
.period-pct-label {
  font-family: var(--font-body); font-size: 10px; font-weight: 600; color: var(--text-muted);
}
.period-pct-value { font-size: 12px; }
.period-pct--positive .period-pct-value { color: var(--positive); }
.period-pct--negative .period-pct-value { color: var(--negative); }
.period-pct--neutral .period-pct-value { color: var(--text-secondary); }
.period-pct--nohist .period-pct-value { color: var(--text-muted); }

.results-summary {
  font-size: 12.5px; color: var(--text-secondary); margin: 0 0 var(--sp-2);
}
.results-summary a { color: var(--accent); font-weight: 600; text-decoration: none; }
.empty-state { color: var(--text-secondary); font-size: 13.5px; }
.empty-state a { color: var(--accent); font-weight: 600; }
.full-list-link { text-align: center; margin: var(--sp-4) 0 4px; }
.full-list-link a { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.info-link { text-align: center; margin: 4px 0 0; }
.info-link a { color: var(--text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; }

/* -- Star error toast (P0: aria-live feedback on a failed toggle) --------- */

.wl-toast {
  position: fixed; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  background: var(--text-primary); color: #fff; font-size: 13px; font-weight: 500;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(21,33,38,0.24);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
  max-width: calc(100vw - 32px); text-align: center; z-index: 100;
}
.wl-toast.is-visible { opacity: 1; }

/* -- Stock detail ----------------------------------------------------------- */

.stock-header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.stock-header h1 { font-size: 20px; line-height: 26px; flex: 1 1 auto; min-width: 4em; }
.avanza-link {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; padding: var(--sp-2) 0; white-space: nowrap;
}
.chart-area {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
}
.trend-plot { display: flex; align-items: stretch; gap: 6px; }
.y-axis { position: relative; flex: 0 0 34px; width: 34px; height: 220px; }
.y-axis-tick {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 10px; color: var(--text-muted); white-space: nowrap;
}
.trend-overlay { width: 100%; height: 220px; flex: 1 1 auto; min-width: 0; }
.trend-line { fill: none; stroke-width: 2.5px; }
.trend-line--positive { stroke: var(--positive); }
.trend-line--negative { stroke: var(--negative); }
.trend-line--neutral { stroke: var(--accent); }
.trend-line--spike { stroke: var(--spike); }
.trend-line--nohistory { stroke: var(--text-muted); stroke-dasharray: 2 3; }
.trend-line--secondary { stroke: var(--text-secondary); stroke-width: 2px; stroke-dasharray: 4 4; }
.legend { display: flex; gap: var(--sp-4); margin: var(--sp-2) 0 0; font-size: 12px; color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.legend-swatch--primary { background: var(--accent); }
.legend-swatch--secondary { background: var(--text-secondary); }
.legend-item--nodata { color: var(--text-muted); font-style: italic; }

/* -- Information page -------------------------------------------------------- */

.content { display: flex; flex-direction: column; gap: var(--sp-4); }
section {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
}
.symbol-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.symbol-list li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
}
.symbol-example {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  min-width: 64px;
}
.symbol-example--trend { flex-direction: column; align-items: flex-start; gap: 2px; }
.symbol-example .star { padding: 0; min-width: 0; min-height: 0; cursor: default; }
.symbol-text { flex: 1 1 auto; min-width: 0; }

/* -- Login -------------------------------------------------------------------- */

.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.auth-card {
  width: 100%; max-width: 360px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
}
.auth-card .wordmark { justify-content: center; margin-bottom: var(--sp-4); }
.auth-card h1 { font-size: 20px; text-align: center; margin-bottom: var(--sp-1); }
.auth-card .subtitle { text-align: center; margin-bottom: var(--sp-5); }
.field { display: block; margin-bottom: var(--sp-4); }
.field span {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 6px;
}
.field input {
  display: block; width: 100%; min-height: 44px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  border: 1px solid var(--border); font-family: var(--font-body); font-size: 14px;
  background: var(--bg-surface); color: var(--text-primary);
}
.auth-card button {
  width: 100%; min-height: 44px; margin-top: var(--sp-2);
  border-radius: var(--radius-md); border: none;
  background: var(--accent); color: #fff; font-family: var(--font-body);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.error {
  background: var(--negative-tint); color: var(--negative);
  border-radius: var(--radius-md); padding: var(--sp-3);
  font-size: 13px; font-weight: 500; margin: 0 0 var(--sp-4);
}

/* -- Breakpoints ------------------------------------------------------------- */

/* <700px: tighter ranking tabs so the three modes fit a 390px viewport on
   one line; .ranking-toggle wraps as a last resort rather than clipping. */
@media (max-width: 699px) {
  .ranking-toggle .tab { padding: var(--sp-1) var(--sp-2); }
}

/* 700–899px: two-column control row. Data rows stay the same wrapping card
   shape as mobile (real column alignment needs the grid at 900px — forcing
   a single line here at this width just clips company names). */
@media (min-width: 700px) {
  .controls { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}

/* ≥900px: real column-aligned table via CSS grid. .row-body/.statcol unwrap
   with display:contents so namecol/trend/stat/delta-chip become direct grid
   items of .row, lining up under .row-head's column labels. */
@media (min-width: 900px) {
  .page { max-width: 960px; box-shadow: 0 12px 32px rgba(21,33,38,0.08); border-radius: var(--radius-lg); background: var(--bg-app); }

  .row-head { display: grid; align-items: center; column-gap: var(--sp-3); }
  .rows .row-head, .rows .row { grid-template-columns: 44px minmax(0,1fr) 130px 100px 110px; }
  /* Last column holds four period chips (Vecka/Månad/3 mån/År) —
     spec-calendar-period-metrics widened it from 220px. */
  .rows.rows--ranked .row-head, .rows.rows--ranked .row { grid-template-columns: 32px 44px minmax(0,1fr) 130px 100px 110px 260px; }

  .row { display: grid; column-gap: var(--sp-3); row-gap: 0; }
  .row-body, .statcol { display: contents; }
  .period-pcts { border-top: none; padding-top: 0; margin-top: 0; flex-basis: auto; gap: var(--sp-3); }
  .statcol { text-align: right; }

  .trend { width: 130px; }
  .rows .sparkline, .rows .sparkline--empty { width: 130px; height: 30px; }
  .rows .sparkline-label { max-width: 130px; }
}

@media (min-width: 1200px) {
  .page { max-width: 1152px; }
}