/* The Geniuz dashboard on a phone, for the browser demo only (28 Sep 2026).
   The app is built for a computer window; on a narrow screen this layer turns the
   sidebar into a bar across the top, lets the page scroll as one, and gives the
   memory list, Find and Remember the full width. Nothing here applies above 760px,
   so the desktop view is the app exactly as it ships. */
@media (max-width: 760px) {
  html, body { height: auto; overflow-x: hidden; }
  body.dashboard-page { padding-top: 0; }

  /* The banner sits in the page and wraps, instead of floating over it. */
  .demo-banner { position: relative; inset: auto; min-height: 0; padding: 10px 16px; font-size: 13px; line-height: 1.4; }

  /* One scrolling page: no fixed window, no inner scroll boxes. */
  .window-frame { height: auto; width: 100%; overflow: visible; }
  .app-shell { display: block; height: auto; }
  #main-host { display: block !important; min-height: 70vh; }
  .main { overflow: visible; padding-top: 0; min-height: 0; }
  .main-body { overflow: visible; padding: 0 16px 32px; }

  /* The sidebar becomes a bar: brand on one line, the places to go in a row below. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    padding: 10px 12px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline-1);
    background: var(--bg-window);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .sidebar-brand { flex: 1 0 100%; padding: 0 4px 8px; }
  .sidebar-section {
    flex-direction: row;
    gap: 4px;
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sidebar-section::-webkit-scrollbar { display: none; }
  .sidebar-section__label, .sidebar-footer { display: none; }
  .sidebar-item { width: auto; flex: 0 0 auto; padding: 8px 10px; font-size: 14px; }
  .sidebar-item__label { overflow: visible; }

  /* Headers, the stats and the list controls line up with a 16px gutter. */
  .main-header { padding: 18px 16px 10px; }
  .stats-strip { gap: 12px; padding: 6px 16px 14px; }
  .stats-strip__value { font-size: 20px; }
  .list-controls { padding: 0 16px 8px; }

  /* The list reads at phone size; the meta line wraps rather than pushing wide. */
  .memory-row { padding: 12px 8px; }
  .memory-row__meta { flex-wrap: wrap; row-gap: 2px; }
  .memory-row__gist { font-size: 15px; }
  .detail-body { font-size: 15px; overflow-wrap: anywhere; }
  .detail-gist { overflow-wrap: anywhere; }

  /* Find: the box takes the width, the button stays in reach beside it. */
  .find-input-wrap { gap: 8px; }
  .find-input { min-width: 0; font-size: 16px; }
  .find-mode-toggle { max-width: 100%; flex-wrap: wrap; }

  /* Remember: full-width fields, 16px text so the phone does not zoom in on focus. */
  .remember-field__input, .remember-field__textarea { width: 100%; font-size: 16px; }
  .remember-field__textarea { min-height: 150px; }
  .remember-actions { justify-content: stretch; }
  .remember-actions__cancel, .remember-actions__submit { flex: 1; padding: 11px 16px; }

  /* The workspace pages: rows stack instead of sitting side by side. */
  .settings-row { grid-template-columns: 1fr; gap: 8px; }
  .settings-row__control { justify-content: flex-start; }
  .kv-list__row { grid-template-columns: 1fr; gap: 0; }
  .status-row { grid-template-columns: 1fr auto auto; }
  .data-card { padding: 16px; }
  .data-card__actions { flex-wrap: wrap; }
  .surface-loading, .surface-error, .surface-empty { padding: 20px 16px; }
}