/* download_slab: a slab with two cut corners (top end and bottom start). Edge and
   fill are two clipped layers. Buttons inside keep their own look. */
.download-slab {
  --cut: var(--space-6);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
}
.download-slab::before,
.download-slab::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.download-slab::before {
  inset: 0;
  background: var(--color-ink);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.download-slab::after {
  inset: var(--border-edge);
  background: var(--color-paper);
  clip-path: polygon(0 0, calc(100% - var(--cut) + var(--border-edge) * 0.4) 0, 100% calc(var(--cut) - var(--border-edge) * 0.4), 100% 100%, calc(var(--cut) - var(--border-edge) * 0.4) 100%, 0 calc(100% - var(--cut) + var(--border-edge) * 0.4));
}
.download-slab.rec::after { background: var(--color-accent-soft); }
.download-slab h3 { margin: 0; font-size: var(--fs-h2); }
.download-slab-sub { margin: 0; color: var(--color-text-secondary); }
.download-slab .actions { margin-block-start: var(--space-4); }
.download-slab .os-ico { width: var(--space-9); height: var(--space-9); fill: var(--color-ink); }
.download-slab .os-ico .line { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: miter; }
.download-slab:focus-within::after { background: var(--color-accent-soft); }
.download-slab:hover::after { background: var(--color-accent-soft); }