/* Page layout per screen size.
 *   phone   < 768   one column, periods in a bottom bar (the default in components.css)
 *   tablet  768+    wider column, dialogs float in the middle instead of rising from the bottom
 *   laptop  1024+   sticky sidebar (hero + periods) beside the list; the bottom bar is gone
 *   wide    1440+   roomier sidebar and reading column, slightly larger text
 *   phone held sideways (landscape, height ≤ 520): the laptop sidebar in a compact form,
 *           so the bottom bar does not eat a fifth of a 390px-high screen
 * The reader adds a two-page spread at 1100+ (views.css / reader.js).
 * Side safe areas keep content clear of the notch when a phone is turned sideways.
 */

/* ---------- notch / rounded corners on the sides (landscape phones) ---------- */
.topbar { padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); }
.bottom-nav { padding-inline: max(6px, env(safe-area-inset-left), env(safe-area-inset-right)); }
.sheet__panel { padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }

/* ---------- phone (default): the sidebar dissolves into the page ---------- */
.shell { display: flex; flex-direction: column; }
.side { display: contents; }
.hero { width: calc(100% - 24px); max-width: 696px; margin: 12px auto 0; }
.container { padding-top: 0; width: 100%; } /* full width before the cards arrive too, so nothing slides sideways */

/* ---------- sheets: a small entrance motion everywhere ---------- */
.sheet.is-open .sheet__panel { animation: sheet-up .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } }

/* ---------- tablet ---------- */
@media (min-width: 768px) {
  .topbar__in, .bottom-nav__in { max-width: 860px; }
  .container { max-width: 860px; padding-inline: 20px; }
  .hero { width: calc(100% - 40px); max-width: 820px; margin-top: 16px; } /* same edges as the cards */

  /* dialogs float in the centre */
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel {
    max-width: 640px; max-height: 86dvh; border-radius: 24px;
    padding-inline: 22px; padding-bottom: 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
  }
  .sheet.is-full { padding: 20px; }
  .sheet.is-full .sheet__panel { max-width: 980px; height: 100%; max-height: 100%; border-radius: 24px; }
  .sheet.is-full .sheet__head { padding-top: 14px; }
  .sheet.is-open .sheet__panel { animation-name: sheet-pop; }
  @keyframes sheet-pop { from { transform: translateY(10px) scale(.985); opacity: 0; } }
  .reader__nav { margin-inline: -22px; padding-inline: 22px; bottom: -22px; padding-bottom: 12px; }

  .mx-continue { grid-template-columns: 1fr 1fr; }
}

/* ---------- laptop and desktop, and phones held sideways: sidebar layout ---------- */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  body { padding-bottom: 0; }
  .topbar__in { max-width: 1192px; } /* lines up with the shell's content box */

  .shell {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start;
    max-width: 1240px; margin: 0 auto; padding: 20px 24px 48px;
  }
  .side {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 84px; max-height: calc(100dvh - 104px); overflow: auto;
    scrollbar-width: thin; overscroll-behavior: contain; padding-bottom: 4px;
  }
  .hero { width: auto; max-width: none; margin: 0; }
  .hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the bottom bar becomes a vertical list of periods */
  .bottom-nav {
    position: static; inset: auto; z-index: auto; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow);
  }
  .bottom-nav__in { grid-template-columns: 1fr; gap: 4px; max-width: none; }
  .nav-btn {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px;
    padding: 8px 14px; font-size: 15px; font-weight: 700; color: var(--ink);
  }
  .nav-btn:hover { background: var(--surface-2); }
  .nav-btn[aria-current="page"]:hover { background: var(--acc-soft); }
  .nav-btn svg { width: 22px; height: 22px; color: var(--acc); }
  .nav-btn__count { margin-inline-start: auto; font-size: 12px; color: var(--muted); }
  .nav-btn__now { position: static; order: 9; }

  .container { max-width: 820px; margin: 0; padding: 0; }
  .card { scroll-margin-top: 96px; }
  .mx-continue { grid-template-columns: 1fr 1fr; }
}

/* ---------- phone held sideways: the same sidebar, compact ---------- */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .topbar { position: sticky; padding-top: 4px; padding-bottom: 4px; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .brand b { font-size: 18px; }

  .shell {
    grid-template-columns: 236px minmax(0, 1fr); gap: 16px; padding: 10px 0 24px;
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  .side { top: 62px; max-height: calc(100dvh - 72px); gap: 8px; }
  .hero { padding: 10px 12px; border-radius: 16px; }
  .hero h1 { font-size: 20px; }
  .hero__sub { font-size: 12.5px; }
  .hero .ring { width: 48px; height: 48px; }
  .ring__value { font-size: 14px; }
  .ring__value small { display: none; }
  .hero__actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; gap: 6px;
  }
  .hero__actions #btn-resume { grid-column: 1 / -1; }
  .hero__actions .pill-btn { min-height: 34px; font-size: 12.5px; padding: 0 6px; }
  /* the five periods as one row of icons, so hero + periods fit the short height */
  .bottom-nav { padding: 4px; border-radius: 16px; }
  .bottom-nav__in { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .nav-btn {
    flex-direction: column; justify-content: center; gap: 0; min-height: 52px; padding: 4px 0;
    font-size: 11px; font-weight: 400; color: var(--muted);
  }
  .nav-btn svg { width: 19px; height: 19px; }
  .nav-btn__count { margin: 0; font-size: 9.5px; }
  .nav-btn__now { position: absolute; top: 4px; inset-inline-end: 6px; }
  .container { max-width: none; }

  /* dialogs use the whole height; there is little of it */
  .sheet, .sheet.is-full { padding: 0; align-items: stretch; }
  .sheet__panel, .sheet.is-full .sheet__panel {
    max-width: 760px; max-height: 100dvh; height: 100dvh; border-radius: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    --pad-x: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    padding-inline: var(--pad-x);
  }
  .sheet__head, .sheet.is-full .sheet__head { padding-top: 8px; padding-bottom: 6px; }
  .sheet__head h2 { font-size: 19px; }
  .reader__nav { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); bottom: calc(-12px - env(safe-area-inset-bottom)); padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .reader__nav .pill-btn { min-height: 40px; }
  .mushaf { padding: 12px 16px; }
}

/* ---------- wide screens ---------- */
@media (min-width: 1440px) {
  .topbar__in { max-width: 1280px; }
  .shell { max-width: 1328px; grid-template-columns: 340px minmax(0, 900px); justify-content: center; gap: 40px; }
  .container { max-width: 900px; }
  .text { font-size: calc(19px * var(--fs)); }
  .quran { font-size: calc(24px * var(--fs)); }
  .sheet.is-full .sheet__panel { max-width: 1180px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet.is-open .sheet__panel { animation: none; }
}