/* sig-live.css — Oyamori Live Signals page
 * Consumed by: /livesignal/index.php
 * Token layer: /widgets/assets/chart-theme.css (loaded first, defines --cw-*)
 * All colors use var(--cw-*) with raw hex fallbacks.
 * Mobile breakpoint: 640px. */

/* ── Market status bar ────────────────────────────────────────────────────── */
.mkt-bar {
  position: fixed; top: 60px; left: 0; right: 0; z-index: 99;
  height: 36px;
  background: var(--cw-surface, #111);
  border-bottom: 1px solid var(--cw-border, #222);
  display: flex; align-items: center;
}
.mkt-bar-inner {
  display: flex; align-items: center; gap: 0;
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px;
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden;
}
.mkt-state-wrap { display: flex; align-items: center; gap: 6px; }

/* status dot */
.mkt-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.mkt-dot--open   { background: #10b981; box-shadow: 0 0 5px rgba(16,185,129,0.6);
                   animation: mkt-pulse 1.8s infinite; }
.mkt-dot--ext    { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.5);
                   animation: mkt-pulse 2.4s infinite; }
.mkt-dot--closed { background: #ef5350; }
@keyframes mkt-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.mkt-state  { color: var(--cw-text, #f0f0f0); font-weight: 600; }
.mkt-sep    { color: var(--cw-subtle, #444); margin: 0 8px; }
.mkt-divider{ color: var(--cw-border, #222); margin: 0 12px; }

.mkt-countdown      { color: var(--cw-muted, #888); }
.mkt-et             { color: var(--cw-text, #f0f0f0); font-weight: 600; letter-spacing: 0.06em; }
.mkt-local          { color: var(--cw-muted, #888); }
.mkt-session        { color: var(--cw-muted, #888); text-transform: uppercase; letter-spacing: 0.08em; }
.mkt-session-remain { color: var(--cw-subtle, #444); margin-left: 6px; }

/* Session-specific state colours */
.mkt-bar[data-session="RTH OPEN"]    .mkt-state { color: #10b981; }
.mkt-bar[data-session="CLOSED"]      .mkt-state { color: #ef5350; }
.mkt-bar[data-session="PRE-MARKET"]  .mkt-state { color: #f59e0b; }
.mkt-bar[data-session="AFTER HOURS"] .mkt-state { color: #f59e0b; }
.mkt-bar[data-session="OVERNIGHT"]   .mkt-state { color: var(--cw-subtle, #444); }

@media (max-width: 640px) {
  .mkt-countdown, .mkt-session-remain { display: none; }
  .mkt-divider:last-of-type { display: none; }
}

/* ── Date nav bar ─────────────────────────────────────────────────────────── */
.sig-date-bar {
  position: sticky; top: 96px; z-index: 90;
  background: var(--cw-surface, #111);
  border-bottom: 1px solid var(--cw-border, #222);
}
.sig-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
}
.sig-date-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: none;
  border: 1px solid var(--cw-border, #2a2a2a);
  border-radius: 6px;
  color: var(--cw-text, #f0f0f0);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.sig-date-arrow:hover { background: rgba(255,255,255,0.06); }

.sig-date-picker-wrap {
  position: relative;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.sig-date-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  border: none;
  background: none;
  z-index: 2;
}
.sig-date-display {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  height: 30px;
  border: 1px solid var(--cw-border, #2a2a2a);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 500;
  color: var(--cw-text, #f0f0f0);
  white-space: nowrap;
  user-select: none;
  min-width: 100px;
}
.sig-date-caret { font-size: 8px; color: var(--cw-muted, #888); }

.sig-date-spacer { flex: 1; }

.sig-date-today-btn {
  padding: 0 12px;
  height: 30px;
  background: none;
  border: 1px solid var(--cw-border, #2a2a2a);
  border-radius: 6px;
  color: var(--cw-muted, #888);
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: 0.08em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sig-date-today-btn[is-today] {
  color: var(--cw-accent, #e91e63);
  border-color: var(--cw-accent, #e91e63);
}
.sig-date-today-btn:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 640px) {
  .sig-date-spacer { display: none; }
  .sig-date-today-btn { margin-left: auto; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.sig-hero {
  padding: 52px 0 32px;
  border-bottom: 1px solid var(--cw-border, #222);
}
.sig-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.sig-section-label {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cw-muted, #888);
  margin-bottom: 8px;
}
.sig-hero-title {
  font-family: var(--cw-font, 'Inter', sans-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cw-text, #f0f0f0);
  margin: 0 0 12px;
  line-height: 1.05;
}
.sig-hero-desc {
  color: var(--cw-muted, #888);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 560px;
}

/* ── Live status (top-right of hero) ─────────────────────────────────────── */
.sig-status-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 6px;
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
}
.sig-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cw-brand, #D5477F);
  box-shadow: 0 0 5px rgba(213, 71, 127, 0.6);
  animation: sig-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.sig-live-dot--error {
  background: var(--cw-watch, #f59e0b);
  box-shadow: 0 0 5px rgba(245, 158, 11, 0.6);
}
@keyframes sig-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.sig-status-text {
  color: var(--cw-brand, #D5477F);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sig-clock {
  color: var(--cw-muted, #888);
  letter-spacing: 0.04em;
}

/* ── Summary strip ────────────────────────────────────────────────────────── */
.sig-summary-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--cw-border, #222);
}
.sig-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sig-stat-card {
  background: var(--cw-surface, #111);
  border: 1px solid var(--cw-border, #222);
  border-radius: var(--cw-radius-card, 12px);
  padding: 20px 24px;
  transition: border-color 0.15s;
}
.sig-stat-card:hover {
  border-color: var(--cw-subtle, #444);
}
.sig-stat-num {
  font-family: var(--cw-doto, 'Doto', monospace);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cw-text, #f0f0f0);
  line-height: 1;
  letter-spacing: 0.02em;
}
.sig-stat-num--sm {
  font-size: 1.25rem;
}
.sig-stat-label {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-muted, #888);
  margin-top: 6px;
}
.sig-stat-sub {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-subtle, #444);
  margin-top: 4px;
}
/* Bias bar */
.sig-bias-bar {
  height: 4px;
  background: rgba(239, 83, 80, 0.2);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.sig-bias-fill {
  height: 100%;
  background: var(--cw-up, #10b981);
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s ease;
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.sig-filter-section {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sig-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sig-filter-group {
  display: flex;
  border: 1px solid var(--cw-border, #222);
  border-radius: 6px;
  overflow: hidden;
}
.sig-filter-btn {
  background: transparent;
  border: none;
  border-right: 1px solid var(--cw-border, #222);
  color: var(--cw-muted, #888);
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.sig-filter-btn:last-child {
  border-right: none;
}
.sig-filter-btn:hover:not(.active) {
  color: var(--cw-text, #f0f0f0);
  background: rgba(255,255,255,0.04);
}
/* Default active: brand pink (tier buttons) */
.sig-filter-btn.active {
  background: var(--cw-brand, #D5477F);
  color: #fff;
}
/* Dir-specific active overrides */
.sig-filter-buy.active {
  background: rgba(16, 185, 129, 0.15);
  color: var(--cw-up, #10b981);
}
.sig-filter-sell.active {
  background: rgba(239, 83, 80, 0.15);
  color: var(--cw-down, #ef5350);
}
/* Refresh countdown badge */
.sig-refresh-badge {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-subtle, #444);
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
@keyframes sig-refresh-pulse {
  0%   { color: var(--cw-brand, #D5477F); }
  100% { color: var(--cw-subtle, #444); }
}
.sig-refresh-pulse {
  animation: sig-refresh-pulse 0.5s ease-out;
}

/* ── Signal feed ──────────────────────────────────────────────────────────── */
.sig-feed-section {
  padding: 24px 0 72px;
}
.sig-empty {
  text-align: center;
  padding: 72px 0;
  color: var(--cw-subtle, #444);
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
}

/* ── Signal card ──────────────────────────────────────────────────────────── */
.sig-card {
  background: var(--cw-surface, #111);
  border: 1px solid var(--cw-border, #222);
  border-radius: var(--cw-radius-card, 12px);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.sig-card:hover {
  border-color: var(--cw-subtle, #444);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* Flash-in: BUY = green glow */
.sig-card--new-buy {
  animation: sig-flash-buy 0.6s ease-out;
}
@keyframes sig-flash-buy {
  0%   { border-color: var(--cw-up, #10b981); box-shadow: 0 0 14px rgba(16,185,129,0.35); }
  100% { border-color: var(--cw-border, #222); box-shadow: none; }
}
/* Flash-in: SEL = red glow */
.sig-card--new-sell {
  animation: sig-flash-sell 0.6s ease-out;
}
@keyframes sig-flash-sell {
  0%   { border-color: var(--cw-down, #ef5350); box-shadow: 0 0 14px rgba(239,83,80,0.35); }
  100% { border-color: var(--cw-border, #222); box-shadow: none; }
}

/* Card layout */
.sig-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.sig-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sig-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Direction badge */
.sig-dir-badge {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.sig-dir-buy {
  color: var(--cw-up, #10b981);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.33);
}
.sig-dir-sell {
  color: var(--cw-down, #ef5350);
  background: rgba(239, 83, 80, 0.08);
  border: 1px solid rgba(239, 83, 80, 0.33);
}

/* Stars (tier) */
.sig-stars {
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
}
.sig-tier-3 { color: var(--cw-watch, #f59e0b); }
.sig-tier-2 { color: var(--cw-muted, #888); }
.sig-tier-1 { color: var(--cw-subtle, #444); }

/* Symbol + TF */
.sig-sym {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--cw-text, #f0f0f0);
  letter-spacing: 0.04em;
}
.sig-tf {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--cw-subtle, #444);
}

/* Right meta */
.sig-px {
  font-family: var(--cw-doto, 'Doto', monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--cw-muted, #888);
  letter-spacing: 0.02em;
}
.sig-ts {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-subtle, #444);
}
.sig-age {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--cw-subtle, #444);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Card bottom row */
.sig-card-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sig-state {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-muted, #888);
}
.sig-rvol {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-subtle, #444);
}
.sig-score {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-subtle, #444);
}
.sig-htf {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
}
.sig-htf-tf {
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}
.htf-agree  { color: var(--cw-up, #10b981);   background: rgba(16,185,129,0.1); }
.htf-oppose { color: var(--cw-down, #ef5350);  background: rgba(239,83,80,0.1); }
.htf-thin   { color: var(--cw-subtle, #444);   background: rgba(255,255,255,0.04); }
.sig-mst {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--cw-watch, #f59e0b);
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
}
.sig-pat {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-up, #10b981);
}
.sig-conflict {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--cw-watch, #f59e0b);
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(245,158,11,0.1);
}

.sig-c3thin {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: #f59e0b;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(245,158,11,0.1);
  cursor: help;
}

/* ── Explainer ────────────────────────────────────────────────────────────── */
.sig-explainer-section {
  padding: 48px 0 80px;
}
.sig-rule {
  border: none;
  border-top: 1px solid var(--cw-border, #222);
  margin-bottom: 32px;
}
.sig-explainer-title {
  font-family: var(--cw-font, 'Inter', sans-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--cw-text, #f0f0f0);
  margin: 10px 0 16px;
}
.sig-explainer-body {
  color: var(--cw-muted, #888);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: 12px;
}
.sig-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.sig-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sig-legend-desc {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-muted, #888);
}
.sig-legend-key {
  font-family: var(--cw-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--cw-subtle, #444);
  background: rgba(255,255,255,0.04);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--cw-border, #222);
}

/* ── Light theme overrides ────────────────────────────────────────────────── */
[data-theme="light"] .sig-card {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
[data-theme="light"] .sig-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
[data-theme="light"] .sig-age {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .sig-refresh-badge {
  border-color: rgba(0,0,0,0.1);
}

/* ── Mobile (640px) ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sig-summary-grid {
    grid-template-columns: 1fr;
  }
  .sig-hero-top {
    flex-direction: column;
  }
  .sig-status-wrap {
    padding-top: 0;
  }
  .sig-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .sig-card-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .sig-filter-bar {
    gap: 8px;
  }
  .sig-filter-btn {
    padding: 6px 10px;
    font-size: 10px;
  }
  .sig-refresh-badge {
    margin-left: 0;
  }
  .sig-legend {
    flex-direction: column;
  }
}