/* From DigPlatform src/main/frontend/toolbox.css. */
.tb-cloth-patch {
  --tb-cloth-size: 72px;
  --tb-cloth-tilt: -5deg;
  position: relative;
  width: var(--tb-cloth-size); height: var(--tb-cloth-size);
  display: flex; align-items: center; justify-content: center;
}
/* Fabric sheen + woven texture, scissor-cut uneven edge, running-stitch
   seam, soft lift off the paper. */
.tb-cloth-patch .burst {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(var(--tb-gloss-rgb), 0.35), rgba(var(--tb-shadow-rgb), 0.05) 65%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--tb-on-accent) 5%, transparent) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tb-on-accent) 4%, transparent) 0 1.5px, transparent 1.5px 4px),
    var(--accent, var(--tb-accent));
  border-radius:
    calc(var(--tb-cloth-size) * 0.222) calc(var(--tb-cloth-size) * 0.292)
    calc(var(--tb-cloth-size) * 0.194) calc(var(--tb-cloth-size) * 0.278);
  transform: rotate(var(--tb-cloth-tilt));
  z-index: 0;
  border: 1.3px solid var(--tb-on-accent);
  box-shadow:
    0 4px 10px -3px rgba(var(--tb-ink-rgb), 0.28),
    inset 0 1px 0 rgba(var(--tb-gloss-rgb), 0.45);
}
.tb-cloth-patch .burst::after {
  content: "";
  position: absolute;
  inset: calc(var(--tb-cloth-size) * 0.083);
  border: 1.6px dashed color-mix(in srgb, var(--tb-on-accent) 55%, transparent);
  border-radius:
    calc(var(--tb-cloth-size) * 0.139) calc(var(--tb-cloth-size) * 0.208)
    calc(var(--tb-cloth-size) * 0.125) calc(var(--tb-cloth-size) * 0.194);
  pointer-events: none;
}
/* The glyph sits centered on the patch. .tb-svg-icon is em-sized (1.5em) so
   this one font-size scales FA glyphs and uploaded SVGs together — 0.556 of
   the patch gives 1.5 × that of box, landing exactly on the dashed stitch
   line (inset 0.083) at every size. Never override the img size directly:
   that breaks the two icon kinds apart. */
.tb-cloth-patch .glyph {
  position: relative; z-index: 1;
  font-size: calc(var(--tb-cloth-size) * 0.556);
  color: var(--tb-on-accent);
}

/* Local tokens and the requested shared glyph/cloth tilt. */
.patch-options{--tb-gloss-rgb:255,255,255;--tb-shadow-rgb:0,0,0;--tb-ink-rgb:21,21,27;--tb-on-accent:#15151b;--tb-accent:#ffce00}.patch-options .tb-cloth-patch{--tb-cloth-size:76px}.patch-options>div:nth-child(2n) .tb-cloth-patch{--tb-cloth-tilt:4deg}.patch-options>div:nth-child(3n) .tb-cloth-patch{--tb-cloth-tilt:-3deg}.patch-options .glyph{width:1em;height:1em;object-fit:contain;transform:rotate(var(--tb-cloth-tilt));opacity:1}.connections img{opacity:1;object-fit:contain;width:27px;height:27px}.button{text-align:center}@media(max-width:1000px){.patch-options .tb-cloth-patch{--tb-cloth-size:60px}}@media(max-width:760px){.patch-options .tb-cloth-patch{--tb-cloth-size:64px}.phone-cta{width:100%;max-width:350px}}