/* mobile-drawer.css — slide-in sidebar drawer for mobile.
 *
 * Mirrors the Claude mobile pattern: a hamburger in the top-left of
 * the stage opens the sidebar from the left edge over a dimmed
 * backdrop. Tapping outside, picking a session, or pressing Escape
 * closes it. On ≥541px screens this file is inert and the sidebar
 * sits inline as on desktop.
 */

@media (min-width: 541px) {
  .drawer-toggle,
  .drawer-backdrop { display: none !important; }
}

@media (max-width: 540px) {
  :root { --sidebar-drawer-width: min(82vw, 320px); }

  .drawer-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: calc(env(safe-area-inset-left, 0px) + 12px);
    z-index: 70;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) url(#liquid-glass) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 0;
    /* Dark glyph everywhere, including the welcome screen. The
     * welcome corner-flag (see styles.css
     * .stage > .welcome.feed[data-active]::before) fades to mostly
     * transparent in the toggle's zone — top-left of the wedge,
     * where both mask axes are near-zero — so the indigo no longer
     * sits solidly behind the glyph. Dark on the faded-indigo/blur
     * blend reads better than white. */
    color: var(--color-foreground);
    box-shadow: none;
    transition: background 0.2s ease, opacity 0.18s ease;
  }
  .drawer-toggle:hover { background: rgba(255, 255, 255, 0.16); }
  .drawer-toggle:active { transform: scale(0.96); }

  body[data-drawer-open] .drawer-toggle,
  body[data-drawer-open] .read__menu {
    opacity: 0;
    pointer-events: none;
  }

  /* The AI / No AI glass switch floats bottom-centre at z-index 95 —
   * above the drawer (60) — so when the sidebar pulls out it would
   * otherwise stay on top of, and peek past, the sliding sidebar.
   * Fade it out with the rest of the floating chrome (toggle, titles)
   * so the open drawer covers it for a clean surface. The bar/offline
   * sliver re-assert pointer-events: auto on themselves, so disable
   * those explicitly or they'd keep catching taps while invisible. */
  .mode-nav { transition: opacity 0.18s ease; }
  body[data-drawer-open] .mode-nav { opacity: 0; }
  body[data-drawer-open] .mode-nav__bar,
  body[data-drawer-open] .mode-nav__offline {
    pointer-events: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-drawer-width);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 0 0 transparent;
    border-right: 1px solid var(--color-border);
  }
  body[data-drawer-open] .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 24px rgba(26, 26, 26, 0.18);
  }

  /* Restore the labels/text the rail mode hides — inside the drawer
   * we want the full desktop-style sidebar. */
  .sidebar__name,
  .sidebar__footer,
  .sidebar__account { display: revert; }
  .sidebar__top { padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 10px; }

  /* Backdrop stays in the DOM only to catch clicks-outside-the-drawer
     and dismiss it. Transparent on purpose — the user asked for no
     darkening when the chrome pops out. */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 50;
  }
  body[data-drawer-open] .drawer-backdrop { pointer-events: auto; }

  .stage { width: 100%; }
  /* Push the active surfaces below the floating drawer-toggle so the
   * hamburger doesn't overlap content. The toggle is 44px tall + 12px
   * top inset; we add another 24px of breathing room before content. */
  .feed { padding: calc(env(safe-area-inset-top, 0px) + 80px) 14px 56px; }
  .writing__top {
    /* Mirror the floating hamburger's geometry so the close icon, dots,
     * and step label share its vertical centerline. The hamburger sits
     * at top: safe+12px with a 48px height (center at safe+36px); using
     * the same padding-top and a 0 padding-bottom inside a safe+60px
     * min-height carves out a matching 48px content area. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 16px);
    padding-bottom: 0;
    padding-left: 64px;
    min-height: calc(env(safe-area-inset-top, 0px) + 60px);
    box-sizing: border-box;
  }
  /* The page title floats fixed at the top of the viewport (see the
   * .…__title block below), so each surface's inner container needs
   * enough padding to clear the ~60px-tall title bar. */
  .category-feed__head,
  .writing-fit__inner,
  .pitch-script__inner,
  .founders__inner {
    padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
  }
  /* Read surface has an additional fixed subtitle bar below the title
   * (see .read__author rule further down), so the page needs to clear
   * both — the title (60px) plus the subtitle row (~32px). On mobile
   * only the current page renders, so targeting .read__page is exact. */
  .read__page {
    padding-top: calc(env(safe-area-inset-top, 0px) + 108px);
  }

  /* Floating page-title bar — fixed at the top in the row of the
   * floating hamburger, centered, with a blurred cream gradient
   * background so content scrolling underneath doesn't muddy the
   * title text. Tracks the hamburger's top inset (safe + 12px) and
   * is 48px tall to match the icon's hit target. z-index sits
   * below the sidebar drawer (60) so the drawer covers it when
   * open; the per-surface opacity rule below handles the slice
   * that would otherwise peek out past the drawer's right edge. */
  .category-feed__title,
  .read__title,
  .pitch-script__title,
  .founders__title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 55;
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 72px 12px;
    min-height: calc(env(safe-area-inset-top, 0px) + 60px);
    box-sizing: border-box;
    /* Layout: flex so the title can be centred AND a long line can
     * still ellipsize. The trick is the inner <span> (added in the
     * render code for .read__title). The
     * span is the actual sized child that text-overflow: ellipsis can
     * truncate; the flex container just keeps it centred. */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Vertically align with the hamburger icon. The icon is 48px tall
     * at top: safe-area-top + 12px (centre at safe-area-top + 36px).
     * Matching height: safe-area-top + 60px with padding-top:
     * safe-area-top + 12px puts the 48px content box exactly under
     * the icon. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-bottom: 0;
    height: calc(env(safe-area-inset-top, 0px) + 60px);
    text-align: center;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.01em;
    color: var(--color-foreground);
    background: linear-gradient(
      to bottom,
      rgba(255, 253, 247, 0.92) 70%,
      rgba(255, 253, 247, 0)
    );
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    overflow: hidden;
  }

  /* Inner span — the truncation target. When the title fits, the span
   * shrinks to its content and the flex container centres it. When the
   * title is too long, the span grows to max-width: 100% and the
   * ellipsis renders at its trailing edge. */
  .read__title > span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-drawer-open] .category-feed__title,
  body[data-drawer-open] .read__title,
  body[data-drawer-open] .pitch-script__title,
  body[data-drawer-open] .founders__title {
    opacity: 0;
  }

  /* The shared title rule above fades to transparent at the bottom 30%
   * so scrolling body content peeks through. In the read view, the
   * subtitle sits flush against the title's bottom edge — that gradient
   * fade then renders as a faint shadow line at the seam between them.
   * Override to a solid page-coloured fill so the title flows directly
   * into the subtitle with no visible band. */
  .read__title {
    background: var(--color-background);
  }

  /* The read view is the one surface with TWO top-right controls: the
   * essay kebab (.read__menu) AND the founder avatar (.profile-corner).
   * When a profile is loaded, <html> gets .has-avatar and styles.css
   * slides the kebab left to right: calc(safe-area-right + 64px) so it
   * clears the avatar — which pushes the kebab's interior edge to
   * safe-area-right + 104px. The shared floating-title rule only reserves
   * 72px on the right (sized for a single icon), so the title's ellipsis
   * edge falls *under* the slid kebab and the two overlap. Widen the
   * right clearance to clear the kebab's full footprint (64px offset +
   * 40px trigger + 12px gap = 116px). Two classes outrank the base rule.
   * Only .read__title needs this — the other floating titles have just
   * the avatar (right:12..52), which 72px already clears. */
  .has-avatar .read__title {
    padding-right: calc(env(safe-area-inset-right, 0px) + 116px);
  }

  /* Secondary labels that previously sat above/beside a page title
   * keep their centered placement so they align under the floating
   * title bar (which has 72px of left/right clearance for the icon). */
  .read__author {
    text-align: center;
    padding-left: 56px;
    padding-right: 56px;
    box-sizing: border-box;
  }

  /* Pin the kebab menu to the viewport so it stays in the top-right
   * corner alongside the fixed title bar. Without this it sits absolute
   * inside .read (which is the overflow:auto scroll container), so it
   * drifts off-screen as the essay body scrolls. */
  .read__menu {
    position: fixed;
  }

  /* Pin the essay subtitle (pitch · slide label) right below the fixed
   * title bar so the heading group reads as one unit while the body
   * scrolls underneath. Solid page-colour fill (no gradient, no blur)
   * so it doesn't read as a second floating bar under the title — the
   * title is the only "container" the eye should see; the subtitle is
   * just text on the page that happens to also stay put. */
  .read__author {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    left: 0;
    right: 0;
    z-index: 54;
    margin: 0;
    padding: 4px 56px 12px;
    background: var(--color-background);
  }

  /* Match the title's drawer-open fade so the subtitle doesn't peek
   * past the open sidebar's right edge. */
  body[data-drawer-open] .read__author {
    opacity: 0;
  }
}