/* D1 — mobile-readable layout (read-only on phone is OK) */
    @media (max-width: 640px) {
      :root {
        --ds-text-hero: 24px;
        --ds-chart-height: 180px;
        --ds-chart-gutter: 56px;
      }

      .ds-app-header {
        padding:
          max(var(--ds-space-3), env(safe-area-inset-top, 0px))
          max(var(--ds-space-3), env(safe-area-inset-right, 0px))
          var(--ds-space-1)
          max(var(--ds-space-3), env(safe-area-inset-left, 0px));
      }
      /* Single row: $NW left · hamburger right (tabs are the bottom bar) */
      .ds-app-header-bar {
        align-items: center;
        min-height: var(--ds-portfolio-hero-band);
      }
      .ds-app-brand {
        height: 2.5rem;
      }
      .ds-header-menu-wrap {
        height: 2.5rem;
      }
      /*
       * Portfolio mode: full-width bottom bar for thumbs.
       * Same #portfolio-mode-nav node — moved via fixed positioning.
       */
      :root {
        --tab-bar-bottom-padding: max(0.4rem, env(safe-area-inset-bottom, 0px));
        /* Real tab bar height. The bar uses this as min-height and grows with the home inset. */
        --tab-bar-height: calc(3rem - 0.4rem + var(--tab-bar-bottom-padding));
      }
      .ds-portfolio-mode-nav.tracker-only {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        display: flex !important;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: var(--tab-bar-height);
        box-sizing: border-box;
        margin: 0;
        padding:
          0.4rem
          max(var(--ds-space-3), env(safe-area-inset-right, 0px))
          var(--tab-bar-bottom-padding)
          max(var(--ds-space-3), env(safe-area-inset-left, 0px));
        gap: 2px;
        background: var(--ds-bg);
        border: none;
        border-top: 1px solid var(--ds-border-subtle);
        border-radius: 0;
        box-shadow: 0 -4px 16px rgb(15 23 42 / 0.06);
      }
      body.docs-view-active .ds-portfolio-mode-nav.tracker-only,
      .ds-portfolio-mode-nav.tracker-only.hidden,
      html[data-portfolio-time-merge="hybrid"] .ds-portfolio-mode-nav.tracker-only {
        display: none !important;
      }
      .ds-portfolio-mode-nav .ds-tab {
        flex: 1 1 0;
        min-width: 0;
        height: 2.65rem;
        padding: 0 0.35rem;
        font-size: var(--ds-text-caption);
      }
      .ds-app-body {
        padding:
          0
          max(var(--ds-space-4), env(safe-area-inset-right, 0px))
          /* room for bottom mode bar + safe area */
          calc(3.75rem + max(var(--ds-space-3), env(safe-area-inset-bottom, 0px)))
          max(var(--ds-space-4), env(safe-area-inset-left, 0px));
      }
      /* Hybrid: no bottom mode bar — reclaim thumb-bar padding (after base mobile pad) */
      html[data-portfolio-time-merge="hybrid"] .ds-app-body {
        padding-bottom: max(var(--ds-space-3), env(safe-area-inset-bottom, 0px));
      }
      /* Toast above bottom nav */
      .ds-status-banner {
        bottom: calc(3.75rem + max(0.5rem, env(safe-area-inset-bottom, 0px)));
      }
      html[data-portfolio-time-merge="hybrid"] .ds-status-banner {
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
      }

      #portfolio-panel .ds-panel-header {
        padding-left: var(--ds-space-3);
        padding-right: var(--ds-space-3);
      }
      .ds-section-body {
        padding: 0 var(--ds-space-3) var(--ds-space-4);
      }
}