/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN v3.0 — Mobile, Tablet, Desktop Optimized
   Works as a supplement to inline styles in index.html
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── MOBILE (≤767px) ────────────────────────────────────────── */
@media (max-width: 767px) {

  html { font-size: 14px; }

  /* ── Nav ── */
  .topnav { flex-wrap: wrap; padding: 10px 14px; gap: 6px; }
  .brand-sub { display: none; }
  .brand-mark { width: 28px; height: 28px; font-size: 11px; }
  .brand-name { font-size: 16px; }
  .nav-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; order: 3;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-pills::-webkit-scrollbar { display: none; }
  .nav-pill { font-size: 9px; padding: 5px 9px; letter-spacing: 0.5px; flex-shrink: 0; }
  .status-bar { order: 2; }

  /* ── Mode Tab Bar ── */
  .mode-tabbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .mode-tab { font-size: 10px; padding: 9px 14px; letter-spacing: 1px; min-width: 80px; flex-shrink: 0; }

  /* ── Layout ── */
  .main { padding: 14px 12px 60px !important; }
  .autofetch-panel, .manual-panel, .params-section { padding: 14px; }

  /* ── Grids ── */
  .config-grid { grid-template-columns: 1fr 1fr !important; }
  .top-panels-grid { grid-template-columns: 1fr !important; }
  .tf-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .three-col { grid-template-columns: 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .fund-grid { grid-template-columns: 1fr !important; }
  .wyckoff-grid { grid-template-columns: 1fr !important; }
  .astro-grid { grid-template-columns: 1fr !important; }
  .planet-grid { grid-template-columns: 1fr !important; }
  .metrics-row { grid-template-columns: repeat(2, 1fr) !important; }
  .sent-grid-top { grid-template-columns: 1fr !important; }
  .risk-dash-grid { grid-template-columns: 1fr !important; }
  .session-row { grid-template-columns: repeat(2, 1fr) !important; }
  .macro-ticker-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .strength-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .journal-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .inline-edit-row { grid-template-columns: 1fr 1fr !important; }
  .bb-grid { grid-template-columns: 1fr !important; }

  /* ── Generate Button ── */
  .gen-btn-wrap { flex-direction: column; padding: 14px; }
  .btn-generate { width: 100%; min-width: unset !important; font-size: 14px; letter-spacing: 2px; padding: 14px 16px; }
  .btn-gen-clear { width: 100%; font-size: 11px; padding: 12px 16px; }
  .btn-analyze { width: 100%; font-size: 14px; letter-spacing: 2px; padding: 13px 16px; }

  /* ── Direction Banner ── */
  .direction-banner { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .dir-left { flex: 1 1 auto; }
  .dir-arrow { font-size: 32px; }
  .dir-label { font-size: 26px; }
  .dir-right { width: 100%; justify-content: space-around; flex-wrap: wrap; gap: 10px; }
  .score-ring { width: 58px; height: 58px; }
  .ring-num { font-size: 15px; }
  .ring-lbl { font-size: 9px; }

  /* ── Tabs ── */
  .atabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .atab { font-size: 10px; padding: 8px 12px; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }

  /* ── Analysis Cards ── */
  .analysis-card { padding: 13px 14px; }
  .analysis-card-title { font-size: 11px; letter-spacing: 2px; flex-wrap: wrap; }
  .card-tag { font-size: 9px; }
  .analysis-text { font-size: 13px; line-height: 1.7; }

  /* ── Metric Boxes ── */
  .metric-box { padding: 10px; }
  .metric-lbl { font-size: 9px; letter-spacing: 1px; }
  .metric-val { font-size: 13px; }
  .metric-sub { font-size: 9px; }

  /* ── Live Price Row ── */
  .live-price-row { grid-template-columns: 1fr !important; padding: 12px 14px; }

  /* ── Journal ── */
  .je-card { padding: 12px 14px; }
  .journal-entry { grid-template-columns: auto 1fr !important; gap: 10px; padding: 12px 14px; }
  .jstat { padding: 10px 12px; }
  .jstat-val { font-size: 18px; }

  /* ── Astro ── */
  .astro-hero { padding: 14px 16px; }
  .astro-card { padding: 14px 16px; }

  /* ── News ── */
  .news-headline { font-size: 12px; }
  .news-meta { font-size: 10px; flex-wrap: wrap; }
  .news-content { font-size: 11px; padding: 10px; }

  /* ── Modal ── */
  .modal-content { width: 96% !important; max-height: 88vh; overflow-y: auto; margin: 6% auto !important; }

  /* ── Section headings ── */
  .sec-title { font-size: 11px; letter-spacing: 2px; }
  .panel-title { font-size: 10px; letter-spacing: 2px; }
  .panel-sub { font-size: 11px; }

  /* ── Prevent iOS 16px zoom on focus ── */
  input, select, textarea { font-size: 16px !important; }
}

/* ── EXTRA SMALL (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .config-grid { grid-template-columns: 1fr !important; }
  .score-breakdown { grid-template-columns: 1fr !important; }
  .planet-grid { grid-template-columns: 1fr !important; }
  .metrics-row { grid-template-columns: repeat(2, 1fr) !important; }
  .brand-name { font-size: 14px; }
  .nav-pill { font-size: 8px; padding: 4px 7px; }
}

/* ── TABLET (768–1023px) ────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  html { font-size: 15px; }
  .config-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .top-panels-grid { grid-template-columns: 1fr !important; }
  .tf-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .planet-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .journal-stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .metrics-row { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── DESKTOP (1024–1439px) ──────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1439px) {
  html { font-size: 16px; }
  .config-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; }
  .top-panels-grid { grid-template-columns: 1fr 1fr !important; }
  .tf-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .planet-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── LARGE DESKTOP (1440px+) ────────────────────────────────── */
@media (min-width: 1440px) {
  html { font-size: 16px; }
  .app { max-width: 1600px; margin: 0 auto; }
  .config-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; }
  .top-panels-grid { grid-template-columns: 1fr 1fr !important; }
  .tf-grid { grid-template-columns: repeat(5, 1fr) !important; }
  .planet-grid { grid-template-columns: repeat(7, 1fr) !important; }
  .journal-stats-grid { grid-template-columns: repeat(6, 1fr) !important; }
}

/* ── LANDSCAPE MOBILE ───────────────────────────────────────── */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
  .config-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tf-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .planet-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── TOUCH DEVICE OPTIMIZATIONS ─────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  button, .nav-pill, .cfg-select, .jh-btn { min-height: 44px; }
  .nav-pill:hover, button:hover { transform: none; }
}

/* ── MULTI-TIMEFRAME PANEL ───────────────────────────────────── */
.mtf-summary { background: var(--s1); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.mtf-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.mtf-score { font-family: var(--mono); font-size: 36px; font-weight: 700; }
.mtf-score.bullish { color: var(--green); }
.mtf-score.bearish { color: var(--red); }
.mtf-score.neutral { color: var(--muted2); }
.mtf-label { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--muted2); text-transform: uppercase; }
.mtf-direction { font-family: var(--display); font-size: 24px; font-weight: 700; margin-left: auto; }
.mtf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-bottom: 20px; }
.mtf-item { background: var(--s2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; }
.mtf-item.bull { border-left: 3px solid var(--green); }
.mtf-item.bear { border-left: 3px solid var(--red); }
.mtf-item.neutral { border-left: 3px solid var(--muted); }
.mtf-tf { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--muted2); margin-bottom: 5px; }
.mtf-signal { font-family: var(--display); font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.mtf-score-small { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--cyan); }
.mtf-recommendation { background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.2); border-radius: 8px; padding: 15px; }
.mtf-rec-action { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--cyan); margin-bottom: 5px; }
.mtf-rec-confidence { font-family: var(--mono); font-size: 11px; color: var(--muted2); margin-bottom: 10px; }
.mtf-rec-reasons { list-style: none; padding: 0; margin: 0; }
.mtf-rec-reasons li { font-family: var(--mono); font-size: 11px; color: var(--text); padding: 5px 0 5px 15px; position: relative; }
.mtf-rec-reasons li::before { content: '▸'; position: absolute; left: 0; color: var(--cyan); }

@media (max-width: 767px) {
  .mtf-header { flex-direction: column; align-items: flex-start; }
  .mtf-score { font-size: 28px; }
  .mtf-direction { margin-left: 0; font-size: 20px; }
  .mtf-grid { grid-template-columns: repeat(2, 1fr); }
  .mtf-rec-action { font-size: 16px; }
}

/* ── ACCESSIBILITY ───────────────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  .topnav, .nav-pills, .mode-tabbar, .gen-btn-wrap, button, .modal { display: none !important; }
  body { background: white; color: black; }
  * { background: white !important; color: black !important; }
  .analysis-card, .direction-banner { border: 1px solid #000; break-inside: avoid; }
}