/* ==========================================================================
   Flash Finance — /seasonality pages (extends the shared ff-* market system)
   Heatmap tables, tab panels, and small page-specific touches only; all
   generic components (cards, stats, badges, tables) come from market.css.
   ========================================================================== */

/* ---- tab panels (Monthly / Quarterly / Weekly) ---- */
.ssn-panel { display: none; }
.ssn-panel.active { display: block; }

/* ---- year × period heatmap ---- */
.ssn-heatwrap { overflow-x: auto; }
table.ssn-heat { border-collapse: collapse; width: 100%; font-size: .78rem; }
.ssn-heat th, .ssn-heat td {
  padding: 5px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--ff-border-soft); color: var(--ff-text);
}
.ssn-heat thead th {
  background: #f4f6fa; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .4px; color: #56607a; position: sticky; top: 0; z-index: 3;
}
.ssn-heat th.yr, .ssn-heat td.yr {
  position: sticky; left: 0; background: #fff; text-align: left;
  font-weight: 700; color: var(--ff-primary); z-index: 2;
  border-right: 1px solid var(--ff-border);
}
.ssn-heat thead th.yr { background: #f4f6fa; z-index: 4; }
.ssn-heat tr.agg td { font-weight: 700; background: #fbfcfe; }
.ssn-heat tr.agg td.yr { color: var(--ff-text-soft); font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; }
.ssn-heat td.mtd { outline: 2px dashed var(--ff-accent); outline-offset: -2px; }
.ssn-heat .na { color: var(--ff-text-faint); }
/* weekly grid: 53 columns — tighten */
table.ssn-heat.ssn-weekly th, table.ssn-heat.ssn-weekly td {
  padding: 3px 5px; font-size: .66rem;
}

/* ---- current-period highlight card ---- */
.ssn-now {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  background: linear-gradient(90deg, var(--ff-accent-soft) 0%, #f7fafe 100%);
  border-left: 4px solid var(--ff-accent); border-radius: var(--ff-radius-sm);
  padding: 12px 16px; margin-bottom: 14px; font-size: .9rem;
}
.ssn-now b { color: var(--ff-primary); }
.ssn-now .big { font-size: 1.25rem; font-weight: 700; }

/* ---- narrative / SEO prose ---- */
.ssn-prose { font-size: .9rem; line-height: 1.65; color: #374151; margin: 0 2px 14px; max-width: 980px; }

/* ---- rank badge when the stock is in the current Top 25 ---- */
.ssn-rankchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ff-success-soft); color: var(--ff-success-deep);
  border-radius: 20px; padding: 4px 12px; font-size: .78rem; font-weight: 700;
}

/* ---- search / autocomplete row ---- */
.ssn-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ssn-search input[type="text"] {
  padding: 9px 14px; border: 1px solid var(--ff-border); border-radius: var(--ff-radius-sm);
  font-size: .9rem; font-family: var(--ff-font); min-width: 260px; flex: 0 1 340px;
}
.ssn-search input:focus { outline: none; border-color: var(--ff-accent); box-shadow: 0 0 0 3px var(--ff-accent-soft); }

/* row highlight: the stock being viewed inside a Top-25 strip */
tr.ssn-me td { background: var(--ff-accent-soft) !important; }

/* ---- track-record summary table win/lose tint ---- */
td.ssn-beat { color: var(--ff-success-deep); font-weight: 700; }
td.ssn-lost { color: var(--ff-danger-deep); font-weight: 700; }

@media (max-width: 768px) {
  .ssn-now { gap: 8px 16px; font-size: .82rem; }
  .ssn-search input[type="text"] { flex: 1 1 100%; }
}