/* Trends page (/trends). Source: docs/design/Trends.dc.html. Classes prefixed tr-. */

.tr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.tr-weeknav { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.tr-weeknav a { color: inherit; white-space: nowrap; }
.tr-weeknav a:hover { color: var(--mint); }
.tr-h1 { margin: 12px 0 36px; max-width: 20ch; line-height: 1.02; }
.tr-h1 .mint { color: var(--mint); }
.tr-sub { color: var(--dim); max-width: 56ch; margin: -20px 0 36px; }

.tr-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.tr-left { display: grid; gap: 24px; align-content: start; }
.tr-right { display: grid; gap: 12px; align-content: start; }

.tr-panel-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--mute); margin-bottom: 8px;
}
.tr-panel-head > :first-child { letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.tr-panel-head.is-volume { margin-bottom: 16px; }

/* movers */
.tr-mover {
  display: grid; grid-template-columns: minmax(140px, 260px) minmax(60px, 1fr) 64px; gap: 16px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.tr-mover-label { font-weight: 600; font-size: 15px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.tr-track { position: relative; height: 18px; background: rgba(236, 238, 246, .06); border-radius: 4px; }
.tr-fill { position: absolute; left: 0; top: 0; height: 18px; border-radius: 4px; background: var(--slate-bar); }
.tr-fill.is-up { background: var(--mint); }
.tr-fill.is-hot { box-shadow: 0 0 14px rgba(142, 240, 210, .5); }
.tr-tick { position: absolute; top: -4px; width: 2px; height: 26px; background: var(--text); margin-left: -1px; }
.tr-mult { font-family: var(--font-mono); font-weight: 700; font-size: 18px; text-align: right; color: var(--mute); }
.tr-mult.is-up { color: var(--mint); }

/* volume */
.tr-cols { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 160px; }
.tr-col { background: var(--slate-bar); border-radius: 4px 4px 0 0; transform-origin: bottom; animation: wt-grow .8s var(--ease) both; min-height: 0; }
.tr-col.is-weekend { background: var(--slate-dim); }
.tr-col.is-last { background: var(--mint); box-shadow: 0 0 16px rgba(142, 240, 210, .5); }
.tr-col.is-hidden { height: 100%; background: repeating-linear-gradient(135deg, rgba(236, 238, 246, .05) 0 3px, transparent 3px 8px); box-shadow: none; animation: none; }
.tr-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-top: 8px; }
.tr-days span { min-width: 0; overflow: hidden; }
.tr-vol-note { font-size: 13px; color: var(--mute); margin-top: 12px; }

/* most delegated */
.tr-side { padding: 22px; }
.tr-side-head { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.tr-top {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 52px 52px; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--line); font-size: 14px; align-items: start;
}
.tr-top-rank { font-family: var(--font-mono); color: var(--mute); font-size: 12px; padding-top: 2px; }
.tr-top-label { line-height: 1.3; }
.tr-top-n { font-family: var(--font-mono); font-size: 13px; }
.tr-top-delta { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--mute); }
.tr-top-delta.is-up { color: var(--mint); }

/* black friday watch */
.tr-watch { padding: 22px; }
.tr-watch-num { font-family: var(--font-mono); font-weight: 700; font-size: 40px; letter-spacing: -0.04em; line-height: 1; margin: 10px 0 8px; }
.tr-watch-copy { font-size: 14px; color: var(--dim); }

/* how we count */
.tr-how { padding: 8px 6px; font-size: 14px; color: var(--dim); display: grid; gap: 8px; }
.tr-how strong { color: var(--text); }

/* empty states inside panels */
.tr-panel .empty { padding: 28px 20px; margin-top: 8px; }
.tr-panel .empty-title { font-size: 17px; }

@media (max-width: 760px) {
  .tr-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-h1 { margin-bottom: 28px; }
  .tr-sub { margin: -12px 0 28px; }
  .tr-mover { grid-template-columns: minmax(110px, 1.3fr) minmax(40px, 1fr) 54px; gap: 10px; }
  .tr-mover-label { font-size: 14px; }
  .tr-mult { font-size: 16px; }
  .tr-cols { height: 120px; gap: 4px; }
  .tr-days { gap: 4px; font-size: 10px; }
  .tr-side, .tr-watch { padding: 20px; }
}