/* Desktop / tablet layout. Loaded AFTER styles.css. Phones (< 768px) are untouched.
   The page now fills the whole browser; only the CONTENT is kept to a readable width (1200px) on huge screens. */

@media (min-width: 768px) {
  :root { --gutter: max(28px, calc((100vw - 1200px) / 2)); }   /* side space; grows on very wide screens */

  .app { width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; }   /* was a 420px phone column / floating box */
  .appbar { padding: 16px var(--gutter); }

  /* the tab bar moves from the bottom of the screen to a strip under the header */
  .tabbar { order: 1; justify-content: flex-start; gap: 6px; padding: 6px var(--gutter); border-top: 0; border-bottom: 1px solid #e8eef6; }
  .tabbar button { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-size: 15px; }
  .tabbar button span { display: inline; margin: 0; font-size: 18px; }
  .tabbar button.active { background: #fde8ee; }
  #content { order: 2; padding: 28px var(--gutter) 40px; }

  /* cards flow in two columns; headings span the full width */
  #screen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #screen > .card { margin: 0; }
  #screen > .page-title, #screen > h2, #screen > h3, #screen > .btn { grid-column: 1 / -1; }
  #screen > .btn { justify-self: start; }
  #screen > .card.empty { grid-column: 1 / -1; }

  /* single-card screens (sign in, profile setup, route form, chat) stay centred and readable */
  #screen > .card:only-child { grid-column: 1 / -1; width: 100%; max-width: 520px; margin: 12px auto 0; padding: 24px; }
  #chatLog { max-height: 50vh !important; }
  .toast { max-width: 420px; }
}

@media (min-width: 1100px) {
  #screen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}