/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   simulator.css — NoLaptopTrades
   Pipeline simulator page specific styles
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Sim header ── */
.sim-header {
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--border);
}

.sim-header .prompt-line {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.sim-header .prompt-line span { color: var(--green); }

.sim-header h1 { margin-bottom: 6px; }

.sim-tagline {
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ── Two-column sim layout ── */
.sim-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2px;
  align-items: start;
  padding: 24px 0;
}

@media (max-width: 720px) {
  .sim-layout { grid-template-columns: 1fr; }
}

/* ── Filter panel ── */
.filter-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 20px;
  position: sticky;
  top: 52px; /* below nav */
}

.filter-panel-title {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ── Slider control ── */
.filter-group {
  margin-bottom: 20px;
}

.filter-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.filter-name {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text);
  text-transform: uppercase;
}

.filter-value {
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--green);
  text-shadow: var(--glow-sm);
  min-width: 70px;
  text-align: right;
}

.filter-value.warn { color: var(--amber); text-shadow: none; }

/* ── Range input custom styling ── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  position: relative;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--green);
  border: 2px solid var(--bg);
  box-shadow: 0 0 6px #00ff6a88;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--green);
  border: 2px solid var(--bg);
  box-shadow: 0 0 6px #00ff6a88;
  cursor: pointer;
  border-radius: 0;
}

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 10px #00ff6acc;
}

.filter-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ── Divider ── */
.filter-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* ── Strategy constants (locked display) ── */
.constants-block {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 12px;
  margin-top: 4px;
}

.constants-title {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.constant-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 11px;
}

.constant-row .k { color: var(--muted); }
.constant-row .v { color: var(--cyan); }

/* ── Number input row ── */
.filter-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.filter-num {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 8px;
  width: 80px;
  outline: none;
  transition: border-color 0.12s;
  /* remove browser spinner arrows */
  -moz-appearance: textfield;
}

.filter-num::-webkit-outer-spin-button,
.filter-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.filter-num:focus { border-color: var(--green-dim); }

.filter-range-label-sm {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ── Demo notice ── */
.sim-demo-notice {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.sim-demo-notice span { color: var(--muted); }

.sim-demo-notice a {
  color: var(--green-dim);
  text-decoration: none;
  transition: color 0.12s;
}

.sim-demo-notice a:hover { color: var(--green); }

/* ── Reset button ── */
.btn-reset {
  width: 100%;
  margin-top: 16px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.12s;
  text-transform: uppercase;
}

.btn-reset:hover { border-color: var(--green-dim); color: var(--green-dim); }

/* ── Results panel ── */
.results-panel { min-width: 0; }

/* ── Results summary bar ── */
.results-summary {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 2px;
}

.results-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.results-count {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--green);
  text-shadow: var(--glow);
}

.results-count.zero { color: var(--red); text-shadow: none; }

.results-of {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ── Outcome breakdown grid ── */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 2px;
}

.outcome-cell {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 12px;
  text-align: center;
}

.outcome-cell-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.outcome-cell-value {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
}

.outcome-cell.tp  .outcome-cell-value { color: var(--green); }
.outcome-cell.tsl .outcome-cell-value { color: var(--green-dim); }
.outcome-cell.sl  .outcome-cell-value { color: var(--red); }
.outcome-cell.to  .outcome-cell-value { color: var(--amber); }
.outcome-cell.rug .outcome-cell-value { color: var(--red); opacity: 0.7; }
.outcome-cell.pm  .outcome-cell-value { color: var(--muted); }

.outcome-cell-pct {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── EV result block ── */
.ev-result {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 2px;
}

.ev-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.ev-result-row:last-child { border-bottom: none; }
.ev-result-row .k { color: var(--muted); }
.ev-result-row .v { color: var(--text); }
.ev-result-row .v.pos { color: var(--green); font-family: var(--font-head); }
.ev-result-row .v.neg { color: var(--red); font-family: var(--font-head); }

/* ── EV callout ── */
.ev-callout {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
}

.ev-callout.negative { border-left-color: var(--red); }
.ev-callout.neutral  { border-left-color: var(--amber); }

/* ── Simulated label ── */
.sim-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 9px;
  letter-spacing: 0.2em;
  border: 1px solid var(--muted);
  color: var(--muted);
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 8px;
}

/* ── Trade log ── */
.trade-log {
  background: var(--bg2);
  border: 1px solid var(--border);
  margin-bottom: 2px;
}

.trade-log-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trade-log-title {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
}

.trade-log-meta {
  font-size: 11px;
  color: var(--muted);
}

.trade-log-body { padding: 0 20px 16px; }

/* ── Empty state ── */
.empty-state {
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.empty-state .icon {
  font-size: 28px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ── CTA block ── */
.sim-cta {
  background: var(--bg2);
  border: 1px solid var(--green);
  padding: 28px 24px;
  margin-top: 2px;
  position: relative;
  overflow: hidden;
}

.sim-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(0,255,106,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.sim-cta-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--green-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sim-cta-headline {
  font-family: var(--font-head);
  font-size: clamp(16px, 3vw, 22px);
  color: var(--green);
  text-shadow: var(--glow-sm);
  margin-bottom: 8px;
  line-height: 1.3;
}

.sim-cta-body {
  font-size: 12px;
  color: var(--text);
  opacity: 0.8;
  margin-bottom: 20px;
  max-width: 500px;
  line-height: 1.7;
}

.sim-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Loading state ── */
.loading-line {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 20px 0;
}

.loading-line::before { content: '> '; color: var(--green); }

/* ── Mobile ── */
@media (max-width: 600px) {
  .filter-panel { position: static; }
  .results-count { font-size: 22px; }
  th:nth-child(4), td:nth-child(4) { display: none; }
}