/* ════════════════════════════════════════════════════════════════════
   mobile-rails.css — Jul 19 2026

   Three-pane surfaces (Studio · Pricing · Clients · Signal Authoring) on a
   phone: the centre pane takes the full page and the two rails become
   slide-over drawers on top of it.

   WHY: the rails were previously either collapsed to 0 width (recoverable
   only by hunting for a 3px edge sliver) or — on pricing-home / clients-home
   — killed together with their toggle buttons by a
   `@media(max-width:900px){ .pane-rail,.pane-evidence,.pane-toggle{display:none} }`
   rule. That stranded the controls the centre pane depends on: the winery
   picker, the client picker, "+ New pricing", "+ Add Client", search, filters.
   Flynn (Jul 19): "the left and right rails … should be sliders that display
   over the top, and the center panel gets the full page."

   Activated by `body.m-rails`, which mobile-rails.js sets only below the
   breakpoint — so desktop is untouched by every rule in this file.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ── 1. Centre pane takes the whole width ──────────────────────────
     Every consumer's shell is the same grid under a different name.     */
  body.m-rails .ph-shell,
  body.m-rails .ch-shell,
  body.m-rails .studio-shell,
  body.m-rails .main {
    grid-template-columns: 1fr !important;
  }

  /* ── 2. Rails become off-canvas overlays ───────────────────────────
     !important is required: the per-page 900px rules set display:none on
     these same selectors and load after this sheet.                     */
  body.m-rails .pane-rail,
  body.m-rails .pane-evidence,
  body.m-rails .drafts-pane,
  body.m-rails .research-pane {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0;
    bottom: 0;
    z-index: 160;
    width: min(340px, 88vw);
    max-width: 88vw;
    background: var(--surface, #FFFFFF);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
  }

  body.m-rails .pane-rail,
  body.m-rails .drafts-pane {
    left: 0;
    transform: translateX(-100%);
    box-shadow: 6px 0 24px rgba(27, 42, 74, .25);
  }
  body.m-rails .pane-evidence,
  body.m-rails .research-pane {
    right: 0;
    transform: translateX(100%);
    box-shadow: -6px 0 24px rgba(27, 42, 74, .25);
  }

  body.m-rails.rail-left-open  .pane-rail,
  body.m-rails.rail-left-open  .drafts-pane,
  body.m-rails.rail-right-open .pane-evidence,
  body.m-rails.rail-right-open .research-pane {
    transform: translateX(0);
  }

  /* A collapsed rail must still open on phone — the collapse classes drive
     the desktop grid vars, they must not also hide the drawer. */
  body.m-rails.left-pane-collapsed  .pane-rail,
  body.m-rails.left-pane-collapsed  .drafts-pane,
  body.m-rails.right-pane-collapsed .pane-evidence,
  body.m-rails.right-pane-collapsed .research-pane {
    display: flex !important;
  }

  /* ── 3. Kill the desktop edge-sliver handles ───────────────────────
     Flynn: "the garage door sliders … block the hero". Replaced by the
     labelled buttons below.                                             */
  body.m-rails .pane-toggle {
    display: none !important;
  }

  /* ── 4. Scrim ──────────────────────────────────────────────────────*/
  .m-rail-scrim {
    position: fixed;
    inset: 0;
    z-index: 155;
    background: rgba(27, 42, 74, .50);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.2, .7, .2, 1);
  }
  body.m-rails.rail-left-open  .m-rail-scrim,
  body.m-rails.rail-right-open .m-rail-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 5. The open buttons ───────────────────────────────────────────
     Bottom-anchored so they never sit over the hero, thumb-reachable, and
     clear of the iOS home indicator. Hidden while a rail is open.

     Position is NOT set here: mobile-rails.js docks these into the shared
     corner dock (/assets/styles/corner-dock.css) at PAGE_FUNCTION priority
     — the highest claim on the corner, because these buttons open the
     pickers a three-pane page cannot be used without. Global helpers (the
     tour launcher) stack above them automatically. The bottom offset and
     safe-area inset live in the dock now, so there is exactly one place
     that knows how far off the corner anything sits.                     */
  .m-rail-btn {
    /* Required for the z-index below to apply — a docked element is a flex
       child, and z-index is ignored on a static element. */
    position: relative;
    z-index: 158;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(27, 42, 74, .12);
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink, #1B2A4A);
    font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(27, 42, 74, .05), 0 8px 22px rgba(27, 42, 74, .12);
    transition: opacity .2s ease, transform .2s ease;
  }
  /* Left/right is now the CHOICE OF DOCK, not an offset. */
  .m-rail-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
  .m-rail-btn:active { transform: scale(.96); }

  body.m-rails.rail-left-open  .m-rail-btn,
  body.m-rails.rail-right-open .m-rail-btn {
    opacity: 0;
    pointer-events: none;
  }

  /* Close button inside an open drawer */
  .m-rail-close {
    position: sticky;
    top: 0;
    align-self: flex-end;
    margin: 8px 10px -8px auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(27, 42, 74, .12);
    background: rgba(27, 42, 74, .04);
    color: var(--ink, #1B2A4A);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
  }
}

/* Desktop safety net: if the class ever lingers above the breakpoint,
   nothing above applies (all rules are inside the media query) and these
   injected elements stay hidden. */
@media (min-width: 901px) {
  .m-rail-btn,
  .m-rail-scrim,
  .m-rail-close { display: none !important; }
}