/*
 * subpage-mobile.css — phone layout for the standalone deck and course pages
 * (slideshow.html, slideshow-ccdv.html, course.html). Card R0uq2PU4.
 *
 * These two pages are plain desktop documents that the native app opens as-is.
 * Everything here sits inside a max-width:600px query, so desktop is unchanged,
 * and it reuses the existing shared `.chrome` header (styles.css) rather than
 * adding another header style: only the tap targets, safe-area padding and the
 * slide-deck controls are adjusted. Loaded right after styles.css; rules that the pages' own
 * inline <style> blocks also set are prefixed with `body` so they still win.
 */

/* The prev/next counter only exists for phones. */
.deck-counter { display: none; }

/* Side safe-area insets apply at every width: a landscape phone is wider than
   600px and still has a notch. env() is 0 elsewhere, so desktop is unchanged. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 600px) {
  /* Top and bottom insets (needs viewport-fit=cover on the page): keep the
     header clear of the status bar and the content clear of the home indicator. */
  .chrome { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }

  /* Header links (app / course / deck): 44px minimum target on both axes. */
  .chrome-tabs > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .chrome-tabs { gap: 4px; }

  /* Course day navigation (#prev-day / #next-day): 44x44 tap floor. #mark-done
     shares the row and gets the same height so the three line up. */
  #prev-day,
  #next-day,
  #mark-done {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Slide deck ─────────────────────────────────────────────────────── */
  body .surface-cover { padding: 16px 16px 0; }
  body .surface-cover h1 { font-size: 22px; line-height: 1.2; }
  .slide { padding: 24px 16px; }
  .slide h1 { font-size: 24px; line-height: 1.2; }
  .slide h1.lg { font-size: 32px; line-height: 1.1; }
  .slide h2.lg { font-size: 20px; margin-bottom: 20px; }
  .slide ul { font-size: 16px; line-height: 1.6; padding-inline-start: 20px; }

  /* Bottom bar: ← 2 / 54 →. The 54-dot row and keyboard hints are desktop-only. */
  .deck-nav {
    position: sticky;
    bottom: 0;
    z-index: 40;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .deck-nav .dot-row,
  .deck-nav .deck-hint,
  .deck-nav .spacer { display: none; }
  .deck-nav #prev { order: 1; }
  .deck-nav .deck-counter { order: 2; }
  .deck-nav #next { order: 3; }
  .deck-nav #prev,
  .deck-nav #next {
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
    justify-content: center;
  }
  .deck-counter {
    display: inline-block;
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    /* Light ink: the bar is dark navy, --fg-soft on it is ~1.4:1. */
    color: var(--ss-bg-card);
  }
  /* The bottom bar carries the counter on phones; drop the header duplicate. */
  .chrome-right .slide-pos-pill { display: none; }

  /* ── Course ─────────────────────────────────────────────────────────── */
  body .week-tabs, body .day-rail { padding-inline: 16px; }
  body .week-tab { min-height: 44px; }
  body .day-pill {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 14px;
  }
  body .course-main { padding: 20px 16px; }
  body .day-card { padding: 18px; }
  .site-disclaimer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}