/* GREG — mobile drill-down responsive layer.
 *
 * The desktop layout (3 panels side-by-side) is frozen by the prototype
 * design (see CLAUDE.md). On phones we instead stack the panels and slide
 * between them based on `body[data-mobile-view]` set by bridge.js:
 *
 *   sidebar  → list  → reader
 *
 * Above 720px nothing here applies; the original components.css rules win.
 */

/* Hide the mobile back buttons unconditionally above the breakpoint. The
 * !important guards against any media-query LiveReload glitch where the
 * mobile rule below could leak in for one frame. */
@media (min-width: 721px) {
  .mobile-back { display: none !important; }
}

@media (max-width: 720px) {
  /* Block Android Chrome's pull-to-refresh from interfering with the
   * scrollable article list. */
  body { overscroll-behavior-y: contain; }

  /* The drag-to-resize handle has no meaning on touch — just drop it. */
  .resizer { display: none; }

  /* iOS Safari's address bar shrinks on scroll; 100vh paints the chrome-on
   * height and leaves a strip uncovered when the chrome hides. 100dvh tracks
   * the current viewport so the app fills the screen edge-to-edge. Kept
   * inside the mobile @media to avoid touching desktop layout. */
  .app.rss { position: relative; overflow: hidden; height: 100dvh; }

  /* iOS auto-zooms any input < 16px on focus. Force the floor on every form
   * control in the app. Desktop keeps its 12-13px aesthetic. */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="url"], input[type="number"],
  textarea, select { font-size: 16px; }

  /* Each top-level panel takes the whole viewport and slides horizontally
   * via translateX. The transition is on transform only, so it stays cheap
   * (compositor-only). */
  .sidebar.rss-side,
  .main.rss {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  .sidebar.rss-side { z-index: 3; }
  .main.rss { z-index: 2; transform: translateX(100%); display: block; }

  /* Inside .main.rss, the list and reader stack the same way. */
  .panel-list,
  .panel-reader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  .panel-reader { transform: translateX(100%); }

  /* ---- View states driven by body[data-mobile-view] ---- */

  body[data-mobile-view="sidebar"] .sidebar.rss-side { transform: translateX(0); }
  body[data-mobile-view="sidebar"] .main.rss          { transform: translateX(100%); }

  body[data-mobile-view="list"] .sidebar.rss-side    { transform: translateX(-100%); }
  body[data-mobile-view="list"] .main.rss            { transform: translateX(0); }
  body[data-mobile-view="list"] .panel-list          { transform: translateX(0); }
  body[data-mobile-view="list"] .panel-reader        { transform: translateX(100%); }

  body[data-mobile-view="reader"] .sidebar.rss-side  { transform: translateX(-100%); }
  body[data-mobile-view="reader"] .main.rss          { transform: translateX(0); }
  body[data-mobile-view="reader"] .panel-list        { transform: translateX(-100%); }
  body[data-mobile-view="reader"] .panel-reader      { transform: translateX(0); }

  /* ---- Back arrow buttons ---- */

  .mobile-back {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--fg-75);
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-back:hover { background: var(--fg-08); }
  .mobile-back:active { background: var(--fg-12); }
  .mobile-back svg { width: 20px; height: 20px; }

  /* ---- Touch tweaks ---- */

  /* Allow vertical scroll inside lists/reader without the browser hijacking
   * horizontal swipes (which we'd want for a future swipe-back gesture). */
  .articles, .reader-body { touch-action: pan-y; }

  /* The user menu can overflow on narrow screens — bound it to the viewport. */
  .user-menu { left: 12px; right: 12px; min-width: 0; }

  /* Slight padding tightening so 3-button reader headers fit ≤ 360px. */
  .panel-head { gap: 6px; padding: 0 10px; }

  /* Reader header is cramped on phones: back + favicon + title + date + 6
   * action buttons can't share a 360px viewport. Drop the title/date — the
   * favicon already signals the source and the article body repeats the
   * title. Action buttons get the breathing room they need. */
  .panel-reader .panel-head .ph-title { display: none; }
  .panel-reader .panel-head .ph-favicon { margin-right: auto; }

  /* Article list rows stay readable at small widths. */
  .articles { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

  /* ---- Safe-area inset (iPhone notch + home-bar) ----
   * `viewport-fit=cover` lets the app paint under the system UI. We then
   * pad the top of headers so titles clear the notch/dynamic island, and
   * pad the bottom of scrollable surfaces so the last row clears the
   * home-bar. `max(env(...), 0px)` is the canonical no-op fallback for
   * browsers that don't support env(). */
  .sidebar-head { padding-top: max(env(safe-area-inset-top, 0px), 0px); }
  .panel-head   { padding-top: max(env(safe-area-inset-top, 0px), 0px); }
  .reader-body  { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .user-menu    { padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px); }
  .settings-overlay,
  .settings-modal { padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px); }

  /* ---- Touch targets ≥ 44px (iOS HIG / Material 48dp) ----
   * Every interactive icon-sized affordance grows to a comfortable doigt
   * hit size on touch. Desktop keeps the compact 32×32 (these rules are
   * inside @media (max-width: 720px)). The reader-actions icon-btn rule
   * (components.css:1676) is more specific (.reader-actions .icon-btn)
   * so we re-state it here to win the cascade. */
  .icon-btn { width: 44px; height: 44px; }
  .reader-actions .icon-btn { width: 44px; height: 44px; }
  .mobile-back { width: 44px; height: 44px; }
  .mobile-back svg { width: 22px; height: 22px; }
  .feed-item,
  .feed-group-head { min-height: 44px; }
  /* Density picker (compact/cozy/comfy) sets min-height explicitly with
   * higher specificity (html[data-density="..."] .feed-item) — re-state
   * those mobile floors here so a 24px compact row doesn't survive. */
  html[data-density="compact"] .feed-item,
  html[data-density="cozy"]    .feed-item,
  html[data-density="comfy"]   .feed-item { min-height: 44px; }
  .article-item { min-height: 56px; }
}

/* ---- Settings modal: drill-down on mobile ----------------------------
 * Desktop = 280px sidebar + content side-by-side. On a 360px viewport that
 * sidebar overflows the (calc(100vw - 200px)) modal width, hiding the
 * content pane entirely. Switch to a full-screen drill-down: nav screen
 * first, tapping an item slides to content; a back button returns to nav.
 *
 * The overlay drives state via `data-mobile-pane="nav" | "content"` set
 * by the settings module on item click / back-button click. */
@media (max-width: 720px) {
  .settings-overlay { padding: 0; }
  .settings-modal {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 100%;
  }
  /* Stack the two panes; only one is visible at a time. The hidden one is
   * still in the DOM so its scroll position is preserved when you go back. */
  .settings-modal .settings-nav,
  .settings-modal .settings-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .settings-modal[data-mobile-pane="nav"] .settings-content,
  .settings-modal:not([data-mobile-pane="content"]) .settings-content {
    display: none;
  }
  .settings-modal[data-mobile-pane="content"] .settings-nav {
    display: none;
  }
  /* The modal-level close button sits in the top-right of the content pane
   * by default. In drill-down mode we want it inside the nav header
   * (next to the title) — but the existing button is already positioned
   * via `.settings-close-modal`. Keep it visible in both panes. */
  .settings-content { padding: 20px 16px 32px; }
  .settings-content > * { max-width: none; }
  .settings-nav-list { padding: 4px 6px 16px; }
  .snav-item { padding: 13px 14px; min-height: 44px; font-size: 14px; }
  .snav-group-title { padding: 14px 12px 6px; }
  /* Back arrow shown at the top of the content pane on mobile only. */
  .settings-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    color: var(--fg-75);
    font: inherit;
    cursor: pointer;
    padding: 6px 8px 6px 0;
    margin: -4px 0 12px;
    border-radius: 6px;
  }
  .settings-mobile-back:hover { color: var(--fg); }
  .settings-mobile-back svg { width: 16px; height: 16px; }
}
@media (min-width: 721px) {
  .settings-mobile-back { display: none !important; }
}

/* ---- Small-phone tweaks (≤ 380px) ---- */
@media (max-width: 380px) {
  .reader-body { padding: 16px 16px 32px; }
  .sidebar-head { padding-left: 12px; padding-right: 12px; }
  .rss-filter-row { gap: 4px; }
}