/* ==========================================================================
   Trading Signals — page-specific layout
   Uses shared tokens from main.css. No hard-coded palette hex that already
   exists as a token; rgba tints mirror the design-system badge patterns.
   ========================================================================== */

/* ---- Page hero ---- */
.ts-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.ts-hero-copy .eyebrow { margin-bottom: var(--sp-5); }
.ts-hero-copy h1 { max-width: 18ch; }
.ts-hero-copy .lead { max-width: 640px; color: var(--text-1); }
.ts-hero-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-6); }
.ts-hero-copy .hero-cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* Floating sample-signal card in hero */
.ts-hero-card {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--shadow-lg);
}
.ts-hc-sym { display: flex; align-items: center; gap: 12px; }
.ts-hc-name { font-family: var(--font-display); font-weight: 700; color: var(--text-0); font-size: 1.05rem; letter-spacing: -0.01em; }
.ts-hc-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.ts-hc-levels > div { display: flex; flex-direction: column; gap: 3px; }
.ts-hc-k { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ts-hc-v { font-size: 0.92rem; color: var(--text-0); }

/* Hero quick stats */
.ts-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.ts-hstat .num { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700; color: var(--text-0); letter-spacing: -0.02em; }
.ts-hstat .num .suffix { color: var(--emerald-bright); }
.ts-hstat .lbl { color: var(--text-3); font-size: 0.82rem; margin-top: 4px; max-width: 22ch; }

/* ---- Signal types ---- */
.sig-types { align-items: stretch; }
.sig-type { display: flex; flex-direction: column; gap: var(--sp-3); }
.sig-type::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--emerald); opacity: 0.8;
}
.sig-swing::before { background: var(--blue); }
.sig-options::before { background: var(--gold); }
.sig-positional::before { background: var(--emerald-bright); }
.sig-type-head { display: flex; align-items: center; justify-content: space-between; }
.sig-type h3 { font-size: var(--fs-h4); }
.sig-type > p { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.sig-facts { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line-faint); }
.sig-facts > div { display: flex; flex-direction: column; gap: 2px; }
.sig-facts dt { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.sig-facts dd { font-size: 0.82rem; color: var(--text-1); }

/* Risk-level badge (mirrors design-system badge tints) */
.risk-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.risk-high { color: var(--down); background: var(--down-soft); }
.risk-elevated { color: var(--gold-bright); background: rgba(245, 184, 61, 0.12); }
.risk-moderate { color: var(--blue-bright); background: rgba(59, 130, 246, 0.12); }
.risk-measured { color: var(--emerald-bright); background: var(--up-soft); }
.sig-note { font-size: 0.82rem; margin-top: var(--sp-6); text-align: center; max-width: 62ch; margin-inline: auto; }

/* ---- Anatomy of a signal ---- */
.anatomy-section { position: relative; overflow: hidden; }

.signal-ticket { padding: 0; overflow: hidden; }
.ticket-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), transparent);
}
.ticket-id { display: flex; align-items: center; gap: 14px; }
.ticket-id .q-logo { width: 46px; height: 46px; font-size: 1rem; border-radius: 12px; }
.ticket-sym { font-family: var(--font-display); font-weight: 700; color: var(--text-0); font-size: 1.25rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ticket-tags .badge svg { flex: none; }

.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ticket-detail { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); border-right: 1px solid var(--line); }

/* Levels list */
.levels { display: flex; flex-direction: column; }
.level-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center; gap: var(--sp-4);
  padding: 13px 0;
  border-bottom: 1px solid var(--line-faint);
}
.level-row:last-child { border-bottom: 0; }
.lvl-dot { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); }
.is-entry .lvl-dot { background: var(--blue-bright); }
.is-t1 .lvl-dot { background: var(--emerald); }
.is-t2 .lvl-dot { background: var(--emerald-bright); }
.is-sl .lvl-dot { background: var(--down); }
.lvl-k { color: var(--text-2); font-size: 0.9rem; }
.lvl-v { color: var(--text-0); font-size: 1rem; text-align: right; }
.lvl-d { font-size: 0.8rem; color: var(--text-3); text-align: right; min-width: 68px; }
.is-sl .lvl-v { color: var(--text-0); }

/* Metrics */
.ticket-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--bg-inset); border: 1px solid var(--line-faint);
}
.tmetric { display: flex; flex-direction: column; gap: 5px; }
.tm-k { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.tm-v { font-size: 1.1rem; color: var(--text-0); font-weight: 600; }
.tm-v small { font-size: 0.7rem; color: var(--text-3); font-weight: 400; }
.tmetric-conf { grid-column: 1 / -1; gap: 8px; }
.conf-meter { display: block; height: 8px; border-radius: var(--r-pill); background: var(--glass-2); overflow: hidden; }
.conf-fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-emerald); box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
.tm-note { font-size: 0.76rem; color: var(--text-3); }

/* Thesis */
.ticket-thesis h4 { font-size: 0.95rem; margin-bottom: var(--sp-2); color: var(--text-0); }
.ticket-thesis p { color: var(--text-2); font-size: 0.9rem; line-height: 1.7; }

/* Chart side */
.ticket-visual { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.ticket-chart-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.74rem; }
.chart-legend { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-3); font-family: var(--font-mono); }
.lg-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.sw-entry { background: var(--blue-bright); }
.sw-target { background: var(--emerald-bright); }
.sw-stop { background: var(--down); }

.ticket-foot {
  display: flex; align-items: flex-start; gap: 12px;
  padding: var(--sp-5) var(--sp-8);
  border-top: 1px solid var(--line);
  background: var(--bg-inset);
}
.ticket-foot svg { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 2px; }
.ticket-foot p { font-size: 0.8rem; color: var(--text-3); line-height: 1.6; }

/* Anatomy legend */
.anatomy-legend { margin-top: var(--sp-10); }
.legend-item {
  display: flex; gap: var(--sp-4); padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--glass);
}
.lg-num { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--emerald-bright); flex: none; }
.legend-item h4 { font-size: 0.98rem; margin-bottom: 4px; color: var(--text-0); }
.legend-item p { font-size: 0.84rem; color: var(--text-2); line-height: 1.6; }

/* ---- Delivery channels ---- */
.channels { align-items: stretch; }
.channel { display: flex; flex-direction: column; gap: var(--sp-3); }
.channel h3 { font-size: var(--fs-h4); }
.channel p { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.chan-tag {
  align-self: flex-start; margin-top: var(--sp-2);
  font-size: 0.72rem; color: var(--text-2);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--glass-2); border: 1px solid var(--glass-border);
}

/* ---- Illustrative performance ---- */
.perf-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6);
  align-items: stretch; margin-bottom: var(--sp-6);
}
.perf-chart { display: flex; flex-direction: column; }
.chart-caption { font-size: 0.76rem; line-height: 1.6; margin-top: var(--sp-3); }
.perf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.perf-stat { padding: var(--sp-5); display: flex; flex-direction: column; gap: 6px; }
.ps-num { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; color: var(--text-0); letter-spacing: -0.02em; }
.ps-num .suffix { color: var(--emerald-bright); }
.ps-label { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; flex: 1; }
.ps-tag { align-self: flex-start; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright); background: rgba(245, 184, 61, 0.12); padding: 3px 8px; border-radius: var(--r-pill); }

/* Sample setups log */
.sample-log { margin-bottom: var(--sp-6); }
.slog-row {
  display: grid; grid-template-columns: 1fr auto 96px;
  align-items: center; gap: var(--sp-4);
  padding: 12px 4px; border-bottom: 1px solid var(--line-faint);
}
.slog-row:last-child { border-bottom: 0; }
.slog-row .q-sym { display: flex; align-items: center; gap: 10px; }
.slog-sym { font-weight: 600; color: var(--text-0); font-size: 0.9rem; }
.slog-row .q-spark { width: 90px; height: 30px; }
.slog-out {
  justify-self: end; text-align: center;
  font-size: 0.72rem; font-weight: 600; font-family: var(--font-mono);
  padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.out-t2 { color: var(--emerald-bright); background: var(--up-soft); }
.out-t1 { color: var(--emerald-bright); background: var(--up-soft); }
.out-sl { color: var(--down); background: var(--down-soft); }

/* Prominent risk note */
.risk-note {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-lg);
  border: 1px solid rgba(245, 184, 61, 0.3);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(245, 184, 61, 0.1), transparent 60%),
    var(--glass);
}
.rn-ico {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  color: var(--gold-bright); background: rgba(245, 184, 61, 0.12);
  border: 1px solid rgba(245, 184, 61, 0.3);
}
.rn-ico svg { width: 22px; height: 22px; }
.risk-note p, .risk-note div { color: var(--text-2); font-size: 0.86rem; line-height: 1.7; }
.risk-note strong { color: var(--text-0); }

/* ---- Risk framework ---- */
.risk-grid { align-items: stretch; }
.risk-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.risk-card h3 { font-size: var(--fs-h4); }
.risk-card p { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.risk-metric {
  align-self: flex-start; margin-top: var(--sp-2);
  font-size: 0.78rem; color: var(--emerald-bright);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--up-soft); border: 1px solid transparent;
}

/* ---- Who it's for ---- */
.fit-grid { align-items: stretch; }
.fit-panel { display: flex; flex-direction: column; gap: var(--sp-5); }
.fit-head { display: flex; align-items: center; gap: 12px; }
.fit-head h3 { font-size: var(--fs-h4); }
.fit-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none; }
.fit-ico svg { width: 20px; height: 20px; }
.fit-ico.ok { color: var(--emerald-bright); background: var(--up-soft); }
.fit-ico.warn { color: var(--gold-bright); background: rgba(245, 184, 61, 0.12); }
.fit-list { display: flex; flex-direction: column; gap: 12px; }
.fit-list li { position: relative; padding-left: 26px; color: var(--text-1); font-size: 0.92rem; line-height: 1.6; }
.fit-list li::before {
  content: ''; position: absolute; left: 3px; top: 8px;
  width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
}
.fit-yes .fit-list li::before { background: var(--emerald); }
.fit-no .fit-list li::before { background: var(--gold); }
.fit-list a { color: var(--emerald-bright); text-decoration: underline; text-underline-offset: 3px; }
.fit-foot { text-align: center; margin-top: var(--sp-6); font-size: 0.88rem; }
.fit-foot a { color: var(--emerald-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Pricing teaser ---- */
.pricing-teaser {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 48px);
}
.pt-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-6); }
.pt-list li { display: flex; align-items: center; gap: 10px; color: var(--text-1); font-size: 0.92rem; }
.pt-list svg { width: 18px; height: 18px; color: var(--emerald-bright); flex: none; }
.pt-cta {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--bg-inset); border: 1px solid var(--line);
}
.pt-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--sp-2); }
.pt-from { font-size: 0.78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pt-amt { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text-0); letter-spacing: -0.02em; }
.pt-per { color: var(--text-3); font-size: 0.9rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .ts-hero-grid { grid-template-columns: 1fr; }
  .ts-hero-card { max-width: 420px; }
  .perf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ticket-grid { grid-template-columns: 1fr; }
  .ticket-detail { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .ts-hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .ticket-head { padding: var(--sp-5); }
  .ticket-detail, .ticket-visual { padding: var(--sp-5); }
  .ticket-foot { padding: var(--sp-4) var(--sp-5); }
  .ticket-metrics { grid-template-columns: 1fr; }
  .perf-stats { grid-template-columns: 1fr 1fr; }
  .pricing-teaser { grid-template-columns: 1fr; }
  .risk-note { padding: var(--sp-5); }
}
@media (max-width: 440px) {
  .ts-hero-stats, .perf-stats { grid-template-columns: 1fr; }
  .slog-row { grid-template-columns: 1fr auto; }
  .slog-row .q-spark { display: none; }
}