/* ============================================================
   adaptive.css
   Big and folding screens: Galaxy Z Fold inner screen, iPhone Duo
   unfolded, tablets, and phones turned sideways. Loaded LAST in
   every page's <head> so it can widen the 430px phone column that
   the page styles were built around.

   Below 600px wide (every phone, the Fold cover screen, iPhone Duo
   folded) the column simply fills the screen.
   From 600px up:
     - reading and writing pages sit in a 680px column, a calm
       book-page width;
     - list pages (Library rooms, Journal, People, Saved, the four
       prayer choices) open to 880px and flow into two columns, so
       an unfolded phone shows twice as much instead of the phone
       layout with empty sides;
     - the tab bar always spans the wide column so it never jumps
       between tabs.
   ============================================================ */

:root {
  --app-w: 600px;
  --app-wide: 600px;
}
@media (min-width: 600px) {
  :root {
    --app-w: 680px;
    --app-wide: 880px;
  }
}

/* ---------- Shared app shell ---------- */
.app { max-width: var(--app-w); }
.tabbar { max-width: var(--app-wide); }

/* List pages get the wide column. */
.app:has(.rooms, .entries, #people-list, #saved-list, .vignettes) { max-width: var(--app-wide); }

/* Floating add buttons (Journal, People): follow the column instead of
   the screen edge, and sit fully above the tab bar (117px tall) rather
   than tucking 13 to 21px under it as they did on every phone. */
.reflect-fab,
.add-fab {
  right: max(20px, env(safe-area-inset-right, 0px), calc((100vw - var(--app-wide)) / 2 + 20px));
  bottom: calc(133px + env(safe-area-inset-bottom, 0px));
}
/* People: the add button carries the hidden attribute until there is a
   list to add to, but its display:grid was overriding it. */
.add-fab[hidden] { display: none; }

/* On phones, foldables and tablets the page is the whole screen, so drop
   the desktop "booklet on a desk" vignette and shadow that otherwise
   show as grey bands beside a centered column. */
@media (pointer: coarse) {
  body::before { display: none; }
  .app { box-shadow: none; }
}

@media (min-width: 600px) {
  /* Content columns and bottom action bars the pages pinned at 430px. */
  .content,
  .action-bar { max-width: var(--app-w); }
  .content:has(.choices) { max-width: var(--app-wide); }

  /* ---------- Two-column lists ---------- */

  /* What kind of prayer: 2 x 2 */
  .choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 760px;
  }

  /* Journal entries. Month headers, the end mark and Show more span. */
  .entries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .entries > :not(.entry-card) { grid-column: 1 / -1; }

  /* Guided prayer categories: three across, four on tablets. */
  .vignettes { grid-template-columns: repeat(3, 1fr); }

  /* People and Saved lists. */
  #people-list,
  #saved-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Library + Listen Mode rooms carry an icon, a title and a count pill,
   so they need more room per card before splitting into two. An opened
   room spans both columns so its track list keeps a readable line. */
@media (min-width: 760px) {
  .rooms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .rooms > .section-divider,
  .rooms > .empty-state,
  .rooms > .room.expanded { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .vignettes { grid-template-columns: repeat(4, 1fr); }
}