/* Square-dot shadow for the related and homepage cards, the small and enlarged drawings, the insight tip and the search list.

   How it works: the shadow is a box the size of the element, moved down and right, and a clip-path keeps only its right and bottom strips.
   The pattern is a 6px tile with two 2px squares (corner and middle), anchored to the bottom-right corner. The cut lines snap to whole tiles
   and sit in the middle of the 1px gap between squares, so no partial square shows.

   To change the look, edit only the variables below (if the tile size changes, also change the two squares in the --sq-img images).
   --sq-w    strip width (2 tiles + the cut)       --sq-gap  space between the element and the strip
   --sq-tile tile size                              --sq-cut  how far a cut line sits above a tile edge
   Light mode uses the first colour in --sq-img, dark mode the second. */
:root {
  --sq-tile: 6px; --sq-cut: 0.5px; --sq-w: 12.5px; --sq-gap: 2px;
  --sq-d: calc(var(--sq-gap) + var(--sq-w)); /* how far the shadow box is moved from the element */
  --sq-snap: calc(100% - round(down, 100%, var(--sq-tile)) - var(--sq-cut));
  --sq-clip: polygon(calc(100% - var(--sq-w)) var(--sq-snap), 100% var(--sq-snap), 100% 100%, var(--sq-snap) 100%, var(--sq-snap) calc(100% - var(--sq-w)), calc(100% - var(--sq-w)) calc(100% - var(--sq-w)));
  --sq-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%238c8c8c'/%3E%3Crect x='3' y='3' width='2' height='2' fill='%238c8c8c'/%3E%3C/svg%3E");
}
body.dark { --sq-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23eee'/%3E%3Crect x='3' y='3' width='2' height='2' fill='%23eee'/%3E%3C/svg%3E"); }

/* Every shadow shows the same pattern and the same cut. */
#related-companies .related-card::before, #popular-explainers .related-card::before, #drawing-slot::before, #drawing-card::before, .insight-info-tip::after, .ts-shadow {
  background: var(--sq-img) 100% 100% / var(--sq-tile) var(--sq-tile) repeat; clip-path: var(--sq-clip);
}

/* Box position: the element's border box moved by --sq-d. A pseudo-element is placed from the padding box, so the border width is taken off. */
#related-companies .related-card::before, #popular-explainers .related-card::before, #drawing-slot::before, .insight-info-tip::after {
  inset: calc(var(--sq-d) - 1px) calc(-1px - var(--sq-d)) calc(-1px - var(--sq-d)) calc(var(--sq-d) - 1px);
}
#drawing-card::before { inset: calc(var(--sq-d) - 5px) calc(-5px - var(--sq-d)) calc(-5px - var(--sq-d)) calc(var(--sq-d) - 5px); }