/* styles/sections/frame-variants.css
 * Where a page's 390 frame draws a different figure or different copy than its 1440 and 1920
 * frames, the markup carries both: .frame-m shows below 900px, .frame-dw from 900px. A hidden
 * variant is display: none, so it leaves the accessibility tree too. Utilities layer, so the
 * toggle wins over any component display without !important.
 * .frame-wrap: the frames break lines greedily; inside it, body text wraps pretty, which keeps
 * the frames' greedy breaks wherever they do not end on one word and moves a word down where
 * they would (BRI-7805 J14). Headings keep the balanced default from typography.css: WebKit's
 * pretty breaks a heading onto an extra line, so Safari showed three lines where Chrome and the
 * frames show two (BRI-7805 J57). Only the wrap style is set, so .nowrap still holds. A short
 * label that balances sets --frame-wrap-style: balance on itself (this layer is later than its
 * own). */
@layer utilities {
  .frame-wrap :is(p, li, blockquote, figcaption, span) {
    text-wrap-style: var(--frame-wrap-style, pretty);
  }

  @media (width < 900px) {
    .frame-dw {
      display: none;
    }
  }

  @media (width >= 900px) {
    .frame-m {
      display: none;
    }
  }
}

/* A sideways scroller that overflows (js/stage-strip.js gives it tabindex only then) fades out
   at its end edge, so the cut reads as more to scroll. A mask hides everything outside the
   border box and fades the end edge, so a focus ring outside the box (or across the fade)
   would not paint, and a region that runs to the viewport edge has no room for one anyway.
   Focused, the ring sits inside the edge (2px, flush) and a 2px band along each edge stays
   unmasked under it; the content keeps the fade.
   Content can start at the region's edge (the Home lifecycle labels and its top rule), so a
   region grows a 4px transparent border on its start, top and bottom, taken back by equal
   negative margins: the content does not move, and the ring sits in that border, 2px clear of
   it (the site offset). The end edge lies in the fade and keeps the region's own padding, so
   its margin (the lifecycle's bleed into the gutter) is left alone. A region in a dark window
   has its own padding and is clipped by the window, so it takes none. */
@layer utilities {
  [data-overflow-scroll][tabindex] {
    --scroll-fade: linear-gradient(to right, var(--ink) calc(100% - 48px), transparent);

    mask-image: var(--scroll-fade);
  }

  [data-overflow-scroll][tabindex]:not(.artifact-window--dark > *) {
    margin-block: -4px;
    margin-inline-start: -4px;
    border: 4px solid transparent;
    border-inline-end-width: 0;
  }

  [data-overflow-scroll][tabindex]:focus-visible {
    --focus-offset: -2px;
    --scroll-band: linear-gradient(var(--ink), var(--ink));

    mask-image: var(--scroll-fade), var(--scroll-band), var(--scroll-band), var(--scroll-band), var(--scroll-band);
    mask-position: 0 0, top, bottom, left, right;
    mask-size: 100% 100%, 100% 2px, 100% 2px, 2px 100%, 2px 100%;
    mask-repeat: no-repeat;
  }

  /* In a dark window (the Home terminal) the ring is mist, as on every inverse surface;
     fern on the ink window is 1.2:1. Focused, a region flush with the window takes its
     radius, so the window's rounded clip does not cut the ring's corners. */
  .artifact-window--dark > [data-overflow-scroll][tabindex] {
    --focus-ring: var(--mist);
  }

  .artifact-window--dark > [data-overflow-scroll][tabindex]:focus-visible {
    border-radius: inherit;
  }
}