/*
 * Trending Now page. Loads after the Last Table tokens and components, which bring the hero, the sections and the
 * details. This file adds the three-column reader: sources on the left, rising posts in the middle, rising keywords on
 * the right. It uses only Last Table variables. Brass glow marks only what changed: the chosen niche, the fastest gains
 * and the keyword rises.
 */

.lt-page .tr-faqs h2 {
  margin: 0;
  font: 560 var(--lt-step-3) / var(--lt-leading-tight) var(--lt-font-display);
  color: var(--lt-text-1);
}
.lt-page .lt-section:last-child { padding-bottom: var(--lt-space-8); }
.tr-hero { padding-bottom: var(--lt-space-7); }

/* The reader */
.tr-app-section { padding-top: var(--lt-space-5); }
.tr-app {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 18rem;
  gap: var(--lt-space-5);
  max-width: 92rem;
  margin: 0 auto;
  padding: 0 var(--lt-space-4);
}
@media (min-width: 720px) { .tr-app { padding: 0 var(--lt-space-6); } }
.tr-rail {
  align-self: start;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
  padding: var(--lt-space-4);
}
.tr-rail h2 { margin: 0 0 var(--lt-space-3); }
.tr-rail ul, .tr-rail ol { list-style: none; margin: 0; padding: 0; }
.tr-rail-note { margin: var(--lt-space-4) 0 0; color: var(--lt-text-3); font-size: var(--lt-step--1); }
.tr-rail-note:empty { display: none; }
.tr-keywords .tr-rail-note { margin: 0 0 var(--lt-space-3); }

.tr-source {
  display: flex;
  justify-content: space-between;
  gap: var(--lt-space-2);
  width: 100%;
  min-height: 44px;
  align-items: center;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--lt-radius-control);
  background: none;
  color: var(--lt-text-1);
  padding: var(--lt-space-2) var(--lt-space-3);
  font: var(--lt-step-0) / 1.4 var(--lt-font-ui);
  text-align: left;
  cursor: pointer;
}
.tr-source:hover { background: var(--lt-surface-3); }
.tr-source[aria-pressed="true"] { border-left-color: var(--lt-teal); background: var(--lt-teal-wash); color: var(--lt-teal); }
.tr-count { color: var(--lt-text-3); font: var(--lt-step--1) / 1.4 var(--lt-font-mono); }
.tr-source[aria-pressed="true"] .tr-count { color: inherit; }

/* Niche pills and the window toggle */
.tr-pills, .tr-windows { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); }
.tr-windows { margin-top: var(--lt-space-3); }
.tr-pill, .tr-window, .tr-deals-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--lt-space-2);
  min-height: 44px;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-2);
  color: var(--lt-text-1);
  padding: var(--lt-space-2) var(--lt-space-3);
  font: var(--lt-step--1) / 1.4 var(--lt-font-ui);
  cursor: pointer;
}
.tr-pill:hover, .tr-window:hover, .tr-deals-submit:hover { border-color: var(--lt-teal); }
.tr-pill[aria-pressed="true"] { border-color: var(--lt-glow-fill); background: var(--lt-glow-fill); color: var(--lt-on-glow); }
.tr-window { min-width: 3.5rem; justify-content: center; }
.tr-window[aria-pressed="true"] { border-color: var(--lt-teal); background: var(--lt-teal-wash); color: var(--lt-teal); }

.tr-status { margin: var(--lt-space-4) 0 0; min-height: 1.6em; color: var(--lt-text-2); }
.tr-status[data-tone="error"] { color: var(--lt-danger); }

/* Posts */
.tr-posts { list-style: none; margin: var(--lt-space-3) 0 0; padding: 0; display: grid; gap: var(--lt-space-2); }
.tr-post {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--lt-space-2) var(--lt-space-4);
  align-items: center;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
  padding: var(--lt-space-3) var(--lt-space-4);
}
.tr-rank { color: var(--lt-text-2); font: var(--lt-step-2) / 1 var(--lt-font-display); text-align: center; }
.tr-title { margin: 0; font: 560 var(--lt-step-0) / 1.35 var(--lt-font-display); overflow-wrap: anywhere; }
.tr-title a { color: var(--lt-text-1); text-decoration: none; }
.tr-title a:hover { color: var(--lt-teal); text-decoration: underline; }
.tr-meta { margin: var(--lt-space-1) 0 0; color: var(--lt-text-3); font-size: var(--lt-step--1); }
.tr-numbers {
  display: grid;
  grid-template-columns: auto auto 10rem;
  gap: var(--lt-space-4);
  align-items: center;
  font: var(--lt-step--1) / 1.4 var(--lt-font-mono);
  color: var(--lt-text-2);
  white-space: nowrap;
}
.tr-numbers strong { color: var(--lt-text-1); font-weight: 600; }
.tr-gain[data-hot] { color: var(--lt-glow-ink); }
.tr-heat { display: grid; grid-template-columns: minmax(3rem, 1fr) auto; gap: var(--lt-space-2); align-items: center; }
.tr-heat-bar { height: 6px; border-radius: var(--lt-radius-pill); background: var(--lt-surface-3); overflow: hidden; }
.tr-heat-bar span { display: block; height: 100%; border-radius: inherit; background: var(--lt-teal); }

/* Keywords */
#tr-keywords li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--lt-space-3);
  align-items: baseline;
  padding: var(--lt-space-2) 0;
  border-bottom: 1px solid var(--lt-line);
}
#tr-keywords li:last-child { border-bottom: 0; }
.tr-word { color: var(--lt-text-1); overflow-wrap: anywhere; }
.tr-word-posts { color: var(--lt-text-3); font-size: var(--lt-step--1); }
.tr-rise { color: var(--lt-glow-ink); font: 600 var(--lt-step--1) / 1.4 var(--lt-font-mono); }

/* The status bar under the reader */
.tr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lt-space-2);
  max-width: 92rem;
  margin: var(--lt-space-5) auto 0;
  padding: 0 var(--lt-space-4);
  color: var(--lt-text-3);
  font-size: var(--lt-step--1);
}
@media (min-width: 720px) { .tr-bar { padding: 0 var(--lt-space-6); } }
.tr-live { width: 8px; height: 8px; border-radius: 50%; background: var(--lt-success); }
.tr-live[data-off] { background: var(--lt-text-3); }

.tr-source-list { display: grid; gap: var(--lt-space-2); padding-left: var(--lt-space-5); }

/* Narrower screens: keywords move under the posts, then the sources become a row of chips above them. */
@media (max-width: 1180px) {
  .tr-app { grid-template-columns: 13rem minmax(0, 1fr); }
  .tr-keywords { grid-column: 2; }
}
@media (max-width: 820px) {
  .tr-app { grid-template-columns: minmax(0, 1fr); }
  .tr-keywords { grid-column: auto; }
  .tr-sources ul { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); }
  .tr-source { width: auto; border: 1px solid var(--lt-line); gap: var(--lt-space-2); }
  .tr-source[aria-pressed="true"] { border-color: var(--lt-teal); }
  .tr-post { grid-template-columns: 1.5rem minmax(0, 1fr); padding: var(--lt-space-3); }
  .tr-numbers { grid-column: 2; grid-template-columns: auto 1fr; gap: var(--lt-space-2) var(--lt-space-3); }
  .tr-heat { grid-column: 1 / -1; }
}

/* Deals: the search form and the deal rows, which reuse the post rows without the numbers column */
.tr-deals-form { display: flex; gap: var(--lt-space-2); margin-top: var(--lt-space-4); }
.tr-deals .tr-post { grid-template-columns: minmax(0, 1fr) auto; }
.tr-until { color: var(--lt-text-2); font-size: var(--lt-step--1); white-space: nowrap; }