/* ══════════════════════════════════════════════════════════
       MOBILE RESPONSIVE — 768px and below
       Priority order for demo: client list → metrics → top
       positions → AI commentary → nav → everything else
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── Page padding ── */
      .page { padding: 1rem 1rem; }

      /* ── Nav ── */
      .nav { padding: 0 1rem; height: 48px; }
      .nav-badge { display: none; }
      #nav-user-email { display: none; }
      .nav button.btn-secondary {
        padding: 5px 10px;
        font-size: 11px;
      }

      /* ── Client list ── */
      .client-list-view { padding: 1.25rem 0; }
      .client-list-title { font-size: 16px; }
      .client-card { padding: 12px 14px; }
      .client-card-name { font-size: 14px; }
      .client-card-del { opacity: 1; }  /* always visible on touch */
      .add-client-form { flex-wrap: wrap; }
      .add-client-input { min-width: 0; }

      /* ── Back button + client detail header ── */
      .client-detail-name { font-size: 17px; }
      .btn-back { margin-bottom: 1rem; }

      /* ── Saved portfolios list ── */
      .saved-item-del { opacity: 1; } /* always visible on touch */
      .saved-item-rename { opacity: 1; }

      /* ── File chip row ── */
      .file-chip { flex-wrap: wrap; font-size: 11px; }
      .save-row { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

      /* ── Metrics — 2 per row on phone ── */
      .metrics {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 1rem;
      }
      .metric { padding: 12px 12px; }
      .metric-val { font-size: 18px; }
      .metric-lbl { font-size: 10px; }

      /* ── Panels — stack vertically ── */
      .panels { grid-template-columns: 1fr; gap: 8px; }

      /* ── Top positions — hide bar, trim name ── */
      .pos-bar-bg { display: none; }
      .pos-name { max-width: 120px; }
      .pos-val { width: 60px; font-size: 11px; }
      .pos-pct { width: 30px; font-size: 10px; }

      /* ── Holdings table — horizontal scroll, hide less important cols ── */
      .port-table { font-size: 11px; }
      .port-table th, .port-table td { padding: 6px 5px 6px 0; }
      /* Hide cost basis, shares, price on mobile — keep ticker, name, asset, value, G/L, weight */
      .port-table th:nth-child(5),
      .port-table td:nth-child(5),
      .port-table th:nth-child(6),
      .port-table td:nth-child(6),
      .port-table th:nth-child(4),
      .port-table td:nth-child(4),
      .port-table th:nth-child(8),
      .port-table td:nth-child(8) { display: none; }

      /* ── Tabs — wrap and smaller ── */
      .port-tabs { gap: 4px; }
      .tab { font-size: 11px; padding: 4px 10px; }

      /* ── Cards ── */
      .card { padding: 0.85rem 1rem; }
      .card-title { font-size: 10px; margin-bottom: 10px; }

      /* ── Alerts card ── */
      .alerts-hdr { padding: 0.85rem 1rem; }
      .alerts-body { padding: 0.85rem 1rem; }
      .alert-summary-row { padding: 8px 1rem; }
      .top-priority { display: none; }

      /* ── Score card ── */
      .score-hdr { padding: 0.85rem 1rem; }
      .score-body { padding: 0.85rem 1rem; }
      .score-drivers { padding: 8px 1rem; }

      /* ── Recommendations ── */
      .recs-hdr { padding: 0.85rem 1rem; }
      .recs-body { padding: 0.5rem 1rem; }

      /* ── AI commentary ── */
      .ai-hdr {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0.85rem 1rem;
      }
      .ai-hdr-left { flex: 1; min-width: 0; }
      .ai-title { font-size: 13px; }
      /* Stack generate/regen/export buttons vertically */
      #ai-actions {
        width: 100%;
      }
      #ai-actions .btn {
        flex: 1;
        justify-content: center;
        white-space: nowrap;
        min-height: 36px;
      }

      /* ── Auth card ── */
      .auth-card { padding: 1.5rem; }
      .auth-wrap { padding: 2rem 1rem; }

      /* ── Landing upload state ── */
      .landing { padding: 2.5rem 1rem; }
      .landing h2 { font-size: 20px; }
      .landing-sub { font-size: 14px; }
      .landing-actions { flex-direction: column; align-items: stretch; }
      .landing-actions .btn-primary,
      .landing-actions .btn-secondary {
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
      }

      /* ── Footer disclaimer ── */
      .footer-disclaimer { font-size: 11px; padding: 10px 12px; }
    }

    /* ── Extra small — iPhone SE / narrow phones ── */
    @media (max-width: 380px) {
      .metrics { grid-template-columns: 1fr; }
      .metric-val { font-size: 20px; }
      .pos-name { max-width: 80px; }
    }