/* app/trends · "Trends over time", rebuilt to Figma "App · Trends over time —
   Desktop (v2)" (1633:788, 2026-10-09) in the site's own language: the navy
   hero card with the aurora film (testing explore heroes), a glass dial for
   today, a bar chart you can tap, worst week against best, the four inputs,
   what sits alongside, and the aurora close (kit/rf.css .rf-end). Scoped to
   body.rf. No grey-blue (#a9b5d9) on any heading or eyebrow (v2 rule): on
   ink they take --tr-on-ink. */
.rf .tr {
  --tr-on-ink: #8fb8ea;
  --tr-bar: #d3dcf1;
  --tr-bar-hover: #b9c7e8;
  --tr-up-bg: #e3f5ea; --tr-up: #17703d;
  --tr-down-bg: #fbe8e6; --tr-down: #a3302a;
  --tr-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- 1 · hero -------------------------------------------------------------- */
.rf .tr-hero { padding: clamp(16px, 2vw, 28px) 0 clamp(8px, 1vw, 16px); }
.rf .tr-hero-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 80px);
  padding: clamp(44px, 6vw, 92px) clamp(28px, 6vw, 88px);
  border-radius: clamp(24px, 2.6vw, 36px); background: var(--rf-navy); color: #fff;
  /* The film is its own layer; clip it to the corners as well. */
  clip-path: inset(0 round clamp(24px, 2.6vw, 36px));
}
.rf .tr-hero-film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* The film lights the right, behind the dial; the words sit on deep navy. */
.rf .tr-hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(10, 30, 87, .96) 0%, rgba(10, 30, 87, .86) 46%, rgba(10, 30, 87, .38) 100%);
}
.rf .tr-kicker { margin: 0 0 18px; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--tr-on-ink); }
.rf .tr-hero-h {
  margin: 0; color: #fff;
  font-size: clamp(42px, 5.4vw, 80px); line-height: 1.02; font-weight: 600; letter-spacing: -0.03em;
}
.rf .tr-hero-h > span { display: block; }
.rf .tr-hero-lede { margin: 24px 0 0; max-width: 58ch; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, .82); }

/* Today's dial: a glass card on the film, the ring drawn to 78 of 100. */
.rf .tr-dial {
  position: relative; display: grid; justify-items: center; gap: 4px;
  width: clamp(220px, 20vw, 280px); padding: 34px 28px 30px; border-radius: 28px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}
.rf .tr-dial-ring { position: absolute; top: 22px; left: 50%; width: 156px; height: 156px; translate: -50% 0; rotate: -90deg; }
.rf .tr-dial-track, .rf .tr-dial-arc { fill: none; stroke-width: 6; }
.rf .tr-dial-track { stroke: rgba(255, 255, 255, .14); }
.rf .tr-dial-arc {
  stroke: #fff; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--tr-dial, 78));
  transition: stroke-dashoffset 1.6s var(--tr-ease);
}
.rf .tr-dial.is-ready .tr-dial-arc { stroke-dashoffset: 100; transition: none; }
.rf .tr-dial-n {
  display: grid; place-items: center; width: 156px; height: 156px; margin: -12px 0 6px;
  font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.rf .tr-dial-k { margin: 0 0 10px; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-on-ink); }
.rf .tr-dial .tr-chip.is-up { background: rgba(93, 220, 138, .16); color: #7be3a1; }

/* ---- section rhythm ---------------------------------------------------------- */
.rf .tr-sec { position: relative; padding-block: clamp(56px, 6vw, 96px) 0; }
.rf .tr-along-sec { padding-bottom: clamp(56px, 6vw, 96px); }
.rf .tr-head { margin-bottom: clamp(24px, 2.6vw, 40px); }
.rf .tr-head .rf-solid { font-size: clamp(32px, 3.6vw, 52px); }
.rf .tr-sub { margin: 12px 0 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; color: var(--rf-ink-2); }

.rf .tr-chip {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0;
  padding: 6px 12px; border-radius: 99px; font-size: 13px; line-height: 1.2; font-weight: 600;
}
.rf .tr-chip.is-up { background: var(--tr-up-bg); color: var(--tr-up); }
.rf .tr-chip.is-down { background: var(--tr-down-bg); color: var(--tr-down); }

/* ---- 2 · eight weeks ------------------------------------------------------------ */
.rf .tr-chart { padding: clamp(24px, 3vw, 40px); border-radius: var(--rf-r-lg); background: var(--rf-sunk); }
.rf .tr-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); align-items: end; }
.rf .tr-bar {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; height: 280px;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--rf-ink-2);
  -webkit-tap-highlight-color: transparent;
}
.rf .tr-bar-n { font-size: 14px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .25s; }
.rf .tr-bar-col {
  flex: none; width: 100%; height: calc(var(--v) * 2.6px);
  border-radius: 12px; background: var(--tr-bar);
  transform-origin: 50% 100%; transition: background .25s, transform .9s var(--tr-ease);
  transition-delay: 0s, calc(var(--i, 0) * 60ms);
}
.rf .tr-bar-w {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px;
  font-size: 13px; font-weight: 600; transition: background .25s, color .25s;
}
.rf .tr-bar:hover .tr-bar-col { background: var(--tr-bar-hover); }
.rf .tr-bar:focus-visible { outline: none; }
.rf .tr-bar:focus-visible .tr-bar-col { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
.rf .tr-bar.is-on .tr-bar-n { color: var(--rf-navy); }
.rf .tr-bar.is-on .tr-bar-col { background: var(--rf-navy); }
.rf .tr-bar.is-on .tr-bar-w { background: var(--rf-navy); color: #fff; }
/* Bars rise when the chart comes into view (trends.js adds .is-in). */
.rf .tr-chart.is-waiting .tr-bar-col { transform: scaleY(0); }

.rf .tr-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px;
  margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; background: #fff;
  box-shadow: 0 1px 0 var(--rf-rule), 0 24px 50px -36px rgba(10, 30, 87, .35);
}
.rf .tr-detail-k { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-accent); }
.rf .tr-detail-t { margin: 8px 0 0; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--rf-ink); }
.rf .tr-detail-d { margin: 10px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--rf-ink-2); }
.rf .tr-detail-d[hidden], .rf .tr-stats[hidden] { display: none; }
.rf .tr-stats { display: grid; grid-template-columns: repeat(4, minmax(84px, auto)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.rf .tr-stats li { display: grid; justify-items: center; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--rf-soft); }
.rf .tr-stats b { font-size: 19px; line-height: 1.1; font-weight: 600; color: var(--rf-navy); font-variant-numeric: tabular-nums; }
.rf .tr-stats span { font-size: 13px; line-height: 1.2; color: var(--rf-ink-2); }
.rf .tr-detail.is-swap .tr-detail-copy, .rf .tr-detail.is-swap .tr-stats { opacity: 0; translate: 0 6px; }
.rf .tr-detail-copy, .rf .tr-stats { transition: opacity .3s, translate .3s var(--tr-ease); }

/* ---- 3 · worst week against best ------------------------------------------------- */
.rf .tr-vs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rf .tr-wk { padding: clamp(26px, 3vw, 40px); border-radius: var(--rf-r-lg); background: var(--rf-sunk); color: var(--rf-ink); }
/* Room on the seam for the gap badge. */
.rf .tr-wk:not(.is-best) { padding-right: calc(clamp(26px, 3vw, 40px) + 28px); }
.rf .tr-wk.is-best { padding-left: calc(clamp(26px, 3vw, 40px) + 28px); }
.rf .tr-wk.is-best {
  color: #fff;
  background: radial-gradient(90% 120% at 85% 0%, var(--rf-navy-2) 0%, var(--rf-navy) 55%, #071641 100%);
}
.rf .tr-wk-k { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-ink-2); }
.rf .tr-wk.is-best .tr-wk-k, .rf .tr-wk.is-best .tr-wk-s { color: var(--tr-on-ink); }
.rf .tr-wk-t { margin: 8px 0 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.rf .tr-wk-s { margin: 6px 0 22px; font-size: 16px; color: var(--rf-ink-2); }
.rf .tr-wk-rows { margin: 0; }
.rf .tr-wk-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rf-rule); font-size: 16px; line-height: 1.35; }
.rf .tr-wk.is-best .tr-wk-rows div { border-top-color: rgba(255, 255, 255, .14); }
.rf .tr-wk-rows dt { color: var(--rf-ink-2); }
.rf .tr-wk.is-best .tr-wk-rows dt { color: rgba(255, 255, 255, .72); }
.rf .tr-wk-rows dd { margin: 0; font-weight: 600; text-align: right; }
/* The gap between them, on the seam at the height of the two scores, where
   neither card has words near the middle. */
.rf .tr-vs-gap {
  position: absolute; top: clamp(78px, 7.6vw, 104px); left: 50%; z-index: 1; translate: -50% -50%;
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0; border-radius: 50%;
  background: #fff; color: var(--rf-navy); box-shadow: 0 0 0 8px #fff, 0 18px 40px -16px rgba(10, 30, 87, .45);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}

/* ---- 4 · what moves it ------------------------------------------------------------ */
.rf .tr-moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rf .tr-move {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.2vw, 30px);
  border-radius: 22px; background: var(--rf-sunk); transition: background .3s, translate .4s var(--tr-ease);
}
.rf .tr-move:hover { translate: 0 -3px; background: var(--rf-soft); }
.rf .tr-move-ic, .rf .tr-al-ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px;
  background: #fff; color: var(--rf-navy);
}
.rf .tr-move-ic svg, .rf .tr-al-ic svg { width: 22px; height: 22px; }
.rf .tr-move h3, .rf .tr-al h3 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--rf-ink); }
.rf .tr-move p, .rf .tr-al p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--rf-ink-2); }
.rf .tr-move .tr-chip { margin-top: auto; }

/* ---- 5 · tracked alongside ---------------------------------------------------------- */
.rf .tr-along { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rf .tr-al { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.2vw, 30px); border-radius: 22px; background: var(--rf-soft); }
.rf .tr-al h3 { color: var(--rf-navy); }
.rf .tr-al p { color: var(--rf-ink); }

/* ---- 6 · close: the second button sits on the film as glass ------------------------ */
.rf .tr-end .rf-actions .btn:not(.ghost) { background: #fff; color: var(--rf-navy) !important; }
.rf .tr-end .rf-actions .btn.ghost {
  background: rgba(255, 255, 255, .1); color: #fff !important; border: 1px solid rgba(255, 255, 255, .4);
}
.rf .tr-end .rf-actions .btn.ghost:hover { background: rgba(255, 255, 255, .2); }

/* ---- smaller screens ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .rf .tr-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf .tr-detail { grid-template-columns: minmax(0, 1fr); }
  .rf .tr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rf .tr-hero-card { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .rf .tr-hero-scrim { background: linear-gradient(180deg, rgba(10, 30, 87, .94) 0%, rgba(10, 30, 87, .82) 60%, rgba(10, 30, 87, .55) 100%); }
  .rf .tr-dial { justify-self: stretch; width: auto; }
  .rf .tr-bar { height: 200px; gap: 8px; }
  .rf .tr-bar-col { height: calc(var(--v) * 1.9px); border-radius: 8px; }
  .rf .tr-bar-n { font-size: 12px; }
  .rf .tr-bar-w { height: 24px; padding: 0 7px; font-size: 11px; }
  .rf .tr-chart { padding: 18px 14px; }
  .rf .tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf .tr-vs { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .rf .tr-vs-gap { top: 50%; }
  .rf .tr-wk:not(.is-best), .rf .tr-wk.is-best { padding-inline: clamp(26px, 3vw, 40px); }
  .rf .tr-moves, .rf .tr-along { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rf .tr-bar-col, .rf .tr-dial-arc, .rf .tr-move, .rf .tr-detail-copy, .rf .tr-stats { transition: none; }
  .rf .tr-chart.is-waiting .tr-bar-col { transform: none; }
}