/* ─────────────────────────────────────────────────────────────────────────────
   Sideways rails: one edge treatment for every one on the site (BO-RAIL,
   2026-11-11). Founder: "make the builtos.com vertical scrolls like this not cut
   the image off abruptly and maintain the shadow as best as possible".

   The complaint was the threads rail on /agents/repaired: its fifth phone was
   sliced off by a hard vertical line at the content column's right edge, the
   phones' drop shadows were cut flat along the rail's top, and a grey scrollbar
   track ran underneath. Every rail below had some of the same three faults.

     1. BLEED   the scroll track runs to the screen edge; the first card still
                starts on the column (rails.js measures the column, here it is
                turned into an equal negative margin and padding).
     2. SHADOW  enough padding above and below the cards that their shadows
                render inside the scroll box, with a matching negative margin so
                nothing around the rail moves.
     3. FADE    a short mask-image fade, only on a side that has more to scroll
                to (rails.js writes data-bo-more). A rail boxed inside a panel
                fades at the panel's edge instead of bleeding.
     4. No scrollbars. The ‹ › buttons, swipe and the trackpad stay the controls,
        and scroll-snap stays wherever the rail already snapped.

   Each page keeps its own look; this file only touches the edges. The !important
   flags are there because the rails are styled inline per page, several under an
   id (#page-agent), and this sheet has to win on those few properties alone.
   rails.js lists the same selectors; add a new rail to both.
   ───────────────────────────────────────────────────────────────────────────── */

@property --bo-fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --bo-fr { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ══ 4. NO SCROLLBARS ════════════════════════════════════════════════════════ */
:is(#bb-rail, .cpc__rail, .bo-pipe__rail, .bhd__rail, .bw-clips, .bo-o2-more, .bo-k-wall,
    .bo-k-rail__nav, .bo-k-pick--logos, .st-models__row, .s3p-strip, .bo-pipe-lb__strip,
    .bo-op__rail--many, .bo-trio) {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}
:is(#bb-rail, .cpc__rail, .bo-pipe__rail, .bhd__rail, .bw-clips, .bo-o2-more, .bo-k-wall,
    .bo-k-rail__nav, .bo-k-pick--logos, .st-models__row, .s3p-strip,
    .bo-pipe-lb__strip, .bo-op__rail--many, .bo-trio)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ══ 1. BLEED (rails.js sets the two lengths and the attribute) ══════════════ */
[data-bo-bleed] {
  margin-left: calc(var(--bo-rail-l, 0px) * -1) !important;
  margin-right: calc(var(--bo-rail-r, 0px) * -1) !important;
  padding-left: var(--bo-rail-l, 0px) !important;
  padding-right: var(--bo-rail-r, 0px) !important;
  scroll-padding-left: var(--bo-rail-l, 0px) !important;
  scroll-padding-right: var(--bo-rail-r, 0px) !important;
  width: auto !important;
  max-width: none !important;
}
/* the rail itself now spans the screen, so its own focus ring is drawn inside it */
[data-bo-bleed]:focus-visible { outline-offset: -3px !important; }
/* watch: the clips carried a 16px scroll-margin to land on the column; the rail's
   scroll-padding does that now, and the two together would land 16px past it */
.bo-watch .grid-inner.bw-clips[data-bo-bleed] .bw-item { scroll-margin-left: 0; }

/* ══ 3. FADE ═════════════════════════════════════════════════════════════════ */
[data-bo-more]:not([data-bo-more=""]) {
  --bo-fade: clamp(20px, 4.5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--bo-fl),
    #000 calc(100% - var(--bo-fr)), transparent 100%) !important;
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--bo-fl),
    #000 calc(100% - var(--bo-fr)), transparent 100%) !important;
  transition: --bo-fl .28s ease, --bo-fr .28s ease;
}
[data-bo-more~="start"] { --bo-fl: var(--bo-fade); }
[data-bo-more~="end"]   { --bo-fr: var(--bo-fade); }
/* boxed: the lightbox's clip strip fades at the panel edge, over a shorter run */
.bo-pipe-lb__strip[data-bo-more] { --bo-fade: 28px; }
@media (prefers-reduced-motion: reduce) {
  [data-bo-more] { transition: none; }
}

/* ══ 2. SHADOW ROOM ══════════════════════════════════════════════════════════
   Measured per rail (the cards' box-shadow extents against the rail's box, at
   rest and on hover), then padded with the same amount taken back as margin. */

/* agents/repaired: the phones' shadow reaches 12px above them, hover included */
#page-agent #bb-rail { padding-top: 16px; margin-top: -10px; }

/* home: cards hang at different heights (--cpc-off, up to 96px) and lift 10px on
   hover under a 0 30px 70px shadow, so the reach is 50px up and 160px down */
[data-cpc] .cpc__rail { padding-top: 52px; margin-top: -52px; padding-bottom: 160px; margin-bottom: -86px; }
@media (max-width: 900px) {
  /* no hanging offsets here; 8px of lift */
  [data-cpc] .cpc__rail { padding-top: 50px; margin-top: -50px; padding-bottom: 88px; margin-bottom: -70px; }
}

/* home: the pipeline's shots lift 5px on hover under their shadow */
@media (max-width: 900px) {
  .bo-pipe .bo-pipe__rail { padding-top: 32px; margin-top: -32px; }
}

/* commercial: the picked brand carries a 2px ring */
@media (max-width: 899px) {
  .bo-o2-proof .bo-k-pick--logos.bo-k-pick--logos { padding-top: 4px; padding-bottom: 4px; margin-top: 14px; margin-bottom: -4px; }
}

/* home lightbox: a thumbnail lifts 2px and the picked one carries a 1px ring */
@media (max-width: 860px) {
  .bo-pipe-lb__box .bo-pipe-lb__strip { padding-top: 4px; margin-top: -4px; padding-bottom: 4px; }
}