/* ── 1200px: mobile / portrait tablet ────────────────────────── */

@media (max-width: 1200px) {
  body { overflow: auto; }

  #app {
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  #scene {
    position: fixed;
    inset: 0;
    z-index: 0;
  }

  .overlay {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    height: auto;
    padding: 1rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(5, 9, 20, 0.88) 25vh, var(--bg) 60vh);
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .panel--quotes { order: 1; }
  .panel--table  { order: 2; }

  .floating-toggle { position: fixed; }
}

/* ── 840px: card-style table ──────────────────────────────────── */

@media (max-width: 840px) {
  .table-wrap {
    overflow: visible;
    border: none;
  }

  .holdings-table thead { display: none; }

  .holdings-table tbody tr {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.15rem 1rem;
    margin-bottom: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
  }

  .holdings-table tbody tr.pledge-danger  { border-top: 5px solid #ff4d5f; }
  .holdings-table tbody tr.pledge-caution { border-top: 5px solid #f59e0b; }

  .holdings-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 !important;
    border: none !important;
    width: 100%;
  }

  .holdings-table tbody td::before {
    content: attr(data-label);
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 500;
  }

  .holdings-table tbody td input,
  .holdings-table tbody td select {
    width: 55%;
    max-width: 14rem;
  }

  .holdings-table tbody td:last-child { justify-content: flex-end; }
  .holdings-table tbody td:last-child::before { display: none; }
}

/* ── 720px: narrow phones ─────────────────────────────────────── */

@media (max-width: 720px) {
  h1 { font-size: 4rem; }

  .panel__head,
  .quote-card__top,
  .quote-card__metrics,
  .panel__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .panel__actions { text-align: center; }

  .benchmark-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}