/* Pragma web app: phone layout (max-width 720px).
   Load AFTER the app's own CSS, together with pragma-mobile.js.
   Laptop and tablet layout (above 720px) is unchanged. */

/* The More button and its backdrop (added by pragma-mobile.js) exist only on phones. */
#pg-more, #pg-more-backdrop { display: none; }

@media (max-width: 720px) {

  /* ---------- top bar: logo + bell only ---------- */
  .pg-rail {
    padding: 10px 16px !important;
    gap: 0 !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0;
    z-index: 60;
    background: var(--bone);
  }
  .pg-rail > div:first-child { flex: 1; align-items: center !important; }
  .pg-rail > div:first-child > div:first-child > :not(.pg-wordmark) { display: none !important; } /* tagline */
  .pg-rail .pg-wordmark { font-size: 26px; }
  .pg-rail > div:nth-child(2) { flex: none !important; }
  .pg-rail > div:nth-child(2) > :not(.pg-index) { display: none !important; }      /* "Contents" */

  /* ---------- bottom tab bar ---------- */
  .pg-index {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px -12px rgba(27, 29, 88, .35);
    padding: 0 0 env(safe-area-inset-bottom, 0) 0;
  }
  .pg-index > li { flex: 0 0 20%; min-width: 0; display: flex; }
  .pg-index::after { content: ""; flex: 0 0 20%; } /* slot under the More button */
  .pg-index > li:nth-child(n+5) { display: none; }
  .pg-index-item {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    min-height: 58px;
    padding: 8px 4px !important;
    white-space: normal !important;
    text-align: center !important;
    color: var(--ink-2);
  }
  .pg-index-item .lbl {
    font-family: Hanken Grotesk, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }
  .pg-index-item .badge { display: none !important; }
  .pg-index-item[data-active="1"] { color: var(--accent) !important; }
  .pg-index-item[data-active="1"]:before {
    display: block !important;
    left: 22% !important; right: 22% !important;
    top: 0 !important; bottom: auto !important;
    width: auto !important; height: 3px;
  }
  /* small dot on Session while today's session is waiting (replaces the long badge) */
  .pg-index-item:has(.badge) .lbl::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 4px;
    border-radius: 50%; background: var(--accent); vertical-align: middle;
  }

  /* "More" button (added by pragma-mobile.js) */
  #pg-more {
    position: fixed; bottom: 0; inset-inline-end: 0; z-index: 71;
    width: 20%; height: calc(58px + env(safe-area-inset-bottom, 0));
    padding: 0 4px env(safe-area-inset-bottom, 0);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: var(--paper); border: 0; border-top: 1px solid var(--line);
    color: var(--ink-2); font: 600 12.5px/1.15 Hanken Grotesk, sans-serif; cursor: pointer;
  }
  #pg-more .pg-more-dots { display: none; }
  html:has(.pg-index > li:nth-child(n+5) [data-active="1"]) #pg-more { color: var(--accent); }

  /* open "More": the other screens stack above the four tabs */
  html.pg-more-open .pg-index > li:nth-child(n+5) {
    display: flex; order: -1; flex: 0 0 100%;
    border-bottom: 1px solid var(--line-2);
  }
  html.pg-more-open .pg-index > li:nth-child(n+5) .pg-index-item {
    flex-direction: row; justify-content: flex-start !important; min-height: 52px; padding: 0 22px !important;
  }
  html.pg-more-open .pg-index > li:nth-child(n+5) .lbl {
    font-family: var(--display), Georgia, serif !important; font-size: 18px !important; font-weight: 400;
  }
  html.pg-more-open .pg-index > li:nth-child(n+5) [data-active="1"]:before { display: none !important; }
  #pg-more-backdrop { display: none; }
  html.pg-more-open #pg-more-backdrop {
    /* below .pg-rail (z 60), which holds the tab bar in its stacking context */
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(27, 29, 88, .38);
  }

  /* room for the bar under the content */
  .pg-canvas { padding: 24px 18px calc(96px + env(safe-area-inset-bottom, 0)) !important; }
  .pg-session, .pg-session-inner { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)); }
  /* chat message box sticks to the bottom: keep it above the tab bar (58px + 1px border) */
  .pg-composer { bottom: calc(59px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ---------- cards: one per row ---------- */
  .pg-main [style*="grid-template-columns: 1fr 1fr"],
  .pg-main [style*="repeat(3"],
  .pg-main [style*="minmax(280px"],
  .pg-main [style*="minmax(240px"] { grid-template-columns: 1fr !important; }
  .pg-main [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pg-main [style*="display: flex"]:not([style*="nowrap"]) { flex-wrap: wrap; }
  .pg-card { padding: 22px 20px; min-width: 0; }
  .pg-main * { min-width: 0; }
  .pg-main { overflow-wrap: anywhere; }

  /* ---------- readable text ---------- */
  .pg-mono { font-size: 12px; letter-spacing: .1em; }
  .pg-tag, .pg-chip, .badge, .pg-notif__type, .pg-notif__time { font-size: 12px !important; }
  .pg-notif__act { font-size: 12px !important; min-height: 36px; padding: 8px 6px !important; }
  .pg-main [style*="font-size: 9px"],
  .pg-main [style*="font-size: 9.5px"],
  .pg-main [style*="font-size: 10px"],
  .pg-main [style*="font-size: 10.5px"],
  .pg-main [style*="font-size: 11px"] { font-size: 12px !important; }

  /* ---------- tap targets ---------- */
  .pg-btn, .pg-btn--sm { min-height: 44px; }
  .pg-chip, .pg-link { min-height: 36px; display: inline-flex; align-items: center; }
  .pg-bell { width: 42px; height: 42px; }

  /* notifications panel: full width under the top bar */
  .pg-notif-panel { position: fixed !important; top: 64px !important; left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; }

  /* toasts above the tab bar */
  .pg-toast { bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important; }
}