/* public/css/trends.css — Clean, mobile-first structure for Trends.
 * The .rs-panel (outer) is the ONLY scroller (overflow:auto defined in layout.css).
 */

/* Root inside the panel */
.rs-trends {
  height: auto;
  overflow: visible;              /* .rs-panel handles scrolling */
  min-height: 0;
  padding: 0 var(--rs-content-pad-x, 12px) var(--rs-space-24, 24px);
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* === Theme (H2) === */
.rs-trend-theme {
  padding: var(--rs-space-20, 20px) 0;
  border-top: 1px solid var(--border, #e5e7eb);
}
.rs-trend-theme:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.rs-trend-theme__head { margin-bottom: var(--rs-space-12, 12px); }
.rs-trend-theme__title {
  font: var(--font-h2, 600 20px/1.3 system-ui);
  margin: 0 0 4px 0;
}
.rs-trend-theme__blurb { color: var(--muted, #6b7280); margin: 0; }

/* Lines → Trends header actions (normalization toggle) */
#panel-lines-trends .lt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rs-space-12, 12px);
}
#panel-lines-trends .lt-head-right {
  flex: 0 0 auto;
  padding-top: 2px;
}

/* === Sub-section (H3) === */
.rs-trend-subsection { margin: var(--rs-space-12, 12px) 0 var(--rs-space-20, 20px); }
.rs-trend-subsection__title {
  font: var(--font-h3, 600 16px/1.3 system-ui);
  margin: 0 0 var(--rs-space-8, 8px) 0;
}

/* === Chart grid === */
.rs-charts {
  display: grid;
  gap: var(--rs-space-12, 12px);
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) { .rs-charts { grid-template-columns: 1fr 1fr; } }

/* Chart slots */
.rs-chart-slot {
  min-height: 360px;
  background: var(--surface, #fff);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: var(--radius, 12px);
  padding: var(--rs-space-8, 8px);
  box-sizing: border-box;
  overflow: hidden;
}

/* Temporary placeholders */
.rs-chart-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  opacity: 0.6;
  font: var(--font-code, 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace);
  user-select: none;
}

/* Tablet / Mobile */
@media (max-width: 900px) {
  .rs-chart-slot { min-height: 300px; }
  .rs-trend-theme__title { font: var(--font-h3, 600 16px/1.3 system-ui); }
  .rs-trend-subsection__title { font: var(--font-h4, 600 14px/1.3 system-ui); }
}

/* Card wrapper for each Theme */
.rs-trend-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 12px);
  padding: var(--rs-space-16, 16px);
  box-sizing: border-box;
  /* subtle separation from page bg */
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
  max-width: 100%;
  min-width: 0;
}

/* Dedicated invisible anchor (jump target) */
.rs-jump-anchor {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  /* Provide some scroll margin so the title doesn't stick to the bar */
  scroll-margin-top: 8px;  /* JS also subtracts 8px pad; they complement each other */
}

/* ===== Charts layout & shells (RinkSense Trends) ===== */

/* Use the existing .rs-charts wrapper as a responsive grid */
.rs-charts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Chart slots become white "windows" */
.rs-chart-slot {
  grid-column: span 6;                          /* default = half width */
  background: #fff;
  border: 1px solid rgba(34, 34, 34, 0.08);     /* subtle; change to 0 to remove */
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  overflow: hidden;
  min-height: 240px;
  padding: 10px;
}

/* Make any chart full width by adding `rs-full` to the slot */
.rs-chart-slot.rs-full { grid-column: span 12; }

/* Placeholder text tweaks (kill dotted look) */
.rs-chart-placeholder {
  border: 0 !important;
  background: transparent !important;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
}

/* Subsection flattening: remove borders/frames on jump-to sections */
.rs-trend-subsection {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Responsive behavior */
@media (max-width: 1100px) {
  .rs-chart-slot { grid-column: span 12; }  /* halves stack earlier */
  .rs-charts { gap: 12px; }
}
@media (max-width: 800px) {
  .rs-chart-slot { min-height: 220px; padding: 8px; border-radius: 8px; }
}
@media (max-width: 560px) {
  .rs-chart-slot { min-height: 200px; padding: 6px; border-radius: 8px; }
}

/* === Flatten jump-to subsections inside Game → Trends === */
#panel-game-trends .rs-trend-subsection,
#panel-game-trends .rs-trend-subsection.rs-card,
#panel-game-trends [id^="game-trends-"].rs-card,
#panel-game-trends [id^="jt-"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kill any decorative rules some themes add via pseudo-elements */
#panel-game-trends .rs-trend-subsection::before,
#panel-game-trends .rs-trend-subsection::after {
  content: none !important;
}

/* === Golden ratio chart sizing + responsive behavior === */

/* Grid (already present earlier in your file). Ensures consistent gutters. */
.rs-charts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Chart slot: white window on grey panel, no dotted borders */
.rs-chart-slot {
  /* width is governed by grid span; height follows aspect ratio */
  grid-column: span 6;                   /* default: half width (two-up)   */
  background: #fff;
  border: 0;                             /* set to 1px subtle line if desired */
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  overflow: hidden;

  /* GOLDEN RATIO: width : height = 1.618 : 1  */
  --rs-chart-aspect: 1.618;              /* tweak per slot if needed */
  aspect-ratio: var(--rs-chart-aspect);  /* modern, robust sizing    */

  /* Fallback guard if viewport gets extremely narrow */
  min-height: 220px;
  padding: 10px;
}

/* Full-width charts when needed */
.rs-chart-slot.rs-full { grid-column: span 12; }

/* Optional: portrait variant for tall charts (e.g., bar-rankings) */
.rs-chart-slot.rs-portrait {
  --rs-chart-aspect: 0.618;              /* ~1/φ for portrait feel */
}

/* Placeholder text (keeps skeleton neat, removes dotted look if any) */
.rs-chart-placeholder {
  border: 0 !important;
  background: transparent !important;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
}

/* Responsive: halves stack earlier; keep pleasing φ proportions */
@media (max-width: 1100px) {
  .rs-chart-slot { grid-column: span 12; }
  .rs-charts { gap: 12px; }
}
@media (max-width: 800px) {
  .rs-chart-slot { min-height: 200px; padding: 8px; border-radius: 8px; }
}
@media (max-width: 560px) {
  .rs-chart-slot { min-height: 180px; padding: 6px; border-radius: 8px; }
}

/* === Game → Trends: remove theme card border/shadow and top divider === */
#panel-game-trends .rs-trend-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The thin rule drawn above each theme block */
#panel-game-trends .rs-trend-theme {
  border-top: 0 !important;
}

/* Full-width charts: slightly flatter than golden ratio so they don't run off-screen */
.rs-chart-slot.rs-full { --rs-chart-aspect: 2.4; }          /* desktop: wider => shorter height */

/* On narrower screens, give them a bit more height so labels breathe */
@media (max-width: 1100px) {
  .rs-chart-slot.rs-full { --rs-chart-aspect: 1.9; }
}
@media (max-width: 560px) {
  .rs-chart-slot.rs-full { --rs-chart-aspect: 1.6; }
}

/* === Mobile pan & containment tweaks (phones/tablets) === */
@media (max-width: 900px) {
  .rs-trends { min-width: 0; }
  /* Allow charts to breathe without forcing page to grow wider than the canvas */
  #panel-game-trends .rs-charts { min-width: 0; }
}


/* ===========================================================
 * Team → Trends: palette overrides for "best cell" highlighting
 * (Overrides the global --gs-* tokens defined in game.summary.css)
 --gs-purple: #C09EEE;
  --gs-blue:   #B6D9F8;
  --gs-yellow: #ECE688;
  --gs-green:  #82ECB7;
  --gs-red:    #ECAf87;
 * =========================================================== */
#panel-team-trends{
  --gs-purple: #B17AFF;
  --gs-blue:   #B6D9F8;
  --gs-yellow: #ECE688;
  --gs-green:  #82ECB7;
  --gs-red:    #EC8987;
}