/* ===== Mobile / narrow-screen pass (≤760px) ===== */
.mobile-nav { display: none; }

@media (max-width: 760px) {
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 120;
    transform: translateX(-100%); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
  #sidebar:not(.collapsed) {
    transform: translateX(0); width: min(82vw, 290px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
  #sidebar.collapsed { transform: translateX(-100%); }

  #app { padding-left: 0; padding-bottom: 86px; }

  /* Floating glass bottom navigation pill */
  .mobile-nav {
    display: flex; position: fixed; z-index: 110;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    /* Genuine glass: page content scrolls underneath this bar. */
    height: 62px; background: color-mix(in srgb, var(--bg) 86%, transparent);
    /* slop-ok: O4 / real glass — the list scrolls under this bar. */
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: 18px;
    justify-content: space-around; align-items: center;
    padding: 4px 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); }
  .mn-btn {
    background: none; border: none; color: var(--text-dim);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    /* six buttons must share the pill on a 375px screen: split evenly, never overflow */
    flex: 1 1 0; min-width: 0; max-width: 76px; min-height: 48px;
    padding: 6px 2px; border-radius: 16px; white-space: nowrap;
    cursor: pointer; transition: color 0.15s, background 0.15s, transform 0.1s; }
  .mn-btn:active { transform: scale(0.92); }
  .mn-btn.active { color: var(--accent); background: var(--accent-soft); }
  .mn-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1px; }

  /* page frame */
  .page-inner { padding: 18px 16px 84px; }
  .page-title { font-size: 22px; }
  .page-head { flex-wrap: wrap; gap: 12px; }
  .page-head > div:last-child { margin-left: 0 !important; }

  /* touch targets */
  .icon-btn { min-width: 40px; min-height: 40px; }
  .sb-btn { padding: 8px 12px; font-size: 13px; }

  /* grids & tiles collapse to a single column */
  .grid.grid-2, .grid.grid-3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

  /* KPIs tighten up */
  .kpi { min-width: 104px; padding: 10px 12px; }
  .kpi .kpi-val { font-size: 17px; }

  /* list rows: let controls wrap under the text instead of overflowing */
  .li-item { flex-wrap: wrap; row-gap: 6px; }

  /* wide tables scroll inside themselves, never the page sideways */
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* to-do calendar shrinks */
  .cal-cell { min-height: 58px; }
  .cal-pill { font-size: 10px; }

  /* chat */
  .chat-bubble { max-width: 88%; }

  /* journal composer stacks */
  .jr-composer-top { flex-direction: column; align-items: stretch; }

  /* habit cards stack (heatmap under the info) */
  .habit-card { flex-direction: column; }
  .heat-grid { overflow-x: auto; max-width: 100%; }

  /* graphs shorter so they fit a phone viewport */
  .graph-wrap { height: 420px; }

  /* modals fill more of the screen */
  .modal { width: calc(100vw - 28px); max-width: none; }

  /* filter tabs a touch denser */
  .filter-tabs .ftab { padding: 6px 11px; }

  /* landing hero */
  .landing-title { font-size: 30px; }
}