/* styles.css – modernized, theme-safe */

/* =========================
   Font
   ========================= */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/quicksand/quicksand-regular.woff2') format('woff2');
}

/* =========================
   Base
   ========================= */

body {
  font-family: 'Quicksand', "Segoe UI", "SF Pro", "Ubuntu", Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* =========================
   Header / Navigation
   ========================= */

header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

nav a {
  margin-left: 18px;
  text-decoration: none;
  font-weight: 600;
}

nav a:hover {
  text-decoration: underline;
}

/* remove visited state in nav */
nav a:visited {
  color: inherit;
}

.gear-btn {
  background: none;
  border: none;
  font-size: 1.3em;
  cursor: pointer;
}

/* =========================
   Controls
   ========================= */

.controls {
  display: none;
  padding: 12px 24px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  font-size: 0.95em;
}

.controls.open {
  display: flex;
}

/* Modern ghost-style action button */
button {
  background: transparent;
  border: 1px solid rgba(100,116,139,0.35);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8em;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

button:hover {
  background: rgba(100,116,139,0.08);
}


/* Modernize settings form */
fieldset {
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 8px;
}

legend {
  padding: 0 6px;
  font-weight: 600;
  color: #64748b;
}


/* =========================
   Charts / Cards
   ========================= */

.charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 28px;
  gap: 28px;
  flex: 1;
}

.chart-box {
  flex: 1 1 45%;
  max-width: 620px;
  padding: 20px 22px;
  border-radius: 14px;
  text-align: center;
  transition: box-shadow 0.15s ease;
}

.chart-box h2 {
  margin: 0 0 12px 0;
  font-size: 1.15em;
  font-weight: 600;
}

.market-status {
  min-height: 1.5em;
  font-size: 0.85em;
}

.chart-box img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  max-width: 600px;
  cursor: pointer;
}

.chart-info-strong {
  font-size: 0.85em;
  font-weight: 600;
  margin-top: 10px;
}

.chart-info-small {
  font-size: 0.8em;
  margin-top: 4px;
}

/* =========================
   Commentary
   ========================= */

.commentary-block {
  margin-top: 18px;
  text-align: left;
  line-height: 1.6;
  font-size: 0.8em;
}

.commentary-block div {
  margin-bottom: 14px;
}

/* =========================
   Tables (safe softening)
   ========================= */

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
}

td {
  padding: 12px;
  font-size: 0.85em;
}

/* =========================
   Sidebar
   ========================= */

.sidebar {
  width: 240px;
  min-height: 100vh;
  padding: 18px;
}

.sidebar a {
  display: block;
  text-decoration: none;
  margin: 10px 0;
  font-weight: 600;
}

.sidebar a:hover {
  text-decoration: underline;
}

/* remove visited styling */
.sidebar a:visited {
  color: inherit;
}

.user-console {
  display: flex;
  flex-direction: row;
}

.user-console .main {
  flex: 1 1 auto;
  padding: 20px;
}

/* =========================
   Footer
   ========================= */

footer {
  padding: 24px;
  font-size: 0.85em;
  margin-top: auto;
}

/* =========================
   Theme: Light
   ========================= */

.theme-light body {
  background: #f9fafb;
  color: #334155;
}

.theme-light header,
.theme-light footer {
  background: #0f172a;
  color: #ffffff;
}

.theme-light nav a,
.theme-light .gear-btn {
  color: #e5e7eb;
}

.theme-light nav a:hover,
.theme-light .gear-btn:hover {
  color: #ffffff;
}

.theme-light .chart-box {
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.theme-light .chart-box:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.theme-light th {
  color: #475569;
  border-bottom: 1px solid #e5e7eb;
}

.theme-light td {
  color: #334155;
}

.theme-light .sidebar {
  background: #111827;
  color: #e5e7eb;
}

.theme-light .sidebar a {
  color: #e5e7eb;
}

.theme-light .sidebar a:hover {
  color: #ffffff;
}

/* =========================
   Theme: Dark
   ========================= */

.theme-dark body {
  background: #0b1020;
  color: #e5e7eb;
}

.theme-dark header,
.theme-dark footer {
  background: #020617;
  color: #e5e7eb;
}

.theme-dark nav a,
.theme-dark .gear-btn {
  color: #cbd5f5;
}

.theme-dark nav a:hover,
.theme-dark .gear-btn:hover {
  color: #ffffff;
}

.theme-dark .chart-box {
  background: #111827;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

.theme-dark th {
  color: #cbd5f5;
  border-bottom: 1px solid #334155;
}

.theme-dark td {
  color: #e5e7eb;
}

.theme-dark .sidebar {
  background: #020617;
  color: #cbd5f5;
}

.theme-dark .sidebar a {
  color: #cbd5f5;
}

.theme-dark .sidebar a:hover {
  color: #ffffff;
}

/* =========================
   Utility
   ========================= */

.text-green-600 { color: #16a34a; }
.text-red-600 { color: #dc2626; }
.text-sky-500 { color: #0ea5e9; }
.font-semibold { font-weight: 600; }

/* =========================
   Responsive
   ========================= */

@media (max-width: 768px) {
  .charts {
    margin: 12px;
    gap: 14px;
  }
  .chart-box {
    flex: 1 1 100%;
    padding: 16px;
  }
  .sidebar {
    width: 40%;
    min-width: 150px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 30%;
    min-width: 120px;
  }
}

/* =========================
   Regime front screen (market switcher + regime tables)
   ========================= */

.market-switch{display:flex;gap:8px;justify-content:center;margin:20px 0 10px;flex-wrap:wrap}
.market-switch button{
  font:600 15px 'Quicksand',Arial,sans-serif;padding:8px 22px;border-radius:4px;
  border:1px solid #cbd5e1;background:transparent;color:#475569;cursor:pointer;transition:.15s}
.market-switch button:hover{border-color:#94a3b8;color:#334155}
.market-switch button.active{background:#2563eb;border-color:#2563eb;color:#fff}
.theme-dark .market-switch button{border-color:#334155;color:#94a3b8}
.theme-dark .market-switch button:hover{border-color:#64748b;color:#cbd5e1}
.theme-dark .market-switch button.active{background:#2563eb;border-color:#2563eb;color:#fff}

.tf-switch{display:flex;gap:6px;justify-content:center;margin:0 0 8px}
.tf-switch button{font:600 12px 'Quicksand',Arial,sans-serif;padding:3px 12px;border-radius:4px;
  border:1px solid #cbd5e1;background:transparent;color:#64748b;cursor:pointer}
.tf-switch button.active{background:#0f172a;border-color:#0f172a;color:#fff}
.theme-dark .tf-switch button{border-color:#334155;color:#94a3b8}
.theme-dark .tf-switch button.active{background:#4ade80;border-color:#4ade80;color:#052e16}

.market-panel{display:none;max-width:960px;margin:0 auto;padding:0 24px}
.market-panel.active{display:block}
.market-panel h2{text-align:center;font-size:1.4em;margin:6px 0 14px}
.market-panel .chart-wrapper{max-width:640px;margin:0 auto}

/* chart-left / text-right (landscape); stacks when narrow */
.chart-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.chart-row .chart-col{flex:1 1 320px;min-width:300px}
.chart-row .chart-side{flex:1 1 320px;min-width:280px}
.chart-side .market-status{margin-bottom:12px}
.chart-side .side-line{font-size:14px;line-height:1.6;color:#64748b;margin-bottom:6px}
.chart-side .side-strong{color:#334155;font-weight:600}
.theme-dark .chart-side .side-line{color:#94a3b8}
.theme-dark .chart-side .side-strong{color:#e5e7eb}
.chart-side .commentary-block{margin-top:14px}
.chart-side .commentary-block > div{margin-bottom:10px;font-size:13px;line-height:1.5}
.chart-side .side-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.btn-side{font:600 13px 'Quicksand',Arial,sans-serif;padding:7px 14px;border-radius:4px;
  border:1px solid #cbd5e1;background:transparent;color:#334155;cursor:pointer;transition:.15s}
.btn-side:hover{border-color:#94a3b8;background:#f1f4f8}
.theme-dark .btn-side{border-color:#334155;color:#e5e7eb}
.theme-dark .btn-side:hover{border-color:#64748b;background:#141b2e}

/* ---- track-record button + modal ---- */
.sp-btn{display:block;margin-top:6px;font:600 11px 'Quicksand',Arial,sans-serif;
  padding:3px 8px;border-radius:4px;border:1px solid #cbd5e1;background:transparent;
  color:#475569;cursor:pointer}
.sp-btn:hover{border-color:#94a3b8;background:#f1f4f8}
.theme-dark .sp-btn{border-color:#334155;color:#94a3b8}
.theme-dark .sp-btn:hover{border-color:#64748b;background:#141b2e}
.sp-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
  align-items:center;justify-content:center;padding:16px}
.sp-card{background:#fff;color:#334155;border-radius:8px;max-width:560px;width:100%;
  box-shadow:0 10px 40px rgba(0,0,0,.3);padding:16px 18px;max-height:90vh;overflow:auto}
.theme-dark .sp-card{background:#0f172a;color:#e5e7eb}
.sp-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;
  font-size:16px;margin-bottom:10px}
.sp-head #sp-close{border:none;background:none;font-size:24px;line-height:1;cursor:pointer;color:inherit}
.sp-table{width:100%;border-collapse:collapse;font-size:13px}
.sp-table th,.sp-table td{padding:6px 8px;text-align:right;border-bottom:1px solid #e5e7eb}
.theme-dark .sp-table th,.theme-dark .sp-table td{border-bottom-color:#1f2937}
.sp-table th{color:#64748b;font-weight:600}
.sp-table .sp-per{text-align:left;font-weight:600}
.sp-table .sp-roll td{border-top:2px solid #cbd5e1;font-weight:700}
.theme-dark .sp-table .sp-roll td{border-top-color:#334155}
.sp-cagr{color:#94a3b8;font-weight:400;font-size:11px}
.sp-win{color:#16a34a;font-weight:700}
.sp-lose{color:#b91c1c}
.theme-dark .sp-win{color:#4ade80}
.theme-dark .sp-lose{color:#f87171}
.sp-note{margin-top:10px;font-size:11px;color:#64748b;line-height:1.4}
.sp-empty{color:#64748b;padding:12px 0}

/* ---- backtest (time machine) ---- */
.backtest-banner{max-width:960px;margin:14px auto 0;padding:8px 24px;font-size:14px;color:#475569}
.backtest-banner a{margin-left:10px;color:#1d4ed8;text-decoration:underline}
.theme-dark .backtest-banner{color:#94a3b8}
.theme-dark .backtest-banner a{color:#7db3ff}
.date-nav{max-width:960px;margin:8px auto 4px;padding:0 24px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.date-nav button{font:600 13px 'Quicksand',Arial,sans-serif;padding:6px 12px;border-radius:4px;
  border:1px solid #cbd5e1;background:transparent;color:#334155;cursor:pointer}
.date-nav button:hover{border-color:#94a3b8;background:#f1f4f8}
.date-nav .date-now{font:700 15px 'Quicksand',Arial,sans-serif;padding:6px 10px;border-radius:4px;
  border:1px solid #cbd5e1;background:transparent;color:#334155;cursor:pointer}
.theme-dark .date-nav .date-now{border-color:#334155;color:#e5e7eb;color-scheme:dark}
.date-nav .date-auto{margin-left:auto;display:flex;gap:8px;align-items:center}
.date-nav .date-auto #speedLbl{font-size:12px;color:#64748b;min-width:28px;text-align:center}
.theme-dark .date-nav button{border-color:#334155;color:#e5e7eb}
.theme-dark .date-nav button:hover{border-color:#64748b;background:#141b2e}
.theme-dark .date-nav .date-auto #speedLbl{color:#94a3b8}
.chart-placeholder{height:280px;border:1px dashed #cbd5e1;border-radius:6px;display:flex;
  align-items:center;justify-content:center;color:#94a3b8;font-size:14px}
.theme-dark .chart-placeholder{border-color:#334155}
.panel-caption{text-align:center;color:#64748b;font-size:13px;margin-bottom:6px}
.theme-dark .panel-caption{color:#94a3b8}

.regime-table{width:100%;border-collapse:collapse;margin:14px 0 30px}
.regime-table th,.regime-table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
.theme-dark .regime-table th,.theme-dark .regime-table td{border-bottom-color:#1f2937}
.regime-table th{color:#475569;font-weight:600;font-size:12px}
.rt-sym a{text-decoration:underline;font-weight:700;font-size:26px}
.rt-alt{font-size:11px;line-height:1.5}
.rt-alt-line .rt-lev{display:inline-block;min-width:52px;color:#94a3b8}
.rt-chip{display:inline-block;font-size:22px;font-weight:700;text-decoration:none;line-height:1.15}
.rt-sig-sub{font-size:11px;margin-top:4px;max-width:180px;line-height:1.35}
.rt-since{font-size:13px}
.rt-rate .rt-stat{font-size:13px;line-height:1.5}
.rt-rate .rt-head{font-size:22px;font-weight:700;line-height:1.15;margin-bottom:2px}
.rt-rate .rt-n{font-size:11px}
.rt-summary td{border-top:2px solid #cbd5e1}
.rt-summary .rt-sym{font-weight:700;font-size:12px}
.rt-atr{font-size:11px;color:#94a3b8;margin-top:2px}
.sym-read .rt-atr{font-size:15px;font-weight:600;color:#334155;margin-top:8px}
.theme-dark .sym-read .rt-atr{color:#e2e8f0}

/* BASE = LIGHT (also theme-system default) */
.rt-sym a{color:#1d4ed8}
.rt-alt,.rt-sig-sub{color:#64748b}
.rt-since{color:#334155}
.rt-rate .rt-stat{color:#1d4ed8}
.rt-rate .rt-n{color:#94a3b8}
.rt-summary td{background:#f1f4f8}
.rt-summary .rt-sym{color:#334155}
.rt-up{color:#15803d}.rt-action{color:#1d4ed8}.rt-caution{color:#b45309}
.rt-watch{color:#7e22ce}.rt-down{color:#b91c1c}.rt-neutral{color:#475569}
.rt-rate .rt-head.rt-up{color:#15803d}.rt-rate .rt-head.rt-neutral{color:#475569}
.rt-rate .rt-head.rt-caution{color:#b45309}.rt-rate .rt-head.rt-down{color:#b91c1c}

/* DARK overrides (user's Dark theme controls this, not browser mode) */
.theme-dark .regime-table th{color:#cbd5f5}
.theme-dark .rt-sym a{color:#7db3ff}
.theme-dark .rt-alt,.theme-dark .rt-sig-sub{color:#94a3b8}
.theme-dark .rt-since{color:#e5e7eb}
.theme-dark .rt-rate .rt-stat{color:#93c5fd}
.theme-dark .rt-rate .rt-n{color:#94a3b8}
.theme-dark .rt-summary td{background:#141b2e;border-top-color:#334155}
.theme-dark .rt-summary .rt-sym{color:#cbd5e1}
.theme-dark .rt-up{color:#4ade80}.theme-dark .rt-action{color:#60a5fa}
.theme-dark .rt-caution{color:#fbbf24}.theme-dark .rt-watch{color:#c084fc}
.theme-dark .rt-down{color:#f87171}.theme-dark .rt-neutral{color:#94a3b8}
.theme-dark .rt-rate .rt-head.rt-up{color:#4ade80}
.theme-dark .rt-rate .rt-head.rt-neutral{color:#94a3b8}
.theme-dark .rt-rate .rt-head.rt-caution{color:#fbbf24}
.theme-dark .rt-rate .rt-head.rt-down{color:#f87171}

/* ---- phone: stack each row into a card (no columns) ---- */
@media (max-width: 640px){
  .market-panel{padding:0 12px}
  .regime-table thead{display:none}
  .regime-table, .regime-table tbody, .regime-table tr, .regime-table td{
    display:block; width:auto}
  .regime-table tr{
    border:1px solid #e5e7eb; border-radius:6px; padding:12px 14px; margin-bottom:14px}
  .regime-table td{border:none; padding:3px 0}
  .theme-dark .regime-table tr{border-color:#1f2937}
  /* symbol + signal headline the card; alternates go inline-compact */
  .rt-sym a{font-size:24px}
  .rt-alt{margin:6px 0}
  .rt-alt-line{display:inline-block; margin-right:12px}
  .rt-alt-line .rt-lev{min-width:auto; margin-right:3px}
  .rt-chip{font-size:20px}
  .rt-rate{margin-top:4px}
  .rt-rate .rt-head{font-size:20px}
  .rt-summary tr{background:#f1f4f8}
  .rt-summary td{border-top:none}
  .theme-dark .rt-summary tr{background:#141b2e}
}

/* ---- symbol detail page ---- */
.symbol-page{width:100%;max-width:960px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.symbol-head{margin:16px 0 8px}
.symbol-head h1{margin:4px 0;font-size:1.6em;font-weight:600}
.sym-ticker{color:#64748b;font-size:.65em;font-weight:600;vertical-align:middle}
.sym-back{color:#0ea5e9;text-decoration:none;font-size:.9em;font-weight:600}
.sym-back:hover{text-decoration:underline}
.sym-chart-full{width:100%}
.sym-chart{width:100%;height:440px}
.sym-under{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:20px 0}
.sym-col{min-width:0}
.sym-studies h3{margin:0 0 8px;font-size:1.05em;font-weight:600}
.sym-studies dl{margin:0}
.sym-studies dt{font-weight:600;margin-top:10px}
.sym-studies dd{margin:2px 0 0;color:#475569;font-size:.92em;line-height:1.45}
.theme-dark .sym-studies dd{color:#94a3b8}
@media(max-width:640px){.sym-under{grid-template-columns:1fr;gap:20px}}
.sym-lookback{display:flex;gap:6px;margin-bottom:8px}
.sym-lookback button{padding:4px 12px;border:1px solid #cbd5e1;background:#fff;border-radius:4px;cursor:pointer;font-weight:600;color:#334155}
.sym-lookback button.active{background:#0f172a;color:#fff;border-color:#0f172a}
.sym-signal{margin:8px 0}
.theme-dark .sym-lookback button{background:#1e293b;color:#cbd5e1;border-color:#334155}
.theme-dark .sym-lookback button.active{background:#4ade80;color:#052e16;border-color:#4ade80}
.theme-dark .sym-ticker{color:#94a3b8}

/* ---- distance-to-gate (daily-v2) ---- */
.rt-gate{text-align:right;white-space:nowrap}
.rt-gate .rt-head{font-size:18px;font-weight:600}
.rt-demote{font-weight:400;color:#94a3b8;font-size:.85em}
.sym-gate{margin:10px 0 2px}
.sym-gate-num{font-size:26px;font-weight:600}
.sym-gate-lbl{font-size:.95em;color:#64748b;margin-left:6px}
.sym-gate-note{font-size:.9em;color:#64748b}
.theme-dark .sym-gate-lbl,.theme-dark .sym-gate-note{color:#94a3b8}